{{-- Reusable multi-select dialog partial --}}
{{-- Variables: $dialogVar, $searchVar, $items, $selectedVar, $toggleFn, $selectAllFn, $deselectAllFn, $dialogTitle --}}

<div x-show="{{ $dialogVar }}" x-cloak
    class="fixed inset-0 z-[99999] flex items-center justify-center p-4"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0">

    <!-- Backdrop -->
    <div class="absolute inset-0 bg-gray-900/50 dark:bg-gray-900/70" @click="{{ $dialogVar }} = false"></div>

    <!-- Dialog -->
    <div class="relative w-full max-w-lg max-h-[80vh] flex flex-col bg-white dark:bg-gray-900 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        @keydown.escape.window="{{ $dialogVar }} = false">

        <!-- Header -->
        <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">{{ $dialogTitle }}</h3>
            <button type="button" @click="{{ $dialogVar }} = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
            </button>
        </div>

        <!-- Search + Actions -->
        <div class="p-4 space-y-3 border-b border-gray-200 dark:border-gray-700">
            <input type="text" x-model="{{ $searchVar }}" placeholder="Cari..."
                class="h-10 block w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2 text-sm text-gray-800 focus:border-brand-500 focus:ring-brand-500 dark:border-gray-600 dark:text-white/90">
            <div class="flex items-center justify-between">
                <span class="text-xs text-gray-500 dark:text-gray-400">
                    <span x-text="{{ $selectedVar }}.length"></span> dipilih
                </span>
                <div class="flex gap-2">
                    <button type="button" @click="{{ $selectAllFn }}()"
                        class="text-xs font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400">
                        Pilih Semua
                    </button>
                    <span class="text-gray-300 dark:text-gray-600">|</span>
                    <button type="button" @click="{{ $deselectAllFn }}()"
                        class="text-xs font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400">
                        Hapus Semua
                    </button>
                </div>
            </div>
        </div>

        <!-- Items List -->
        <div class="flex-1 overflow-y-auto p-2">
            <template x-for="item in {{ $items }}" :key="item.id">
                <label class="flex items-center gap-3 rounded-lg px-3 py-2.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                    <input type="checkbox"
                        :checked="{{ $selectedVar }}.includes(item.id)"
                        @change="{{ $toggleFn }}(item.id)"
                        class="h-4 w-4 rounded border-gray-300 text-brand-500 focus:ring-brand-500 dark:border-gray-600">
                    <span class="text-sm text-gray-700 dark:text-gray-300" x-text="item.name"></span>
                </label>
            </template>
            <div x-show="{{ $items }}.length === 0" class="py-8 text-center text-sm text-gray-400">
                Tidak ada data ditemukan
            </div>
        </div>

        <!-- Footer -->
        <div class="flex items-center justify-end gap-3 p-4 border-t border-gray-200 dark:border-gray-700">
            <button type="button" @click="{{ $dialogVar }} = false"
                class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600">
                Selesai
            </button>
        </div>
    </div>
</div>