<style>
    input[type=range]::-webkit-slider-thumb {
        pointer-events: all;
        width: 24px;
        height: 24px;
        -webkit-appearance: none;
    }
    #filter-panel::-webkit-scrollbar { display: none; }
</style>


<section id="filter-panel"
    class="bg-white lg:w-[280px] w-full min-h-screen h-screen overflow-y-auto p-4 pb-24 lg:pb-4 lg:p-0 select-none"
    x-data="filterData()">

    <div id="filters_actions" class="grid grid-cols-2 gap-2 mb-4" x-cloak x-show="activeFilters.length >= 1">
        <button class="bg-slate-100 hover:bg-slate-200 text-slate-600 lg:text-sm text-base font-medium px-4 py-2 rounded-md w-full relative" @click="resetFilters">Reset</button>
        <button class="bg-primary-dark hover:bg-primary text-white lg:text-sm text-base font-medium px-4 py-2 rounded-md w-full relative" @click="applyFilters">Applica</button>
    </div>

    <div id="active_filters" class="flex flex-wrap gap-2 mb-2">
        <template x-for="filter in activeFilters" :key="filter">
            <div class="chip bg-slate-100 border text-slate-600 px-2 py-1 rounded-full text-xs flex items-center">
                <span x-text="filter"></span>
                <button @click="removeFilter(filter)" class="ml-2 text-slate-600">x</button>
            </div>
        </template>
    </div>

    <div x-data="{ open: true }" class="border-b">
        <button x-on:click="open = ! open" class="text-slate-900 rounded-md py-2 lg:text-sm text-base font-medium flex items-center justify-between w-full">Prezzo</button>
        <div x-show="open" x-transition class="mb-6">
            <div x-data="rangePrice({ min: , max:  })" class="relative max-w-xl w-full">
    <div class="mt-4">
        <!-- Range inputs -->
        <input
            type="range"
            aria-label="Min price value"
            step="1"
            :min="min"
            :max="max"
            @input="mintrigger"
            x-model="minval"
            data-filter-type="price_min" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <input
            type="range"
            aria-label="Max price value"
            step="1"
            :min="min"
            :max="max"
            @input="maxtrigger"
            x-model="maxval"
            data-filter-type="price_max" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <!-- Track -->
        <div class="relative z-10 h-1">
            <div class="absolute inset-0 rounded-md bg-slate-200"></div>
            <div
                class="absolute top-0 bottom-0 rounded-md bg-primary-dark z-20"
                :style="`left: ${minthumb}%; right: ${maxthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`left: ${minthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`right: ${maxthumb}%`"
            ></div>
        </div>
    </div>

    <!-- Value display -->
    <div class="flex items-center pt-5 text-base lg:text-sm">
                Da <strong class="ml-1"><span x-text="minval"></span>&euro;</strong>
        <span class="mx-1">a</span>
        <strong><span x-text="maxval"></span>&euro;</strong>
            </div>
</div>

<script>
    if (typeof window !== 'undefined' && typeof window.formatStorageLabel !== 'function') {
        window.formatStorageLabel = function formatStorageLabel(value, unit = 'GB') {
            const numericValue = typeof value === 'number' ? value : parseFloat(value);
            if (!Number.isFinite(numericValue)) {
                return `${value}${unit}`;
            }

            const normalizedValue = Number.isInteger(numericValue)
                ? numericValue.toString()
                : numericValue.toFixed(1).replace(/\.0$/, '');

            if (numericValue >= 1000) {
                const tbValue = numericValue / 1024;
                const formattedTb = Number.isInteger(tbValue)
                    ? tbValue.toString()
                    : tbValue.toFixed(1).replace(/\.0$/, '');
                return `${formattedTb}tb`;
            }

            return `${normalizedValue}${unit}`;
        };
    }

    function rangePrice({ min, max }) {
                min = parseInt(min);
        max = parseInt(max);
                return {
            min,
            max,
            minval: min,
            maxval: max,
            get minthumb() {
                return ((this.minval - this.min) / (this.max - this.min)) * 100;
            },
            get maxthumb() {
                return 100 - ((this.maxval - this.min) / (this.max - this.min)) * 100;
            },
            mintrigger(e) {
                                this.minval = Math.min(parseInt(e.target.value), this.maxval - 1);
                            },
            maxtrigger(e) {
                                this.maxval = Math.max(parseInt(e.target.value), this.minval + 1);
                            }
        }
    }
</script>
            </div>
    </div>

    <div x-data="{ open: false }" class="border-b">
        <button x-on:click="open = ! open" class="text-slate-900 rounded-md py-2 lg:text-sm text-base font-medium flex items-center justify-between w-full">Brand</button>
        <div x-cloak x-show="open" x-transition class="mb-6">
            <div class="grid grid-cols-2 gap-2">
    </div>        </div>
    </div>

    <div x-data="{ open: false }" class="border-b">
        <button x-on:click="open = ! open" class="text-slate-900 rounded-md py-2 lg:text-sm text-base font-medium flex items-center justify-between w-full">Aspirazione (Pa)</button>
        <div x-cloak x-show="open" x-transition class="mb-6">
            <div x-data="rangeSuction({ min: 0, max: 20000 })" class="relative max-w-xl w-full">
    <div class="mt-4">
        <!-- Range inputs -->
        <input
            type="range"
            aria-label="Min suction value"
            step="100"
            :min="min"
            :max="max"
            @input="mintrigger"
            x-model="minval"
            data-filter-type="suction_min" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <input
            type="range"
            aria-label="Max suction value"
            step="100"
            :min="min"
            :max="max"
            @input="maxtrigger"
            x-model="maxval"
            data-filter-type="suction_max" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <!-- Track -->
        <div class="relative z-10 h-1">
            <div class="absolute inset-0 rounded-md bg-slate-200"></div>
            <div
                class="absolute top-0 bottom-0 rounded-md bg-primary-dark z-20"
                :style="`left: ${minthumb}%; right: ${maxthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`left: ${minthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`right: ${maxthumb}%`"
            ></div>
        </div>
    </div>

    <!-- Value display -->
    <div class="flex items-center pt-5 text-base lg:text-sm">
                Da <strong class="ml-1"><span x-text="minval"></span>Pa</strong>
        <span class="mx-1">a</span>
        <strong><span x-text="maxval"></span>Pa</strong>
            </div>
</div>

<script>
    if (typeof window !== 'undefined' && typeof window.formatStorageLabel !== 'function') {
        window.formatStorageLabel = function formatStorageLabel(value, unit = 'GB') {
            const numericValue = typeof value === 'number' ? value : parseFloat(value);
            if (!Number.isFinite(numericValue)) {
                return `${value}${unit}`;
            }

            const normalizedValue = Number.isInteger(numericValue)
                ? numericValue.toString()
                : numericValue.toFixed(1).replace(/\.0$/, '');

            if (numericValue >= 1000) {
                const tbValue = numericValue / 1024;
                const formattedTb = Number.isInteger(tbValue)
                    ? tbValue.toString()
                    : tbValue.toFixed(1).replace(/\.0$/, '');
                return `${formattedTb}tb`;
            }

            return `${normalizedValue}${unit}`;
        };
    }

    function rangeSuction({ min, max }) {
                min = parseInt(min);
        max = parseInt(max);
                return {
            min,
            max,
            minval: min,
            maxval: max,
            get minthumb() {
                return ((this.minval - this.min) / (this.max - this.min)) * 100;
            },
            get maxthumb() {
                return 100 - ((this.maxval - this.min) / (this.max - this.min)) * 100;
            },
            mintrigger(e) {
                                this.minval = Math.min(parseInt(e.target.value), this.maxval - 100);
                            },
            maxtrigger(e) {
                                this.maxval = Math.max(parseInt(e.target.value), this.minval + 100);
                            }
        }
    }
</script>
            </div>
    </div>

    <div x-data="{ open: false }" class="border-b">
        <button x-on:click="open = ! open" class="text-slate-900 rounded-md py-2 lg:text-sm text-base font-medium flex items-center justify-between w-full">Rumore (dBA)</button>
        <div x-cloak x-show="open" x-transition class="mb-6">
            <div x-data="rangeNoise({ min: 40, max: 80 })" class="relative max-w-xl w-full">
    <div class="mt-4">
        <!-- Range inputs -->
        <input
            type="range"
            aria-label="Min noise value"
            step="0.5"
            :min="min"
            :max="max"
            @input="mintrigger"
            x-model="minval"
            data-filter-type="noise_min" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <input
            type="range"
            aria-label="Max noise value"
            step="0.5"
            :min="min"
            :max="max"
            @input="maxtrigger"
            x-model="maxval"
            data-filter-type="noise_max" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <!-- Track -->
        <div class="relative z-10 h-1">
            <div class="absolute inset-0 rounded-md bg-slate-200"></div>
            <div
                class="absolute top-0 bottom-0 rounded-md bg-primary-dark z-20"
                :style="`left: ${minthumb}%; right: ${maxthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`left: ${minthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`right: ${maxthumb}%`"
            ></div>
        </div>
    </div>

    <!-- Value display -->
    <div class="flex items-center pt-5 text-base lg:text-sm">
                Da <strong class="ml-1"><span x-text="parseFloat(minval).toFixed(1)"></span>dBA</strong>
        <span class="mx-1">a</span>
        <strong><span x-text="parseFloat(maxval).toFixed(1)"></span>dBA</strong>
            </div>
</div>

<script>
    if (typeof window !== 'undefined' && typeof window.formatStorageLabel !== 'function') {
        window.formatStorageLabel = function formatStorageLabel(value, unit = 'GB') {
            const numericValue = typeof value === 'number' ? value : parseFloat(value);
            if (!Number.isFinite(numericValue)) {
                return `${value}${unit}`;
            }

            const normalizedValue = Number.isInteger(numericValue)
                ? numericValue.toString()
                : numericValue.toFixed(1).replace(/\.0$/, '');

            if (numericValue >= 1000) {
                const tbValue = numericValue / 1024;
                const formattedTb = Number.isInteger(tbValue)
                    ? tbValue.toString()
                    : tbValue.toFixed(1).replace(/\.0$/, '');
                return `${formattedTb}tb`;
            }

            return `${normalizedValue}${unit}`;
        };
    }

    function rangeNoise({ min, max }) {
                min = parseFloat(min);
        max = parseFloat(max);
                return {
            min,
            max,
            minval: min,
            maxval: max,
            get minthumb() {
                return ((this.minval - this.min) / (this.max - this.min)) * 100;
            },
            get maxthumb() {
                return 100 - ((this.maxval - this.min) / (this.max - this.min)) * 100;
            },
            mintrigger(e) {
                                this.minval = Math.min(parseFloat(e.target.value), this.maxval - 0.5);
                            },
            maxtrigger(e) {
                                this.maxval = Math.max(parseFloat(e.target.value), this.minval + 0.5);
                            }
        }
    }
</script>
            </div>
    </div>

    <div x-data="{ open: false }" class="border-b">
        <button x-on:click="open = ! open" class="text-slate-900 rounded-md py-2 lg:text-sm text-base font-medium flex items-center justify-between w-full">Autonomia (min)</button>
        <div x-cloak x-show="open" x-transition class="mb-6">
            <div x-data="rangeRuntime({ min: 0, max: 300 })" class="relative max-w-xl w-full">
    <div class="mt-4">
        <!-- Range inputs -->
        <input
            type="range"
            aria-label="Min runtime value"
            step="5"
            :min="min"
            :max="max"
            @input="mintrigger"
            x-model="minval"
            data-filter-type="runtime_min" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <input
            type="range"
            aria-label="Max runtime value"
            step="5"
            :min="min"
            :max="max"
            @input="maxtrigger"
            x-model="maxval"
            data-filter-type="runtime_max" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <!-- Track -->
        <div class="relative z-10 h-1">
            <div class="absolute inset-0 rounded-md bg-slate-200"></div>
            <div
                class="absolute top-0 bottom-0 rounded-md bg-primary-dark z-20"
                :style="`left: ${minthumb}%; right: ${maxthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`left: ${minthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`right: ${maxthumb}%`"
            ></div>
        </div>
    </div>

    <!-- Value display -->
    <div class="flex items-center pt-5 text-base lg:text-sm">
                Da <strong class="ml-1"><span x-text="minval"></span>min</strong>
        <span class="mx-1">a</span>
        <strong><span x-text="maxval"></span>min</strong>
            </div>
</div>

<script>
    if (typeof window !== 'undefined' && typeof window.formatStorageLabel !== 'function') {
        window.formatStorageLabel = function formatStorageLabel(value, unit = 'GB') {
            const numericValue = typeof value === 'number' ? value : parseFloat(value);
            if (!Number.isFinite(numericValue)) {
                return `${value}${unit}`;
            }

            const normalizedValue = Number.isInteger(numericValue)
                ? numericValue.toString()
                : numericValue.toFixed(1).replace(/\.0$/, '');

            if (numericValue >= 1000) {
                const tbValue = numericValue / 1024;
                const formattedTb = Number.isInteger(tbValue)
                    ? tbValue.toString()
                    : tbValue.toFixed(1).replace(/\.0$/, '');
                return `${formattedTb}tb`;
            }

            return `${normalizedValue}${unit}`;
        };
    }

    function rangeRuntime({ min, max }) {
                min = parseInt(min);
        max = parseInt(max);
                return {
            min,
            max,
            minval: min,
            maxval: max,
            get minthumb() {
                return ((this.minval - this.min) / (this.max - this.min)) * 100;
            },
            get maxthumb() {
                return 100 - ((this.maxval - this.min) / (this.max - this.min)) * 100;
            },
            mintrigger(e) {
                                this.minval = Math.min(parseInt(e.target.value), this.maxval - 5);
                            },
            maxtrigger(e) {
                                this.maxval = Math.max(parseInt(e.target.value), this.minval + 5);
                            }
        }
    }
</script>
            </div>
    </div>

    <div x-data="{ open: false }" class="border-b">
        <button x-on:click="open = ! open" class="text-slate-900 rounded-md py-2 lg:text-sm text-base font-medium flex items-center justify-between w-full">Navigazione</button>
        <div x-cloak x-show="open" x-transition class="mb-6">
            <div class="grid grid-cols-1 gap-2">
    </div>        </div>
    </div>

    <div x-data="{ open: false }" class="border-b">
        <button x-on:click="open = ! open" class="text-slate-900 rounded-md py-2 lg:text-sm text-base font-medium flex items-center justify-between w-full">Anno</button>
        <div x-cloak x-show="open" x-transition class="mb-6">
            <div class="grid grid-cols-2 gap-2">
    </div>        </div>
    </div>

        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Mappatura</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Mappatura" data-filter-type="mapping_supported" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Rilevamento tappeti</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Rilevamento tappeti" data-filter-type="carpet_detection" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Evitamento tappeti</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Evitamento tappeti" data-filter-type="carpet_avoidance_mode" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Filtro HEPA</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Filtro HEPA" data-filter-type="hepa_filter" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Filtri lavabili</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Filtri lavabili" data-filter-type="washable_filters" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Evitamento ostacoli</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Evitamento ostacoli" data-filter-type="obstacle_avoidance" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Sensore anticaduta</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Sensore anticaduta" data-filter-type="cliff_detection" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Superamento dislivelli</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Superamento dislivelli" data-filter-type="threshold_crossing_supported" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Zone vietate</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Zone vietate" data-filter-type="no_go_zones" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Svuotamento automatico</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Svuotamento automatico" data-filter-type="auto_empty" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Lavaggio automatico panno</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Lavaggio automatico panno" data-filter-type="auto_mop_wash" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Serbatoio detergente</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Serbatoio detergente" data-filter-type="detergent_tank_present" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>App dedicata</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro App dedicata" data-filter-type="app_supported" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
        <div class="border-b py-2">
        <label class="flex items-center justify-between text-sm font-medium text-slate-900">
            <span>Base inclusa</span>
            <span class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" aria-label="Attiva filtro Base inclusa" data-filter-type="base_included" value="1" @change="updateFilters($event)" class="sr-only peer">
                <span class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></span>
            </span>
        </label>
    </div>
    </section>

<script>
    function filterData() {
        const config = {
            filters: {
                price: { type: 'range', label: 'Prezzo', unit: '\u20AC', min: parseInt(''), max: parseInt('') },
                suction: { type: 'range', label: 'Aspirazione', unit: 'Pa', min: parseInt('0'), max: parseInt('20000') },
                noise: { type: 'range', label: 'Rumore', unit: 'dBA', min: parseFloat('40'), max: parseFloat('80') },
                runtime: { type: 'range', label: 'Autonomia', unit: 'min', min: parseInt('0'), max: parseInt('300') },
                brand: { type: 'checkbox', label: 'Brand', dataType: 'brand' },
                navigation_technology: { type: 'checkbox', label: 'Navigazione', dataType: 'navigation_technology', labelPrefix: true },
                release_year: { type: 'checkbox', label: 'Anno', dataType: 'release_year', labelPrefix: true },
                mapping_supported: { type: 'toggle', label: 'Mappatura' },
                carpet_detection: { type: 'toggle', label: 'Rilevamento tappeti' },
                carpet_avoidance_mode: { type: 'toggle', label: 'Evitamento tappeti' },
                hepa_filter: { type: 'toggle', label: 'Filtro HEPA' },
                washable_filters: { type: 'toggle', label: 'Filtri lavabili' },
                obstacle_avoidance: { type: 'toggle', label: 'Evitamento ostacoli' },
                cliff_detection: { type: 'toggle', label: 'Sensore anticaduta' },
                threshold_crossing_supported: { type: 'toggle', label: 'Superamento dislivelli' },
                no_go_zones: { type: 'toggle', label: 'Zone vietate' },
                auto_empty: { type: 'toggle', label: 'Svuotamento automatico' },
                auto_mop_wash: { type: 'toggle', label: 'Lavaggio automatico panno' },
                detergent_tank_present: { type: 'toggle', label: 'Serbatoio detergente' },
                app_supported: { type: 'toggle', label: 'App dedicata' },
                base_included: { type: 'toggle', label: 'Base inclusa' }
            }
        };

        const filtersDecoded = JSON.parse("\u007B\u007D");

        return {
            activeFilters: [],
            selectedValues: {
                price: { min: config.filters.price.min, max: config.filters.price.max },
                suction: { min: config.filters.suction.min, max: config.filters.suction.max },
                noise: { min: config.filters.noise.min, max: config.filters.noise.max },
                runtime: { min: config.filters.runtime.min, max: config.filters.runtime.max },
                brand: [],
                navigation_technology: [],
                release_year: [],
                mapping_supported: [],
                carpet_detection: [],
                carpet_avoidance_mode: [],
                hepa_filter: [],
                washable_filters: [],
                obstacle_avoidance: [],
                cliff_detection: [],
                threshold_crossing_supported: [],
                no_go_zones: [],
                auto_empty: [],
                auto_mop_wash: [],
                detergent_tank_present: [],
                app_supported: [],
                base_included: []
            },
            isDirty: false,
            init() {
                this.$nextTick(() => this.applyDecodedFilters(filtersDecoded));
            },
            applyDecodedFilters(decoded) {
                if (!decoded) return;
                Object.entries(decoded).forEach(([key, value]) => {
                    const filter = config.filters[key];
                    if (!filter) return;
                    if (filter.type === 'range' && value.min !== undefined) {
                        this.selectedValues[key] = { min: value.min, max: value.max };
                        if (value.min > filter.min || value.max < filter.max) {
                            this.activeFilters.push(`${filter.label}: ${value.min}${filter.unit} - ${value.max}${filter.unit}`);
                        }
                    }
                    if ((filter.type === 'checkbox' || filter.type === 'toggle') && Array.isArray(value)) {
                        value.forEach(v => {
                            const checkbox = document.querySelector(`input[data-filter-type="${key}"][value="${v}"]`);
                            if (checkbox) checkbox.checked = true;
                            this.selectedValues[key].push(v);
                            const label = filter.labelPrefix ? `${filter.label}: ${v}` : filter.label;
                            if (!this.activeFilters.includes(label)) this.activeFilters.push(label);
                        });
                    }
                });
            },
            getFilterType(el) { return el.getAttribute('data-filter-type'); },
            updateFilters(event) {
                const el = event.target;
                const type = this.getFilterType(el);
                if (!type) return;
                if (el.type === 'range') {
                    const base = type.replace(/_min$|_max$/, '');
                    const minInput = document.querySelector(`input[data-filter-type="${base}_min"]`);
                    const maxInput = document.querySelector(`input[data-filter-type="${base}_max"]`);
                    if (minInput && maxInput) {
                        const parseFn = base === 'noise' ? parseFloat : parseInt;
                        this.updateRangeFilter(base, parseFn(minInput.value), parseFn(maxInput.value));
                    }
                } else if (el.type === 'checkbox') {
                    const filter = config.filters[type];
                    if (filter.type === 'toggle') {
                        this.selectedValues[type] = el.checked ? ['1'] : [];
                        this.activeFilters = this.activeFilters.filter(f => f !== filter.label);
                        if (el.checked) this.activeFilters.push(filter.label);
                    } else {
                        const display = filter.labelPrefix ? `${filter.label}: ${el.value}` : el.value;
                        if (el.checked) {
                            if (!this.selectedValues[type].includes(el.value)) this.selectedValues[type].push(el.value);
                            if (!this.activeFilters.includes(display)) this.activeFilters.push(display);
                        } else {
                            this.selectedValues[type] = this.selectedValues[type].filter(v => v !== el.value);
                            this.activeFilters = this.activeFilters.filter(f => f !== display);
                        }
                    }
                }
                this.isDirty = true;
            },
            updateRangeFilter(key, min, max) {
                const filter = config.filters[key];
                this.activeFilters = this.activeFilters.filter(f => !f.startsWith(`${filter.label}:`));
                this.selectedValues[key] = { min, max };
                if (min > filter.min || max < filter.max) {
                    this.activeFilters.push(`${filter.label}: ${min}${filter.unit} - ${max}${filter.unit}`);
                }
            },
            removeFilter(filter) {
                this.activeFilters = this.activeFilters.filter(f => f !== filter);
                this.isDirty = true;
            },
            resetFilters() {
                window.location.href = '/schede-tecniche/robot-aspirapolvere-lavapavimenti/';
            },
            applyFilters() {
                const parts = [];
                const sv = this.selectedValues;
                if (sv.price.min !== config.filters.price.min || sv.price.max !== config.filters.price.max) {
                    parts.push(`price${sv.price.min}-${sv.price.max}`);
                }
                if (sv.suction.min !== config.filters.suction.min || sv.suction.max !== config.filters.suction.max) {
                    parts.push(`suction${sv.suction.min}-${sv.suction.max}`);
                }
                if (sv.noise.min !== config.filters.noise.min || sv.noise.max !== config.filters.noise.max) {
                    parts.push(`noise${sv.noise.min}-${sv.noise.max}`);
                }
                if (sv.runtime.min !== config.filters.runtime.min || sv.runtime.max !== config.filters.runtime.max) {
                    parts.push(`runtime${sv.runtime.min}-${sv.runtime.max}`);
                }
                if (sv.brand.length) parts.push(`brands${sv.brand.join('-')}`);
                if (sv.navigation_technology.length) parts.push(`navigation${sv.navigation_technology.join('-')}`);
                if (sv.release_year.length) parts.push(`year${sv.release_year.join('-')}`);
                const togglePrefixes = {
                    mapping_supported: 'mapping',
                    carpet_detection: 'carpet',
                    hepa_filter: 'hepa',
                    obstacle_avoidance: 'obstacle',
                    washable_filters: 'washable',
                    threshold_crossing_supported: 'threshold',
                    no_go_zones: 'nogozones',
                    cliff_detection: 'cliff',
                    carpet_avoidance_mode: 'avoidcarpet',
                    auto_empty: 'autoempty',
                    auto_mop_wash: 'mopwash',
                    detergent_tank_present: 'detergent',
                    app_supported: 'app',
                    base_included: 'base'
                };
                Object.keys(togglePrefixes).forEach(k => {
                    if (sv[k].length) parts.push(`${togglePrefixes[k]}1`);
                });
                const filterString = parts.length ? '_filter_' + parts.join('_') : '';
                window.location.href = filterString
                    ? `/schede-tecniche/robot-aspirapolvere-lavapavimenti/${filterString}/`
                    : '/schede-tecniche/robot-aspirapolvere-lavapavimenti/';
            }
        };
    }
</script>
