{{--
USAGE:
<x-filter-bar>
    <x-slot:fields>
        ... input/select filter fields ...
    </x-slot:fields>
    <x-slot:actions>
        ... tombol tambah, dsb ...
    </x-slot:actions>
</x-filter-bar>
--}}

<div x-data="{ showFilter: false }" class="mb-4">

    {{-- Toolbar atas: tombol filter + slot actions --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
        <button type="button" @click="showFilter = !showFilter"
            class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:outline-none dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd"/>
            </svg>
            <span x-text="showFilter ? 'Sembunyikan Filter' : 'Tampilkan Filter'">Tampilkan Filter</span>
        </button>

        @if(isset($actions))
            <div class="flex items-center gap-2">
                {{ $actions }}
            </div>
        @endif
    </div>

    {{-- Filter fields (collapsible) --}}
    @if(isset($fields))
        <div x-show="showFilter" x-cloak
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-2"
             class="p-4 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
            <form method="GET" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {{ $fields }}
                <div class="flex items-end gap-2">
                    <button type="submit"
                        class="flex-1 px-4 py-2 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700">
                        Terapkan
                    </button>
                    <a href="{{ request()->url() }}"
                        class="flex-1 px-4 py-2 text-sm font-medium text-center text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
                        Reset
                    </a>
                </div>
            </form>
        </div>
    @endif
</div>