{{-- 4. Modal Auditoría Rápida (Premium) --}}
<div x-data="{ open: false, form: { id: null, nombre: '', actual: 0, fisico: 0, observacion: '' } }"
    @open-audit.window="open = true; form.id = $event.detail.id; form.nombre = $event.detail.nombre; form.actual = $event.detail.actual; form.fisico = $event.detail.actual; form.observacion = ''">
    <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>
                    <div class="bg-purple-600 p-6 text-white relative overflow-hidden shrink-0 rounded-t-xl">
                        <div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
                            <svg class="w-32 h-32 transform rotate-12" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold relative z-10">Auditoría Rápida</h3>
                        <p class="text-purple-100 text-sm mt-1 relative z-10 box-decoration-clone">Ajuste de inventario
                            físico.</p>
                        <div class="flex items-center gap-2 absolute top-4 right-4 z-20">
                            <button type="button" @click="$parent.copyAvailability()" 
                                class="text-white/70 hover:text-white transition-colors bg-white/10 hover:bg-white/20 rounded-lg p-1"
                                title="Copiar Disponibilidad">
                                <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="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m-1 4h.01M9 16h.01M9 12h.01" />
                                </svg>
                            </button>
                            <button type="button" @click="open = false"
                                class="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>

                    {{-- Formulario AJAX --}}
                    <div class="p-8 space-y-4" x-data="{ sending: false }">
                        <div class="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-xl text-center mb-4">
                            <p class="text-xs uppercase text-purple-600 dark:text-purple-300 font-bold mb-1">
                                Producto</p>
                            <p class="text-lg font-bold text-purple-900 dark:text-white" x-text="form.nombre">
                            </p>
                            <p class="text-sm text-purple-500">Stock Sistema: <span x-text="form.actual"
                                    class="font-bold"></span></p>
                        </div>

                        <div>
                            <label for="audit_fisico"
                                class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Conteo
                                Físico Real <span class="text-red-500 text-lg leading-none">*</span></label>
                            <input type="number" id="audit_fisico" x-model="form.fisico"
                                class="w-full bg-surface 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-purple-500 transition-all text-center text-3xl">
                        </div>
                        <div>
                            <label for="audit_observacion"
                                class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Observación
                                <span class="text-red-500 text-lg leading-none">*</span></label>
                            <textarea id="audit_observacion" x-model="form.observacion" rows="2"
                                class="w-full bg-surface 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-purple-500 transition-all placeholder-slate-400"
                                placeholder="Motivo del ajuste..."></textarea>
                        </div>

                        <div class="flex justify-end gap-3 pt-4">
                            <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="button" @click="sending = true; fetch('{{ route('inventario.auditar') }}', {
                                    method: 'POST',
                                    headers: { 
                                        'Content-Type': 'application/json', 
                                        'Accept': 'application/json',
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                                    },
                                    body: JSON.stringify({ producto_id: form.id, conteo_fisico: form.fisico, observacion: form.observacion })
                                }).then(async res => {
                                    const data = await res.json();
                                    if (!res.ok) throw new Error(data.message || 'Error en el servidor');
                                    return data;
                                }).then(data => { 
                                    window.dispatchEvent(new CustomEvent('notify', { detail: { type: 'success', title: 'Ajuste Realizado', message: data.message } }));
                                    setTimeout(() => window.location.reload(), 1500);
                                }).catch(err => {
                                    window.dispatchEvent(new CustomEvent('notify', { detail: { type: 'error', title: 'Error', message: err.message || 'Error al guardar la auditoría' } }));
                                    sending = false;
                                })"
                                class="px-8 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-xl shadow-lg shadow-purple-500/30 transition transform hover:scale-105 flex items-center gap-2"
                                :disabled="sending || !form.observacion">
                                <span x-show="!sending">Confirmar Ajuste</span>
                                <span x-show="sending">Guardando...</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>