@extends('layouts.master')

@section('title', 'Browse Products - The Mini Port')

@section('content')
<style>
    /* B2B Professional Styles - Orange Theme */
    .products-hero {
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
    }
    
    /* Filter Sidebar */
    .filter-sidebar {
        position: sticky;
        top: 20px;
    }
    .filter-group-header {
        font-size: 0.85rem;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .filter-group-body {
        margin-bottom: 1.25rem;
    }
    .custom-checkbox .form-check-input {
        width: 1.1em; height: 1.1em; border-radius: 4px; border: 1px solid #ced4da;
    }
    .custom-checkbox .form-check-input:checked {
        background-color: #f97316; border-color: #f97316;
    }
    
    /* Horizontal Product Card Refinement */
    .b2b-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px; /* Smoother rounded corners */
        transition: all 0.3s ease;
        overflow: hidden;
        margin-bottom: 15px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .b2b-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: #f97316;
    }
    
    /* Layout Grid */
    .b2b-card-img-col {
        width: 200px;
        min-width: 200px;
        background: #fff;
        padding: 10px;
    }
    .b2b-card-img-wrapper {
        width: 100%;
        height: 140px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
    }
    .b2b-card-img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Show full image */
    }
    
    /* Content Styling */
    .b2b-card-content-col {
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
    }
    .product-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 0.25rem;
    }
    .category-label {
        font-size: 0.7rem;
        font-weight: 700;
        color: #666;
        text-transform: uppercase;
    }
    .price-tag {
        font-size: 1.4rem;
        color: #f97316; /* Theme Orange */
        font-weight: 800;
    }
    .moq-subtitle {
        font-size: 0.8rem;
        color: #888;
        margin-bottom: 0.5rem;
    }
    
    
    /* MOE Style matching Homepage (Simple Emoji) */
    .moq-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.25rem;
    }
    .moq-emoji {
        font-size: 1.1rem;
        line-height: 1;
    }
    .moq-label {
        font-size: 0.75rem;
        font-weight: 500;
        color: #374151; /* gray-700 */
        white-space: normal;
        line-height: 1.2;
    }
    .moq-value {
        font-size: 0.85rem;
        font-weight: 700;
        color: #000;
    }


    /* Spec Item Redesign (Brownish Icon Boxes) */
    .spec-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }
    .spec-icon-box {
        width: 32px;
        height: 32px;
        background: #8d6e63; /* Brownish */
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #fff;
        /* Pronounced 3D Effect */
        box-shadow: 
            2px 2px 0px rgba(0,0,0,0.2), 
            inset -2px -2px 0px rgba(0,0,0,0.3), 
            inset 2px 2px 0px rgba(255,255,255,0.2);
        border: 1px solid rgba(0,0,0,0.1);
        flex-shrink: 0;
    }
    .spec-text {
        font-size: 0.8rem; /* Slightly smaller for single line */
        color: #333;
        white-space: nowrap !important; /* Force single line */
        overflow: visible;
        display: block;
    }
    .spec-text strong { font-weight: 700; }
    
    .delivery-text {
        color: #f97316;
        font-size: 0.85rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
    }

    /* Plan Badge below Price */
    .plan-badge-inline {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 50px; /* Pill style */
        font-size: 0.72rem;
        font-weight: 800;
        margin-top: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap; /* Single line */
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .plan-badge-inline.premium {
        background: linear-gradient(135deg, #fffcf0 0%, #fff7e6 100%);
        color: #f97316;
        border: 1px solid #fde68a;
    }
    .plan-badge-inline.free {
        background: #f8f9fa;
        color: #6c757d;
        border: 1px solid #e9ecef;
    }
    .plan-badge-inline i {
        font-size: 0.85rem;
    }

    /* Seller Info Column */
    .b2b-card-seller-col {
        width: 260px;
        min-width: 260px;
        border-left: 1px solid #f0f0f0;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .seller-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }
    .seller-avatar {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        background: #fff;
        border: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #f97316;
    }
    .seller-name {
        font-weight: 700;
        font-size: 0.85rem;
        color: #333;
        margin: 0;
    }
    .seller-location {
        font-size: 0.75rem;
        color: #dc3545;
    }

    /* Reference Style Action Buttons */
    .btn-orange-full {
        background: #f97316;
        color: #fff;
        border: none;
        padding: 8px 15px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-bottom: 8px;
    }
    .btn-orange-full:hover {
        background: #ea580c;
        color: #fff;
    }
    .btn-grey-outline {
        background: #6c757d;
        color: #fff;
        border: 1px solid #6c757d;
        padding: 6px 15px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.85rem;
        text-align: center;
        width: 100%;
        display: block;
        text-decoration: none;
    }
    .btn-grey-outline:hover {
        background: #5a6268;
        color: #fff;
    }

    .badge-kyc-lite {
        background: #f8f9fa;
        color: #666;
        border: 1px solid #eee;
        font-size: 0.75rem;
        padding: 4px 10px;
        border-radius: 6px;
        width: 100%;
        text-align: center;
        margin-bottom: 12px;
    }
    .filter-pill i {
        margin-left: 6px; cursor: pointer; color: #adb5bd;
    }
    .filter-pill i:hover { color: #dc3545; }
</style>

<!-- Clean Header -->
<section class="products-hero py-4">
    <div class="container">
        <div class="row align-items-center gy-3">
            <div class="col-lg-6">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1 small text-muted">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none text-muted">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Products</li>
                    </ol>
                </nav>
                <h1 class="h3 fw-bold text-dark mb-0">Marketplace</h1>
                <p class="text-muted small mb-0">{{ $products->total() }} Products found from KYC submitted suppliers</p>
            </div>
            <div class="col-lg-6">
                 <form action="{{ route('public.products.index') }}" method="GET">
                    @foreach(request()->except(['q', 'page']) as $key => $value)
                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                    @endforeach
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" name="q" class="form-control border-start-0 ps-0" placeholder="Search products, categories..." value="{{ request('q') }}">
                        <button class="btn btn-primary px-4 fw-bold">Search</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Active Filters -->
        @if(request()->anyFilled(['category', 'min_price', 'max_price', 'verified', 'q', 'min_moq', 'max_moq', 'location']))
            <div class="mt-3 pt-3 border-top">
                <small class="fw-bold text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Active Filters:</small>
                <div class="d-inline-flex flex-wrap">
                    @if(request('q')) <span class="filter-pill">Search: "{{ request('q') }}" <a href="{{ route('public.products.index', request()->except('q')) }}"><i class="bi bi-x-circle-fill"></i></a></span> @endif
                    @if(request('category')) <span class="filter-pill">Cat: {{ $categories->where('slug', request('category'))->first()->name ?? request('category') }} <a href="{{ route('public.products.index', request()->except('category')) }}"><i class="bi bi-x-circle-fill"></i></a></span> @endif
                    @if(request('verified')) <span class="filter-pill">KYC Submitted Only <a href="{{ route('public.products.index', request()->except('verified')) }}"><i class="bi bi-x-circle-fill"></i></a></span> @endif
                    @if(request('location')) <span class="filter-pill">Loc: {{ request('location') }} <a href="{{ route('public.products.index', request()->except('location')) }}"><i class="bi bi-x-circle-fill"></i></a></span> @endif
                    
                    <a href="{{ route('public.products.index') }}" class="text-danger small text-decoration-none fw-bold ms-2 align-self-center title-hover">Clear All</a>
                </div>
            </div>
        @endif
    </div>
</section>

<section class="bg-light py-5 min-vh-100">
    <div class="container">
        <div class="row g-4">
            
            <!-- LEFT COLUMN: Filters Sidebar -->
            <div class="col-lg-3 d-none d-lg-block">
                <div class="filter-sidebar">
                    <div class="card border-0 shadow-sm rounded-3">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-4">Filter By</h5>
                            <form action="{{ route('public.products.index') }}" method="GET">
                                @if(request('q')) <input type="hidden" name="q" value="{{ request('q') }}"> @endif
                                
                                <!-- Categories -->
                                <div class="filter-group-body">
                                    <div class="filter-group-header">Category</div>
                                    <select name="category" class="form-select form-select-sm bg-light border-0" onchange="this.form.submit()">
                                        <option value="">All Categories</option>
                                        @foreach($categories as $cat)
                                            <option value="{{ $cat->slug }}" {{ request('category') == $cat->slug ? 'selected' : '' }}>{{ $cat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <hr class="opacity-10">

                                <!-- Price -->
                                <div class="filter-group-body">
                                    <div class="filter-group-header">Price Range (₹)</div>
                                    <div class="d-flex gap-2">
                                        <input type="number" name="min_price" class="form-control form-control-sm" placeholder="Min" value="{{ request('min_price') }}">
                                        <input type="number" name="max_price" class="form-control form-control-sm" placeholder="Max" value="{{ request('max_price') }}">
                                    </div>
                                </div>
                                <hr class="opacity-10">

                                <!-- Supplier Type -->
                                <div class="filter-group-body">
                                    <div class="filter-group-header">Supplier Type</div>
                                    <div class="form-check custom-checkbox">
                                        <input class="form-check-input" type="checkbox" name="verified" value="1" id="verifiedCheck" {{ request('verified') ? 'checked' : '' }} onchange="this.form.submit()">
                                        <label class="form-check-label small" for="verifiedCheck">KYC Submitted Only</label>
                                    </div>
                                </div>
                                <hr class="opacity-10">
                                
                                <!-- Location -->
                                <div class="filter-group-body">
                                    <div class="filter-group-header">Location</div>
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text bg-light"><i class="bi bi-geo-alt"></i></span>
                                        <input type="text" name="location" class="form-control" placeholder="City" value="{{ request('location') }}">
                                    </div>
                                </div>
                                
                                <button class="btn btn-primary w-100 btn-sm fw-bold mt-2">Apply Filters</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- MIDDLE COLUMN: Product List (Horizontal Cards) -->
            <div class="col-lg-6">
                <!-- Sorting & Count (Mobile Toggle) -->
                <!-- Product List Header & Sorting -->
                <div class="d-flex justify-content-between align-items-center mb-3 pb-2">
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-white border shadow-sm d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas">
                            <i class="bi bi-funnel me-1"></i> Filters
                        </button>
                        <h5 class="fw-bold mb-0 text-dark d-none d-lg-block">All Products</h5>
                        <span class="badge bg-light text-secondary border rounded-pill d-none d-lg-block">{{ $products->total() }}</span>
                    </div>
                    
                    <div class="d-flex align-items-center gap-2">
                        <span class="small text-muted fw-bold text-uppercase" style="font-size: 0.7rem;">Sort by</span>
                        <select class="form-select form-select-sm border-0 bg-white shadow-sm fw-bold text-dark w-auto" style="min-width: 140px;" onchange="window.location.href=this.value">
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'newest']) }}" {{ request('sort') == 'newest' ? 'selected' : '' }}>Newest Listed</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_low']) }}" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_high']) }}" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'popular']) }}" {{ request('sort') == 'popular' ? 'selected' : '' }}>Popularity</option>
                        </select>
                    </div>
                </div>

                <!-- NEW HORIZONTAL CARD DESIGN -->
                <div class="d-flex flex-column gap-3">
                    @forelse($products as $product)
                        @php
                            $seller = $product->seller;
                            $subscription = $seller->subscription ?? null;
                            $plan = $subscription?->plan ?? null;
                            $isPremium = $seller->isPaid();
                            $hasVerifiedBadge = $plan && $plan->has_verified_badge;
                            $showContactDetails = $plan && $plan->show_contact_details;
                        @endphp
                        
                        <div class="bg-white rounded-4 p-3 shadow-sm border hover-shadow-lg transition-all" style="overflow: hidden;">
                            <div class="row g-0">
                                <!-- Image Section -->
                                <div class="col-md-5">
                                    <div class="position-relative w-100 h-100 rounded-3 overflow-hidden border" style="background: #ffffff; min-height: 220px;">
                                        <img src="{{ $product->main_image }}" class="w-100 h-100 object-fit-contain position-absolute top-0 start-0 p-2" alt="{{ $product->name }}">
                                    </div>
                                </div>
                                
                                <!-- Content Section -->
                                <div class="col-md-7 ps-md-4 pt-3 pt-md-0 d-flex flex-column justify-content-between">
                                    <div>
                                        <div class="col-md-9 b2b-card-content-col">
                                            <h5 class="fw-bold text-dark mb-0 text-truncate-2" style="font-size: 1.1rem; line-height: 1.4;">
                                                <a href="{{ route('public.products.show', $product->slug) }}" class="text-dark text-decoration-none hover:tw-text-orange-600">
                                                    {{ $product->name }}
                                                </a>
                                                @if($isPremium)
                                                    <i class="bi bi-star-fill text-warning ms-1" style="font-size: 0.8em;" title="Premium Seller"></i>
                                                @endif
                                            </h5>
                                        </div>
                                        <div class="text-muted small mb-3">Category: <span class="fw-bold text-dark">{{ $product->category->name ?? 'Industrial' }}</span></div>

                                        <!-- MOQ Boxes (3D Style) -->
                                        <!-- MOQ Section (Homepage Style) -->
                                        <div class="mb-3">
                                            <!-- Platform MOQ -->
                                            <div class="moq-row tw-items-start lg:tw-items-center">
                                                <i class="bi bi-box-seam-fill tw-text-orange-600 tw-mt-0.5 lg:tw-mt-0"></i>
                                                <span class="moq-label" style="font-size: 0.7rem; white-space: normal; letter-spacing: -0.3px;">
                                                    Platform MOQ Range: <span class="moq-value d-block d-lg-inline">{{ \App\Models\Setting::getValue('min_moq', 10) }} - {{ \App\Models\Setting::getValue('max_moq', 150) }}</span>
                                                </span>
                                            </div>
                                            <!-- Product MOQ -->
                                            <div class="moq-row tw-items-start lg:tw-items-center">
                                                <i class="bi bi-box-seam-fill tw-text-orange-600 tw-mt-0.5 lg:tw-mt-0"></i>
                                                <span class="moq-label" style="font-size: 0.7rem; white-space: normal; letter-spacing: -0.3px;">
                                                    Product MOQ: <span class="moq-value d-block d-lg-inline">{{ $product->moq ?? 1 }} {{ $product->unit->name ?? 'Pieces' }}</span>
                                                </span>
                                            </div>
                                        </div>

                                        <!-- Price -->
                                        <div class="d-flex align-items-baseline gap-2 mb-2">
                                            <span class="text-secondary fw-bold">Price:</span>
                                            <h4 class="text-orange-600 fw-bold mb-0">{{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, 0) }}</h4>
                                            <span class="text-muted small">per Piece</span>
                                        </div>
                                        <div class="text-muted small mb-3 fst-italic">(Tax & Shipping Extra)</div>

                                        <!-- Features (Limited) -->
                                        <ul class="list-unstyled mb-3 small text-secondary">
                                            @if($product->specifications && is_array($product->specifications))
                                                @foreach(array_slice($product->specifications, 0, 2) as $key => $val)
                                                    <li class="d-flex align-items-center gap-2 mb-1">
                                                        <i class="bi bi-dot fs-4 text-dark"></i> {{ is_string($key) ? $key . ': ' : '' }}{{ Str::limit($val, 30) }}
                                                    </li>
                                                @endforeach
                                            @endif
                                        </ul>
                                    </div>

                                    <!-- Action Buttons Grid -->
                                    <div class="d-flex gap-2 flex-wrap">
                                        <button type="button" class="btn btn-primary px-3 py-1 fw-bold rounded-1 text-white flex-grow-1" style="font-size: 0.85rem;" data-bs-toggle="modal" data-bs-target="#quoteModal{{ $product->id }}">
                                            <i class="bi bi-envelope-fill me-1"></i> Send Inquiry
                                        </button>
                                        <a href="{{ route('public.products.show', $product->slug) }}" class="btn btn-warning bg-opacity-25 border-warning text-warning-emphasis px-3 py-1 fw-bold rounded-1 flex-grow-1" style="font-size: 0.85rem; background-color: #fef3c7; border-color: #fcd34d;">
                                            <i class="bi bi-eye-fill me-1"></i> View More
                                        </a>
                                    </div>
                                    <div class="d-flex gap-2 flex-wrap mt-2">
                                        @if($seller->is_verified || in_array($seller->kyc_status, ['submitted', 'verified']))
                                            <button class="btn btn-light border text-primary px-3 py-1 fw-bold rounded-1 flex-grow-1" style="font-size: 0.75rem; background: #e0f2fe; border-color: #bae6fd; color: #0369a1;">
                                                <i class="bi bi-file-earmark-check-fill me-1"></i> KYC Submitted
                                            </button>
                                        @else
                                             <button class="btn btn-light border text-secondary px-3 py-1 fw-bold rounded-1 flex-grow-1 disabled" style="font-size: 0.75rem;">
                                                <i class="bi bi-hourglass-split me-1"></i> KYC Pending
                                            </button>
                                        @endif

                                        @if($isPremium)
                                            <button class="btn btn-light border text-warning-emphasis px-3 py-1 fw-bold rounded-1 flex-grow-1" style="font-size: 0.75rem; background: #fffbeb; border-color: #fde68a; color: #b45309;">
                                                <i class="bi bi-star-fill me-1"></i> Premium Member
                                            </button>
                                        @endif
                                    </div>

                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-5 bg-white rounded-4 shadow-sm">
                            <i class="bi bi-search fs-1 text-muted opacity-50 mb-3 d-block"></i>
                            <h4 class="fw-bold">No Products Found</h4>
                            <p class="text-muted">Try using different filters.</p>
                            <a href="{{ route('public.products.index') }}" class="btn btn-outline-primary rounded-pill">Clear Filters</a>
                        </div>
                    @endforelse
                </div>
                
                <div class="mt-5 d-flex justify-content-center">
                    {{ $products->links() }}
                </div>
            </div>

            <!-- RIGHT COLUMN: Trending Products -->
            <div class="col-lg-3 d-none d-lg-block">
                <div class="filter-sidebar">
                    @if(isset($promotedProducts) && $promotedProducts->count() > 0)
                        <!-- PROMOTED PRODUCTS SIDEBAR WIDGET -->
                        <div class="bg-white rounded-3 shadow-sm border p-3 mb-4 position-relative overflow-hidden">
                            <!-- Premium Ribbon -->
                            <div class="position-absolute top-0 end-0 bg-warning text-dark px-2 py-0 fw-bold small" style="border-bottom-left-radius: 8px; font-size: 0.7rem;">
                                Sponsored
                            </div>

                            <h6 class="fw-bold text-uppercase border-bottom pb-2 mb-3 text-dark" style="letter-spacing: 0.5px;">Premium Selections</h6>
                            
                            <div class="d-flex flex-column gap-3">
                                @foreach($promotedProducts->take(3) as $pProduct)
                                    <a href="{{ route('public.products.show', $pProduct->slug) }}" class="text-decoration-none group">
                                        <div class="d-flex align-items-center gap-3">
                                            <!-- Thumb -->
                                            <div class="rounded-2 border flex-shrink-0 position-relative" style="width: 60px; height: 60px; overflow: hidden;">
                                                <img src="{{ $pProduct->main_image }}" class="w-100 h-100 object-fit-cover group-hover:tw-scale-110 tw-transition-transform" alt="{{ $pProduct->name }}">
                                                <div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white text-center" style="font-size: 0.6rem; padding: 1px;">Ad</div>
                                            </div>
                                            <!-- Info -->
                                            <div class="flex-grow-1" style="min-width: 0;">
                                                <h6 class="mb-0 text-dark fw-bold text-truncate" style="font-size: 0.9rem;">{{ $pProduct->name }}</h6>
                                                <div class="text-orange-600 fw-bold small">{{ $pProduct->currency == 'USD' ? '$' : '₹' }}{{ number_format($pProduct->price, 0) }}</div>
                                                <div class="text-muted" style="font-size: 0.7rem;">MOQ: {{ $pProduct->moq }}</div>
                                            </div>
                                        </div>
                                    </a>
                                    @if(!$loop->last) <hr class="my-1 border-light"> @endif
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- TRENDING PRODUCTS WIDGET -->
                    <div class="bg-white rounded-3 shadow-sm border p-3">
                        <h6 class="fw-bold text-uppercase border-bottom pb-2 mb-3 text-dark" style="letter-spacing: 0.5px;">Trending Products</h6>
                        
                        <div class="d-flex flex-column gap-3">
                            @foreach($trendingProducts as $tProduct)
                                <a href="{{ route('public.products.show', $tProduct->slug) }}" class="text-decoration-none group">
                                    <div class="d-flex align-items-center gap-3">
                                        <!-- Thumb -->
                                        <div class="rounded-2 border flex-shrink-0" style="width: 60px; height: 60px; overflow: hidden;">
                                            <img src="{{ $tProduct->main_image }}" class="w-100 h-100 object-fit-cover group-hover:tw-scale-110 tw-transition-transform" alt="{{ $tProduct->name }}">
                                        </div>
                                        <!-- Info -->
                                        <div class="flex-grow-1" style="min-width: 0;">
                                            <h6 class="mb-0 text-dark fw-bold text-truncate" style="font-size: 0.9rem;">{{ $tProduct->name }}</h6>
                                            <div class="text-orange-600 fw-bold small">{{ $tProduct->currency == 'USD' ? '$' : '₹' }}{{ number_format($tProduct->price, 0) }}</div>
                                            <div class="text-muted" style="font-size: 0.7rem;">MOQ: {{ $tProduct->moq }}</div>
                                        </div>
                                    </div>
                                </a>
                                @if(!$loop->last) <hr class="my-1 border-light"> @endif
                            @endforeach
                        </div>
                        
                        <div class="mt-3 pt-2 text-center border-top">
                            <a href="#" class="text-primary fw-bold small text-decoration-none">View All Trending <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- Mobile Filter Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="filterOffcanvas">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title fw-bold">Filters</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
      <!-- Duplicate Filter Form for Mobile (Simplified) -->
      <form action="{{ route('public.products.index') }}" method="GET">
           @if(request('q')) <input type="hidden" name="q" value="{{ request('q') }}"> @endif
           
           <!-- Categories -->
           <div class="mb-4">
               <label class="form-label fw-bold small text-uppercase text-muted">Category</label>
               <select name="category" class="form-select bg-light border-0">
                   <option value="">All Categories</option>
                   @foreach($categories as $cat)
                       <option value="{{ $cat->slug }}" {{ request('category') == $cat->slug ? 'selected' : '' }}>{{ $cat->name }}</option>
                   @endforeach
               </select>
           </div>
           
           <!-- Price -->
           <div class="mb-4">
               <label class="form-label fw-bold small text-uppercase text-muted">Price Range (₹)</label>
               <div class="d-flex gap-2">
                   <input type="number" name="min_price" class="form-control" placeholder="Min" value="{{ request('min_price') }}">
                   <input type="number" name="max_price" class="form-control" placeholder="Max" value="{{ request('max_price') }}">
               </div>
           </div>
           
           <!-- Supplier Type -->
           <div class="mb-4">
               <div class="form-check custom-checkbox">
                   <input class="form-check-input" type="checkbox" name="verified" value="1" id="verifiedCheckMobile" {{ request('verified') ? 'checked' : '' }}>
                   <label class="form-check-label fw-bold" for="verifiedCheckMobile">KYC Submitted Only</label>
               </div>
           </div>
           
           <!-- Location -->
           <div class="mb-4">
               <label class="form-label fw-bold small text-uppercase text-muted">Location</label>
               <div class="input-group">
                   <span class="input-group-text bg-light border-0"><i class="bi bi-geo-alt"></i></span>
                   <input type="text" name="location" class="form-control border-0 bg-light" placeholder="City" value="{{ request('location') }}">
               </div>
           </div>
           
           <div class="d-grid gap-2">
               <button class="btn btn-primary fw-bold py-2">Apply Filters</button>
               <a href="{{ route('public.products.index') }}" class="btn btn-light text-danger fw-bold py-2">Clear All</a>
           </div>
      </form>
  </div>
</div>


<!-- Quote Modals -->
@foreach($products as $product)
    @php $seller = $product->seller; @endphp
    <div class="modal fade" id="quoteModal{{ $product->id }}" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white py-2">
                    <h6 class="modal-title"><i class="bi bi-chat-quote me-2"></i>Contact {{ $seller->company_name }}</h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('inquiries.store', $seller) }}" method="POST">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <input type="hidden" name="seller_id" value="{{ $seller->id }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Your Name *</label>
                            <input type="text" name="name" class="form-control form-control-sm" required value="{{ auth()->user()->name ?? '' }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Email *</label>
                            <input type="email" name="email" class="form-control form-control-sm" required value="{{ auth()->user()->email ?? '' }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Phone *</label>
                            <input type="text" name="phone" class="form-control form-control-sm" required value="{{ auth()->user()->phone ?? '' }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Quantity Required</label>
                            <input type="number" name="quantity" class="form-control form-control-sm" placeholder="e.g. 100">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Your Message *</label>
                            <textarea name="message" class="form-control form-control-sm" rows="3" required placeholder="I am interested in {{ $product->name }}. Please share price and details."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer py-2">
                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm fw-bold"><i class="bi bi-send me-1"></i>Send Query</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endforeach

@endsection