<?php $__env->startSection('title', isset($category) ? $category->name . ' - Mars Stationery' : 'Products - Mars Stationery'); ?>

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


<div class="bg-light border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 py-3">
        <nav class="flex items-center gap-2 text-sm text-gray-500">
            <a href="<?php echo e(url('/')); ?>" class="hover:text-primary transition">Home</a>
            <i class="fas fa-chevron-right text-[10px]"></i>
            <?php if(isset($category)): ?>
                <a href="<?php echo e(url('/products')); ?>" class="hover:text-primary transition">Products</a>
                <i class="fas fa-chevron-right text-[10px]"></i>
                <span class="text-dark font-medium"><?php echo e($category->name); ?></span>
            <?php else: ?>
                <span class="text-dark font-medium">Products</span>
            <?php endif; ?>
        </nav>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex flex-col lg:flex-row gap-8">

        
        <aside class="lg:w-64 flex-shrink-0" x-data="{ showFilters: window.innerWidth >= 1024 }">
            <button @click="showFilters = !showFilters" class="lg:hidden w-full bg-white border border-gray-200 rounded-lg px-4 py-3 flex items-center justify-between mb-4">
                <span class="font-medium"><i class="fas fa-filter mr-2"></i> Filters</span>
                <i class="fas fa-chevron-down" :class="showFilters && 'rotate-180'" style="transition: transform 0.2s"></i>
            </button>

            <div :class="showFilters ? 'block' : 'hidden'" class="lg:block space-y-6">
                
                <div class="bg-white rounded-xl border border-gray-100 p-5">
                    <h3 class="font-heading font-semibold text-dark mb-4">Categories</h3>
                    <div class="space-y-1" x-data="{ openCat: '<?php echo e(request('category', '')); ?>' }">
                        <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div>
                                <a href="<?php echo e(url('/category/' . $cat->slug)); ?>"
                                   class="flex items-center justify-between py-2 px-2 rounded-lg text-sm <?php echo e((isset($category) && $category->slug === $cat->slug) ? 'bg-pink-50 text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50'); ?> transition">
                                    <span><?php echo e($cat->name); ?></span>
                                    <span class="text-xs text-gray-400">(<?php echo e($cat->products_count ?? 0); ?>)</span>
                                </a>
                                <?php if($cat->children->count() > 0): ?>
                                    <div class="ml-4 space-y-0.5">
                                        <?php $__currentLoopData = $cat->children; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $child): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <a href="<?php echo e(url('/category/' . $child->slug)); ?>"
                                               class="block py-1.5 px-2 rounded text-xs <?php echo e((isset($category) && $category->slug === $child->slug) ? 'text-primary font-semibold' : 'text-gray-500 hover:text-primary'); ?> transition">
                                                <?php echo e($child->name); ?>

                                            </a>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>

                
                <div class="bg-white rounded-xl border border-gray-100 p-5">
                    <h3 class="font-heading font-semibold text-dark mb-4">Price Range</h3>
                    <form method="GET" action="<?php echo e(isset($category) ? url('/category/' . $category->slug) : url('/products')); ?>">
                        <?php if(request('q')): ?> <input type="hidden" name="q" value="<?php echo e(request('q')); ?>"> <?php endif; ?>
                        <?php if(request('sort')): ?> <input type="hidden" name="sort" value="<?php echo e(request('sort')); ?>"> <?php endif; ?>
                        <?php if(request('filter')): ?> <input type="hidden" name="filter" value="<?php echo e(request('filter')); ?>"> <?php endif; ?>
                        <div class="flex gap-2 mb-3">
                            <input type="number" name="min_price" value="<?php echo e(request('min_price')); ?>" placeholder="Min" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-1 focus:ring-primary focus:outline-none">
                            <input type="number" name="max_price" value="<?php echo e(request('max_price')); ?>" placeholder="Max" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-1 focus:ring-primary focus:outline-none">
                        </div>
                        <button type="submit" class="w-full bg-primary text-white text-sm py-2 rounded-lg hover:bg-[#d1405b] transition">Apply</button>
                    </form>
                </div>

                
                <div class="bg-white rounded-xl border border-gray-100 p-5">
                    <h3 class="font-heading font-semibold text-dark mb-4">Weight (grams)</h3>
                    <form method="GET" action="<?php echo e(isset($category) ? url('/category/' . $category->slug) : url('/products')); ?>">
                        <?php if(request('q')): ?> <input type="hidden" name="q" value="<?php echo e(request('q')); ?>"> <?php endif; ?>
                        <?php if(request('sort')): ?> <input type="hidden" name="sort" value="<?php echo e(request('sort')); ?>"> <?php endif; ?>
                        <?php if(request('filter')): ?> <input type="hidden" name="filter" value="<?php echo e(request('filter')); ?>"> <?php endif; ?>
                        <div class="flex gap-2 mb-3">
                            <input type="number" name="min_weight" value="<?php echo e(request('min_weight')); ?>" placeholder="Min" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-1 focus:ring-primary focus:outline-none">
                            <input type="number" name="max_weight" value="<?php echo e(request('max_weight')); ?>" placeholder="Max" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-1 focus:ring-primary focus:outline-none">
                        </div>
                        <button type="submit" class="w-full bg-primary text-white text-sm py-2 rounded-lg hover:bg-[#d1405b] transition">Apply</button>
                    </form>
                </div>
            </div>
        </aside>

        
        <div class="flex-1">
            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
                <div>
                    <h1 class="font-heading text-2xl font-bold text-dark">
                        <?php echo e(isset($category) ? $category->name : (request('filter') === 'new' ? 'New Arrivals' : (request('filter') === 'featured' ? 'Featured Products' : 'All Products'))); ?>

                    </h1>
                    <p class="text-sm text-gray-500 mt-1"><?php echo e($products->total()); ?> product<?php echo e($products->total() !== 1 ? 's' : ''); ?> found</p>
                </div>
                <form method="GET" action="<?php echo e(isset($category) ? url('/category/' . $category->slug) : url('/products')); ?>" class="flex items-center gap-2">
                    <?php if(request('q')): ?> <input type="hidden" name="q" value="<?php echo e(request('q')); ?>"> <?php endif; ?>
                    <?php if(request('filter')): ?> <input type="hidden" name="filter" value="<?php echo e(request('filter')); ?>"> <?php endif; ?>
                    <?php if(request('min_price')): ?> <input type="hidden" name="min_price" value="<?php echo e(request('min_price')); ?>"> <?php endif; ?>
                    <?php if(request('max_price')): ?> <input type="hidden" name="max_price" value="<?php echo e(request('max_price')); ?>"> <?php endif; ?>
                    <label class="text-sm text-gray-500">Sort by:</label>
                    <select name="sort" onchange="this.form.submit()" class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-1 focus:ring-primary focus:outline-none bg-white">
                        <option value="newest" <?php echo e(request('sort') === 'newest' ? 'selected' : ''); ?>>Newest</option>
                        <option value="price_asc" <?php echo e(request('sort') === 'price_asc' ? 'selected' : ''); ?>>Price: Low to High</option>
                        <option value="price_desc" <?php echo e(request('sort') === 'price_desc' ? 'selected' : ''); ?>>Price: High to Low</option>
                        <option value="name_asc" <?php echo e(request('sort') === 'name_asc' ? 'selected' : ''); ?>>Name: A to Z</option>
                    </select>
                </form>
            </div>

            <?php if($products->count() > 0): ?>
                <div class="grid grid-cols-2 lg:grid-cols-3 gap-5">
                    <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php echo $__env->make('components.product-card', ['product' => $product], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                <div class="mt-8">
                    <?php echo e($products->links()); ?>

                </div>
            <?php else: ?>
                <div class="text-center py-20">
                    <i class="fas fa-box-open text-5xl text-gray-300 mb-4"></i>
                    <h3 class="font-heading text-xl font-semibold text-gray-500">No products found</h3>
                    <p class="text-gray-400 mt-2">Try adjusting your filters or search term</p>
                    <a href="<?php echo e(url('/products')); ?>" class="inline-block mt-4 text-primary hover:underline font-medium">View all products</a>
                </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 /var/lib/freelancer/projects/40289218/resources/views/products/index.blade.php ENDPATH**/ ?>