<?php $__env->startSection('title', 'Browse Catalog'); ?>

<?php $__env->startSection('content'); ?>
<div class="bg-slate-100/50 py-10 border-b border-slate-200/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-extrabold text-slate-900">Store Catalog</h1>
        <p class="text-slate-500 mt-1">Explore all premium products and tech gear.</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex flex-col lg:flex-row gap-8">
        
        <!-- Filters Sidebar -->
        <aside class="w-full lg:w-64 shrink-0 space-y-6">
            <form action="<?php echo e(route('products.index')); ?>" method="GET" class="space-y-6">
                <!-- Preserve Search if coming from navbar -->
                <?php if(request('search')): ?>
                    <input type="hidden" name="search" value="<?php echo e(request('search')); ?>">
                <?php endif; ?>

                <!-- Category Filter -->
                <div class="bg-white border border-slate-200/80 rounded-2xl p-5 space-y-4">
                    <h3 class="font-bold text-slate-900 uppercase tracking-wider text-xs border-b border-slate-100 pb-2">Categories</h3>
                    <div class="space-y-2.5">
                        <label class="flex items-center gap-2 text-sm font-medium text-slate-600 hover:text-slate-900 cursor-pointer">
                            <input type="radio" name="category" value="" <?php echo e(!request('category') ? 'checked' : ''); ?> onchange="this.form.submit()" class="h-4 w-4 rounded-full border-slate-300 text-primary-600 focus:ring-primary-500">
                            <span>All Categories</span>
                        </label>
                        <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <label class="flex items-center gap-2 text-sm font-medium text-slate-600 hover:text-slate-900 cursor-pointer">
                                <input type="radio" name="category" value="<?php echo e($category->slug); ?>" <?php echo e(request('category') == $category->slug ? 'checked' : ''); ?> onchange="this.form.submit()" class="h-4 w-4 rounded-full border-slate-300 text-primary-600 focus:ring-primary-500">
                                <span><?php echo e($category->name); ?></span>
                            </label>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>

                <!-- Price Range Filter -->
                <div class="bg-white border border-slate-200/80 rounded-2xl p-5 space-y-4">
                    <h3 class="font-bold text-slate-900 uppercase tracking-wider text-xs border-b border-slate-100 pb-2">Price Range</h3>
                    <div class="grid grid-cols-2 gap-2.5">
                        <div>
                            <label class="block text-xs font-semibold text-slate-400 mb-1">Min (৳)</label>
                            <input type="number" name="min_price" value="<?php echo e(request('min_price')); ?>" placeholder="0" class="w-full rounded-xl border border-slate-300 px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-400 mb-1">Max (৳)</label>
                            <input type="number" name="max_price" value="<?php echo e(request('max_price')); ?>" placeholder="500" class="w-full rounded-xl border border-slate-300 px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                        </div>
                    </div>
                    <button type="submit" class="w-full py-2 bg-slate-950 hover:bg-primary-600 text-white rounded-xl text-xs font-bold transition-colors">
                        Apply Price Filter
                    </button>
                </div>

                <!-- Sorting Filter -->
                <div class="bg-white border border-slate-200/80 rounded-2xl p-5 space-y-4">
                    <h3 class="font-bold text-slate-900 uppercase tracking-wider text-xs border-b border-slate-100 pb-2">Sort By</h3>
                    <select name="sort" onchange="this.form.submit()" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white">
                        <option value="latest" <?php echo e(request('sort') == 'latest' ? 'selected' : ''); ?>>Latest Arrivals</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>
                    </select>
                </div>
            </form>
        </aside>

        <!-- Product Listings -->
        <div class="flex-grow space-y-8">
            <!-- Search Status Header -->
            <?php if(request('search') || request('category') || request('min_price') || request('max_price')): ?>
                <div class="flex flex-wrap items-center justify-between gap-4 p-4 border border-slate-200 bg-slate-50 rounded-2xl">
                    <div class="text-sm font-medium text-slate-600">
                        Showing results for: 
                        <?php if(request('search')): ?> <span class="bg-slate-200 text-slate-800 px-2 py-0.5 rounded-lg text-xs font-bold mr-1">"<?php echo e(request('search')); ?>"</span> <?php endif; ?>
                        <?php if(request('category')): ?> <span class="bg-slate-200 text-slate-800 px-2 py-0.5 rounded-lg text-xs font-bold mr-1">Category: <?php echo e(request('category')); ?></span> <?php endif; ?>
                        <?php if(request('min_price') || request('max_price')): ?> <span class="bg-slate-200 text-slate-800 px-2 py-0.5 rounded-lg text-xs font-bold mr-1">Price: ৳<?php echo e(request('min_price', 0)); ?> - ৳<?php echo e(request('max_price', 'Any')); ?></span> <?php endif; ?>
                    </div>
                    <a href="<?php echo e(route('products.index')); ?>" class="text-xs font-bold text-red-600 hover:text-red-700 flex items-center gap-1">
                        <i class="fa-solid fa-xmark"></i> Clear Filters
                    </a>
                </div>
            <?php endif; ?>

            <!-- Products Grid -->
            <?php if($products->isEmpty()): ?>
                <div class="bg-white border border-slate-200 rounded-3xl p-16 text-center space-y-4">
                    <div class="inline-flex h-16 w-16 items-center justify-center rounded-full bg-slate-100 text-slate-400">
                        <i class="fa-solid fa-magnifying-glass text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-slate-900">No products found</h3>
                    <p class="text-slate-500 max-w-sm mx-auto">We couldn't find any products matching your selection. Try clearing your filters or exploring another search query.</p>
                </div>
            <?php else: ?>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="group relative bg-white border border-slate-200/80 rounded-3xl overflow-hidden hover:shadow-xl transition-all flex flex-col cursor-pointer" onclick="window.location='<?php echo e(route('products.show', $product->slug)); ?>'">
                            <!-- Image -->
                            <div class="aspect-square w-full overflow-hidden bg-slate-100 relative">
                                <img src="<?php echo e($product->image_url); ?>" alt="<?php echo e($product->name); ?>" class="h-full w-full object-cover object-center group-hover:scale-105 transition-transform duration-500">
                                <?php if($product->total_stock <= 0): ?>
                                    <span class="absolute top-3 left-3 bg-red-600/90 backdrop-blur-sm text-white text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-lg">Out of Stock</span>
                                <?php elseif(!empty($product->sizes) || !empty($product->colors)): ?>
                                    <span class="absolute top-3 left-3 bg-blue-500/90 backdrop-blur-sm text-white text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-lg">Variants</span>
                                <?php elseif($product->stock <= 5): ?>
                                    <span class="absolute top-3 left-3 bg-orange-500/90 backdrop-blur-sm text-white text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-lg">Low Stock</span>
                                <?php endif; ?>
                            </div>
                            
                            <!-- Content -->
                            <div class="p-5 flex-grow flex flex-col justify-between">
                                <div>
                                    <div class="flex justify-between items-center gap-2 mb-2">
                                        <span class="text-xs font-semibold uppercase tracking-wider text-primary-600"><?php echo e($product->category->name); ?></span>
                                    </div>
                                    <h3 class="font-bold text-slate-900 hover:text-primary-600 transition-colors text-base mb-1"><?php echo e($product->name); ?></h3>
                                    <p class="text-xs text-slate-500 line-clamp-2 mb-4"><?php echo e($product->description); ?></p>
                                </div>
                                
                                <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                                    <span class="text-lg font-extrabold text-slate-900">৳<?php echo e(number_format($product->price, 0)); ?></span>
                                    
                                    <?php if(!empty($product->sizes) || !empty($product->colors)): ?>
                                        <a href="<?php echo e(route('products.show', $product->slug)); ?>" class="px-3.5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded-xl transition-all duration-200 flex items-center gap-1.5 hover:shadow-lg hover:shadow-blue-600/30 active:scale-95" onclick="event.stopPropagation()">
                                            <i class="fa-solid fa-list text-xs"></i>
                                            <span class="hidden sm:inline">Options</span>
                                        </a>
                                    <?php elseif($product->stock > 0): ?>
                                        <button onclick="event.stopPropagation(); ajaxAddToCart(<?php echo e($product->id); ?>, this)" class="px-3.5 py-1.5 bg-slate-950 hover:bg-primary-600 text-white text-[10px] font-bold rounded-xl transition-all duration-200 flex items-center gap-1.5 hover:shadow-lg hover:shadow-primary-600/30 active:scale-95">
                                            <i class="fa-solid fa-cart-plus text-xs"></i>
                                            <span class="hidden sm:inline">Add</span>
                                        </button>
                                    <?php else: ?>
                                        <button class="px-3.5 py-2 bg-slate-200 text-slate-400 text-[10px] font-bold rounded-xl cursor-not-allowed flex items-center gap-1.5" disabled>
                                            <i class="fa-regular fa-circle-xmark"></i> Unavail
                                        </button>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                <!-- Pagination links -->
                <div class="pt-10 border-t border-slate-200">
                    <?php echo e($products->links()); ?>

                </div>
            <?php endif; ?>
        </div>

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

<?php $__env->startPush('scripts'); ?>
<script>
function updateCartBadge(count) {
    let badge = document.getElementById('cart-count');
    if (badge) {
        badge.textContent = count;
    } else if (count > 0) {
        const cartLink = document.querySelector('nav a[href$="/cart"]');
        if (cartLink) {
            badge = document.createElement('span');
            badge.id = 'cart-count';
            badge.className = 'absolute top-0 right-0 flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-[10px] font-bold text-white ring-2 ring-white';
            badge.textContent = count;
            cartLink.appendChild(badge);
        }
    }
}

function ajaxAddToCart(productId, btn) {
    const originalHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';

    fetch('<?php echo e(url('/cart/add')); ?>/' + productId, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'),
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            updateCartBadge(data.cart_count);

            Swal.fire({
                icon: 'success',
                title: 'Added to Cart!',
                text: data.message || 'Product added to cart!',
                confirmButtonText: 'Continue Shopping',
                confirmButtonColor: '#0ea5e9',
                background: '#f0fdf4',
                color: '#166534',
                iconColor: '#16a34a',
                customClass: { popup: 'rounded-2xl shadow-2xl border border-green-200' }
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: data.message || 'Could not add to cart.',
                confirmButtonText: 'OK',
                confirmButtonColor: '#dc2626',
                background: '#fef2f2',
                color: '#991b1b',
                iconColor: '#dc2626',
                customClass: { popup: 'rounded-2xl shadow-2xl border border-red-200' }
            });
        }
    })
    .catch(() => {
        Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: 'Something went wrong.',
            confirmButtonText: 'OK',
            confirmButtonColor: '#dc2626',
            background: '#fef2f2',
            color: '#991b1b',
            iconColor: '#dc2626',
            customClass: { popup: 'rounded-2xl shadow-2xl border border-red-200' }
        });
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
    });
}
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.shop', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\laragon\www\my_ecom-main\resources\views/shop/products.blade.php ENDPATH**/ ?>