<?php
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Product;
use App\Models\Category;
use App\Models\Brand;
use App\Services\CartManager;
?>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <!-- Breadcrumbs -->
    <div class="mb-6 text-xs text-gray-500 flex items-center space-x-2">
        <a href="/" class="hover:text-indigo-650 transition-colors">Home</a>
        <span>/</span>
        <a href="/shop" class="hover:text-indigo-650 transition-colors">Shop</a>
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($categorySlug): ?>
            <?php $category = \App\Models\Category::where('slug', $categorySlug)->first(); ?>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($category): ?>
                <span>/</span>
                <span class="font-semibold text-gray-805"><?php echo e($category->name); ?></span>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    <div class="flex flex-col lg:flex-row gap-8">
        
        <!-- Sidebar Filters (1/4 Width) -->
        <aside class="w-full lg:w-1/4 space-y-6 flex-shrink-0">
            <!-- Search bar -->
            <div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm/5 space-y-3">
                <h3 class="text-sm font-bold text-gray-900 uppercase tracking-wider">Search</h3>
                <div class="relative">
                    <input 
                        wire:model.live.debounce.300ms="search"
                        type="text" 
                        placeholder="Search products..." 
                        class="w-full text-sm pl-4 pr-10 py-2.5 bg-gray-50 border border-gray-250 rounded-xl focus:outline-none focus:ring-1 focus:ring-indigo-650"
                    >
                    <span class="absolute inset-y-0 right-3 flex items-center text-gray-400">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </span>
                </div>
            </div>

            <!-- Categories -->
            <div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm/5 space-y-3">
                <h3 class="text-sm font-bold text-gray-900 uppercase tracking-wider">Categories</h3>
                <div class="space-y-1 text-sm">
                    <button 
                        wire:click="selectCategory(null)" 
                        class="w-full text-left py-1.5 px-2 rounded-lg transition-colors flex justify-between items-center <?php echo e(is_null($categorySlug) ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-gray-650 hover:bg-gray-55/50'); ?>"
                    >
                        <span>All Categories</span>
                        <span class="text-xs text-gray-455">(<?php echo e(\App\Models\Product::where('is_visible', true)->count()); ?>)</span>
                    </button>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = \App\Models\Category::whereNull('parent_id')->where('is_visible', true)->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                        <button 
                            wire:click="selectCategory('<?php echo e($cat->slug); ?>')" 
                            class="w-full text-left py-1.5 px-2 rounded-lg transition-colors flex justify-between items-center <?php echo e($categorySlug === $cat->slug ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-gray-650 hover:bg-gray-55/50'); ?>"
                        >
                            <span><?php echo e($cat->name); ?></span>
                            <span class="text-xs text-gray-455">(<?php echo e($cat->products()->where('is_visible', true)->count()); ?>)</span>
                        </button>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                </div>
            </div>

            <!-- Price Range Filter -->
            <div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm/5 space-y-3">
                <h3 class="text-sm font-bold text-gray-900 uppercase tracking-wider">Price Range (৳)</h3>
                <div class="flex items-center space-x-2">
                    <input 
                        wire:model.live.debounce.500ms="minPrice"
                        type="number" 
                        placeholder="Min" 
                        class="w-1/2 text-sm px-3 py-2 bg-gray-50 border border-gray-250 rounded-xl focus:outline-none focus:ring-1 focus:ring-indigo-650"
                        min="0"
                    >
                    <span class="text-gray-400 text-sm">to</span>
                    <input 
                        wire:model.live.debounce.500ms="maxPrice"
                        type="number" 
                        placeholder="Max" 
                        class="w-1/2 text-sm px-3 py-2 bg-gray-50 border border-gray-250 rounded-xl focus:outline-none focus:ring-1 focus:ring-indigo-650"
                        min="0"
                    >
                </div>
            </div>

            <!-- Brands Checklist -->
            <div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm/5 space-y-3">
                <h3 class="text-sm font-bold text-gray-900 uppercase tracking-wider">Brands</h3>
                <div class="space-y-2 text-sm max-h-48 overflow-y-auto pr-2">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = \App\Models\Brand::where('is_visible', true)->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $brand): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                        <label class="flex items-center space-x-3 cursor-pointer">
                            <input 
                                wire:model.live="selectedBrands"
                                type="checkbox" 
                                value="<?php echo e($brand->id); ?>"
                                class="rounded text-indigo-600 focus:ring-indigo-650 border-gray-300 h-4.5 w-4.5"
                            >
                            <span class="text-gray-650"><?php echo e($brand->name); ?></span>
                        </label>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                </div>
            </div>

            <!-- Clear filters -->
            <button 
                wire:click="clearFilters"
                class="w-full py-2.5 text-xs font-bold text-center border border-gray-200 hover:bg-gray-50 rounded-xl text-gray-700 transition-colors"
            >
                Clear All Filters
            </button>
        </aside>

        <!-- Product Grid Content (3/4 Width) -->
        <section class="flex-grow">
            <!-- Toolbar sorting -->
            <div class="bg-white p-4 sm:p-5 rounded-2xl border border-gray-100 shadow-sm/5 flex flex-col sm:flex-row items-center justify-between gap-4 mb-6">
                <p class="text-sm text-gray-600">
                    Showing <span class="font-bold text-gray-900"><?php echo e($this->getProducts()->firstItem() ?? 0); ?></span> - <span class="font-bold text-gray-900"><?php echo e($this->getProducts()->lastItem() ?? 0); ?></span> of <span class="font-bold text-gray-900"><?php echo e($this->getProducts()->total()); ?></span> products
                </p>
                
                <div class="flex items-center space-x-3 w-full sm:w-auto justify-end">
                    <span class="text-sm text-gray-500 whitespace-nowrap">Sort By</span>
                    <select 
                        wire:model.live="sortBy"
                        class="text-sm bg-gray-50 border border-gray-250 rounded-xl py-2 px-3 focus:outline-none focus:ring-1 focus:ring-indigo-650"
                    >
                        <option value="default">Default (Newest)</option>
                        <option value="price_asc">Price: Low to High</option>
                        <option value="price_desc">Price: High to Low</option>
                        <option value="newest">New Arrivals</option>
                    </select>
                </div>
            </div>

            <!-- Products listing -->
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($this->getProducts()->count() > 0): ?>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $this->getProducts(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm/5 overflow-hidden group flex flex-col hover:shadow-md transition-shadow relative">
                            <!-- Product Image Container -->
                            <div class="relative aspect-square overflow-hidden bg-gray-50 flex-shrink-0">
                                <a href="/products/<?php echo e($product->id); ?>" class="block w-full h-full">
                                    <img 
                                        src="<?php echo e($product->getFirstMediaUrl('images', 'webp') ?: ($product->getFirstMediaUrl('images') ?: '/images/placeholder.jpg')); ?>" 
                                        alt="<?php echo e($product->name); ?>" 
                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                                    >
                                </a>
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->sale_price): ?>
                                    <!-- Discount Tag -->
                                    <span class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-lg z-10">
                                        Sale
                                    </span>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

                                <!-- Wishlist Toggle Button -->
                                <button 
                                    wire:click="toggleWishlist(<?php echo e($product->id); ?>)"
                                    class="absolute top-3 right-3 p-1.5 rounded-full bg-white/80 hover:bg-white text-gray-600 hover:text-red-500 shadow-sm transition-all focus:outline-none z-10"
                                    title="Toggle Wishlist"
                                >
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(auth()->check() && auth()->user()->wishlistProducts->contains($product->id)): ?>
                                        <svg class="h-5 w-5 text-red-500 fill-current" viewBox="0 0 24 24">
                                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                        </svg>
                                    <?php else: ?>
                                        <svg class="h-5 w-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
                                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                        </svg>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </button>

                                <!-- Out of Stock Overlay -->
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->quantity <= 0): ?>
                                    <div class="absolute inset-0 bg-black/40 flex items-center justify-center z-10 pointer-events-none">
                                        <span class="text-white text-xs sm:text-sm font-bold uppercase tracking-wider bg-black/60 px-3 py-1.5 rounded-lg border border-white/20">
                                            Out of stock
                                        </span>
                                    </div>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </div>

                            <!-- Card Body -->
                            <div class="p-4 sm:p-5 flex-grow flex flex-col">
                                <!-- Category -->
                                <p class="text-xs font-semibold text-gray-405 uppercase tracking-wider">
                                    <?php echo e($product->category?->name ?? 'Uncategorized'); ?>

                                </p>
                                
                                <!-- Title -->
                                <h3 class="text-sm sm:text-base font-bold text-gray-900 line-clamp-1 mt-1 hover:text-indigo-650">
                                    <a href="/products/<?php echo e($product->id); ?>"><?php echo e($product->name); ?></a>
                                </h3>

                                <!-- Price -->
                                <div class="flex items-center space-x-2 mt-2">
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->sale_price): ?>
                                        <span class="text-base sm:text-lg font-extrabold text-indigo-600">
                                            ৳<?php echo e(number_format($product->sale_price, 2)); ?>

                                        </span>
                                        <span class="text-xs sm:text-sm text-gray-400 line-through">
                                            ৳<?php echo e(number_format($product->price, 2)); ?>

                                        </span>
                                    <?php else: ?>
                                        <span class="text-base sm:text-lg font-extrabold text-indigo-600">
                                            ৳<?php echo e(number_format($product->price, 2)); ?>

                                        </span>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </div>

                                <!-- Add to Cart Button -->
                                <div class="mt-4 pt-4 border-t border-gray-50 flex items-center justify-between gap-2">
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->quantity <= 0): ?>
                                        <span class="text-xs text-red-500 font-bold uppercase tracking-wider py-2 w-full text-center">Out of stock</span>
                                    <?php elseif($product->variants()->count() > 0): ?>
                                        <a 
                                            href="/products/<?php echo e($product->id); ?>" 
                                            class="w-full text-center px-4 py-2 border border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white rounded-xl text-xs font-bold transition-all"
                                        >
                                            Select Options
                                        </a>
                                    <?php else: ?>
                                        <button 
                                            wire:click="addToCart(<?php echo e($product->id); ?>)"
                                            class="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-650 text-white rounded-xl text-xs font-bold shadow-sm transition-colors text-center"
                                        >
                                            Add to Cart
                                        </button>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                </div>

                <!-- Pagination footer -->
                <div class="mt-10">
                    <?php echo e($this->getProducts()->links()); ?>

                </div>
            <?php else: ?>
                <div class="bg-white p-12 text-center border border-gray-100 rounded-2xl shadow-sm/5 text-gray-500 py-16">
                    <svg class="h-16 w-16 text-gray-200 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                    <p class="text-sm font-semibold">No products found matching your filters.</p>
                    <p class="text-xs mt-1">Try searching for another keyword or clearing search filters.</p>
                    <button 
                        wire:click="clearFilters" 
                        class="mt-4 inline-flex items-center px-4 py-2 border border-gray-250 text-xs font-bold rounded-lg shadow-sm text-gray-700 bg-white hover:bg-gray-50 transition-colors"
                    >
                        Reset All Filters
                    </button>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </section>

    </div>
</div><?php /**PATH storage/framework/views-testing/livewire/views/f4802492.blade.php ENDPATH**/ ?>