{{-- Modal Exportar Clientes (Premium) --}}
<div>
    <template x-teleport="body">
        <div x-show="openExportClientsModal" 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="openExportClientsModal = 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('clientes.export') }}" method="GET" @submit="openExportClientsModal = false">
                        <div class="p-6 flex justify-between items-start relative overflow-hidden shrink-0 bg-indigo-600 rounded-t-2xl">
                            <div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
                                <svg class="w-24 h-24 transform rotate-12 text-white" 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>
                            </div>
                            <div class="flex items-center gap-4 relative z-10">
                                <div class="p-3 bg-white/20 rounded-xl text-white shrink-0">
                                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                    </svg>
                                </div>
                                <div class="text-white text-left">
                                    <h2 class="text-2xl font-black tracking-tight">Exportar Clientes</h2>
                                    <p class="text-indigo-100 text-sm opacity-80">Seleccione los criterios de exportación.</p>
                                </div>
                            </div>
                            <button type="button" @click="openExportClientsModal = false" class="text-white/70 hover:text-white transition-colors relative z-10">
                                <svg class="w-7 h-7" 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">
                            <!-- Tipo de Cliente -->
                            <div class="mb-6">
                                <label for="export_client_type"
                                    class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Tipo de
                                    Cliente</label>
                                <select name="tipo_cliente" id="export_client_type"
                                    class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-3 text-base font-semibold text-slate-800 dark:text-white focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-indigo-500 transition-all outline-none">
                                    <option value="">Todos los Clientes</option>
                                    <option value="general">Clientes Generales</option>
                                    <option value="preferencial">Clientes Preferenciales</option>
                                    <option value="corporativo">Clientes Corporativos</option>
                                </select>
                            </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 Cliente</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>

                            <div
                                class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-900/30 rounded-xl">
                                <p
                                    class="text-[10px] text-amber-700 dark:text-amber-400 font-bold uppercase tracking-wider leading-tight">
                                    Nota: Los filtros por tipo se activarán una vez se complete el ajuste de la base de
                                    datos.
                                </p>
                            </div>

                            <!-- Selección de Formato -->
                            <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-indigo-500 peer-checked:bg-indigo-50 dark:peer-checked:bg-indigo-900/10 hover:border-indigo-500/50 transition-all flex flex-col items-center gap-2 group">
                                            <svg class="w-8 h-8 text-indigo-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-900/50 border-t border-slate-200 dark:border-slate-700 flex justify-end items-center gap-4 shrink-0 rounded-b-2xl">
                            <button type="button" @click="openExportClientsModal = false"
                                class="px-6 py-2.5 bg-red-50 hover:bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl font-black uppercase tracking-widest text-[10px] transition-colors">
                                Cancelar
                            </button>
                            <button type="submit"
                                class="px-10 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-black uppercase tracking-widest text-xs shadow-xl shadow-indigo-500/20 transition-all flex items-center gap-2 transform active:scale-95">
                                Descargar
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                </svg>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </template>
</div>