{{-- Control de operaciones EXPO, bolsa específica (expo/control-pedidos). Layout nuevo con el kit ui-ctc: indicadores
     por status (con conteo de posibles inconsistencias), búsqueda con filtros y etiquetas, y la lista con cabecera fija:
     semáforos de gestión del grupo de apoyo, cut off, inspecciones, notificaciones, ETS y DEX; detalle de cada DO. --}}
@php
    $hexColor = ['orange' => '#f97316', 'green' => '#22c55e', 'blue' => '#3b82f6', 'yellow' => '#eab308', 'cyan' => '#06b6d4', 'purple' => '#a855f7', 'gray' => '#94a3b8', 'red' => '#ef4444'];
    $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'], 'NOTIFICADO A FACTURACION' => $hexColor['red'],
    ];
    $nombres = ['IC' => 'ICA', 'IV' => 'Invima', 'CO' => 'Certificado de origen', 'BL' => 'Solicitud BL', 'AN' => 'Antinarcóticos', 'DI' => 'DIAN', 'PU' => 'Notificación al puerto', 'NV' => 'Notificación a la naviera'];
    $formatoFecha = fn ($f) => $f ? implode('/', array_reverse(explode('-', $f))) : '';
    $punto = fn ($color) => ['green' => 'bg-emerald-500', 'yellow' => 'bg-amber-500', 'red' => 'bg-rose-500'][$color] ?? 'bg-[var(--texto-tenue)]';

    $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 ($inconsistencia) { $chips['inconsistencia'] = ['Inconsistencia', $inconsistencia]; }
    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 EXPO" />

        @if (count($dashboard))
            <div class="grid grid-cols-2 gap-3 md:grid-cols-4 2xl:grid-cols-8">
                @foreach ($dashboard as $db)
                    <x-indicador :titulo="$db['titulo']" :valor="$db['total']" :total="$db['totalMuestra']" :porcentaje="$db['porcentaje']"
                                 :color="$coloresEtapa[$db['titulo']] ?? null" :alerta="$db['totalPendiente']" :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="Inconsistencias" para="inconsistencia">
                    <x-select id="inconsistencia" wire:model="inconsistencia">
                        <option value="">Todas</option>
                        @foreach ($lstInconsistencias 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-x-4 gap-y-1 text-[12px] text-[var(--texto-suave)]">
                    <span class="flex items-center gap-2"><span class="font-semibold text-[var(--texto)]">ETS</span>
                        <span class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-emerald-500"></span>6 días o más</span>
                        <span class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-amber-500"></span>3 a 5</span>
                        <span class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-rose-500"></span>menos de 3</span>
                    </span>
                    <span class="flex items-center gap-1.5 border-l border-[var(--borde)] pl-4" title="IC: ICA · IV: Invima · CO: certificado de origen · BL: solicitud BL · AN: antinarcóticos · DI: DIAN · PU: puerto · NV: naviera">
                        <x-icono nombre="information-circle" class="h-4 w-4" /> Siglas
                    </span>
                    <span class="flex items-center gap-1.5 border-l border-[var(--borde)] pl-4"><span class="h-2.5 w-2.5 rounded-[3px] border border-purple-300 bg-purple-100 dark:border-purple-500/50 dark:bg-purple-500/20"></span>Posible inconsistencia</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 ctc-fija-ultima" style="left: 44px"># DO</th>
                            <th>Cliente</th>
                            <th>Pedido</th>
                            <th title="IC: ICA · IV: Invima · CO: certificado de origen · BL: solicitud BL">Gestión grupo apoyo</th>
                            <th>Booking</th>
                            <th>Importador</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><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>Ingreso mercancía</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 title="AN: antinarcóticos · DI: DIAN">Inspecciones carga</th>
                            <th title="PU: puerto · NV: naviera">Notificación aut. embarque</th>
                            <th>Fecha ETS</th>
                            <th>Asistente</th>
                            <th>DEX</th>
                            <th>Cambios en viaje</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($pedidos as $ped)
                            @php
                                $do = (string) $ped->NUMERO_DO;
                                $doJs = \Illuminate\Support\Js::from($do)->toHtml();
                                $inconsistente = $ped->POSIBLE_INCONSISTENCIA == 'SI';
                            @endphp
                            <tr wire:key="bolsa-{{ $do }}"
                                @if ($inconsistente) data-sin-hover style="background-color: color-mix(in srgb, #a855f7 12%, transparent);" title="Posible inconsistencia: {{ $ped->DES_INCONSISTENCIA }}" @endif
                                :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 ctc-fija-ultima whitespace-nowrap font-semibold" style="left: 44px">{{ $do }}</td>
                                <td class="min-w-[170px] text-[12px] leading-snug">{{ $ped->CLIENTE }}</td>
                                <td class="whitespace-nowrap">{{ $ped->NUMERO_PEDIDO }}</td>
                                <td><div class="flex gap-1">@foreach ($ped->semaforosApoyo as $sigla => $color)<x-semaforo :sigla="$sigla" :color="$color" :titulo="$nombres[$sigla]" />@endforeach</div></td>
                                <td>@if ($ped->BOOKING)<x-etiqueta>{{ $ped->BOOKING }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="min-w-[150px] text-[12px]">{{ $ped->IMPORTADOR }}</td>
                                <td class="whitespace-nowrap">{!! $ped->ARRIBO_MOTONAVE ? e($ped->ARRIBO_MOTONAVE) : $vacio !!}</td>
                                @foreach ([['CUT_OFF_DOCUMENTAL', 'CUMPLIMIENTO_CDOC', 'colorCutOffDoc'], ['CUT_OFF_FISICO', 'CUMPLIMIENTO_CFISICO', 'colorCutOffFisico']] as [$campo, $cumplido, $color])
                                    @if ($loop->last)
                                        <td class="whitespace-nowrap">{!! $ped->INGRESO_MERCANCIA ? e($ped->INGRESO_MERCANCIA) : $vacio !!}</td>
                                    @endif
                                    <td class="whitespace-nowrap">
                                        @if ($ped->$campo)
                                            <span class="inline-flex items-center gap-1.5">
                                                @if ($ped->$cumplido)
                                                    <x-icono nombre="check-circle" variante="m" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" title="Cumplido" />
                                                @else
                                                    <span class="h-2 w-2 rounded-full {{ $punto($ped->$color) }}" title="Pendiente"></span>
                                                @endif
                                                <span class="font-semibold">{{ substr($ped->$campo, 0, 10) }}</span>
                                            </span>
                                        @else
                                            {!! $vacio !!}
                                        @endif
                                    </td>
                                @endforeach
                                <td><div class="flex gap-1">@foreach ($ped->semaforosInspeccion as $sigla => $color)<x-semaforo :sigla="$sigla" :color="$color" :titulo="$nombres[$sigla]" />@endforeach</div></td>
                                <td><div class="flex gap-1">@foreach ($ped->semaforosNotificacion as $sigla => $color)<x-semaforo :sigla="$sigla" :color="$color" :titulo="$nombres[$sigla]" />@endforeach</div></td>
                                <td class="whitespace-nowrap">
                                    @if ($ped->FECHA_ETS)
                                        <span class="inline-flex items-center gap-1.5">
                                            @if ($ped->FECHA_ZARPE)
                                                <x-icono nombre="check-circle" variante="m" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" title="Zarpado {{ $ped->FECHA_ZARPE }}" />
                                            @else
                                                <span class="h-2 w-2 rounded-full {{ $punto($ped->colorZarpe) }}" title="Sin zarpe"></span>
                                            @endif
                                            <span class="font-semibold">{{ substr($ped->FECHA_ETS, 0, 10) }}</span>
                                        </span>
                                    @else
                                        {!! $vacio !!}
                                    @endif
                                </td>
                                <td>
                                    @if ($ped->avatarAsistente)
                                        <img src="{{ $ped->avatarAsistente }}" alt="" title="{{ $ped->ASISTENTE }}" class="h-8 w-8 rounded-full object-cover">
                                    @elseif ($ped->ASISTENTE)
                                        @php $iniciales = collect(explode(' ', trim($ped->ASISTENTE)))->filter()->take(2)->map(fn ($p) => mb_substr($p, 0, 1))->implode(''); @endphp
                                        <span class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--acento-suave)] text-[11px] font-bold uppercase text-[var(--acento-texto)]" title="{{ $ped->ASISTENTE }}">{{ $iniciales }}</span>
                                    @else
                                        {!! $vacio !!}
                                    @endif
                                </td>
                                <td>
                                    @if ($ped->FECHA_ZARPE)
                                        <span class="inline-block h-2.5 w-2.5 rounded-full {{ $punto($ped->colorDex) }}" title="{{ $ped->colorDex == 'green' ? 'DEX firmado' : 'DEX pendiente' }}"></span>
                                    @endif
                                </td>
                                <td>
                                    @if ($ped->CAMBIO_MOTONAVE == 'SI')
                                        <x-etiqueta variante="peligro" title="El viaje o la motonave cambiaron"><x-icono nombre="arrow-path" class="h-3.5 w-3.5" /> Cambió</x-etiqueta>
                                    @endif
                                </td>
                                <td>@if ($ped->ETAPA)<x-etiqueta :color="$hexColor[$ped->colorStatus] ?? null">{{ $ped->ETAPA }}</x-etiqueta>@endif</td>
                            </tr>
                            <tr wire:key="bolsa-{{ $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']" />
</div>