{{-- Sincronizar pedidos de exportación con WebSimex (/expo/sincronizar-pedidos). Kit ui-ctc (MigracionLayout.MD, L3):
     fechas de apertura del DO, importación de pedidos (ex_po) y sincronización de contenedores (ex_po_contenedores) del
     grupo en sesión, con la tabla de lo importado o actualizado. Los dos botones escriben en la base. --}}
<div>
    <x-pagina>
        <x-encabezado-pagina ruta="Exportaciones · Operaciones" titulo="Sincronizar pedidos de exportación"
                             descripcion="Parámetros para la sincronización de pedidos de exportación con el sistema de información WebSimex." />

        @if ($errors->any())
            <x-alerta tipo="error">
                <p class="flex items-center gap-2 font-semibold">
                    <x-icono nombre="exclamation-triangle" class="h-4 w-4" /> Upss. Se han presentado los siguientes errores.
                </p>
                <ul class="mt-1 list-disc pl-6">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </x-alerta>
        @endif

        <x-tarjeta titulo="Parámetros" descripcion="Rango de fechas de apertura del DO en WebSimex.">
            <div class="flex flex-wrap items-end gap-3">
                <x-campo etiqueta="Fecha inicial" para="fechaInicio" class="w-48">
                    <x-input type="date" id="fechaInicio" placeholder="Fecha Inicial Apertura DO" wire:model.live="fechaInicio" />
                </x-campo>
                <x-campo etiqueta="Fecha final" para="fechaFin" class="w-48">
                    <x-input type="date" id="fechaFin" placeholder="Fecha Final Apertura DO" wire:model.live="fechaFin" />
                </x-campo>
                <x-button type="button" wire:click="importarExportaciones()" wire:loading.attr="disabled">
                    <x-icono nombre="arrow-path" class="h-4 w-4" wire:loading.class="animate-spin" wire:target="importarExportaciones" /> Iniciar importación de pedidos
                </x-button>
                <x-secondary-button wire:click="importarContenedores()" wire:loading.attr="disabled">
                    <x-icono nombre="arrow-path" class="h-4 w-4" wire:loading.class="animate-spin" wire:target="importarContenedores" /> Iniciar sincronización de contenedores
                </x-secondary-button>
            </div>
        </x-tarjeta>

        <div wire:loading wire:target="importarExportaciones" class="w-full">
            <x-alerta tipo="info">
                La solicitud de sincronización de <strong>pedidos de exportación</strong> está siendo procesada en estos momentos.
                Este proceso puede tardar algunos minutos. Por favor espere.
            </x-alerta>
        </div>
        <div wire:loading wire:target="importarContenedores" class="w-full">
            <x-alerta tipo="info">
                La solicitud de sincronización de <strong>contenedores</strong> está siendo procesada en estos momentos.
                Este proceso puede tardar algunos minutos. Por favor espere.
            </x-alerta>
        </div>

        @if (count($pedidosImportados) > 0)
            <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
                <div class="flex items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
                    <h2 class="text-[15px] font-bold text-[var(--texto)]">Pedidos importados</h2>
                    <span class="text-[12px] text-[var(--texto-suave)] tabular-nums">{{ count($pedidosImportados) }}</span>
                </div>
                <div class="ctc-tabla-caja">
                    <table class="ctc-tabla">
                        <thead><tr>
                            <th class="text-right">#</th>
                            <th>Pedido</th>
                            <th>Número DO</th>
                            <th>Booking</th>
                            <th>Fecha orden de cargue</th>
                        </tr></thead>
                        <tbody>
                            @foreach ($pedidosImportados as $ped)
                                <tr wire:key="ped-{{ $loop->index }}">
                                    <td class="text-right tabular-nums">{{ $loop->iteration }}</td>
                                    <td>{{ $ped['po'] }}</td>
                                    <td class="whitespace-nowrap">{{ $ped['numero_do'] }}</td>
                                    <td>{{ $ped['booking'] }}</td>
                                    <td class="whitespace-nowrap">{{ $ped['fecha_orden'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </section>
        @endif

        @if (count($contenedoresImportados) > 0)
            <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
                <div class="flex items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
                    <h2 class="text-[15px] font-bold text-[var(--texto)]">Contenedores sincronizados</h2>
                    <span class="text-[12px] text-[var(--texto-suave)] tabular-nums">{{ count($contenedoresImportados) }}</span>
                </div>
                <div class="ctc-tabla-caja">
                    <table class="ctc-tabla">
                        <thead><tr>
                            <th class="text-right">#</th>
                            <th>Pedido</th>
                            <th>Contenedor</th>
                            <th>Tamaño</th>
                            <th>Sello</th>
                            <th>Fecha ingreso puerto</th>
                            <th>Fecha ingreso vacío</th>
                            <th>Operación</th>
                        </tr></thead>
                        <tbody>
                            @foreach ($contenedoresImportados as $ped)
                                <tr wire:key="con-{{ $loop->index }}">
                                    <td class="text-right tabular-nums">{{ $loop->iteration }}</td>
                                    <td>{{ $ped['PEDIDO'] }}</td>
                                    <td class="whitespace-nowrap">{{ $ped['CONTENEDOR'] }}</td>
                                    <td>{{ $ped['TAMANO'] }}</td>
                                    <td>{{ $ped['SELLO'] }}</td>
                                    <td class="whitespace-nowrap">{{ $ped['FECHA_INGRESO_PUERTO'] }}</td>
                                    <td class="whitespace-nowrap">{{ $ped['FECHA_INGRESO_VACIO'] }}</td>
                                    <td>
                                        <x-etiqueta :variante="$ped['OPERACION'] === 'Sincronizado' ? 'exito' : 'info'">{{ $ped['OPERACION'] }}</x-etiqueta>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </section>
        @endif
    </x-pagina>
</div>