{{-- Modal Exportar Usuarios (Premium) --}}
<div x-data="{ open: false }" @open-export-users.window="open = true">
    <template x-teleport="body">
        <div x-show="open" class="fixed inset-0 z-[100] overflow-y-auto" x-cloak>
            <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" @click="open = false"></div>
            <div class="flex min-h-screen items-center justify-center p-4">
                <div class="bg-white dark:bg-slate-800 w-full max-w-md relative flex flex-col rounded-2xl shadow-2xl border border-white/20 dark:border-slate-700/50"
                    @click.stop>
                    <form action="{{ route('usuarios.export') }}" method="GET" @submit="open = false">
                        <div class="bg-blue-600 p-6 text-white relative overflow-hidden shrink-0 rounded-t-xl">
                            <h3 class="text-xl font-bold">Exportar Usuarios</h3>
                            <p class="text-blue-100 text-sm mt-1">Seleccione los criterios de exportación.</p>
                            <button type="button" @click="open = false"
                                class="absolute top-4 right-4 z-20 text-white/70 hover:text-white transition-colors bg-white/10 hover:bg-white/20 rounded-lg p-1">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                        <div class="p-8">
                            <!-- Filtro de Roles -->
                            <div class="mb-4 flex justify-between items-center">
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500">Filtrar
                                    por Tipo de Usuario</label>
                                <button type="button"
                                    @click="$el.closest('form').querySelectorAll('input[name=\'rol_ids[]\']').forEach(i => i.checked = !i.checked)"
                                    class="text-[10px] bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded text-slate-500 hover:bg-slate-200 transition-colors uppercase font-bold">
                                    Alternar Selección
                                </button>
                            </div>

                            <div class="grid grid-cols-2 gap-3 max-h-48 overflow-y-auto pr-2 custom-scrollbar mb-6">
                                @foreach($roles as $rol)
                                    <label
                                        class="flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl cursor-pointer hover:border-blue-500/50 transition-all group">
                                        <input type="checkbox" name="rol_ids[]" value="{{ $rol->id }}"
                                            class="rounded border-slate-300 text-blue-600 focus:ring-blue-500 h-4 w-4">
                                        <span
                                            class="text-sm font-semibold text-slate-700 dark:text-slate-300 group-hover:text-blue-600 transition-colors">
                                            {{ ucfirst($rol->nombre) }}
                                        </span>
                                    </label>
                                @endforeach
                            </div>

                            <!-- Filtro de Estado -->
                            <div class="mb-6">
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-3">Estado del Usuario</label>
                                <div class="flex gap-4">
                                    <label class="flex-1 cursor-pointer">
                                        <input type="radio" name="activo" value="1" class="peer sr-only" checked>
                                        <div class="p-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-emerald-500 peer-checked:bg-emerald-50 dark:peer-checked:bg-emerald-900/10 hover:border-emerald-500/50 transition-all text-center">
                                            <span class="font-bold text-sm text-slate-700 dark:text-slate-200">Activos</span>
                                        </div>
                                    </label>
                                    <label class="flex-1 cursor-pointer">
                                        <input type="radio" name="activo" value="0" class="peer sr-only">
                                        <div class="p-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-red-500 peer-checked:bg-red-50 dark:peer-checked:bg-red-900/10 hover:border-red-500/50 transition-all text-center">
                                            <span class="font-bold text-sm text-slate-700 dark:text-slate-200">Inactivos</span>
                                        </div>
                                    </label>
                                    <label class="flex-1 cursor-pointer">
                                        <input type="radio" name="activo" value="all" class="peer sr-only">
                                        <div class="p-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-slate-800 dark:peer-checked:border-slate-400 peer-checked:bg-slate-100 dark:peer-checked:bg-slate-700/50 hover:border-slate-500 transition-all text-center">
                                            <span class="font-bold text-sm text-slate-700 dark:text-slate-200">Todos</span>
                                        </div>
                                    </label>
                                </div>
                            </div>

                            <!-- Format Selection -->
                            <div class="mt-6">
                                <label
                                    class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-3">Formato
                                    de Descarga</label>
                                <div class="grid grid-cols-2 gap-4">
                                    <label class="cursor-pointer">
                                        <input type="radio" name="format" value="excel" class="peer sr-only" checked>
                                        <div
                                            class="p-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/10 hover:border-blue-500/50 transition-all flex flex-col items-center gap-2 group">
                                            <svg class="w-8 h-8 text-blue-600 group-hover:scale-110 transition-transform"
                                                fill="currentColor" viewBox="0 0 24 24">
                                                <path
                                                    d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm10-10h-4v4h-2v-4H8v-2h2V6h2v2h4v2z" />
                                            </svg>
                                            <span class="font-bold text-sm text-slate-700 dark:text-slate-200">Excel
                                                (.xlsx)</span>
                                        </div>
                                    </label>

                                    <label class="cursor-pointer">
                                        <input type="radio" name="format" value="csv" class="peer sr-only">
                                        <div
                                            class="p-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-slate-800 dark:peer-checked:border-slate-400 peer-checked:bg-slate-100 dark:peer-checked:bg-slate-700/50 hover:border-slate-500 transition-all flex flex-col items-center gap-2 group">
                                            <svg class="w-8 h-8 text-slate-600 dark:text-slate-400 group-hover:scale-110 transition-transform"
                                                fill="currentColor" viewBox="0 0 24 24">
                                                <path
                                                    d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
                                            </svg>
                                            <span class="font-bold text-sm text-slate-700 dark:text-slate-200">CSV
                                                (.csv)</span>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div
                            class="p-6 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-100 dark:border-slate-700/50 flex justify-end gap-3 rounded-b-xl">
                            <button type="button" @click="open = false"
                                class="px-6 py-2.5 text-red-600 font-bold hover:bg-red-50 rounded-xl transition">Cancelar</button>
                            <button type="submit"
                                class="px-8 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl shadow-lg shadow-blue-500/30 transition transform hover:scale-105">Descargar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </template>
</div>