{{-- Carga masiva de OC con la plantilla v2 (tareas 1.4 y 1.5). Diálogo del kit ui-ctc: Alpine + x-teleport, Escape cierra. --}}
<div x-data="{ abierto: false }" x-on:keydown.escape.window="abierto = false" class="inline-block">
    <x-secondary-button type="button" x-on:click="abierto = true">
        <x-icono nombre="arrow-up-tray" class="h-4 w-4" /> Carga masiva
    </x-secondary-button>

    <template x-teleport="body">
        <div x-show="abierto" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="carga-oc-titulo">
            <div class="fixed inset-0 bg-black/40" x-on:click="abierto = false"></div>
            <div class="relative flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <div class="flex items-center gap-3 border-b border-[var(--borde)] px-5 py-4">
                    <span class="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--acento-suave)] text-[var(--acento-texto)]"><x-icono nombre="table-cells" class="h-5 w-5" /></span>
                    <div class="min-w-0">
                        <h2 id="carga-oc-titulo" class="text-[15px] font-bold text-[var(--texto)]">Carga masiva de órdenes de compra</h2>
                        <p class="text-[12px] text-[var(--texto-suave)]">Una fila por producto de la OC. Si una fila tiene errores, no se guarda ninguna OC.</p>
                    </div>
                    <button type="button" x-on:click="abierto = false" class="ctc-accion ml-auto" title="Cerrar" aria-label="Cerrar">
                        <x-icono nombre="x-mark" class="h-[18px] w-[18px]" />
                    </button>
                </div>

                <div class="space-y-4 overflow-y-auto px-5 py-4">
                    <div class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-[var(--borde)] bg-[var(--superficie-2)] px-4 py-3">
                        <p class="text-[13px] text-[var(--texto-suave)]">Descargue la plantilla antes de cada carga: trae los catálogos vigentes de Websimex y las instrucciones.</p>
                        <x-enlace-boton href="{{ route('oc-plantilla') }}">
                            <x-icono nombre="arrow-down-tray" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Descargar plantilla
                        </x-enlace-boton>
                    </div>

                    <x-campo etiqueta="Archivo de la plantilla (.xlsx)" para="archivoExcelOc" :error="$errors->first('archivoExcel')">
                        <input id="archivoExcelOc" type="file" wire:model="archivoExcel" accept=".xlsx"
                               class="block w-full rounded-lg border border-[var(--borde-fuerte)] bg-[var(--superficie)] px-3 py-2 text-[13px] text-[var(--texto)] file:mr-3 file:rounded-md file:border-0 file:bg-[var(--superficie-2)] file:px-3 file:py-1 file:text-[13px] file:font-semibold file:text-[var(--texto)]" />
                    </x-campo>
                    <p wire:loading wire:target="archivoExcel" class="text-[12px] text-[var(--texto-suave)]">Subiendo el archivo…</p>

                    @if (!empty($resumen))
                        <x-alerta tipo="exito">
                            <p class="font-semibold">Carga completada.</p>
                            <p class="mt-1">
                                Órdenes: {{ $resumen['ordenes_creadas'] }} creadas y {{ $resumen['ordenes_actualizadas'] }} actualizadas ·
                                Líneas: {{ $resumen['lineas_creadas'] }} creadas y {{ $resumen['lineas_actualizadas'] }} actualizadas ·
                                Materiales: {{ $resumen['materiales_creados'] }} creados, {{ $resumen['materiales_completados'] }} completados con su compañía
                                y {{ $resumen['materiales_reactivados'] }} reactivados.
                                @if (($resumen['solicitudes_creadas'] ?? 0) > 0)
                                    · Clasificación: {{ $resumen['solicitudes_creadas'] }} solicitud(es) con
                                    {{ $resumen['productos_a_clasificar'] }} producto(s) que no existen en Websimex.
                                @endif
                                @if (($resumen['compradores_por_aprobar'] ?? 0) > 0)
                                    · Compradores: {{ $resumen['compradores_por_aprobar'] }} nuevo(s) por aprobar, porque no estaban en el catálogo del cliente.
                                @endif
                            </p>
                        </x-alerta>
                    @endif

                    @if (!empty($errores))
                        <x-alerta tipo="error">
                            <p class="font-semibold">No se guardó ninguna OC: corrija {{ count($errores) === 1 ? 'el error' : 'los ' . count($errores) . ' errores' }} y vuelva a cargar el archivo.</p>
                        </x-alerta>
                        @include('livewire.importaciones.partials.reporte-carga-oc', ['filas' => $errores, 'variante' => 'peligro'])
                    @endif

                    @if (!empty($avisos))
                        <x-alerta tipo="aviso">
                            <p class="font-semibold">{{ count($avisos) === 1 ? 'Un aviso' : count($avisos) . ' avisos' }}. No impide{{ count($avisos) === 1 ? '' : 'n' }} la carga, pero conviene revisarl{{ count($avisos) === 1 ? 'o' : 'os' }}.</p>
                        </x-alerta>
                        @include('livewire.importaciones.partials.reporte-carga-oc', ['filas' => $avisos, 'variante' => 'aviso'])
                    @endif
                </div>

                <div class="flex justify-end gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                    <x-secondary-button type="button" x-on:click="abierto = false">Cerrar</x-secondary-button>
                    <x-button type="button" wire:click="importar" wire:loading.attr="disabled" wire:target="importar,archivoExcel">
                        <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" wire:loading wire:target="importar" />
                        <span wire:loading.remove wire:target="importar">Cargar</span>
                        <span wire:loading wire:target="importar">Cargando…</span>
                    </x-button>
                </div>
            </div>
        </div>
    </template>
</div>