

<?php $__env->startSection('title', 'Browse Products - The Mini Port'); ?>

<?php $__env->startSection('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="<?php echo e(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"><?php echo e($products->total()); ?> Products found from KYC submitted suppliers</p>
            </div>
            <div class="col-lg-6">
                 <form action="<?php echo e(route('public.products.index')); ?>" method="GET">
                    <?php $__currentLoopData = request()->except(['q', 'page']); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $value): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <input type="hidden" name="<?php echo e($key); ?>" value="<?php echo e($value); ?>">
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <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="<?php echo e(request('q')); ?>">
                        <button class="btn btn-primary px-4 fw-bold">Search</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Active Filters -->
        <?php 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">
                    <?php if(request('q')): ?> <span class="filter-pill">Search: "<?php echo e(request('q')); ?>" <a href="<?php echo e(route('public.products.index', request()->except('q'))); ?>"><i class="bi bi-x-circle-fill"></i></a></span> <?php endif; ?>
                    <?php if(request('category')): ?> <span class="filter-pill">Cat: <?php echo e($categories->where('slug', request('category'))->first()->name ?? request('category')); ?> <a href="<?php echo e(route('public.products.index', request()->except('category'))); ?>"><i class="bi bi-x-circle-fill"></i></a></span> <?php endif; ?>
                    <?php if(request('verified')): ?> <span class="filter-pill">KYC Submitted Only <a href="<?php echo e(route('public.products.index', request()->except('verified'))); ?>"><i class="bi bi-x-circle-fill"></i></a></span> <?php endif; ?>
                    <?php if(request('location')): ?> <span class="filter-pill">Loc: <?php echo e(request('location')); ?> <a href="<?php echo e(route('public.products.index', request()->except('location'))); ?>"><i class="bi bi-x-circle-fill"></i></a></span> <?php endif; ?>
                    
                    <a href="<?php echo e(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>
        <?php 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="<?php echo e(route('public.products.index')); ?>" method="GET">
                                <?php if(request('q')): ?> <input type="hidden" name="q" value="<?php echo e(request('q')); ?>"> <?php 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>
                                        <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($cat->slug); ?>" <?php echo e(request('category') == $cat->slug ? 'selected' : ''); ?>><?php echo e($cat->name); ?></option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </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="<?php echo e(request('min_price')); ?>">
                                        <input type="number" name="max_price" class="form-control form-control-sm" placeholder="Max" value="<?php echo e(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" <?php echo e(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="<?php echo e(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"><?php echo e($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="<?php echo e(request()->fullUrlWithQuery(['sort' => 'newest'])); ?>" <?php echo e(request('sort') == 'newest' ? 'selected' : ''); ?>>Newest Listed</option>
                            <option value="<?php echo e(request()->fullUrlWithQuery(['sort' => 'price_low'])); ?>" <?php echo e(request('sort') == 'price_low' ? 'selected' : ''); ?>>Price: Low to High</option>
                            <option value="<?php echo e(request()->fullUrlWithQuery(['sort' => 'price_high'])); ?>" <?php echo e(request('sort') == 'price_high' ? 'selected' : ''); ?>>Price: High to Low</option>
                            <option value="<?php echo e(request()->fullUrlWithQuery(['sort' => 'popular'])); ?>" <?php echo e(request('sort') == 'popular' ? 'selected' : ''); ?>>Popularity</option>
                        </select>
                    </div>
                </div>

                <!-- NEW HORIZONTAL CARD DESIGN -->
                <div class="d-flex flex-column gap-3">
                    <?php $__empty_1 = true; $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <?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;
                        ?>
                        
                        <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="<?php echo e($product->main_image); ?>" class="w-100 h-100 object-fit-contain position-absolute top-0 start-0 p-2" alt="<?php echo e($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="<?php echo e(route('public.products.show', $product->slug)); ?>" class="text-dark text-decoration-none hover:tw-text-orange-600">
                                                    <?php echo e($product->name); ?>

                                                </a>
                                                <?php if($isPremium): ?>
                                                    <i class="bi bi-star-fill text-warning ms-1" style="font-size: 0.8em;" title="Premium Seller"></i>
                                                <?php endif; ?>
                                            </h5>
                                        </div>
                                        <div class="text-muted small mb-3">Category: <span class="fw-bold text-dark"><?php echo e($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"><?php echo e(\App\Models\Setting::getValue('min_moq', 10)); ?> - <?php echo e(\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"><?php echo e($product->moq ?? 1); ?> <?php echo e($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"><?php echo e($product->currency == 'USD' ? '$' : '₹'); ?><?php echo e(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">
                                            <?php if($product->specifications && is_array($product->specifications)): ?>
                                                <?php $__currentLoopData = array_slice($product->specifications, 0, 2); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $val): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <li class="d-flex align-items-center gap-2 mb-1">
                                                        <i class="bi bi-dot fs-4 text-dark"></i> <?php echo e(is_string($key) ? $key . ': ' : ''); ?><?php echo e(Str::limit($val, 30)); ?>

                                                    </li>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            <?php 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<?php echo e($product->id); ?>">
                                            <i class="bi bi-envelope-fill me-1"></i> Send Inquiry
                                        </button>
                                        <a href="<?php echo e(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">
                                        <?php 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>
                                        <?php 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>
                                        <?php endif; ?>

                                        <?php 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>
                                        <?php endif; ?>
                                    </div>

                                </div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <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="<?php echo e(route('public.products.index')); ?>" class="btn btn-outline-primary rounded-pill">Clear Filters</a>
                        </div>
                    <?php endif; ?>
                </div>
                
                <div class="mt-5 d-flex justify-content-center">
                    <?php echo e($products->links()); ?>

                </div>
            </div>

            <!-- RIGHT COLUMN: Trending Products -->
            <div class="col-lg-3 d-none d-lg-block">
                <div class="filter-sidebar">
                    <?php 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">
                                <?php $__currentLoopData = $promotedProducts->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pProduct): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <a href="<?php echo e(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="<?php echo e($pProduct->main_image); ?>" class="w-100 h-100 object-fit-cover group-hover:tw-scale-110 tw-transition-transform" alt="<?php echo e($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;"><?php echo e($pProduct->name); ?></h6>
                                                <div class="text-orange-600 fw-bold small"><?php echo e($pProduct->currency == 'USD' ? '$' : '₹'); ?><?php echo e(number_format($pProduct->price, 0)); ?></div>
                                                <div class="text-muted" style="font-size: 0.7rem;">MOQ: <?php echo e($pProduct->moq); ?></div>
                                            </div>
                                        </div>
                                    </a>
                                    <?php if(!$loop->last): ?> <hr class="my-1 border-light"> <?php endif; ?>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>
                    <?php 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">
                            <?php $__currentLoopData = $trendingProducts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tProduct): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <a href="<?php echo e(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="<?php echo e($tProduct->main_image); ?>" class="w-100 h-100 object-fit-cover group-hover:tw-scale-110 tw-transition-transform" alt="<?php echo e($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;"><?php echo e($tProduct->name); ?></h6>
                                            <div class="text-orange-600 fw-bold small"><?php echo e($tProduct->currency == 'USD' ? '$' : '₹'); ?><?php echo e(number_format($tProduct->price, 0)); ?></div>
                                            <div class="text-muted" style="font-size: 0.7rem;">MOQ: <?php echo e($tProduct->moq); ?></div>
                                        </div>
                                    </div>
                                </a>
                                <?php if(!$loop->last): ?> <hr class="my-1 border-light"> <?php endif; ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </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="<?php echo e(route('public.products.index')); ?>" method="GET">
           <?php if(request('q')): ?> <input type="hidden" name="q" value="<?php echo e(request('q')); ?>"> <?php 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>
                   <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                       <option value="<?php echo e($cat->slug); ?>" <?php echo e(request('category') == $cat->slug ? 'selected' : ''); ?>><?php echo e($cat->name); ?></option>
                   <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
               </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="<?php echo e(request('min_price')); ?>">
                   <input type="number" name="max_price" class="form-control" placeholder="Max" value="<?php echo e(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" <?php echo e(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="<?php echo e(request('location')); ?>">
               </div>
           </div>
           
           <div class="d-grid gap-2">
               <button class="btn btn-primary fw-bold py-2">Apply Filters</button>
               <a href="<?php echo e(route('public.products.index')); ?>" class="btn btn-light text-danger fw-bold py-2">Clear All</a>
           </div>
      </form>
  </div>
</div>


<!-- Quote Modals -->
<?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <?php $seller = $product->seller; ?>
    <div class="modal fade" id="quoteModal<?php echo e($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 <?php echo e($seller->company_name); ?></h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form action="<?php echo e(route('inquiries.store', $seller)); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                    <input type="hidden" name="seller_id" value="<?php echo e($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="<?php echo e(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="<?php echo e(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="<?php echo e(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 <?php echo e($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>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

<?php $__env->stopSection(); ?>


<?php echo $__env->make('layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/u281583269/domains/theminiport.com/public_html/resources/views/public/products/index.blade.php ENDPATH**/ ?>