@extends('layouts.app')

@section('title', 'Gestión de Souvenirs')

@section('content')
<div x-data="souvenirManager()" class="h-full flex flex-col space-y-8 animate-fade-in-up">
    <!-- Header Premium -->
    <div class="flex flex-col lg:flex-row justify-between items-end gap-6 mb-2">
        <div class="animate-fade-in-left">
            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight">Gestión de <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-brand-wine">Souvenirs</span></h1>
            <p class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mt-1">Administración de detalles para regalos, kits y complementos</p>
        </div>

        <button @click="openCreateModal()" 
                class="bg-indigo-600 text-white px-8 py-3 rounded-2xl font-black uppercase tracking-widest text-[10px] shadow-lg shadow-indigo-600/20 hover:shadow-indigo-600/40 hover:-translate-y-1 active:scale-95 transition-all flex items-center gap-3 group">
            <svg class="w-4 h-4 group-hover:rotate-90 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path></svg>
            Nuevo Souvenir
        </button>
    </div>

    <!-- Sección de KPIs -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 animate-fade-in-up delay-75">
        <div class="glass-card-premium bg-white/80 dark:bg-slate-900/80 p-5 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm flex items-center gap-4 transition-all hover:scale-[1.02]">
            <div class="w-12 h-12 rounded-2xl bg-indigo-500/10 text-indigo-600 flex items-center justify-center shadow-inner">
                <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
            </div>
            <div>
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1.5">Total Ítems</p>
                <p class="text-2xl font-black text-slate-800 dark:text-white leading-none tracking-tighter" x-text="souvenirs.length"></p>
            </div>
        </div>

        <div class="glass-card-premium bg-white/80 dark:bg-slate-900/80 p-5 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm flex items-center gap-4 transition-all hover:scale-[1.02]">
            <div class="w-12 h-12 rounded-2xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center shadow-inner">
                <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <div>
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1.5">Activos</p>
                <p class="text-2xl font-black text-slate-800 dark:text-white leading-none tracking-tighter" x-text="souvenirs.filter(s => s.activo).length"></p>
            </div>
        </div>

        <div class="glass-card-premium bg-white/80 dark:bg-slate-900/80 p-5 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm flex items-center gap-4 transition-all hover:scale-[1.02]">
            <div class="w-12 h-12 rounded-2xl bg-amber-500/10 text-amber-600 flex items-center justify-center shadow-inner">
                <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <div>
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1.5">Precio Promedio</p>
                <p class="text-2xl font-black text-slate-800 dark:text-white leading-none tracking-tighter" x-text="'$' + formatNumber(calculateAveragePrice())"></p>
            </div>
        </div>

        <div class="glass-card-premium bg-white/80 dark:bg-slate-900/80 p-5 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm flex items-center gap-4 transition-all hover:scale-[1.02]">
            <div class="w-12 h-12 rounded-2xl bg-indigo-500 text-white flex items-center justify-center shadow-lg group-hover:rotate-6 transition-transform">
                <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
            </div>
            <div class="flex-1">
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1.5">Cargar Masivo</p>
                <p class="text-[10px] font-black text-indigo-600 uppercase tracking-widest cursor-pointer hover:underline">Importar Excel</p>
            </div>
        </div>
    </div>

    <!-- Grid de Souvenirs -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <template x-for="s in souvenirs" :key="s.id">
            <div class="glass-card-premium bg-white/90 dark:bg-slate-800/90 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-700/50 group hover:shadow-2xl hover:shadow-indigo-500/10 hover:-translate-y-2 transition-all relative overflow-hidden backdrop-blur-xl">
                <div class="absolute -right-10 -top-10 w-40 h-40 bg-indigo-500/5 dark:bg-indigo-500/10 rounded-full group-hover:scale-150 transition-transform duration-700"></div>
                
                <div class="relative z-10">
                    <div class="flex justify-between items-start mb-6">
                        <div class="w-16 h-16 bg-gradient-to-br from-indigo-50 to-white dark:from-slate-700 dark:to-slate-800 rounded-2xl flex items-center justify-center text-4xl shadow-inner border border-slate-50 dark:border-slate-700 group-hover:rotate-6 transition-transform duration-300" x-text="s.icono || '🎁'"></div>
                        <div class="flex flex-col items-end gap-2">
                             <div class="px-3 py-1 rounded-full text-[8px] font-black uppercase tracking-widest shadow-sm"
                                  :class="s.activo ? 'bg-emerald-500 text-white' : 'bg-slate-200 text-slate-500 dark:bg-slate-700 dark:text-slate-400'"
                                  x-text="s.activo ? 'Activo' : 'Pausado'"></div>
                        </div>
                    </div>
                    
                    <h3 class="text-xl font-black text-slate-800 dark:text-white mb-1 uppercase tracking-tight truncate group-hover:text-indigo-600 transition-colors" x-text="s.nombre"></h3>
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.15em] mb-4">Complemento de Regalo</p>
                    
                    <div class="flex items-end justify-between mt-8">
                        <div>
                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Precio Unitario</p>
                            <p class="text-3xl font-black text-slate-900 dark:text-white tracking-tighter" x-text="'$' + formatNumber(s.precio)"></p>
                        </div>
                        
                        <div class="flex gap-2">
                            <button @click="openEditModal(s)" class="w-10 h-10 bg-slate-50 dark:bg-slate-700/50 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 rounded-xl transition-all flex items-center justify-center border border-transparent hover:border-indigo-100 shadow-sm">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                            </button>
                            <button @click="deleteSouvenir(s)" class="w-10 h-10 bg-slate-50 dark:bg-slate-700/50 text-slate-400 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-900/30 rounded-xl transition-all flex items-center justify-center border border-transparent hover:border-rose-100 shadow-sm">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>

    <!-- Modal Form (Siguiendo Reglas de Modales) -->
    <template x-teleport="body">
        <div x-show="showModal" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/75 backdrop-blur-sm p-4"
             x-cloak>
            
            <div @click.away="showModal = false" 
                 class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all border border-slate-100 dark:border-slate-700">
                
                <!-- Header (Premium Indigo) - Cumpliendo reglas de estilo -->
                <div class="p-6 flex justify-between items-start relative overflow-hidden shrink-0" style="background-color: #4F46E5;">
                    <div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
                        <svg class="w-20 h-20 transform rotate-12 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M11 2L2 7V17L11 22L20 17V7L11 2Z" />
                        </svg>
                    </div>
                    <div class="flex items-center gap-4 relative z-10">
                        <div class="p-3 bg-white/20 rounded-xl text-white">
                            <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.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                            </svg>
                        </div>
                        <div class="text-white text-left">
                            <h2 class="text-2xl font-black tracking-tight" x-text="editingId ? 'Editar Souvenir' : 'Nuevo Souvenir'"></h2>
                            <p class="text-indigo-100 text-[10px] font-bold uppercase tracking-widest opacity-80" x-text="editingId ? 'Actualización de Souvenir' : 'Gestión de Nuevo Souvenir'"></p>
                        </div>
                    </div>
                    <button @click="showModal = false" class="text-white/70 hover:text-white transition-colors relative z-10">
                        <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.5" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <form @submit.prevent="saveSouvenir()" class="p-8 space-y-6">
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest block px-1">Nombre del Souvenir</label>
                        <input type="text" x-model="form.nombre" required
                               class="w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl h-12 px-5 font-bold focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all text-sm shadow-sm"
                               placeholder="Ej: Moño Rojo Gigante">
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest block px-1">Precio</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-bold">$</span>
                                <input type="number" x-model="form.precio" required
                                       class="w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl h-12 pl-8 pr-4 font-bold focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all text-sm shadow-sm"
                                       placeholder="0.00">
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest block px-1">Icono</label>
                            <div class="relative" x-data="{ open: false }">
                                <button type="button" @click="open = !open"
                                        class="w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl h-12 px-5 font-bold focus:ring-2 focus:ring-indigo-500/20 transition-all text-2xl flex items-center justify-between shadow-sm">
                                    <span x-text="form.icono"></span>
                                    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                </button>
                                
                                <div x-show="open" @click.away="open = false" 
                                     class="absolute bottom-full left-0 mb-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-2xl p-4 z-[110] w-[260px] max-h-48 overflow-y-auto custom-scrollbar"
                                     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">
                                    <div class="grid grid-cols-5 gap-2">
                                        <template x-for="emoji in iconOptions" :key="emoji">
                                            <button type="button" @click="form.icono = emoji; open = false" 
                                                    class="w-10 h-10 flex items-center justify-center text-xl hover:bg-indigo-50 dark:hover:bg-indigo-900/40 rounded-lg transition-all"
                                                    x-text="emoji"></button>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-900/50 rounded-2xl border border-slate-100 dark:border-slate-700">
                        <div class="flex flex-col">
                            <span class="text-[10px] font-black text-slate-600 dark:text-slate-300 uppercase tracking-widest">Estado Activo</span>
                            <span class="text-[9px] font-bold text-slate-400 uppercase mt-0.5" x-text="form.activo ? 'Visible' : 'Oculto'"></span>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" x-model="form.activo" class="sr-only peer">
                            <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                        </label>
                    </div>

                    <div class="pt-4 flex gap-3">
                        <button type="button" @click="showModal = false"
                                class="flex-1 h-12 rounded-xl font-bold text-[11px] uppercase tracking-widest text-rose-600 hover:bg-rose-50 transition-all">
                            Cancelar
                        </button>
                        <button type="submit" :disabled="loading"
                                class="flex-[2] bg-brand-orange text-white h-12 rounded-xl font-bold text-[11px] uppercase tracking-widest shadow-lg shadow-brand-orange/20 hover:scale-105 active:scale-95 disabled:opacity-50 transition-all flex items-center justify-center gap-2">
                            <span x-show="!loading" x-text="editingId ? 'Guardar Cambios' : 'Crear Souvenir'"></span>
                            <svg x-show="!loading" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
                            <svg x-show="loading" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </template>
</div>

<style>
    .custom-scrollbar::-webkit-scrollbar { width: 4px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; }
</style>

@push('scripts')
<script>
    function souvenirManager() {
        return {
            souvenirs: [],
            showModal: false,
            loading: false,
            editingId: null,
            form: {
                nombre: '',
                precio: 0,
                activo: true,
                icono: '🎁'
            },
            iconOptions: ['🎁', '🎀', '💌', '🌸', '🌹', '🛍️', '🎈', '✨', '🍫', '🧸', '🕯️', '🥂', '🍰', '💍', '📸', '📦', '💐', '🍭', '⭐', '🎉', '🍎', '🧁', '🍪', '🥛', '🍼', '🎨', '👔', '👠', '👒', '💎', '🦁', '🦉', '🍪', '🥑', '🍷', '🍺', '☕', '🥐', '🥨', '🍖', '🥓'],

            async init() {
                await this.fetchSouvenirs();
            },

            async fetchSouvenirs() {
                try {
                    const res = await fetch('{{ route("souvenirs.index") }}');
                    if (!res.ok) throw new Error('Error en el servidor');
                    this.souvenirs = await res.json();
                } catch (e) {
                    console.error("Error fetching souvenirs:", e);
                }
            },

            calculateAveragePrice() {
                if (this.souvenirs.length === 0) return 0;
                const sum = this.souvenirs.reduce((acc, s) => acc + parseFloat(s.precio), 0);
                return sum / this.souvenirs.length;
            },

            formatNumber(n) {
                return new Intl.NumberFormat('es-CO').format(n);
            },

            openCreateModal() {
                this.editingId = null;
                this.form = { nombre: '', precio: 0, activo: true, icono: '🎁' };
                this.showModal = true;
            },

            openEditModal(s) {
                this.editingId = s.id;
                this.form = { ...s };
                this.showModal = true;
            },

            async saveSouvenir() {
                this.loading = true;
                const method = this.editingId ? 'PUT' : 'POST';
                const url = this.editingId ? `{{ url('souvenirs') }}/${this.editingId}` : `{{ route('souvenirs.store') }}`;

                try {
                    const res = await fetch(url, {
                        method,
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify(this.form)
                    });

                    if (res.ok) {
                        await this.fetchSouvenirs();
                        this.showModal = false;
                        window.dispatchEvent(new CustomEvent('notify', {
                            detail: { type: 'success', title: 'Éxito', message: 'Souvenir guardado correctamente' }
                        }));
                    } else {
                        const errorData = await res.json();
                        throw new Error(errorData.message || 'Error al guardar');
                    }
                } catch (e) {
                    console.error(e);
                    window.dispatchEvent(new CustomEvent('notify', {
                        detail: { type: 'danger', title: 'Error', message: e.message || 'No se pudo guardar el souvenir' }
                    }));
                } finally {
                    this.loading = false;
                }
            },

            async deleteSouvenir(s) {
                window.dispatchEvent(new CustomEvent('open-confirm', {
                    detail: {
                        title: '¿Eliminar Souvenir?',
                        message: `¿Estás seguro de eliminar "${s.nombre}"?`,
                        type: 'danger',
                        callback: async () => {
                            const res = await fetch(`{{ url('souvenirs') }}/${s.id}`, {
                                method: 'DELETE',
                                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                            });
                            if (res.ok) {
                                await this.fetchSouvenirs();
                                window.dispatchEvent(new CustomEvent('notify', {
                                    detail: { type: 'success', title: 'Eliminado', message: 'Souvenir eliminado' }
                                }));
                            }
                        }
                    }
                }));
            }
        }
    }
</script>
@endpush
@endsection