{{-- 3. Modal Exportar Inventario (Premium) --}}
<div x-data="{ open: false }" @open-export.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"></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('inventario.export') }}" method="GET" @submit="open = false">
                        <div class="bg-slate-800 p-6 text-white relative overflow-hidden shrink-0 rounded-t-xl">
                            <h3 class="text-xl font-bold">Exportar Datos</h3>
                            <p class="text-slate-300 text-sm mt-1">Descargue su inventario actualizado.</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">
                            <label for="export_category_id"
                                class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Filtrar
                                por Categoría (Opcional)</label>
                            <select name="categoria_id" id="export_category_id"
                                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-brand-orange focus:border-brand-orange transition-all outline-none">
                                <option value="">Todas las Categorías</option>
                                @foreach($categorias as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->nombre }}</option>
                                @endforeach
                            </select>

                            <!-- 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-emerald-500 peer-checked:bg-emerald-50 dark:peer-checked:bg-emerald-900/10 hover:border-emerald-500/50 transition-all flex flex-col items-center gap-2 group">
                                            <svg class="w-8 h-8 text-emerald-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-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl shadow-lg shadow-slate-500/30 transition transform hover:scale-105">Descargar
                                Excel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </template>
</div>