@extends('layouts.master')

@section('title', 'Products - ' . $seller->company_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 */
    }

    .seller-page { 
        font-family: var(--base-font); 
        color: #1e293b; 
        background-color: #f8fafc;
    }
    
    h1, h2, h3, h4, h5, .display-font { font-family: var(--display-font); }

    /* Seller Header */
    .seller-header { background: white; border-bottom: 1px solid #e2e8f0; padding-top: 1.5rem; padding-bottom: 0px; }
    .seller-logo-box { width: 80px; height: 80px; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 5px; background: white; }
    .seller-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
    
    .company-title { font-size: 1.75rem; font-weight: 800; color: #0f172a; margin-bottom: 0.25rem; line-height: 1.2; }
    .badge-trust { background: #ecfdf5; color: #059669; font-weight: 700; font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #a7f3d0; }
    
    .header-actions .btn-action { font-weight: 700; padding: 0.75rem 2rem; border-radius: 6px; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; }
    
    /* Navigation Tabs */
    .seller-nav { margin-top: 2rem; display: flex; align-items: center; gap: 2rem; border-bottom: 2px solid transparent; }
    .seller-nav-link { color: #64748b; font-weight: 600; padding-bottom: 1rem; text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.2s; }
    .seller-nav-link:hover { color: var(--primary-color); }
    .seller-nav-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
    
    /* Search Bar within Seller */
    .seller-search { position: relative; width: 300px; }
    .seller-search input { padding-left: 2.25rem; border-radius: 99px; background: #f1f5f9; border: 1px solid transparent; font-size: 0.9rem; }
    .seller-search input:focus { background: white; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1); }
    .seller-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }

    /* Content Area */
    .content-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 2rem; margin-bottom: 1.5rem; }
    .section-title { font-size: 1.25rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
    .section-title::before { content: ''; width: 4px; height: 24px; background: var(--primary-color); border-radius: 4px; display: block; }
    
    /* Right Sidebar */
    .sidebar-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; margin-bottom: 1.5rem; }
    .sidebar-header { background: #f8fafc; padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; font-weight: 700; color: #1e293b; }
    .sidebar-body { padding: 1.25rem; }

    .rating-box { background: #fffbeb; border: 1px solid #fcd34d; padding: 0.75rem; border-radius: 6px; text-align: center; margin-bottom: 1rem; }
    .rating-score { font-size: 1.5rem; font-weight: 800; color: #b45309; }
    .rating-stars { color: #f59e0b; }
    
    .contact-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
    .contact-icon { color: var(--primary-color); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
    .contact-text { font-size: 0.9rem; color: #334155; }
    
    /* Products Grid */
    .product-grid-card {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        background: white;
        transition: all 0.2s;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .product-grid-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: var(--primary-color); }
    .product-thumb-frame { height: 200px; padding: 1rem; display: flex; align-items: center; justify-content: center; background: white; border-bottom: 1px solid #f1f5f9; }
    .product-thumb-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
    
    .category-filter-item { display: block; padding: 0.5rem 0.75rem; color: #64748b; text-decoration: none; border-radius: 6px; font-weight: 500; font-size: 0.9rem; }
    .category-filter-item:hover, .category-filter-item.active { background: #fff7ed; color: var(--primary-color); }
</style>

<div class="seller-page pb-5">

    <!-- GLOBAL SELLER HEADER (Shared) -->
    <header class="seller-header">
        <div class="container">
            <div class="row align-items-center g-3">
                <div class="col-md-8">
                    <div class="d-flex align-items-center gap-4">
                        <div class="seller-logo-box">
                             @if($seller->logo)
                                <img src="{{ asset('storage/' . $seller->logo) }}" alt="Logo">
                            @else
                                <span class="fw-bold text-muted fs-4">{{ substr($seller->company_name, 0, 1) }}</span>
                            @endif
                        </div>
                        <div>
                            <h1 class="company-title">{{ $seller->company_name }}</h1>
                            <div class="d-flex flex-wrap align-items-center gap-2">
                                <span class="text-muted small"><i class="bi bi-geo-alt-fill text-danger me-1"></i> {{ $seller->city }}, {{ $seller->state }}, India</span>
                                @if($seller->is_verified)
                                    <span class="badge-trust"><i class="bi bi-patch-check-fill"></i> Trusted Seller</span>
                                @endif
                                <span class="badge bg-light text-dark border"><i class="bi bi-building me-1"></i> Manufacturer</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-md-end">
                     <div class="d-flex justify-content-md-end gap-2 header-actions">
                        <a href="#contact-sidebar" class="btn btn-action text-white shadow-sm" style="background: var(--primary-color);">Send Inquiry</a>
                        @if($seller->hasActiveSubscription())
                             <a href="tel:{{ $seller->mobile }}" class="btn btn-action btn-outline-dark">View Number</a>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Navigation Row -->
            <div class="d-flex justify-content-between align-items-end mt-2">
                <div class="seller-nav">
                    <a href="{{ route('seller.public.profile', $seller->slug) }}" class="seller-nav-link">Home</a>
                    <a href="{{ route('seller.public.products', $seller->slug) }}" class="seller-nav-link active">Products & Services</a>
                    @if($settings->show_about)<a href="{{ route('seller.public.profile', $seller->slug) }}#about" class="seller-nav-link">About Us</a>@endif
                    <a href="#contact-sidebar" class="seller-nav-link">Contact</a>
                </div>
                <!-- Search Form -->
                <div class="pb-3 d-none d-lg-block">
                    <form action="{{ route('seller.public.products', $seller->slug) }}" method="GET" class="seller-search">
                        <i class="bi bi-search"></i>
                        <input type="text" name="q" class="form-control" placeholder="Search products..." value="{{ request('q') }}">
                    </form>
                </div>
            </div>
        </div>
    </header>

    <!-- CONTENT -->
    <div class="container mt-4">
        <div class="row g-4">
            
            <!-- LEFT COLUMN (Filters & Products) -->
            <div class="col-lg-9">
                
                <div class="content-card p-0 overflow-hidden">
                    <div class="row g-0">
                        <!-- Filters Column -->
                        <div class="col-lg-3 border-end bg-gray-50 p-3 d-none d-lg-block">
                             <h6 class="fw-bold mb-3 small text-uppercase text-muted">Categories</h6>
                             <div class="d-flex flex-column gap-1">
                                <a href="{{ route('seller.public.products', $seller->slug) }}" class="category-filter-item {{ !request('category') ? 'active' : '' }}">All Products</a>
                                @foreach($categories as $cat)
                                     <a href="{{ route('seller.public.products', ['slug' => $seller->slug, 'category' => $cat->id]) }}" class="category-filter-item {{ request('category') == $cat->id ? 'active' : '' }}">
                                         {{ $cat->name }}
                                     </a>
                                @endforeach
                             </div>
                        </div>
                        
                        <!-- Products Grid Column -->
                        <div class="col-lg-9 p-4">
                            <h2 class="section-title mb-4">
                                Products & Services
                                @if(request('q')) <span class="text-muted fw-normal fs-6 ms-2">(Search: "{{ request('q') }}")</span> @endif
                            </h2>
                            
                            @if($products->count() > 0)
                                <div class="row row-cols-1 row-cols-md-3 g-3">
                                    @foreach($products as $product)
                                        <div class="col">
                                            <div class="product-grid-card">
                                                <a href="{{ route('public.products.show', $product->slug) }}" class="product-thumb-frame">
                                                    <img src="{{ $product->main_image }}" alt="{{ $product->name }}">
                                                </a>
                                                <div class="p-3 d-flex flex-column flex-grow-1">
                                                    <h6 class="fw-bold mb-1 text-truncate">
                                                        <a href="{{ route('public.products.show', $product->slug) }}" class="text-dark text-decoration-none">{{ $product->name }}</a>
                                                    </h6>
                                                    <div class="text-primary fw-bold mb-2">{{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, 0) }}</div>
                                                    
                                                     <!-- Mini Specs -->
                                                    <div class="small text-muted mb-3">
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span>MOQ:</span> <span class="fw-bold text-dark">{{ $product->moq }}</span>
                                                        </div>
                                                    </div>

                                                    <div class="mt-auto d-grid">
                                                        <a href="{{ route('public.products.show', $product->slug) }}" class="btn btn-outline-secondary btn-sm fw-bold">View Details</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="mt-4">
                                     {{ $products->links() }}
                                </div>
                            @else
                                <div class="text-center py-5">
                                    <div class="text-muted mb-3"><i class="bi bi-box-seam display-4"></i></div>
                                    <p class="mb-0">No products found matching your criteria.</p>
                                    <a href="{{ route('seller.public.products', $seller->slug) }}" class="btn btn-link">View All Products</a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

            </div>

             <!-- RIGHT COLUMN (Sidebar) -->
             <div class="col-lg-3">
                
                <!-- Seller Details Card -->
                <div class="sidebar-card" id="contact-sidebar">
                    <div class="sidebar-header">Seller Details</div>
                    <div class="sidebar-body">
                         <div class="rating-box">
                            <div class="rating-score">4.5 <small>/5</small></div>
                            <div class="rating-stars small">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                            </div>
                            <div class="text-muted extra-small mt-1">Based on recent inquiries</div>
                        </div>

                        <div class="contact-row">
                            <i class="bi bi-person-circle contact-icon"></i>
                            <div class="contact-text">
                                <span class="d-block text-muted small fw-bold">CONTACT PERSON</span>
                                <strong>{{ $seller->user->name }}</strong>
                            </div>
                        </div>
                        <div class="contact-row">
                            <i class="bi bi-geo-alt-fill contact-icon"></i>
                            <div class="contact-text">
                                <span class="d-block text-muted small fw-bold">ADDRESS</span>
                                <span>{{ $seller->address }}</span>
                            </div>
                        </div>
                         @if($seller->hasActiveSubscription())
                        <div class="contact-row">
                             <i class="bi bi-telephone-fill contact-icon"></i>
                            <div class="contact-text">
                                <span class="d-block text-muted small fw-bold">MOBILE</span>
                                <strong>{{ $seller->mobile }}</strong>
                            </div>
                        </div>
                        @else
                          <div class="alert alert-warning py-2 small"><i class="bi bi-lock-fill"></i> Contact Details Locked</div>
                        @endif
                        
                        <hr class="my-3 border-light">
                        
                         <h6 class="fw-bold small mb-2 text-uppercase">Legal Status</h6>
                         <div class="d-flex flex-column gap-2 small text-muted">
                            @if($seller->gst) <div><span>GST:</span> <span class="text-dark fw-bold">{{ $seller->gst }}</span></div> @endif
                            @if($seller->udyam_number) <div><span>UDYAM:</span> <span class="text-dark fw-bold">{{ $seller->udyam_number }}</span></div> @endif
                         </div>

                    </div>
                </div>

                <!-- Sticky Inquiry Form -->
                <div class="sidebar-card sticky-top" style="top: 20px;">
                    <div class="sidebar-header bg-orange-50 text-orange-800 border-orange-100">
                        <i class="bi bi-envelope-paper me-2"></i> Send Inquiry
                    </div>
                    <div class="sidebar-body">
                         <form action="{{ route('inquiries.store', $seller->id) }}" method="POST">
                            @csrf
                            <input type="text" name="name" class="form-control form-control-sm mb-2" placeholder="Your Name" value="{{ Auth::user()->name ?? '' }}" required>
                            <input type="text" name="phone" class="form-control form-control-sm mb-2" placeholder="Mobile Number" value="{{ Auth::user()->phone ?? '' }}">
                            <textarea name="message" class="form-control form-control-sm mb-3" rows="3" placeholder="Describe requirement..." required></textarea>
                            <button class="btn w-100 text-white fw-bold shadow-sm" style="background: var(--primary-color);">Send Now</button>
                        </form>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
@endsection