{{-- Modal Detalles y Medios del Producto (Premium) --}}
<div x-data="{ 
    open: false, 
    productId: null,
    nombre: '',
    imagen: '',
    previewUrl: '',
    loading: false,
    quill: null,

    init() {
        this.$nextTick(() => {
            if (!this.quill && document.getElementById('editor-container')) {
                this.quill = new Quill('#editor-container', {
                    theme: 'snow',
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline'],
                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                            ['clean']
                        ]
                    },
                    placeholder: 'Escribe una descripción detallada para la web pública...'
                });
            }
        });
    },

    openModal(detail) {
        this.open = true;
        this.productId = detail.id;
        this.nombre = detail.nombre;
        this.previewUrl = detail.imagen || '';
        
        if (this.quill) {
            this.quill.root.innerHTML = detail.descripcion || '';
        } else {
            this.$nextTick(() => {
                if (this.quill) this.quill.root.innerHTML = detail.descripcion || '';
            });
        }
    },

    handleImageChange(e) {
        const file = e.target.files[0];
        if (file) {
            if (file.size > 2 * 1024 * 1024) {
                alert('La imagen no debe superar los 2MB');
                e.target.value = '';
                return;
            }
            this.previewUrl = URL.createObjectURL(file);
        }
    },

    save() {
        this.loading = true;
        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('id', this.productId);
        formData.append('descripcion', this.quill.root.innerHTML);
        
        const imageInput = this.$refs.imageInput;
        if (imageInput.files[0]) {
            formData.append('imagen', imageInput.files[0]);
        }

        fetch('{{ route('inventario.update-details') }}', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                this.open = false;
                window.location.reload(); // Recargar para ver cambios
            } else {
                alert('Error al guardar: ' + (data.message || 'Desconocido'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error crítico al conectar con el servidor');
        })
        .finally(() => {
            this.loading = false;
        });
    }
}" @open-details-modal.window="openModal($event.detail)" class="relative">
    {{-- Quill assets --}}
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

    <template x-teleport="body">
        <div x-show="open" class="fixed inset-0 z-[110] 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-2xl relative flex flex-col rounded-3xl shadow-2xl border border-white/20 dark:border-slate-700/50"
                    @click.stop>

                    {{-- Header --}}
                    <div
                        class="bg-gradient-to-r from-emerald-600 to-teal-700 p-6 text-white relative overflow-hidden rounded-t-3xl">
                        <div class="absolute -right-4 -top-4 opacity-10">
                            <svg class="w-24 h-24" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold" x-text="'Detalles: ' + nombre"></h3>
                        <p class="text-emerald-100 text-xs mt-1">Administra la información pública del producto.</p>

                        <button @click="open = false"
                            class="absolute top-4 right-4 text-white/70 hover:text-white bg-white/10 hover:bg-white/20 rounded-full p-2">
                            <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"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    {{-- Body --}}
                    <div class="p-8 space-y-6 max-h-[70vh] overflow-y-auto custom-scrollbar">

                        {{-- Foto del Producto --}}
                        <div class="space-y-3">
                            <label class="text-xs font-bold uppercase tracking-wider text-slate-500 block">Fotografía
                                del Producto (Máx 2MB)</label>
                            <div class="flex items-center gap-6">
                                <div class="relative group">
                                    <div
                                        class="w-32 h-32 rounded-2xl bg-slate-100 dark:bg-slate-900 border-2 border-dashed border-slate-300 dark:border-slate-700 overflow-hidden flex items-center justify-center transition-all group-hover:border-emerald-500">
                                        <template x-if="previewUrl">
                                            <img :src="previewUrl" class="w-full h-full object-cover">
                                        </template>
                                        <template x-if="!previewUrl">
                                            <div class="text-center text-slate-400">
                                                <svg class="w-10 h-10 mx-auto opacity-50 mb-1" fill="none"
                                                    stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                </svg>
                                                <span class="text-[10px]">Sin imagen</span>
                                            </div>
                                        </template>
                                    </div>
                                    <button type="button" @click="$refs.imageInput.click()"
                                        class="absolute -bottom-2 -right-2 bg-white dark:bg-slate-700 shadow-lg border border-slate-200 dark:border-slate-600 rounded-full p-2 text-emerald-600 hover:scale-110 transition">
                                        <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="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                                        </svg>
                                    </button>
                                </div>
                                <div class="flex-1 space-y-2">
                                    <p class="text-sm text-slate-600 dark:text-slate-400 italic">Haz clic en el icono
                                        para cargar una nueva fotografía profesional del producto.</p>
                                    <input type="file" x-ref="imageInput" class="hidden" accept="image/*"
                                        @change="handleImageChange">
                                </div>
                            </div>
                        </div>

                        {{-- Descripción con Quill --}}
                        <div class="space-y-3">
                            <label class="text-xs font-bold uppercase tracking-wider text-slate-500 block">Descripción
                                para Web Pública (Rich Text)</label>
                            <div
                                class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden min-h-[150px]">
                                <div id="editor-container" class="h-40 border-none text-slate-700 dark:text-slate-300">
                                </div>
                            </div>
                        </div>

                    </div>

                    {{-- Footer --}}
                    <div
                        class="p-6 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-100 dark:border-slate-700 flex justify-end gap-3 rounded-b-3xl">
                        <button @click="open = false"
                            class="px-6 py-2 text-slate-500 hover:text-slate-700 font-bold transition">Cancelar</button>
                        <button @click="save" :disabled="loading"
                            class="px-8 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl shadow-lg shadow-emerald-500/20 flex items-center gap-2 group transition active:scale-95 disabled:opacity-50">
                            <template x-if="loading">
                                <svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                        stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                    </path>
                                </svg>
                            </template>
                            <span x-text="loading ? 'Guardando...' : 'Guardar Cambios'"></span>
                            <template x-if="!loading">
                                <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                </svg>
                            </template>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </template>
</div>