@extends('layouts.app')

@section('title', 'TemTechnik | ' . __('general.page_title_products'))

@section('content')
<div class="min-h-[60vh] py-12 flex flex-col items-center justify-center bg-gradient-to-br from-indigo-100 via-white to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
    <div class="w-full px-2 sm:px-4">
        @if(request('search'))
            <div class="mb-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                            {{ __('general.search_results_for', ['query' => request('search')]) }}
                        </h1>
                        <p class="text-gray-700 dark:text-gray-300 mt-1">
                            {{ __('general.found_products_count', ['count' => $products->total()]) }}
                        </p>
                    </div>
                    <a href="{{ route('products.index', ['lang' => app()->getLocale()]) }}" class="text-primary hover:text-orange-700 font-medium transition">
                        {{ __('general.clear_search') }}
                    </a>
                </div>
            </div>
        @endif
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 bg-transparent" x-data="{ showFilters: false }">
            <!-- Mobile Filters Button -->
            <div class="md:hidden mb-4 flex justify-end">
                <button @click="showFilters = true" class="bg-primary text-white px-4 py-2 rounded-lg font-semibold shadow">
                    <svg class="inline w-5 h-5 mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 6a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"/></svg>
                    {{ __('general.filters') }}
                </button>
            </div>
            <!-- Filter Panel -->
            <aside class="md:col-span-1">
                <!-- Desktop: always visible -->
                <div class="hidden md:block">
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 mb-4">
                        <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">{{ __('general.filters') }}</h2>
                        <form method="GET" action="{{ route('products.index', ['lang' => app()->getLocale()]) }}" class="space-y-6">
                            <div>
                                <label for="search" class="block text-sm font-medium text-gray-900 dark:text-gray-200">{{ __('general.search_products') }}</label>
                                <input id="search" name="search" type="text" placeholder="{{ __('general.search_placeholder') }}" value="{{ request('search') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            </div>
                            <button type="submit" class="w-full bg-primary hover:bg-orange-700 text-white font-semibold py-2 rounded-lg shadow transition">{{ __('general.search') }}</button>
                            <div>
                                <label for="category" class="block text-sm font-medium text-gray-900 dark:text-gray-200">{{ __('general.category') }}</label>
                                <select id="category" name="category[]" multiple class="js-choices choices-dark mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    @foreach($categories as $category)
                                        <option value="{{ $category->slug }}" {{ (collect(request('category'))->contains($category->slug)) ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="subcategory" class="block text-sm font-medium text-gray-900 dark:text-gray-200">{{ __('general.subcategory') }}</label>
                                @php
                                $subcategoryJsArray = $subcategories->map(function($subcat) {
                                    return [
                                        'id' => $subcat->id,
                                        'name' => $subcat->getTranslation('name', app()->getLocale()),
                                        'category_slug' => $subcat->category ? $subcat->category->slug : '',
                                        'selected' => in_array($subcat->id, (array) request('subcategory', [])),
                                    ];
                                })->values();
                                @endphp
                                <script>
                                window.allSubcategories = @json($subcategoryJsArray);
                                </script>
                                <select id="subcategory" name="subcategory[]" multiple class="js-choices choices-dark mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white" disabled>
                                </select>
                            </div>
                            <div>
                                <label for="vendor" class="block text-sm font-medium text-gray-900 dark:text-gray-200">{{ __('general.vendor') }}</label>
                                <select id="vendor" name="vendor[]" multiple class="js-choices choices-dark mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    @foreach($vendors as $vendor)
                                        <option value="{{ $vendor->id }}" {{ (collect(request('vendor'))->contains($vendor->id)) ? 'selected' : '' }}>
                                            {{ $vendor->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="flex gap-2">
                                <div class="w-1/2">
                                    <label for="min_price" class="block text-sm font-medium text-gray-900 dark:text-gray-200">{{ __('general.min_price') }}</label>
                                    <input id="min_price" name="min_price" type="number" value="{{ request('min_price', 0) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                </div>
                                <div class="w-1/2">
                                    <label for="max_price" class="block text-sm font-medium text-gray-900 dark:text-gray-200">{{ __('general.max_price') }}</label>
                                    <input id="max_price" name="max_price" type="number" value="{{ request('max_price', 10000) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-900 dark:text-gray-200">{{ __('general.price_range') }}</label>
                                <div id="price-slider" class="my-4"></div>
                                <div class="flex justify-between text-xs text-gray-600 dark:text-gray-300 mt-1">
                                    <span id="range_min_label">{{ request('min_price', 0) }}</span>
                                    <span id="range_max_label">{{ request('max_price', 10000) }}</span>
                                </div>
                            </div>
                            <div>
                                <label for="sort" class="block text-sm font-medium text-gray-900 dark:text-gray-200">{{ __('general.sort_by') }}</label>
                                <select id="sort" name="sort" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    <option value="latest" {{ request('sort', 'latest') == 'latest' ? 'selected' : '' }}>{{ __('general.latest') }}</option>
                                    <option value="name" {{ request('sort') == 'name' ? 'selected' : '' }}>{{ __('general.name_a_z') }}</option>
                                    <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>{{ __('general.price_low_to_high') }}</option>
                                    <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>{{ __('general.price_high_to_low') }}</option>
                                    <option value="featured" {{ request('sort') == 'featured' ? 'selected' : '' }}>{{ __('general.featured') }}</option>
                                </select>
                            </div>
                            <div class="flex gap-2 mt-4">
                                <button type="submit" class="w-1/2 bg-primary hover:bg-orange-700 text-white font-semibold py-2 rounded-lg shadow transition">{{ __('general.apply') }}</button>
                                <a href="{{ route('products.index', ['lang' => app()->getLocale()]) }}" class="w-1/2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 rounded-lg shadow transition text-center">{{ __('general.clear') }}</a>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Mobile: overlay modal -->
                <div x-show="showFilters" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 md:hidden" style="display: none;" @click.self="showFilters = false" tabindex="-1">
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 w-11/12 max-w-sm relative overflow-y-auto max-h-[90vh]">
                        <button @click="showFilters = false" class="absolute top-3 right-3 text-gray-500 hover:text-primary text-xl font-bold">&times;</button>
                        <h2 class="text-lg font-bold mb-4 text-gray-900 dark:text-white pr-8">{{ __('general.filters') }}</h2>
                        <form method="GET" action="{{ route('products.index', ['lang' => app()->getLocale()]) }}" class="space-y-4">
                            <!-- Search -->
                            <div>
                                <label for="mobile-search" class="block text-sm font-medium text-gray-900 dark:text-gray-200 mb-1">{{ __('general.search_products') }}</label>
                                <input id="mobile-search" name="search" type="text" placeholder="{{ __('general.search_placeholder') }}" value="{{ request('search') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            </div>

                            <!-- Category -->
                            <div>
                                <label for="mobile-category" class="block text-sm font-medium text-gray-900 dark:text-gray-200 mb-1">{{ __('general.category') }}</label>
                                <select id="mobile-category" name="category[]" multiple class="js-choices choices-dark w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    @foreach($categories as $category)
                                        <option value="{{ $category->slug }}" {{ (collect(request('category'))->contains($category->slug)) ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Subcategory -->
                            <div>
                                <label for="mobile-subcategory" class="block text-sm font-medium text-gray-900 dark:text-gray-200 mb-1">{{ __('general.subcategory') }}</label>
                                <select id="mobile-subcategory" name="subcategory[]" multiple class="js-choices choices-dark w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white" disabled>
                                </select>
                            </div>

                            <!-- Vendor -->
                            <div>
                                <label for="mobile-vendor" class="block text-sm font-medium text-gray-900 dark:text-gray-200 mb-1">{{ __('general.vendor') }}</label>
                                <select id="mobile-vendor" name="vendor[]" multiple class="js-choices choices-dark w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    @foreach($vendors as $vendor)
                                        <option value="{{ $vendor->id }}" {{ (collect(request('vendor'))->contains($vendor->id)) ? 'selected' : '' }}>
                                            {{ $vendor->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Price Range -->
                            <div>
                                <label class="block text-sm font-medium text-gray-900 dark:text-gray-200 mb-2">{{ __('general.price_range') }}</label>
                                <div class="flex gap-2 mb-2">
                                    <div class="flex-1">
                                        <input id="mobile-min-price" name="min_price" type="number" value="{{ request('min_price', 0) }}" placeholder="Min" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    </div>
                                    <div class="flex-1">
                                        <input id="mobile-max-price" name="max_price" type="number" value="{{ request('max_price', 10000) }}" placeholder="Max" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    </div>
                                </div>
                                <div id="mobile-price-slider" class="my-3"></div>
                                <div class="flex justify-between text-xs text-gray-600 dark:text-gray-300">
                                    <span id="mobile-range-min-label">{{ request('min_price', 0) }}</span>
                                    <span id="mobile-range-max-label">{{ request('max_price', 10000) }}</span>
                                </div>
                            </div>

                            <!-- Sort -->
                            <div>
                                <label for="mobile-sort" class="block text-sm font-medium text-gray-900 dark:text-gray-200 mb-1">{{ __('general.sort_by') }}</label>
                                <select id="mobile-sort" name="sort" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-sm bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    <option value="latest" {{ request('sort', 'latest') == 'latest' ? 'selected' : '' }}>{{ __('general.latest') }}</option>
                                    <option value="name" {{ request('sort') == 'name' ? 'selected' : '' }}>{{ __('general.name_a_z') }}</option>
                                    <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>{{ __('general.price_low_to_high') }}</option>
                                    <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>{{ __('general.price_high_to_low') }}</option>
                                    <option value="featured" {{ request('sort') == 'featured' ? 'selected' : '' }}>{{ __('general.featured') }}</option>
                                </select>
                            </div>

                            <!-- Action Buttons -->
                            <div class="flex gap-3 pt-2">
                                <button type="submit" class="flex-1 bg-primary hover:bg-orange-700 text-white font-semibold py-3 rounded-lg shadow transition">{{ __('general.apply') }}</button>
                                <a href="{{ route('products.index', ['lang' => app()->getLocale()]) }}" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-3 rounded-lg shadow transition text-center flex items-center justify-center">{{ __('general.clear') }}</a>
                            </div>
                        </form>
                    </div>
                </div>
            </aside>
            <main class="md:col-span-3">
                <div class="flex items-center justify-between mb-6">
                    <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white tracking-tight relative inline-block">
                        <span class="relative z-10">{{ __('general.products') }}</span>
                        <span class="absolute left-1/2 -bottom-2 w-24 h-1 bg-primary rounded-full -translate-x-1/2 z-0"></span>
                    </h1>
                </div>
                @if($products->count() > 0)
                    <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
                        @foreach($products as $product)
                            <x-product-card :product="$product"/>
                        @endforeach
                    </div>
                    <div class="mt-8">
                        {{ $products->withQueryString()->links() }}
                    </div>
                @else
                    <div class="flex flex-col items-center justify-center py-24">
                        <svg class="w-20 h-20 text-primary mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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>
                        <div class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-2">{{ __('general.no_products_found') }}</div>
                        <div class="text-gray-600 dark:text-gray-300 mb-4">{{ __('general.no_products_match_search', ['search' => request('search')]) }}</div>
                        <a href="{{ route('products.index', ['lang' => app()->getLocale()]) }}" class="bg-primary hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-lg shadow transition">{{ __('general.view_all_products') }}</a>
                    </div>
                @endif
            </main>
        </div>
    </div>
</div>
@endsection

@push('head')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ url('/') }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ __('general.all_products') }}",
      "item": "{{ url()->current() }}"
    }
  ]
}
</script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nouislider@15.7.1/dist/nouislider.min.css" />
    <style>
        /* Custom noUiSlider styles for a modern, slim look */
        #price-slider {
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            padding: 0 0.5rem;
        }
        .noUi-target {
            background: transparent;
            border: none;
            box-shadow: none;
            height: 6px;
        }
        .noUi-base {
            height: 6px;
        }
        .noUi-connects {
            background: #E8451F; /* orange */
            border-radius: 3px;
        }
        .noUi-connect {
            background: #E8451F; /* orange */
        }
        .noUi-handle {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #E8451F;
            box-shadow: 0 2px 8px rgba(232,69,31,0.15);
            top: -7px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        /* Choices.js dark mode support */
        .choices-dark .choices__inner {
            background-color: #23272f !important;
            color: #fff !important;
            border-color: #23272f !important;
        }
        .choices-dark .choices__list--dropdown,
        .choices-dark .choices__list[aria-expanded] {
            background-color: #23272f !important;
            color: #fff !important;
        }
        .choices-dark .choices__item--selectable.is-highlighted {
            background-color: #E8451F !important;
            color: #fff !important;
        }
        .choices-dark .choices__item--choice {
            color: #fff !important;
        }
        .choices-dark .choices__button {
            color: #fff !important;
        }
        /* Force Choices.js input and dropdown backgrounds to match search bar */
        .choices__inner,
        .choices__input,
        .choices__list--dropdown,
        .choices__list[aria-expanded] {
            background-color: #f9fafb !important; /* Tailwind bg-gray-50 */
            color: #111827 !important; /* Tailwind text-gray-900 */
            border-radius: 0.375rem !important; /* Tailwind rounded-md */
            border: 1px solid #d1d5db !important; /* Tailwind border-gray-300 */
        }
        .dark .choices__inner,
        .dark .choices__input,
        .dark .choices__list--dropdown,
        .dark .choices__list[aria-expanded] {
            background-color: #374151 !important; /* Tailwind bg-gray-700 */
            color: #fff !important;
            border-radius: 0.375rem !important; /* Tailwind rounded-md */
            border: 1px solid #374151 !important; /* Tailwind border-gray-700 */
        }
        .dark .choices__item--selectable,
        .dark .choices__item--choice {
            color: #fff !important;
        }
        .dark .choices__item--selectable.is-highlighted {
            background-color: #E8451F !important;
            color: #fff !important;
        }
        .choices__list--multiple .choices__item {
            background-color: #E8451F !important;
            color: #fff !important;
            border: none !important;
        }
        .choices-dark .choices__list--multiple .choices__item {
            background-color: #E8451F !important;
            color: #fff !important;
            border: none !important;
        }
        /* Disabled Choices.js styling */
        .choices.is-disabled .choices__inner {
            background-color: #e5e7eb !important;
            color: #6b7280 !important;
            cursor: not-allowed !important;
            opacity: 0.8 !important;
            border: 2px dashed #9ca3af !important;
            position: relative !important;
        }
        .dark .choices.is-disabled .choices__inner {
            background-color: #374151 !important;
            color: #4b5563 !important;
            opacity: 0.8 !important;
            border: 2px dashed #4b5563 !important;
        }
        .choices.is-disabled .choices__input {
            background-color: transparent !important;
            color: #6b7280 !important;
            cursor: not-allowed !important;
        }
        .dark .choices.is-disabled .choices__input {
            color: #4b5563 !important;
            cursor: not-allowed !important;
        }
        .choices.is-disabled .choices__list--dropdown {
            display: none !important;
        }
        .choices.is-disabled .choices__list--single {
            color: #6b7280 !important;
        }
        .dark .choices.is-disabled .choices__list--single {
            color: #4b5563 !important;
        }
        /* Add a subtle border animation to draw attention */
        .choices.is-disabled .choices__inner {
            animation: disabledPulse 3s ease-in-out infinite;
        }
        @keyframes disabledPulse {
            0%, 100% { border-color: #9ca3af; }
            50% { border-color: #6b7280; }
        }
        .dark .choices.is-disabled .choices__inner {
            animation: disabledPulseDark 3s ease-in-out infinite;
        }
        @keyframes disabledPulseDark {
            0%, 100% { border-color: #4b5563; }
            50% { border-color: #6b7280; }
        }
    </style>
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/nouislider@15.7.1/dist/nouislider.min.js"></script>
<script>
    document.querySelectorAll('.price-stepper').forEach(button => {
        button.addEventListener('click', function() {
            const inputId = this.dataset.input;
            const step = parseInt(this.dataset.step);
            const input = document.getElementById(inputId);
            let currentValue = parseInt(input.value) || 0;
            input.value = Math.max(0, currentValue + step);
        });
    });

    // REMOVED: Old Choices.js initialization - now handled in the main event listener below

    document.addEventListener('DOMContentLoaded', function() {
        const minInput = document.getElementById('min_price');
        const maxInput = document.getElementById('max_price');
        const minLabel = document.getElementById('range_min_label');
        const maxLabel = document.getElementById('range_max_label');
        const slider = document.getElementById('price-slider');
        const minValue = parseInt(minInput.value) || 0;
        const maxValue = parseInt(maxInput.value) || 10000;

        if (slider && minInput && maxInput) {
            noUiSlider.create(slider, {
                start: [minValue, maxValue],
                connect: true,
                step: 10,
                range: {
                    'min': 0,
                    'max': 10000
                },
                tooltips: false,
                format: {
                    to: function (value) { return Math.round(value); },
                    from: function (value) { return Number(value); }
                }
            });

            slider.noUiSlider.on('update', function(values, handle) {
                minInput.value = values[0];
                maxInput.value = values[1];
                minLabel.textContent = values[0];
                maxLabel.textContent = values[1];
            });

            minInput.addEventListener('input', function() {
                slider.noUiSlider.set([this.value, null]);
            });
            maxInput.addEventListener('input', function() {
                slider.noUiSlider.set([null, this.value]);
            });
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        const choicesInstances = {};
        
        const selectsToInitialize = ['#category', '#subcategory', '#vendor', '#tags', '#mobile-category', '#mobile-subcategory', '#mobile-vendor'];
        selectsToInitialize.forEach(function(selector) {
            const el = document.querySelector(selector);
            if (el && !el.classList.contains('choices-initialized')) {
                const isSubcategory = el.id === 'subcategory' || el.id === 'mobile-subcategory';
                const categorySelect = el.id === 'subcategory' ? document.querySelector('#category') : document.querySelector('#mobile-category');
                const isDisabled = isSubcategory && (!categorySelect || !categorySelect.selectedOptions.length);
                
                const choices = new Choices(el, {
                    removeItemButton: true,
                    shouldSort: false,
                    placeholder: true,
                    placeholderValue: isSubcategory ? '{{ __('general.select_category_first') }}' : (el.getAttribute('placeholder') || ''),
                    searchPlaceholderValue: 'Search...',
                    noResultsText: '{{ __('general.no_subcategories_available') }}'
                });
                
                if (isSubcategory && isDisabled) {
                    choices.disable();
                }
                
                el.classList.add('choices-initialized');
                choicesInstances[el.id] = choices;
            } else if (el && el.classList.contains('choices-initialized')) {
                if (el.choices) {
                    choicesInstances[el.id] = el.choices;
                }
            }
        });
        
        const categorySelect = document.getElementById('category');
        const subcategorySelect = document.getElementById('subcategory');
        
        if (!categorySelect || !subcategorySelect) {
            return;
        }
        
        const subcategoryChoices = choicesInstances['subcategory'];
        const categoryChoices = choicesInstances['category'];
        
        if (!subcategoryChoices) {
            const subcategoryElement = document.getElementById('subcategory');
            if (subcategoryElement && subcategoryElement.choices) {
                choicesInstances['subcategory'] = subcategoryElement.choices;
            } else {
                return;
            }
        }
        
        function getSelectedCategorySlugs() {
            const categoryChoices = choicesInstances['category'];
            if (!categoryChoices) {
                return Array.from(categorySelect.selectedOptions).map(opt => opt.value);
            }
            
            const selectedValues = categoryChoices.getValue(true);
            
            if (!selectedValues || selectedValues.length === 0) {
                return [];
            }
            
            const slugs = selectedValues.map(item => {
                return typeof item === 'string' ? item : item.value;
            });
            return slugs;
        }
        
        function getInitialSelectedSubcategories() {
            const urlParams = new URLSearchParams(window.location.search);
            const subcategoryParam = urlParams.getAll('subcategory[]');
            if (subcategoryParam && subcategoryParam.length > 0) {
                return subcategoryParam;
            }
            return [];
        }
        
        function filterSubcategories() {
            const selectedCategories = getSelectedCategorySlugs();
            const initialSelectedSubcategories = getInitialSelectedSubcategories();
            
            const allSubcategoriesRaw = window.allSubcategories || [];
            const allSubcategories = allSubcategoriesRaw.filter((subcat, index, self) => 
                index === self.findIndex(s => s.id === subcat.id)
            );
            
            const currentSubcategoryChoices = choicesInstances['subcategory'];
            
            if (!currentSubcategoryChoices) {
                return;
            }
            
            // If we have pre-selected subcategories but no categories selected,
            // we need to find and select the parent categories
            if (initialSelectedSubcategories.length > 0 && selectedCategories.length === 0) {
                const requiredCategories = new Set();
                initialSelectedSubcategories.forEach(subcatId => {
                    const subcat = allSubcategories.find(s => s.id.toString() === subcatId);
                    if (subcat && subcat.category_slug) {
                        requiredCategories.add(subcat.category_slug);
                    }
                });
                
                // Auto-select the required categories
                if (requiredCategories.size > 0) {
                    const categoryChoices = choicesInstances['category'];
                    if (categoryChoices) {
                        // Get the existing category options and mark the required ones as selected
                        const existingChoices = categoryChoices.choices;
                        const updatedChoices = existingChoices.map(choice => ({
                            value: choice.value,
                            label: choice.label,
                            selected: requiredCategories.has(choice.value)
                        }));
                        categoryChoices.setChoices(updatedChoices, 'value', 'label', true);
                    }
                    
                    // Update selected categories for filtering
                    selectedCategories.push(...Array.from(requiredCategories));
                }
            }
            
            if (selectedCategories.length === 0) {
                currentSubcategoryChoices.disable();
                currentSubcategoryChoices.clearChoices();
                return;
            } else {
                currentSubcategoryChoices.enable();
            }
            
            let filteredSubcategories;
            
            filteredSubcategories = allSubcategories.filter(subcat => {
                const belongsToSelectedCategory = selectedCategories.includes(subcat.category_slug);
                return belongsToSelectedCategory;
            });
            
            try {
                currentSubcategoryChoices.clearChoices();
            } catch (error) {
                return;
            }
            
            if (filteredSubcategories.length > 0) {
                const choicesData = filteredSubcategories.map(subcat => ({
                    value: subcat.id.toString(),
                    label: subcat.name,
                    selected: initialSelectedSubcategories.includes(subcat.id.toString())
                }));
                
                try {
                    currentSubcategoryChoices.setChoices(choicesData, 'value', 'label', true);
                } catch (error) {
                    console.error('Error setting subcategory choices:', error);
                }
            }
            

        }
        
        if (categoryChoices) {
            categoryChoices.passedElement.element.addEventListener('change', filterSubcategories);
        } else {
            categorySelect.addEventListener('change', filterSubcategories);
        }
        
        // Always run initial filter to set up the dropdown properly
        filterSubcategories();

        // Mobile-specific functionality
        // Mobile price slider
        const mobileSlider = document.getElementById('mobile-price-slider');
        const mobileMinInput = document.getElementById('mobile-min-price');
        const mobileMaxInput = document.getElementById('mobile-max-price');
        const mobileMinLabel = document.getElementById('mobile-range-min-label');
        const mobileMaxLabel = document.getElementById('mobile-range-max-label');

        if (mobileSlider && mobileMinInput && mobileMaxInput) {
            const mobileMinValue = parseInt(mobileMinInput.value) || 0;
            const mobileMaxValue = parseInt(mobileMaxInput.value) || 10000;

            noUiSlider.create(mobileSlider, {
                start: [mobileMinValue, mobileMaxValue],
                connect: true,
                step: 10,
                range: {
                    'min': 0,
                    'max': 10000
                },
                tooltips: false,
                format: {
                    to: function (value) { return Math.round(value); },
                    from: function (value) { return Number(value); }
                }
            });

            mobileSlider.noUiSlider.on('update', function(values, handle) {
                mobileMinInput.value = values[0];
                mobileMaxInput.value = values[1];
                mobileMinLabel.textContent = values[0];
                mobileMaxLabel.textContent = values[1];
            });

            mobileMinInput.addEventListener('input', function() {
                mobileSlider.noUiSlider.set([this.value, null]);
            });
            mobileMaxInput.addEventListener('input', function() {
                mobileSlider.noUiSlider.set([null, this.value]);
            });
        }

        // Mobile subcategory filtering
        const mobileCategoryChoices = choicesInstances['mobile-category'];
        const mobileSubcategoryChoices = choicesInstances['mobile-subcategory'];

        if (mobileCategoryChoices && mobileSubcategoryChoices) {
            function filterMobileSubcategories() {
                console.log('Filtering mobile subcategories...');
                
                // Get selected categories from Choices.js
                const selectedValues = mobileCategoryChoices.getValue(true);
                console.log('Raw selected values:', selectedValues);
                
                // Handle different data structures from Choices.js
                let selectedCategories = [];
                if (selectedValues && selectedValues.length > 0) {
                    selectedCategories = selectedValues.map(item => {
                        if (typeof item === 'string') {
                            return item;
                        } else if (item && item.value) {
                            return item.value;
                        } else if (item && item.id) {
                            return item.id;
                        }
                        return null;
                    }).filter(cat => cat !== null);
                }
                
                console.log('Processed selected categories:', selectedCategories);
                
                const initialSelectedSubcategories = getInitialSelectedSubcategories();
                const allSubcategoriesRaw = window.allSubcategories || [];
                const allSubcategories = allSubcategoriesRaw.filter((subcat, index, self) => 
                    index === self.findIndex(s => s.id === subcat.id)
                );

                if (selectedCategories.length === 0) {
                    console.log('No categories selected, disabling subcategory');
                    mobileSubcategoryChoices.disable();
                    mobileSubcategoryChoices.clearChoices();
                    return;
                } else {
                    console.log('Categories selected, enabling subcategory');
                    mobileSubcategoryChoices.enable();
                }

                const filteredSubcategories = allSubcategories.filter(subcat => {
                    return selectedCategories.includes(subcat.category_slug);
                });
                
                console.log('Filtered subcategories:', filteredSubcategories);

                if (filteredSubcategories.length > 0) {
                    const choicesData = filteredSubcategories.map(subcat => ({
                        value: subcat.id.toString(),
                        label: subcat.name,
                        selected: initialSelectedSubcategories.includes(subcat.id.toString())
                    }));
                    
                    try {
                        // Clear choices first to prevent duplication
                        mobileSubcategoryChoices.clearChoices();
                        mobileSubcategoryChoices.setChoices(choicesData, 'value', 'label', true);
                        console.log('Set mobile subcategory choices successfully');
                    } catch (error) {
                        console.error('Error setting mobile subcategory choices:', error);
                    }
                } else {
                    console.log('No subcategories found, enabling empty dropdown');
                    mobileSubcategoryChoices.enable();
                    mobileSubcategoryChoices.clearChoices();
                }
            }

            // Add event listener to the Choices.js instance
            mobileCategoryChoices.passedElement.element.addEventListener('change', filterMobileSubcategories);
            
            // Also listen for Choices.js internal events
            mobileCategoryChoices.passedElement.element.addEventListener('choice', filterMobileSubcategories);
            mobileCategoryChoices.passedElement.element.addEventListener('removeItem', filterMobileSubcategories);
            
            // Alternative: Listen to the underlying select element directly
            const mobileCategorySelect = mobileCategoryChoices.passedElement.element;
            mobileCategorySelect.addEventListener('change', function() {
                console.log('Direct select change detected');
                const selectedOptions = Array.from(this.selectedOptions);
                const selectedSlugs = selectedOptions.map(opt => opt.value);
                console.log('Direct selected slugs:', selectedSlugs);
                
                if (selectedSlugs.length > 0) {
                    const allSubcategoriesRaw = window.allSubcategories || [];
                    // Remove duplicates from subcategories
                    const allSubcategories = allSubcategoriesRaw.filter((subcat, index, self) => 
                        index === self.findIndex(s => s.id === subcat.id)
                    );
                    const filteredSubcategories = allSubcategories.filter(subcat => {
                        return selectedSlugs.includes(subcat.category_slug);
                    });
                    
                    console.log('Direct filtered subcategories:', filteredSubcategories);
                    
                    if (filteredSubcategories.length > 0) {
                        const choicesData = filteredSubcategories.map(subcat => ({
                            value: subcat.id.toString(),
                            label: subcat.name,
                            selected: false
                        }));
                        
                        mobileSubcategoryChoices.enable();
                        // Clear choices first to prevent duplication
                        try {
                            mobileSubcategoryChoices.clearChoices();
                        } catch (error) {
                            console.error('Error clearing mobile subcategory choices:', error);
                        }
                        
                        try {
                            mobileSubcategoryChoices.setChoices(choicesData, 'value', 'label', true);
                            console.log('Set subcategories via direct method');
                        } catch (error) {
                            console.error('Error setting mobile subcategory choices:', error);
                        }
                    } else {
                        mobileSubcategoryChoices.enable();
                        mobileSubcategoryChoices.clearChoices();
                    }
                } else {
                    mobileSubcategoryChoices.disable();
                    mobileSubcategoryChoices.clearChoices();
                }
            });
            
            // Initialize mobile subcategories
            setTimeout(() => {
                console.log('Initializing mobile subcategories...');
                filterMobileSubcategories();
            }, 200);
        } else {
            console.log('Mobile choices instances not found:', {
                category: !!mobileCategoryChoices,
                subcategory: !!mobileSubcategoryChoices
            });
        }

        // Fallback: Direct event listener on mobile category select
        const mobileCategoryElement = document.getElementById('mobile-category');
        const mobileSubcategoryElement = document.getElementById('mobile-subcategory');
        
        if (mobileCategoryElement && mobileSubcategoryElement) {
            console.log('Setting up fallback mobile event listeners');
            
            function handleMobileCategoryChange() {
                console.log('Mobile category changed via fallback');
                const selectedOptions = Array.from(mobileCategoryElement.selectedOptions);
                const selectedCategories = selectedOptions.map(opt => opt.value);
                
                console.log('Selected categories (fallback):', selectedCategories);
                
                if (selectedCategories.length === 0) {
                    mobileSubcategoryElement.disabled = true;
                    mobileSubcategoryElement.innerHTML = '';
                } else {
                    mobileSubcategoryElement.disabled = false;
                    
                    const allSubcategoriesRaw = window.allSubcategories || [];
                    const filteredSubcategories = allSubcategoriesRaw.filter(subcat => {
                        return selectedCategories.includes(subcat.category_slug);
                    });
                    
                    console.log('Filtered subcategories (fallback):', filteredSubcategories);
                    
                    // Clear existing options
                    mobileSubcategoryElement.innerHTML = '';
                    
                    // Add new options
                    filteredSubcategories.forEach(subcat => {
                        const option = document.createElement('option');
                        option.value = subcat.id.toString();
                        option.textContent = subcat.name;
                        mobileSubcategoryElement.appendChild(option);
                    });
                }
            }
            
            mobileCategoryElement.addEventListener('change', handleMobileCategoryChange);
            
            // Initial call
            setTimeout(() => {
                handleMobileCategoryChange();
            }, 300);
        }
    });
</script>
@endpush