@push('styles')
<style>
    .slider-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: var(--color-primary);
        cursor: pointer;
        pointer-events: auto;
        border: 4px solid white;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transition: all 0.2s ease;
        margin-top: 0px; /* Reset */
    }
    .slider-range::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        height: 20px; /* Match thumb height */
    }
    .slider-range:hover::-webkit-slider-thumb {
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    }
    .slider-range::-moz-range-thumb {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: var(--color-primary);
        cursor: pointer;
        pointer-events: auto;
        border: 4px solid white;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .slider-range:hover::-moz-range-thumb {
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    }
    .slider-range {
        pointer-events: none;
        height: 20px; /* Fixed height for natural thumb centering */
    }
    .slider-range::-webkit-slider-thumb {
        pointer-events: auto;
    }
    .slider-range::-moz-range-thumb {
        pointer-events: auto;
    }
    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f9fafb;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #e5e7eb;
        border-radius: 20px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary);
    }
</style>
@php
    $catTitle = 'Shop Explorer';
    $catObj = null;
    if(!empty($selectedFilters['category'])) {
        $catObj = \App\Models\Category::where('slug', $selectedFilters['category'])->first();
        if($catObj) {
            $catTitle = $catObj->name;
        }
    }

    $shopTitleSetting = trim($siteSettings['shop_meta_title'] ?? '');
    $fallbackSeoTitle = trim($siteSettings['meta_title'] ?? '');
    $shopTitleBase = $shopTitleSetting !== ''
        ? $shopTitleSetting
        : ($fallbackSeoTitle !== '' ? $fallbackSeoTitle : ($siteSettings['site_name'] ?? 'Aura Fashion'));

    $shopDescSetting = trim($siteSettings['shop_meta_description'] ?? '');
    $shopMetaDescription = $shopDescSetting !== '' ? $shopDescSetting : null;

    $hasCategoryFilter = ! empty($selectedFilters['category']) && $catObj;
    $layoutTitle = $hasCategoryFilter
        ? __($catTitle).' | '.$shopTitleBase
        : $shopTitleBase;

    $shopCanonical = url()->route('shop');
    if (request()->getQueryString()) {
        $shopCanonical .= '?'.request()->getQueryString();
    }
@endphp

@push('styles')
<style>
    /* ... */
</style>
@endpush

<x-layout
    :title="$layoutTitle"
    :meta-description="$shopMetaDescription"
    :og-title="$layoutTitle"
    :og-description="$shopMetaDescription"
    :og-url="request()->fullUrl()"
    :canonical="$shopCanonical"
    og-type="website"
>
    <div class="bg-gray-50 pt-10">
        <div class="container mx-auto px-4 pb-20">


            <div class="flex flex-col lg:flex-row gap-10 items-start">
                <!-- Mobile Filter Backdrop -->
                <div id="filterBackdrop" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9998] hidden opacity-0 transition-opacity duration-300 lg:hidden" onclick="closeFilterDrawer()"></div>
                
                <aside id="filterDrawer" class="fixed inset-y-0 left-0 z-[101] w-[85vw] max-w-sm bg-white p-6 pb-24 transform -translate-x-full transition-transform duration-300 shadow-2xl overflow-y-auto space-y-10 lg:space-y-10 lg:pb-0 lg:p-0 lg:shadow-none lg:bg-transparent lg:transform-none lg:translate-x-0 lg:inset-auto lg:w-[300px] lg:flex-shrink-0 lg:sticky lg:top-[160px] h-full lg:h-fit lg:max-h-[calc(100vh-200px)] custom-scrollbar lg:z-30 lg:pr-4">
                    <div class="flex items-center justify-between lg:hidden mb-2">
                        <span class="text-xl font-black tracking-tighter text-gray-900">{{ __('FILTERS') }}</span>
                        <button onclick="closeFilterDrawer()" class="p-2 -mr-2 text-gray-500 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>
                    <!-- Categories (Optional Breadcrumb inside Sidebar if needed) -->
                    <!-- Size Filter -->
                    <div class="space-y-6">
                        <div class="flex justify-between items-center group cursor-pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">
                            <h3 class="text-[11px] font-extrabold text-gray-400 uppercase tracking-[0.2em]">{{ __('Available Sizes') }}</h3>
                            <div class="w-8 h-[1px] bg-primary transition-colors"></div>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            @foreach($sizes as $size)
                            <button 
                                onclick="toggleFilter('size', '{{ $size }}')"
                                class="size-filter-btn min-w-[3rem] w-auto h-12 px-3 whitespace-nowrap rounded-xl border-2 text-[10px] font-bold uppercase transition-all flex items-center justify-center {{ in_array($size, $selectedFilters['size']) ? 'bg-primary border-primary text-white shadow-lg shadow-primary/20 scale-95' : 'bg-white border-gray-100 text-gray-500 hover:border-primary hover:text-primary' }}"
                                data-size="{{ $size }}">
                                {{ __($size) }}
                            </button>
                            @endforeach
                        </div>
                    </div>

                    <!-- Price Filter -->
                    <div class="space-y-6">
                        <div class="flex justify-between items-center group cursor-pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">
                            <h3 class="text-[11px] font-extrabold text-gray-400 uppercase tracking-[0.2em]">{{ __('Price Selection') }} (৳)</h3>
                            <div class="w-8 h-[1px] bg-primary transition-colors"></div>
                        </div>
                        
                        <div class="px-2 space-y-8">
                            <!-- Inputs Grid -->
                            <div class="grid grid-cols-2 gap-4">
                                <div class="relative group">
                                    <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest absolute -top-5 left-0">{{ __('Min') }}</label>
                                    <div class="flex items-center">
                                        <span class="absolute left-3 text-gray-400 text-xs font-bold font-['Poppins']">৳</span>
                                        <input type="number" id="min_price" 
                                            onchange="syncSliderFromInput()"
                                            value="{{ $selectedFilters['min_price'] ?? ($priceRange->min_price ?? 0) }}" 
                                            class="w-full bg-white border border-gray-200 rounded-lg py-2 pl-7 pr-2 text-sm font-bold text-gray-700 focus:ring-1 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300">
                                    </div>
                                </div>
                                <div class="relative group">
                                    <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest absolute -top-5 left-0">{{ __('Max') }}</label>
                                    <div class="flex items-center">
                                        <span class="absolute left-3 text-gray-400 text-xs font-bold font-['Poppins']">৳</span>
                                        <input type="number" id="max_price" 
                                            onchange="syncSliderFromInput()"
                                            value="{{ $selectedFilters['max_price'] ?? ($priceRange->max_price ?? 0) }}" 
                                            class="w-full bg-white border border-gray-200 rounded-lg py-2 pl-7 pr-2 text-sm font-bold text-gray-700 focus:ring-1 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300">
                                    </div>
                                </div>
                            </div>

                            <!-- Dual-Range Slider -->
                            <div class="relative h-6 flex items-center group cursor-pointer group px-2">
                                <!-- Track Background -->
                                <div class="h-[2px] w-full bg-gray-100 rounded-full absolute left-0 right-0 top-1/2 -translate-y-1/2 transition-colors group-hover:bg-gray-200"></div>
                                <!-- Active Selection Track -->
                                <div id="slider-track" class="h-[2px] bg-primary rounded-full absolute top-1/2 -translate-y-1/2" style="left: 0%; right: 0%;"></div>
                                
                                <input type="range" id="slider_min" 
                                    min="{{ $priceRange->min_price ?? 0 }}" 
                                    max="{{ $priceRange->max_price ?? 10000 }}" 
                                    value="{{ $selectedFilters['min_price'] ?? ($priceRange->min_price ?? 0) }}"
                                    oninput="syncInputFromSlider()"
                                    class="absolute left-0 w-full h-full appearance-none bg-none pointer-events-none z-30 slider-range outline-none m-0 p-0">
                                
                                <input type="range" id="slider_max" 
                                    min="{{ $priceRange->min_price ?? 0 }}" 
                                    max="{{ $priceRange->max_price ?? 10000 }}" 
                                    value="{{ $selectedFilters['max_price'] ?? ($priceRange->max_price ?? 0) }}"
                                    oninput="syncInputFromSlider()"
                                    class="absolute left-0 w-full h-full appearance-none bg-none pointer-events-none z-30 slider-range outline-none m-0 p-0">
                            </div>
                        </div>
                    </div>

                    <!-- Color Filter -->
                    <div class="space-y-6">
                        <div class="flex justify-between items-center group cursor-pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">
                            <h3 class="text-[11px] font-extrabold text-gray-400 uppercase tracking-[0.2em]">{{ __('Filter by Colors') }}</h3>
                            <div class="w-8 h-[1px] bg-primary transition-colors"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            @foreach($colors as $color)
                             <label class="flex items-center gap-3 cursor-pointer group h-8">
                                <div class="flex-shrink-0 w-5 h-5 relative flex items-center justify-center">
                                    <input type="checkbox" name="color_filter" 
                                        onchange="applyFilters()"
                                        value="{{ $color }}" 
                                        {{ in_array($color, $selectedFilters['color']) ? 'checked' : '' }}
                                        class="peer appearance-none w-5 h-5 rounded-lg border-2 border-gray-100 checked:bg-primary checked:border-primary transition-all cursor-pointer">
                                    <svg class="absolute top-1 left-1 w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                </div>
                                <span class="text-[11px] font-bold text-gray-500 group-hover:text-primary transition-colors uppercase tracking-widest pt-[1px] leading-none">{{ __($color) }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                </aside>

                <!-- Product Grid Area -->
                <main class="flex-grow">
                    <!-- Breadcrumbs -->
                    <nav class="flex mb-6 text-[10px] font-bold uppercase tracking-[0.2em] text-gray-400">
                        <a href="/" class="hover:text-primary transition-colors">{{ __('Home') }}</a>
                        <span class="mx-3 text-gray-200">/</span>
                        @if($catObj)
                            <a href="/shop" class="hover:text-gray-900 transition-colors">{{ __('Shop') }}</a>
                            <span class="mx-3 text-gray-200">/</span>
                            <span class="text-primary">{{ __($catTitle) }}</span>
                        @else
                            <span class="text-gray-900">{{ __($catTitle) }}</span>
                        @endif
                    </nav>
                    <!-- Unified Toolbar -->
                    <div class="bg-white p-3 sm:p-5 rounded-2xl shadow-sm border border-gray-100 mb-8 flex flex-col sm:flex-row justify-between items-center gap-4">
                        
                        <!-- Desktop: Results (Left), Mobile: Bottom -->
                        <p id="showing-results" class="text-[10px] font-bold text-gray-400 uppercase tracking-widest text-center sm:text-left w-full sm:w-auto order-2 sm:order-1">
                            {{ __('Showing') }} 1–{{ $products->lastItem() ?? 0 }} {{ __('of') }} <span class="text-primary">{{ $products->total() }}</span> {{ __('results') }}
                        </p>

                        <!-- Actions (Right on Desktop, Top on Mobile) -->
                        <div class="flex items-center justify-between w-full sm:w-auto gap-3 order-1 sm:order-2">
                            <!-- Filter Button (Mobile Only) -->
                            <button onclick="openFilterDrawer()" class="lg:hidden flex items-center justify-center gap-2 bg-gray-50 border border-gray-100 text-gray-700 px-4 py-3 rounded-xl text-xs font-bold hover:bg-primary/5 hover:text-primary hover:border-primary/20 transition-all w-1/2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                                {{ __('Filters') }}
                            </button>

                            <!-- Sort Dropdown -->
                            <div class="relative w-1/2 sm:w-48 lg:w-56 mt-0">
                                <select onchange="applyFilters()" id="sort_by" class="w-full bg-gray-50 border border-gray-100 rounded-xl py-3 pl-4 pr-8 text-xs font-bold text-gray-700 focus:ring-1 focus:ring-primary/20 outline-none appearance-none cursor-pointer hover:bg-gray-100 transition-colors">
                                    <option value="default">{{ __('Default Sort') }}</option>
                                    <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>{{ __('Price: Low-High') }}</option>
                                    <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>{{ __('Price: High-Low') }}</option>
                                    <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>{{ __('Newest') }}</option>
                                </select>
                                <svg class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            </div>
                        </div>

                    </div>

                    <!-- Grid -->
                    <div id="product-grid" class="grid grid-cols-2 md:grid-cols-3 gap-6">
                        @include('partials.product-list')
                    </div>

                    <!-- Infinite Scroll Loader -->
                    <div id="infinite-scroll-trigger" class="mt-16 flex flex-col items-center gap-4 {{ $products->hasMorePages() ? '' : 'hidden' }}">
                        <div class="product-loader w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin"></div>
                        <p class="text-[10px] font-extrabold text-gray-400 uppercase tracking-widest">{{ __('Loading more amazing styles...') }}</p>
                    </div>
                </main>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        // Fire Search Event
        @if(request()->has('search') && !empty(request('search')))
        if (typeof fbq === 'function') {
            fbq('track', 'Search', {
                search_string: '{{ addslashes(request("search")) }}'
            });
        }
        if (typeof gtag === 'function') {
            gtag('event', 'search', {
                search_term: '{{ addslashes(request("search")) }}'
            });
        }
        @endif

        let nextPage = 2;
        let hasMore = {{ $products->hasMorePages() ? 'true' : 'false' }};
        let loading = false;
        let selectedSizes = @js($selectedFilters['size']);

        function openFilterDrawer() {
            const drawer = document.getElementById('filterDrawer');
            const backdrop = document.getElementById('filterBackdrop');
            backdrop.classList.remove('hidden');
            void backdrop.offsetWidth;
            backdrop.classList.remove('opacity-0');
            drawer.classList.remove('-translate-x-full');
            document.body.style.overflow = 'hidden';
        }

        function closeFilterDrawer() {
            const drawer = document.getElementById('filterDrawer');
            const backdrop = document.getElementById('filterBackdrop');
            backdrop.classList.add('opacity-0');
            drawer.classList.add('-translate-x-full');
            document.body.style.overflow = '';
            setTimeout(() => {
                backdrop.classList.add('hidden');
            }, 300);
        }

        function syncInputFromSlider() {
            let minVal = parseInt(document.getElementById('slider_min').value);
            let maxVal = parseInt(document.getElementById('slider_max').value);

            if (minVal > maxVal) {
                [minVal, maxVal] = [maxVal, minVal];
            }

            document.getElementById('min_price').value = minVal;
            document.getElementById('max_price').value = maxVal;
            
            updateSliderTrack(minVal, maxVal);
            applyFilters();
        }

        function syncSliderFromInput() {
            let minVal = parseInt(document.getElementById('min_price').value);
            let maxVal = parseInt(document.getElementById('max_price').value);

            const minRange = parseInt(document.getElementById('slider_min').min);
            const maxRange = parseInt(document.getElementById('slider_min').max);

            if (minVal < minRange) minVal = minRange;
            if (maxVal > maxRange) maxVal = maxRange;

            document.getElementById('slider_min').value = minVal;
            document.getElementById('slider_max').value = maxVal;
            
            updateSliderTrack(minVal, maxVal);
            applyFilters();
        }

        function updateSliderTrack(minVal, maxVal) {
            const minRange = parseInt(document.getElementById('slider_min').min);
            const maxRange = parseInt(document.getElementById('slider_min').max);
            
            const left = ((minVal - minRange) / (maxRange - minRange)) * 100;
            const right = 100 - (((maxVal - minRange) / (maxRange - minRange)) * 100);
            
            const track = document.getElementById('slider-track');
            track.style.left = left + '%';
            track.style.right = right + '%';
        }

        // Initialize track on load
        window.addEventListener('load', () => {
            const min = parseInt(document.getElementById('min_price').value);
            const max = parseInt(document.getElementById('max_price').value);
            updateSliderTrack(min, max);
        });

        function toggleFilter(type, value) {
            if (type === 'size') {
                const index = selectedSizes.indexOf(value);
                const btn = document.querySelector(`.size-filter-btn[data-size="${value}"]`);
                if (index > -1) {
                    selectedSizes.splice(index, 1);
                    btn.classList.remove('bg-primary', 'border-primary', 'text-white', 'shadow-lg', 'shadow-primary/20', 'scale-95');
                    btn.classList.add('bg-white', 'border-gray-100', 'text-gray-500');
                } else {
                    selectedSizes.push(value);
                    btn.classList.add('bg-primary', 'border-primary', 'text-white', 'shadow-lg', 'shadow-primary/20', 'scale-95');
                    btn.classList.remove('bg-white', 'border-gray-100', 'text-gray-500');
                }
            }
            applyFilters();
        }

        function applyFilters() {
            const colors = Array.from(document.querySelectorAll('input[name="color_filter"]:checked')).map(cb => cb.value);
            const minPrice = document.getElementById('min_price').value;
            const maxPrice = document.getElementById('max_price').value;
            const sortBy = document.getElementById('sort_by').value;

            const params = new URLSearchParams(window.location.search);
            
            if (selectedSizes.length > 0) params.set('size', selectedSizes.join(','));
            else params.delete('size');

            if (colors.length > 0) params.set('color', colors.join(','));
            else params.delete('color');

            if (minPrice) params.set('min_price', minPrice);
            else params.delete('min_price');

            if (maxPrice) params.set('max_price', maxPrice);
            else params.delete('max_price');

            if (sortBy !== 'default') params.set('sort', sortBy);
            else params.delete('sort');

            params.delete('page');

            const newUrl = `${window.location.pathname}?${params.toString()}`;
            history.pushState({}, '', newUrl);

            // Fetch new results via AJAX
            loading = true;
            document.getElementById('product-grid').style.opacity = '0.5';

            fetch(newUrl, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(response => response.json())
            .then(data => {
                const grid = document.getElementById('product-grid');
                grid.innerHTML = data.html;
                grid.style.opacity = '1';
                
                document.getElementById('showing-results').innerHTML = `{{ __('Showing') }} 1–${data.lastItem || 0} {{ __('of') }} <span class="text-primary">${data.total}</span> {{ __('results') }}`;
                
                nextPage = 2;
                hasMore = data.hasMore;
                loading = false;

                const loader = document.getElementById('infinite-scroll-trigger');
                if (hasMore) loader.classList.remove('hidden');
                else loader.classList.add('hidden');
            })
            .catch(error => {
                console.error('Error applying filters:', error);
                loading = false;
                document.getElementById('product-grid').style.opacity = '1';
            });
        }

        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting && hasMore && !loading) {
                loadMoreProducts();
            }
        }, { threshold: 0.1 });

        const loader = document.getElementById('infinite-scroll-trigger');
        if (loader) observer.observe(loader);

        function loadMoreProducts() {
            loading = true;
            const currentUrl = new URL(window.location.href);
            currentUrl.searchParams.set('page', nextPage);

            fetch(currentUrl.toString(), {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('product-grid').insertAdjacentHTML('beforeend', data.html);
                document.getElementById('showing-results').innerHTML = `Showing 1–${data.lastItem || 0} of <span class="text-primary">${data.total}</span> results`;
                
                nextPage++;
                hasMore = data.hasMore;
                loading = false;

                if (!hasMore) {
                    document.getElementById('infinite-scroll-trigger').classList.add('hidden');
                }
            })
            .catch(error => {
                console.error('Error loading more products:', error);
                loading = false;
            });
        }
    </script>
    @endpush
            </div>
        </div>
    </div>
</x-layout>