@extends('layouts.master')

@section('title', $product->name)

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<style>
    :root {
        --base-font: 'Inter', sans-serif;
        --display-font: 'Outfit', sans-serif;
        --primary-color: #f97316; /* Orange-500 */
        --primary-hover: #ea580c; /* Orange-600 */
        --secondary-color: #64748b; /* Slate-500 */
    }

    .product-page { 
        font-family: var(--base-font); 
        color: #1e293b; 
        background-color: #ffffff; /* Clean White Background like TradeIndia */
    }
    
    h1, h2, h3, h4, h5, .display-font { font-family: var(--display-font); }

    /* Breadcrumb */
    .breadcrumb-nav { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
    .breadcrumb-item a { color: #64748b; text-decoration: none; font-weight: 500; font-size: 0.9rem; }
    .breadcrumb-item a:hover { color: var(--primary-color); }

    /* Gallery */
    .gallery-main-frame {
        border: 1px solid #e2e8f0;
        border-radius: 8px; /* Standard 8px */
        padding: 1rem;
        background: white;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-bottom: 1rem;
    }
    .gallery-main-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
    
    .thumb-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; }
    .thumb-item {
        width: 60px;
        height: 60px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        cursor: pointer;
        padding: 2px;
        flex-shrink: 0;
    }
    .thumb-item.active { border-color: var(--primary-color); }
    .thumb-item img { width: 100%; height: 100%; object-fit: contain; }

    /* Product Info (Center) */
    .product-title { font-size: 1.5rem; font-weight: 700; color: #1e293b; line-height: 1.3; margin-bottom: 0.5rem; }
    .product-meta { font-size: 0.9rem; color: #64748b; margin-bottom: 1rem; }
    
    .price-box {
        margin-bottom: 1.5rem;
    }
    .price-main { font-size: 1.75rem; font-weight: 800; color: var(--primary-color); }
    .price-unit { font-size: 1rem; font-weight: 600; color: #64748b; }
    
    .action-buttons .btn-inquiry {
        background: var(--primary-color);
        color: white;
        font-weight: 700;
        border: none;
        padding: 0.75rem 2rem;
        border-radius: 6px;
        width: 100%;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .action-buttons .btn-inquiry:hover { background: var(--primary-hover); }

    /* Short Specs Table */
    .mini-specs-table td { padding: 0.4rem 0; font-size: 0.95rem; vertical-align: middle; }
    .mini-specs-table .label { color: #64748b; width: 120px; font-weight: 500; }
    .mini-specs-table .value { color: #334155; font-weight: 600; }

    /* Seller Sidebar (Right) */
    .seller-card {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 1.25rem;
        background: #f8fafc;
        margin-bottom: 1.5rem;
    }
    .seller-name { font-weight: 700; font-size: 1.1rem; color: #1e293b; margin-bottom: 0.25rem; }
    .seller-meta { font-size: 0.85rem; color: #64748b; display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem;}
    
    .sticky-inquiry-form {
        position: sticky;
        top: 100px;
        background: white;
        border: 1px solid #fed7aa; /* Orange-200 */
        border-radius: 8px;
        padding: 1.25rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    .form-header { background: #fff7ed; margin: -1.25rem -1.25rem 1rem -1.25rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid #fed7aa; border-radius: 8px 8px 0 0; }
    .form-header h6 { color: #9a3412; font-weight: 700; margin: 0; font-size: 0.95rem; }

    /* Bottom Tabs */
    .nav-tabs-custom { border-bottom: 2px solid #e2e8f0; margin-bottom: 2rem; }
    .nav-tabs-custom .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        color: #64748b;
        font-weight: 600;
        padding: 1rem 1.5rem;
        margin-bottom: -2px;
    }
    .nav-tabs-custom .nav-link.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
        background: transparent;
    }
    .nav-tabs-custom .nav-link:hover { color: var(--primary-color); }
</style>

<div class="product-page pb-5">
    <!-- Breadcrumb -->
    <div class="breadcrumb-nav py-2 mb-4">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('public.products.index') }}">Products</a></li>
                    @if($product->category)
                        <li class="breadcrumb-item"><a href="{{ route('public.categories.show', $product->category->slug) }}">{{ $product->category->name }}</a></li>
                    @endif
                    <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($product->name, 30) }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Main Product Section -->
    <div class="container mb-5">
        <div class="row g-4">
            
            <!-- COL 1: GALLERY (Left) -->
            <div class="col-lg-4">
                <div class="gallery-main-frame">
                    @php
                        $galleryImages = $product->images_json;
                        if (is_string($galleryImages)) {
                            $decoded = json_decode($galleryImages, true);
                            $galleryImages = (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) ? $decoded : [['original' => $galleryImages]];
                        }
                        $galleryImages = is_array($galleryImages) ? $galleryImages : [];
                        $galleryImages = array_map(function($item) { return is_string($item) ? ['original' => $item] : $item; }, $galleryImages);
                    @endphp
                    <img id="mainImage" src="{{ asset('storage/' . ($galleryImages[0]['original'] ?? '')) }}" alt="{{ $product->name }}">
                    
                    <!-- Promo Badge overlay if needed -->
                    @if($product->isPromoted())
                        <div class="position-absolute top-0 start-0 m-3 badge bg-warning text-dark shadow-sm">
                            <i class="bi bi-star-fill me-1"></i> {{ $product->promotion->package->badge_text }}
                        </div>
                    @endif
                </div>
                
                <div class="thumb-strip">
                    @foreach($galleryImages as $key => $image)
                        <div class="thumb-item {{ $key == 0 ? 'active' : '' }}" onclick="changeMainImage(this, '{{ asset('storage/' . ($image['original'] ?? '')) }}')">
                            <img src="{{ asset('storage/' . ($image['original'] ?? '')) }}" alt="Thumb">
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- COL 2: PRODUCT INFO (Center) -->
            <div class="col-lg-5">
                <h1 class="product-title">{{ $product->name }}</h1>
                
                <div class="d-flex align-items-center gap-2 mb-3">
                    <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3">
                        <i class="bi bi-check-circle-fill me-1"></i> In Stock
                    </span>
                    <span class="text-muted small">|</span>
                    <span class="text-muted small">Updated: {{ $product->updated_at->format('M d, Y') }}</span>
                </div>

                <!-- Featured Highlight - MOQs -->
                <!-- Featured Highlight - MOQs -->
                <div class="d-flex flex-wrap align-items-center gap-4 mb-4 p-2 border rounded-3 bg-light">
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-box-seam tw-text-orange-600"></i>
                        <div class="d-flex align-items-center gap-2">
                             <span class="text-muted fw-bold small text-uppercase">Platform MOQ Range:</span>
                             <span class="fw-bold text-dark">{{ \App\Models\Setting::getValue('min_moq', 10) }} - {{ \App\Models\Setting::getValue('max_moq', 150) }}</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-box-seam tw-text-orange-600"></i>
                        <div class="d-flex align-items-center gap-2">
                             <span class="text-muted fw-bold small text-uppercase">Product MOQ:</span>
                             <span class="fw-bold text-dark">{{ $product->moq }} {{ $product->unit->name ?? 'Pieces' }}</span>
                        </div>
                    </div>
                </div>

                <div class="price-box">
                    <div class="price-main">
                        {{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, 2) }}
                    </div>
                    <div class="price-unit">per {{ $product->unit->name ?? 'Piece' }}</div>
                </div>

                <div class="d-flex gap-3 mb-4 action-buttons">
                    <button class="btn btn-inquiry shadow-sm" onclick="scrollToInquiry()">
                        SEND INQUIRY
                    </button>
                    @if($product->seller->hasActiveSubscription())
                         <a href="tel:{{ $product->seller->mobile }}" class="btn btn-outline-secondary fw-bold px-4" style="border-radius: 6px;">
                            <i class="bi bi-telephone me-2"></i> Call Seller
                         </a>
                    @endif
                </div>

                <!-- Mini Specs -->
                <div class="bg-gray-50 rounded-3 p-3 mb-4 border">
                    <h6 class="fw-bold mb-3 small text-uppercase text-muted">Product Highlights</h6>
                    <table class="w-100 mini-specs-table">
                        <tr>
                            <td class="label">Brand:</td>
                            <td class="value">{{ $product->seller->company_name }}</td>
                        </tr>
                        <tr>
                            <td class="label">Location:</td>
                            <td class="value">{{ $product->seller->city ?? 'India' }}</td>
                        </tr>
                         <tr>
                            <td class="label">Shipping:</td>
                            <td class="value text-primary">Seller Managed</td>
                        </tr>
                    </table>
                </div>

                <!-- Description Snippet -->
                <div class="mb-3">
                     <h6 class="fw-bold mb-2 small text-uppercase text-muted">Description</h6>
                     <p class="text-muted small line-clamp-3">{{ Str::limit($product->description, 200) }}</p>
                     <a href="#full-description" class="small fw-bold text-primary text-decoration-none">Read More</a>
                </div>
            </div>

            <!-- COL 3: SELLER & SIDEBAR (Right) -->
            <div class="col-lg-3">
                <!-- Seller Card -->
                <div class="seller-card">
                    <div class="d-flex align-items-center gap-3 mb-3">
                         @if($product->seller->logo)
                            <img src="{{ asset('storage/' . $product->seller->logo) }}" class="rounded-circle border" width="48" height="48" style="object-fit: contain;">
                        @else
                            <div class="rounded-circle bg-gray-100 d-flex align-items-center justify-content-center border" style="width: 48px; height: 48px;">
                                <i class="bi bi-building text-muted"></i>
                            </div>
                        @endif
                        <div>
                            <div class="seller-name text-truncate" style="max-width: 150px;">{{ $product->seller->company_name }}</div>
                            <div class="small text-muted">Member since {{ $product->seller->created_at->format('Y') }}</div>
                        </div>
                    </div>
                    
                    <div class="seller-meta">
                        <span><i class="bi bi-geo-alt me-2 text-primary"></i> {{ $product->seller->city ?? 'Unknown' }}, {{ $product->seller->state ?? '' }}</span>
                        @if($product->seller->kyc_status === 'submitted' || $product->seller->is_verified)
                            <span class="tw-text-blue-600 fw-bold"><i class="bi bi-file-earmark-check-fill me-2"></i> KYC Submitted</span>
                        @endif
                    </div>
                    
                    <a href="{{ route('seller.public.profile', $product->seller->slug) }}" class="btn btn-outline-dark btn-sm w-100 fw-bold">View Company Profile</a>
                </div>

                <!-- Sticky Inquiry Form -->
                <div class="sticky-inquiry-form" id="inquiryForm">
                    <div class="form-header">
                        <h6><i class="bi bi-envelope-paper me-2"></i> Get Best Quote</h6>
                    </div>
                    
                     <form action="{{ route('inquiries.store', $product->seller->id) }}" method="POST">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        
                        <div class="mb-2">
                             <input type="text" name="name" class="form-control form-control-sm" placeholder="Your Name" required value="{{ Auth::user()->name ?? '' }}">
                        </div>
                        <div class="mb-2">
                             <input type="text" name="phone" class="form-control form-control-sm" placeholder="Mobile Number" value="{{ Auth::user()->phone ?? '' }}">
                        </div>
                         <div class="mb-2">
                             <textarea name="message" class="form-control form-control-sm" rows="3" placeholder="Describe your requirement..." required>I am interested in {{ $product->name }}.</textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-inquiry btn-sm py-2 shadow-sm rounded">
                            Send Inquiry
                        </button>
                    </form>
                    <p class="text-center text-muted extra-small mt-2 mb-0" style="font-size: 0.7rem;">
                        <i class="bi bi-shield-lock"></i> Your information is safe
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Detail Tabs -->
    <div class="container" id="full-description">
        <ul class="nav nav-tabs nav-tabs-custom" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="desc-tab" data-bs-toggle="tab" data-bs-target="#desc" type="button" role="tab">Product Description</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" type="button" role="tab">Specifications</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="company-tab" data-bs-toggle="tab" data-bs-target="#company" type="button" role="tab">Company Profile</button>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="desc" role="tabpanel">
                <div class="bg-white p-4 border rounded-3 text-secondary lh-lg">
                     {!! nl2br(e($product->description)) !!}
                </div>
            </div>
            <div class="tab-pane fade" id="specs" role="tabpanel">
                 <div class="bg-white p-4 border rounded-3">
                    <table class="table table-bordered w-auto mb-0">
                        <tbody>
                             <tr>
                                <th class="bg-light w-25">Product Name</th>
                                <td>{{ $product->name }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light">MOQ</th>
                                <td>{{ $product->moq }} {{ $product->unit->name ?? 'Pieces' }}</td>
                            </tr>
                             <tr>
                                <th class="bg-light">Category</th>
                                <td>{{ $product->category->name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light">Price</th>
                                <td>{{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, 2) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="company" role="tabpanel">
                 <div class="bg-white p-4 border rounded-3">
                     <h5 class="fw-bold mb-3">{{ $product->seller->company_name }}</h5>
                     <p class="text-muted">{{ $product->seller->about ?? 'No company description available.' }}</p>
                 </div>
            </div>
        </div>
    </div>
    
    <!-- Related Products -->
    <div class="container mt-5">
         @include('public.products.partials.related-products')
    </div>

</div>

@include('public.products.partials.share-card')

<script>
    function changeMainImage(element, src) {
        document.getElementById('mainImage').src = src;
        document.querySelectorAll('.thumb-item').forEach(el => el.classList.remove('active'));
        element.classList.add('active');
    }
    
    function scrollToInquiry() {
        document.getElementById('inquiryForm').scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
</script>
@endsection