@props([
    'icon' => 'lucide-filter',
    'filters' => [],
])

<div x-data="{ open: false }" class="relative inline-block">

    {{-- BOTÓN --}}
    <button
        type="button"
        @click="open = !open"
        class="p-2.5 bg-white border border-[#FF5733]/40 text-[#FF5733]
               rounded-xl shadow-sm hover:bg-orange-50
               flex items-center justify-center
               hover:shadow-md active:scale-95 transition">

        <x-dynamic-component :component="$icon" class="w-4 h-4"/>
    </button>

    {{-- DROPDOWN --}}
    <div
        x-show="open"
        x-transition
        @click.outside="open = false"
        class="absolute right-0 mt-3 w-80 z-50
               bg-white border border-gray-200
               shadow-2xl rounded-2xl">

        {{-- HEADER --}}
        <div class="px-5 py-3 border-b bg-gray-50 rounded-t-2xl">
            <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                <x-lucide-filter class="w-4 h-4 text-[#FF5733]" />
                Filtros avanzados
            </h3>
        </div>

        <form method="GET" class="p-5 space-y-5">

            @foreach($filters as $filter)

                {{-- SELECT --}}
                @if($filter['type'] === 'select')
                    <div class="space-y-1 p-2">
                        <label class="text-xs font-semibold text-gray-500 uppercase">
                            {{ $filter['label'] }}
                        </label>

                        <select
                            name="{{ $filter['name'] }}"
                            class="w-full px-3 py-2 rounded-xl
                                   bg-gray-50 border border-gray-200
                                   text-sm
                                   focus:ring-2 focus:ring-[#FF5733]/40
                                   focus:border-[#FF5733]">

                            <option value="">Todos</option>

                            @foreach($filter['options'] as $value => $label)
                                <option value="{{ $value }}"
                                    @selected(request($filter['name']) == $value)>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                {{-- CHECKBOX (CHIPS) --}}
                @elseif($filter['type'] === 'checkbox')
                    <div>
                        <p class="text-xs font-semibold text-gray-500 uppercase px-2">
                            {{ $filter['label'] }}
                        </p>

                        <div class="flex flex-wrap gap-2 p-2">
                            @foreach($filter['options'] as $value => $label)
                                <label class="cursor-pointer">
                                    <input
                                        type="checkbox"
                                        name="{{ $filter['name'] }}[]"
                                        value="{{ $value }}"
                                        class="peer hidden"
                                        @checked(in_array(
                                            $value,
                                            request($filter['name'], [])
                                        ))>

                                    <span
                                        class="px-3 py-1.5 text-xs rounded-full
                                               border border-gray-300
                                               text-gray-600
                                               peer-checked:bg-[#FF5733]
                                               peer-checked:text-white
                                               peer-checked:border-[#FF5733]
                                               transition">
                                        {{ $label }}
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                {{-- RANGO --}}
                @elseif($filter['type'] === 'range')
                    <div class="space-y-2 p-2">
                        <p class="text-xs font-semibold text-gray-500 uppercase">
                            {{ $filter['label'] }}
                        </p>

                        <div class="grid grid-cols-2 gap-2">
                            <input
                                type="{{ $filter['input'] ?? 'date' }}"
                                name="{{ $filter['from'] }}"
                                value="{{ request($filter['from']) }}"
                                class="px-3 py-2 rounded-xl
                                       bg-gray-50 border border-gray-200
                                       text-sm
                                       focus:ring-2 focus:ring-[#FF5733]/40
                                       focus:border-[#FF5733]">

                            <input
                                type="{{ $filter['input'] ?? 'date' }}"
                                name="{{ $filter['to'] }}"
                                value="{{ request($filter['to']) }}"
                                class="px-3 py-2 rounded-xl
                                       bg-gray-50 border border-gray-200
                                       text-sm
                                       focus:ring-2 focus:ring-[#FF5733]/40
                                       focus:border-[#FF5733]">
                        </div>
                    </div>
                @endif

            @endforeach

            {{-- FOOTER --}}
            <div class="flex justify-between items-center pt-4 border-t p-2">

                <a href="{{ url()->current() }}"
                   class="text-xs text-gray-400 hover:text-gray-600">
                    Limpiar filtros
                </a>

                <button
                    type="submit"
                    class="px-4 py-2 rounded-xl
                           bg-[#FF5733] text-white text-sm
                           hover:bg-orange-600
                           shadow-md transition">
                    Aplicar
                </button>

            </div>

        </form>
    </div>
</div>