@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-8">
                        <h5 class="card-title mb-0">Product Details</h5>
                    </div>
                    <div class="col-4 text-end">
                        <a href="{{ route('products.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to List
                        </a>
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                <div class="row g-4">
                    <!-- Product Image -->
   
                    <div class="col-md-3 text-center">
                        @if($product->images->first())
                            <img src="{{ $product->images->first()->thumbnail_url }}" 
                                 alt="{{ $product->name }}" 
                                 class="img-fluid rounded shadow"
                                 style="max-height: 300px;">
                        @else
                            <img src="{{ asset('images/no-image-available.png') }}" 
                                 alt="No Image Available" 
                                 class="img-fluid rounded shadow"
                                 style="max-height: 300px;">
                        @endif  
                    </div>
                    <!-- Product Details -->
                    <div class="col-md-9">
                        <!-- Name & Timestamps -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <h4 class="text-primary">{{ $product->name }}</h4>
                            </div>
                            <div class="col-md-6 text-md-end text-start">
                                <small class="text-muted">
                                    Created: {{ $product->created_at->format('M d, Y H:i A') }}<br>
                                    Updated: {{ $product->updated_at->format('M d, Y H:i A') }}
                                </small>
                            </div>
                        </div>

                        <!-- Model & Slug -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Model:</strong></p>
                                <p class="mb-0">{{ $product->model ?? 'N/A' }}</p>
                            </div>
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Slug:</strong></p>
                                <p class="mb-0">{{ $product->slug }}</p>
                            </div>
                        </div>

                        <!-- Category, Brand & Manufacturer -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Category:</strong></p>
                                @if($product->category)
                                    <span class="badge bg-info">{{ $product->category->name }}</span>
                                @else
                                    <p class="mb-0">N/A</p>
                                @endif
                            </div>
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Brand:</strong></p>
                                @if($product->brand)
                                    <span class="badge bg-primary">{{ $product->brand->name }}</span>
                                @else
                                    <p class="mb-0">N/A</p>
                                @endif
                            </div>
                            <div class="col-md-4 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Manufacturer:</strong></p>
                                @if($product->manufacturer)
                                    <span class="badge bg-secondary">{{ $product->manufacturer->name }}</span>
                                @else
                                    <p class="mb-0">N/A</p>
                                @endif
                            </div>
                        </div>

                        <!-- Price & Price Type -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Price:</strong></p>
                                <p class="mb-0 fs-5 text-success fw-bold">{{ $product->formatted_price }}</p>
                            </div>
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Price Type:</strong></p>
                                <p class="mb-0">{{ $product->price_type ?? 'N/A' }}</p>
                            </div>
                        </div>

                        <!-- Unit Type, Standard Price & Special Price -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Unit Type:</strong></p>
                                <p class="mb-0">{{ $product->unit_type ?? 'N/A' }}</p>
                            </div>
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Standard Price:</strong></p>
                                <p class="mb-0 text-info fw-bold">{{ $product->standard_price ? number_format($product->standard_price, 2) : 'N/A' }}</p>
                            </div>
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Special Price:</strong></p>
                                <p class="mb-0 text-warning fw-bold">{{ $product->special_price ? number_format($product->special_price, 2) : 'N/A' }}</p>
                            </div>
                        </div>

                        <!-- Barcode & Warranty -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Barcode/SKU:</strong></p>
                                <p class="mb-0">{{ $product->barcode ?? 'N/A' }}</p>
                            </div>
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Warranty:</strong></p>
                                <p class="mb-0">{{ $product->warranty ?? 'N/A' }}</p>
                            </div>
                        </div>

                        <!-- Status & Views -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Status:</strong></p>
                                <span class="badge bg-{{ $product->status ? 'success' : 'danger' }} fs-6">
                                    {{ $product->status ? 'Active' : 'Inactive' }}
                                </span>
                            </div>
                            <div class="col-md-6 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>View Count:</strong></p>
                                <span class="badge bg-warning fs-6">{{ $product->view_count }}</span>
                            </div>
                        </div>

                        <!-- Datasheet PDF -->
                       @if($product->datasheet_pdf_link)
                        <div class="row g-3 mb-3">
                            <div class="col-12 d-flex align-items-center">
                                <p class="text-muted mb-0 me-2"><strong>Datasheet:</strong></p>
                                <a href="{{ asset($product->datasheet_pdf_link) }}" 
                                class="btn btn-sm btn-outline-primary"
                                download="{{ $product->name }}_datasheet.pdf">
                                    <i class="fas fa-file-pdf me-1"></i> Download PDF
                                </a>
                            </div>
                        </div>
                    @endif


                        <!-- Description -->
                        <div class="mt-3">
                            <p class="mb-1 text-muted"><strong>Description:</strong></p>
                            <div class="p-3 border rounded bg-light">
                                {{ $product->description ?? 'No description available.' }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Related Information Cards -->
                <div class="row mt-4">
                    <div class="col-12">
                        <h5 class="border-bottom pb-2 mb-3">Related Information</h5>
                        
                        <div class="row">
                            <!-- Images -->
                            <div class="col-md-3 mb-3">
                                <div class="card h-100">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">Images</h6>
                                    </div>
                                    <div class="card-body text-center">
                                        <h3 class="text-primary">{{ $product->images->count() }}</h3>
                                        <p class="text-muted mb-0">Product Images</p>
                                        @if($product->images->count() > 0)
                                            <a href="{{ route('products.images.index', $product->id) }}" 
                                               class="btn btn-sm btn-outline-primary mt-2">
                                                View All
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Specifications -->
                            <div class="col-md-3 mb-3">
                                <div class="card h-100">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">Specifications</h6>
                                    </div>
                                    <div class="card-body text-center">
                                        <h3 class="text-primary">{{ $product->specifications->count() }}</h3>
                                        <p class="text-muted mb-0">Technical Specs</p>
                                        @if($product->specifications->count() > 0)
                                            <a href="{{ route('specifications.index', ['product_id' => $product->id]) }}" 
                                               class="btn btn-sm btn-outline-info mt-2">
                                                View All
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Stock -->
                            <div class="col-md-3 mb-3">
                                <div class="card h-100">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">Stock</h6>
                                    </div>
                                    <div class="card-body text-center">
                                        <h3 class="text-primary">{{ $product->stock->quantity ?? 0 }}</h3>
                                        <p class="text-muted mb-0">In Stock</p>
                                        @if($product->stock)
                                            <a href="{{ route('stock.edit', $product->stock->id) }}" 
                                               class="btn btn-sm btn-outline-warning mt-2">
                                                Manage Stock
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Enquiries -->
                            <div class="col-md-3 mb-3">
                                <div class="card h-100">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">Enquiries</h6>
                                    </div>
                                    <div class="card-body text-center">
                                        <h3 class="text-primary">{{ $product->enquiries->count() }}</h3>
                                        <p class="text-muted mb-0">Customer Enquiries</p>
                                        @if($product->enquiries->count() > 0)
                                            <a href="{{ route('enquiries.index', ['product_id' => $product->id]) }}" 
                                               class="btn btn-sm btn-outline-secondary mt-2">
                                                View All
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="d-flex justify-content-end gap-2">
                            @can('update products')
                            <a href="{{ route('products.edit', $product) }}" class="btn btn-warning">
                                <i class="fas fa-edit me-2"></i>Edit Product
                            </a>
                            @endcan
                            
                            @can('delete products')
                            <form action="{{ route('products.destroy', $product) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        class="btn btn-danger"
                                        onclick="return confirm('Are you sure you want to delete this product?')">
                                    <i class="fas fa-trash me-2"></i>Delete Product
                                </button>
                            </form>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .card {
        border: 1px solid #e0e0e0;
    }
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #e0e0e0;
    }
    .badge {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }
    .text-muted strong {
        min-width: 120px;
        display: inline-block;
    }
</style>
@endpush