<?php $__env->startSection('title', "MJ's Bikes & Accessories Marketplace - Product Showroom"); ?>

<?php $__env->startSection('content'); ?>

<!-- HEADER & BREADCRUMB -->
<div class="bg-dark text-white py-4 mb-4">
    <div class="container text-center text-md-start d-flex flex-column flex-md-row justify-content-between align-items-center">
        <div>
            <h1 class="brand-font text-uppercase mb-1 text-white">Online <span class="text-danger">Showroom</span></h1>
            <p class="text-secondary mb-0">Browse through our complete catalog of bikes, spares, and accessories.</p>
        </div>
        <nav aria-label="breadcrumb" class="mt-3 mt-md-0">
            <ol class="breadcrumb mb-0 justify-content-center">
                <li class="breadcrumb-item"><a href="<?php echo e(route('home')); ?>" class="text-danger text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Showroom</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container">
    <div class="row">
        
        <!-- SIDEBAR FILTERS (Desktop: 3-cols, Mobile: Collapsible Drawer) -->
        <div class="col-lg-3 mb-4">
            <!-- Mobile Toggle Button for Filters -->
            <button class="btn btn-dark w-100 d-lg-none rounded-pill mb-3 py-2 text-uppercase fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#filtersCollapse" aria-expanded="false" aria-controls="filtersCollapse">
                <i class="bi bi-funnel me-2"></i> Filter Products
            </button>
            
            <div class="collapse d-lg-block" id="filtersCollapse">
                <div class="card border-0 shadow-sm rounded-4 p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-bold mb-0 text-secondary"><i class="bi bi-funnel text-danger me-2"></i>Filters</h5>
                        <?php if(request()->anyFilled(['q', 'type', 'category', 'brand', 'color', 'size', 'min_price', 'max_price'])): ?>
                            <a href="<?php echo e(route('marketplace.index')); ?>" class="text-danger text-decoration-none small fw-semibold">Clear All</a>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Search Input (Mobile Only) -->
                    <form action="<?php echo e(route('marketplace.index')); ?>" method="GET" class="mb-4 d-lg-none position-relative">
                        <input class="form-control rounded-pill pe-5" type="search" name="q" placeholder="Search..." value="<?php echo e(request('q')); ?>">
                        <button class="btn position-absolute end-0 top-0 text-secondary border-0" type="submit">
                            <i class="bi bi-search"></i>
                        </button>
                    </form>

                    <!-- Type Filter -->
                    <div class="mb-4">
                        <h6 class="fw-bold text-secondary mb-2">Item Type</h6>
                        <div class="list-group list-group-flush">
                            <a href="<?php echo e(request()->fullUrlWithQuery(['type' => 'bike'])); ?>" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center border-0 px-0 <?php echo e(request('type') === 'bike' ? 'text-danger fw-bold' : ''); ?>">
                                <span><i class="bi bi-bicycle me-2"></i>Bicycles</span>
                            </a>
                            <a href="<?php echo e(request()->fullUrlWithQuery(['type' => 'spare_part'])); ?>" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center border-0 px-0 <?php echo e(request('type') === 'spare_part' ? 'text-danger fw-bold' : ''); ?>">
                                <span><i class="bi bi-gear-fill me-2"></i>Spare Parts</span>
                            </a>
                            <a href="<?php echo e(request()->fullUrlWithQuery(['type' => 'accessory'])); ?>" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center border-0 px-0 <?php echo e(request('type') === 'accessory' ? 'text-danger fw-bold' : ''); ?>">
                                <span><i class="bi bi-shield-fill me-2"></i>Accessories</span>
                            </a>
                            <a href="<?php echo e(request()->fullUrlWithQuery(['type' => 'apparel'])); ?>" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center border-0 px-0 <?php echo e(request('type') === 'apparel' ? 'text-danger fw-bold' : ''); ?>">
                                <span><i class="bi bi-briefcase me-2"></i>Apparel</span>
                            </a>
                        </div>
                    </div>

                    <!-- Category Filter -->
                    <div class="mb-4 border-top pt-3">
                        <h6 class="fw-bold text-secondary mb-2">Categories</h6>
                        <div class="list-group list-group-flush" style="max-height: 200px; overflow-y: auto;">
                            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <a href="<?php echo e(request()->fullUrlWithQuery(['category' => $category->slug])); ?>" class="list-group-item list-group-item-action border-0 px-0 py-1 d-flex justify-content-between align-items-center <?php echo e(request('category') === $category->slug ? 'text-danger fw-bold' : ''); ?>" style="font-size: 13px;">
                                    <span><i class="bi bi-dot me-1"></i><?php echo e($category->name); ?></span>
                                </a>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>

                    <!-- Brand Filter -->
                    <div class="mb-4 border-top pt-3">
                        <h6 class="fw-bold text-secondary mb-2">Brands</h6>
                        <div class="list-group list-group-flush" style="max-height: 150px; overflow-y: auto;">
                            <?php $__currentLoopData = $brands; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $brand): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <a href="<?php echo e(request()->fullUrlWithQuery(['brand' => $brand])); ?>" class="list-group-item list-group-item-action border-0 px-0 py-1 d-flex justify-content-between align-items-center <?php echo e(request('brand') === $brand ? 'text-danger fw-bold' : ''); ?>" style="font-size: 13px;">
                                    <span><?php echo e($brand); ?></span>
                                </a>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>

                    <!-- Price Filter -->
                    <div class="mb-4 border-top pt-3">
                        <h6 class="fw-bold text-secondary mb-3">Price Range (KSh)</h6>
                        <form action="<?php echo e(route('marketplace.index')); ?>" method="GET">
                            <!-- Retain other filters -->
                            <?php if(request('q')): ?> <input type="hidden" name="q" value="<?php echo e(request('q')); ?>"> <?php endif; ?>
                            <?php if(request('type')): ?> <input type="hidden" name="type" value="<?php echo e(request('type')); ?>"> <?php endif; ?>
                            <?php if(request('category')): ?> <input type="hidden" name="category" value="<?php echo e(request('category')); ?>"> <?php endif; ?>
                            <?php if(request('brand')): ?> <input type="hidden" name="brand" value="<?php echo e(request('brand')); ?>"> <?php endif; ?>
                            <?php if(request('color')): ?> <input type="hidden" name="color" value="<?php echo e(request('color')); ?>"> <?php endif; ?>
                            
                            <div class="row g-2 mb-3">
                                <div class="col-6">
                                    <input type="number" class="form-control form-control-sm rounded-pill text-center" name="min_price" placeholder="Min" value="<?php echo e(request('min_price')); ?>">
                                </div>
                                <div class="col-6">
                                    <input type="number" class="form-control form-control-sm rounded-pill text-center" name="max_price" placeholder="Max" value="<?php echo e(request('max_price')); ?>">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-outline-mj btn-sm w-100 rounded-pill">Apply Filter</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- PRODUCTS LISTINGS -->
        <div class="col-lg-9">
            <!-- Toolbar -->
            <div class="card border-0 shadow-sm rounded-4 p-3 mb-4">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
                    <div class="text-muted small">
                        Showing <?php echo e($products->firstItem() ?? 0); ?>-<?php echo e($products->lastItem() ?? 0); ?> of <?php echo e($products->total()); ?> items
                    </div>
                    
                    <div class="d-flex align-items-center gap-2 w-100 w-md-auto justify-content-md-end">
                        <span class="text-nowrap small text-muted">Sort By:</span>
                        <select class="form-select form-select-sm rounded-pill" style="width: 160px;" onchange="location = this.value;">
                            <option value="<?php echo e(request()->fullUrlWithQuery(['sort' => 'latest'])); ?>" <?php echo e(request('sort') === 'latest' ? 'selected' : ''); ?>>Latest Arrivals</option>
                            <option value="<?php echo e(request()->fullUrlWithQuery(['sort' => 'price_asc'])); ?>" <?php echo e(request('sort') === 'price_asc' ? 'selected' : ''); ?>>Price: Low to High</option>
                            <option value="<?php echo e(request()->fullUrlWithQuery(['sort' => 'price_desc'])); ?>" <?php echo e(request('sort') === 'price_desc' ? 'selected' : ''); ?>>Price: High to Low</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Products Grid -->
            <?php if($products->count() > 0): ?>
                <!-- Desktop Grid -->
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4 mb-4 d-none d-sm-flex">
                    <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="col">
                            <?php echo $__env->make('marketplace.partials.product_card', ['product' => $product], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                <!-- Mobile Grid -->
                <div class="mobile-grid-2 d-sm-none mb-4" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%;">
                    <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div style="width: 100%;">
                            <?php echo $__env->make('marketplace.partials.product_card', ['product' => $product], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                <!-- Pagination Links -->
                <div class="d-flex justify-content-center mt-5">
                    <?php echo e($products->links('pagination::bootstrap-5')); ?>

                </div>
            <?php else: ?>
                <div class="card border-0 shadow-sm rounded-4 p-5 text-center my-5">
                    <div class="text-danger fs-1 mb-3"><i class="bi bi-bicycle"></i></div>
                    <h4 class="fw-bold text-secondary mb-2">No Products Found</h4>
                    <p class="text-muted mb-4">We couldn't find any products matching your search criteria. Try modifying your filters.</p>
                    <div class="d-flex justify-content-center">
                        <a href="<?php echo e(route('marketplace.index')); ?>" class="btn btn-primary-mj rounded-pill">Reset All Filters</a>
                    </div>
                </div>
            <?php endif; ?>
        </div>
        
    </div>
</div>

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

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\mjs-bikes-marketplace\resources\views/marketplace/index.blade.php ENDPATH**/ ?>