{{-- Control de operaciones de exportación (expo/pedidos). Gemela de importaciones.ordenes-compra. Layout nuevo con el
     kit ui-ctc: indicadores por status, búsqueda con filtros y etiquetas, y la lista con cabecera fija, paginada, con
     los semáforos de cut off y el detalle de cada DO (reserva de contenedores, SAE y unidades de carga). --}}
@php
    // Color de cada status (el mismo que antes tenía cada uno), para la barra del indicador y la etiqueta.
    $hexColor = ['orange' => '#f97316', 'green' => '#22c55e', 'blue' => '#3b82f6', 'yellow' => '#eab308', 'cyan' => '#06b6d4', 'purple' => '#a855f7', 'gray' => '#94a3b8'];
    $coloresEtapa = [
        'ORDEN ABIERTA SIN BOOKING' => $hexColor['orange'],
        'BOOKING CONFIRMADO' => $hexColor['green'],
        'CUT OFF DOCUMENTAL CUMPLIDO' => $hexColor['blue'],
        'INGRESO A PUERTO' => $hexColor['yellow'],
        'CUT OFF FISICO' => $hexColor['cyan'],
        'RADICADO ANTE PUERTO Y NAVIERA' => $hexColor['cyan'],
        'ZARPADO' => $hexColor['purple'],
        'DEX' => $hexColor['gray'],
    ];
    // Semáforo de cut off (App\Http\Clases\ValidarCutoff): verde ≥ 3 días, amarillo 1–3, rojo ≤ 1.
    $luz = ['green' => 'exito', 'yellow' => 'aviso', 'red' => 'peligro'];
    $formatoFecha = fn ($f) => $f ? implode('/', array_reverse(explode('-', $f))) : '';

    $chips = [];
    if ($search) { $chips['search'] = ['Búsqueda', $search]; }
    if ($codigoProceso) { $chips['codigoProceso'] = ['Proceso', $procesos[$codigoProceso] ?? $codigoProceso]; }
    if ($codigoSucursal) { $chips['codigoSucursal'] = ['Sucursal', $sucursales[$codigoSucursal] ?? $codigoSucursal]; }
    if ($status) { $chips['status'] = ['Status', $status]; }
    if ($txtImportador) { $chips['txtImportador'] = ['Importador', $txtImportador]; }
    if (($fechaAperturaInicial && $fechaAperturaInicial != $aperturaDesde) || ($fechaAperturaFinal && $fechaAperturaFinal != date('Y-m-d'))) {
        $chips['fechas'] = ['Apertura', $formatoFecha($fechaAperturaInicial) . ' – ' . $formatoFecha($fechaAperturaFinal)];
    }
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $columnas = 18;
@endphp
<div x-data="{
        abierto: null, ancho: 1100,
        init() {
            const medir = () => { if (this.$refs.lista) { this.ancho = this.$refs.lista.clientWidth; } };
            medir();
            new ResizeObserver(medir).observe(this.$refs.lista);
        },
        alternar(numeroDo) { this.abierto = this.abierto === numeroDo ? null : numeroDo; },
     }">
    <x-pagina>
        <x-encabezado-pagina ruta="Exportaciones · Operaciones" titulo="Control de Operaciones">
            <x-slot name="acciones">
                <x-enlace-boton href="{{ pantalla('/expo/pedidos/historico') }}">
                    <x-icono nombre="clock" class="h-4 w-4" />
                    Histórico
                </x-enlace-boton>
                <x-secondary-button wire:click="descargarPedidos" wire:loading.attr="disabled" wire:target="descargarPedidos" :disabled="$totalPedidos == 0">
                    <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                    <span wire:loading.remove wire:target="descargarPedidos">Descargar</span>
                    <span wire:loading wire:target="descargarPedidos">Generando…</span>
                </x-secondary-button>
            </x-slot>
        </x-encabezado-pagina>

        {{-- Indicadores por status: clic filtra la lista (otro clic quita el filtro) --}}
        @if (count($dashboard))
            <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(130px,1fr))]">
                @foreach ($dashboard as $db)
                    <x-indicador :titulo="$db['titulo']" :valor="$db['total']" :total="$db['totalMuestra']" :porcentaje="$db['porcentaje']"
                                 :color="$coloresEtapa[$db['titulo']] ?? null" :activo="$status == $db['titulo']"
                                 wire:click="filtroDashboard({{ \Illuminate\Support\Js::from($db['titulo']) }})" wire:key="indicador-{{ $loop->index }}" />
                @endforeach
            </div>
        @endif

        <x-barra-busqueda modelo="search" accion="consultar" placeholder="Buscar por booking, N° DO o pedido" :activos="count($chips)">
            <x-slot name="filtros">
                <x-campo etiqueta="Procesos" para="codigoProceso">
                    <x-select id="codigoProceso" wire:model="codigoProceso">
                        <option value="">Todos</option>
                        @foreach ($procesos as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Sucursales" para="codigoSucursal">
                    <x-select id="codigoSucursal" wire:model="codigoSucursal">
                        <option value="">Todas</option>
                        @foreach ($sucursales as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Status" para="status">
                    <x-select id="status" wire:model="status">
                        <option value="">Todos</option>
                        @foreach ($lstStatus as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Importador" para="txtImportador">
                    <x-input id="txtImportador" type="text" wire:model="txtImportador" wire:keydown.enter="consultar" placeholder="Nombre del importador" />
                </x-campo>
                <div class="sm:col-span-2">
                    <x-label for="fechaAperturaInicial" value="Fecha apertura" />
                    <div class="mt-1 flex h-[38px] items-center gap-1 rounded-md border border-[var(--borde-fuerte)] bg-[var(--superficie)] px-2 shadow-sm focus-within:border-[var(--acento)] focus-within:ring-1 focus-within:ring-[var(--acento)]">
                        <input type="date" id="fechaAperturaInicial" wire:model="fechaAperturaInicial" aria-label="Fecha inicial"
                               class="min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] text-[var(--texto)] focus:ring-0">
                        <x-icono nombre="arrow-right" variante="m" class="h-3 w-3 text-[var(--texto-tenue)]" />
                        <input type="date" wire:model="fechaAperturaFinal" aria-label="Fecha final"
                               class="min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] text-[var(--texto)] focus:ring-0">
                    </div>
                </div>
            </x-slot>
            @if (count($chips))
                <x-slot name="chips">
                    @foreach ($chips as $campo => [$etiqueta, $valor])
                        <x-chip-filtro :etiqueta="$etiqueta" :valor="$valor" wire:click="limpiarFiltro('{{ $campo }}')" wire:key="chip-{{ $campo }}" />
                    @endforeach
                    <button type="button" wire:click="limpiarFiltros" class="text-[12px] text-[var(--texto-suave)] underline hover:text-[var(--texto)]">Limpiar todo</button>
                </x-slot>
            @endif
        </x-barra-busqueda>

        <section x-ref="lista" class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
            <div class="flex flex-wrap items-center justify-between gap-4 border-b border-[var(--borde)] px-5 py-3">
                <h2 class="flex items-center gap-2 text-[14px] font-semibold text-[var(--texto)]">
                    <x-icono nombre="list-bullet" class="h-[18px] w-[18px] text-[var(--texto-suave)]" />
                    Operaciones en curso
                    <span class="rounded-full bg-[var(--acento-suave)] px-2 py-0.5 text-[11px] font-bold tabular-nums text-[var(--acento-texto)]">{{ number_format($totalPedidos, 0, ',', '.') }}</span>
                </h2>
                <div class="flex flex-wrap items-center gap-4 text-[12px] text-[var(--texto-suave)]">
                    <span class="flex items-center gap-3" title="Tiempo hasta el cut off (o con que se cumplió)">
                        <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-[3px] border border-emerald-300 bg-emerald-100 dark:border-emerald-500/50 dark:bg-emerald-500/20"></span>3 días o más</span>
                        <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-[3px] border border-amber-300 bg-amber-100 dark:border-amber-500/50 dark:bg-amber-500/20"></span>1 a 3 días</span>
                        <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-[3px] border border-rose-300 bg-rose-100 dark:border-rose-500/50 dark:bg-rose-500/20"></span>1 día o menos</span>
                    </span>
                    <span wire:loading.delay class="flex items-center gap-1.5 whitespace-nowrap text-[var(--acento-texto)]" role="status">
                        <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…
                    </span>
                </div>
            </div>

            <div class="ctc-tabla-caja">
                <table class="ctc-tabla">
                    <thead>
                        <tr>
                            <th class="ctc-fija w-11 min-w-11" style="left: 0"><span class="sr-only">Detalle</span></th>
                            <th class="ctc-fija w-[76px] min-w-[76px]" style="left: 44px">Acciones</th>
                            <th class="ctc-fija ctc-fija-ultima" style="left: 120px"># DO</th>
                            <th>Booking</th>
                            <th>Pedido</th>
                            <th>Cliente</th>
                            <th><x-orden-columna etiqueta="ETA" :activo="$orderBy == 'viajes_motonaves.FECHA_ETA'" :direccion="$orderType" wire:click="ordenarInfo('viajes_motonaves.FECHA_ETA', '{{ $orderType }}')" /></th>
                            <th>Suc. oper.</th>
                            <th>Pto salida</th>
                            <th><x-orden-columna etiqueta="Cut off documental" :activo="$orderBy == 'viajes_motonaves.CUT_OFF_DOCUMENTAL'" :direccion="$orderType" wire:click="ordenarInfo('viajes_motonaves.CUT_OFF_DOCUMENTAL', '{{ $orderType }}')" /></th>
                            <th><x-orden-columna etiqueta="Cut off físico" :activo="$orderBy == 'viajes_motonaves.CUT_OFF_FISICO'" :direccion="$orderType" wire:click="ordenarInfo('viajes_motonaves.CUT_OFF_FISICO', '{{ $orderType }}')" /></th>
                            <th>Ingreso mercancía</th>
                            <th>Fecha zarpe</th>
                            <th>Firma DEX</th>
                            <th>Proceso</th>
                            <th>Importador</th>
                            <th>Modalidad</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($pedidos as $ped)
                            @php
                                $do = (string) $ped->NUMERO_DO;
                                $doJs = \Illuminate\Support\Js::from($do)->toHtml();
                            @endphp
                            <tr wire:key="expo-{{ $do }}" :class="abierto === @js($do) && '[&>td]:!bg-[var(--superficie-3)]'">
                                <td class="ctc-fija !px-2" style="left: 0">
                                    <button type="button" x-on:click="alternar(@js($do))" :aria-expanded="abierto === @js($do)" aria-label="Ver detalle del DO {{ $do }}" title="Ver detalle"
                                            class="flex h-7 w-7 items-center justify-center rounded-md text-[var(--texto-suave)] hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]">
                                        <x-icono nombre="chevron-right" variante="m" sprite class="h-4 w-4 transition-transform" x-bind:class="abierto === {{ $doJs }} && 'rotate-90'" />
                                    </button>
                                </td>
                                <td class="ctc-fija !px-1.5" style="left: 44px">
                                    <div class="flex gap-0.5">
                                        <a href="{{ pantalla('/seguimiento-exp/' . rawurlencode($do)) }}" class="ctc-accion" title="Seguimiento DO {{ $do }}" aria-label="Seguimiento del DO {{ $do }}"><x-icono nombre="calendar-days" sprite class="h-[18px] w-[18px]" /></a>
                                        @if ($dinamicos)
                                            <a href="{{ pantalla('/dinamicos-exp/' . rawurlencode($do)) }}" class="ctc-accion" title="Información personalizada DO {{ $do }}" aria-label="Información personalizada del DO {{ $do }}"><x-icono nombre="plus-circle" sprite class="h-[18px] w-[18px]" /></a>
                                        @endif
                                    </div>
                                </td>
                                <td class="ctc-fija ctc-fija-ultima whitespace-nowrap font-semibold" style="left: 120px">{{ $do }}</td>
                                <td>@if ($ped->BOOKING)<x-etiqueta>{{ $ped->BOOKING }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="whitespace-nowrap">{{ $ped->NUMERO_PEDIDO }}</td>
                                <td class="min-w-[180px] text-[12px] leading-snug">{{ $ped->CLIENTE }}</td>
                                <td class="whitespace-nowrap">{!! $ped->ARRIBO_MOTONAVE ? e($ped->ARRIBO_MOTONAVE) : $vacio !!}</td>
                                <td>@if ($ped->SUCURSAL)<x-etiqueta variante="acento" class="font-bold">{{ $ped->SUCURSAL }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="whitespace-nowrap">{{ $ped->SUCURSAL_OP }}</td>
                                @foreach ([['CUT_OFF_DOCUMENTAL', 'colorLuzDoc', 'textoDoc', 'diferenciaDoc'], ['CUT_OFF_FISICO', 'colorLuz', 'texto', 'diferencia']] as [$campo, $color, $texto, $diferencia])
                                    <td class="min-w-[150px]">
                                        @if ($ped->$campo)
                                            <x-etiqueta :variante="$luz[$ped->$color] ?? 'neutro'">{{ $ped->$campo }}</x-etiqueta>
                                            <p class="mt-1 text-[11.5px] text-[var(--texto-suave)]">{{ $ped->$texto }} {{ $ped->$diferencia }}</p>
                                        @else
                                            {!! $vacio !!}
                                        @endif
                                    </td>
                                @endforeach
                                <td class="whitespace-nowrap">{!! $ped->INGRESO_MERCANCIA ? e($ped->INGRESO_MERCANCIA) : $vacio !!}</td>
                                <td class="whitespace-nowrap">{!! $ped->FECHA_ZARPE ? e($ped->FECHA_ZARPE) : $vacio !!}</td>
                                <td class="whitespace-nowrap">{!! $ped->FIRMA_DEX ? e($ped->FIRMA_DEX) : $vacio !!}</td>
                                <td class="min-w-[120px] text-[12px]">{{ $ped->PROCESO }}</td>
                                <td class="min-w-[160px] text-[12px]">{{ $ped->IMPORTADOR }}</td>
                                <td class="min-w-[140px] text-[12px]">{{ $ped->MODALIDAD }}</td>
                                <td>@if ($ped->ETAPA)<x-etiqueta :color="$hexColor[$ped->colorStatus] ?? null">{{ $ped->ETAPA }}</x-etiqueta>@endif</td>
                            </tr>
                            <tr wire:key="expo-{{ $do }}-detalle" data-sin-hover x-show="abierto === @js($do)" x-cloak>
                                <td colspan="{{ $columnas }}" class="!border-b !bg-[var(--superficie-3)] !p-0">
                                    @include('livewire.exportaciones.partials.detalle-pedido', ['ped' => $ped])
                                </td>
                            </tr>
                        @empty
                            <tr data-sin-hover>
                                <td colspan="{{ $columnas }}" class="!p-0">
                                    <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]"><x-icono nombre="magnifying-glass" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                                    <p class="mt-2">No hay operaciones con estos filtros.</p></div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($pedidos->hasPages())
                <div class="border-t border-[var(--borde)] px-5 py-3">{{ $pedidos->links('vendor.pagination.ctc-livewire') }}</div>
            @endif
        </section>
    </x-pagina>

    <x-icono-simbolos :nombres="['m:chevron-right', 'o:calendar-days', 'o:plus-circle']" />
</div>