{{-- Control de contenedores V2 (impo/control-contenedores): trazabilidad de las unidades de carga activas, del arribo
     a puerto a la devolución del vacío. Layout nuevo con el kit ui-ctc (tabla y búsqueda, sin indicadores): pestañas
     En proceso / Finalizados, cabecera y dos primeras columnas fijas, semáforos de bodegajes y demoras. --}}
@php
    $items = $tab === 'finalizados' ? $finalizados : $enProceso;
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $sinInfo = fn ($v) => $v === null || $v === '' || $v === 'SIN INFO';
    $columnas = 23;
@endphp
<div>
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Control de contenedores"
                             descripcion="Trazabilidad de las unidades de carga activas, desde el arribo a puerto hasta la devolución del vacío." />

        <x-barra-busqueda modelo="search" accion="refrescar" vivo placeholder="Buscar por N° DO, pedido, contenedor o importador" :activos="$search ? 1 : 0">
            <x-slot name="ayuda">La lista se guarda 5 minutos para que cambiar de pestaña o de página sea inmediato. Consultar trae los datos al momento.</x-slot>
            @if ($search)
                <x-slot name="chips">
                    <x-chip-filtro etiqueta="Búsqueda" :valor="$search" wire:click="$set('search', '')" />
                </x-slot>
            @endif
        </x-barra-busqueda>

        <section 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">
                <div class="flex gap-1" role="tablist">
                    <x-pestana etiqueta="En proceso" :conteo="$enProceso->total()" icono="arrow-path" :activa="$tab !== 'finalizados'" wire:click="verPestana('proceso')" />
                    <x-pestana etiqueta="Finalizados" :conteo="$finalizados->total()" icono="check-circle" :activa="$tab === 'finalizados'" wire:click="verPestana('finalizados')" />
                </div>
                <div class="flex flex-wrap items-center gap-4 py-2 text-[12px] text-[var(--texto-suave)]">
                    <span class="flex items-center gap-3" title="Bodegajes (retiro del puerto) y demoras (devolución del vacío)">
                        <span class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-emerald-500"></span>A tiempo</span>
                        <span class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-rose-500"></span>Con bodegajes / demoras</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-12 min-w-12" style="left: 0"><span class="sr-only">Seguimiento</span></th>
                            <th class="ctc-fija ctc-fija-ultima" style="left: 48px"># Contenedor</th>
                            <th># DO</th>
                            <th>Pedido</th>
                            <th>Tipo carga</th>
                            <th>Medio transporte</th>
                            <th>Analista segmento</th>
                            <th><x-orden-columna etiqueta="ETA" :activo="$orderBy == 'importaciones.FECHA_ESTIMADA_ARRIBO'" :direccion="$orderType" wire:click="ordenarInfo('importaciones.FECHA_ESTIMADA_ARRIBO', '{{ $orderType }}')" /></th>
                            <th>Días para arribo</th>
                            <th>Fecha arribo</th>
                            <th>Fecha descargue</th>
                            <th>Fecha nacionalización</th>
                            <th>Eficiencia nacionalización</th>
                            <th>Transportador</th>
                            <th>Días libres puerto</th>
                            <th>Fecha máx. retiro</th>
                            <th>Retiro mercancía</th>
                            <th>Puerto retiro</th>
                            <th>Planta</th>
                            <th>Ingreso planta</th>
                            <th>Días libres naviera</th>
                            <th>Fecha máx. devolución</th>
                            <th>Fecha devolución</th>
                            <th>Lugar devolución</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($items as $uc)
                            <tr wire:key="uc-{{ $uc->ID_UNIDAD_CARGA }}">
                                <td class="ctc-fija !px-2" style="left: 0">
                                    <a href="{{ pantalla('/impo/control-contenedores/seguimiento/' . $uc->ID_UNIDAD_CARGA) }}" class="ctc-accion"
                                       title="Seguimiento del contenedor {{ $uc->NUMERO_ID_CONTENEDOR }}" aria-label="Seguimiento del contenedor {{ $uc->NUMERO_ID_CONTENEDOR }}">
                                        <x-icono nombre="cube" sprite class="h-[18px] w-[18px]" />
                                    </a>
                                </td>
                                <td class="ctc-fija ctc-fija-ultima whitespace-nowrap font-mono font-semibold" style="left: 48px">{{ $uc->NUMERO_ID_CONTENEDOR }}</td>
                                <td class="whitespace-nowrap">{{ $uc->NUMERO_DO }}</td>
                                <td class="whitespace-nowrap">{{ $uc->NUMERO_PEDIDO }}</td>
                                <td>@if ($uc->TIPO_CARGA)<x-etiqueta :variante="$uc->TIPO_CARGA == 'FCL' ? 'aviso' : 'info'">{{ $uc->TIPO_CARGA }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="whitespace-nowrap text-[12px]">{{ $uc->MEDIO_TRANSPORTE }}</td>
                                <td>@if ($uc->ANALISTA)<x-etiqueta>{{ $uc->ANALISTA }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="whitespace-nowrap">{!! $sinInfo($uc->FECHA_ESTIMADA_ARRIBO) ? $vacio : e($uc->FECHA_ESTIMADA_ARRIBO) !!}</td>
                                <td class="whitespace-nowrap">
                                    @if (!empty($uc->FECHA_LLEGADA_MCIA))
                                        <x-etiqueta variante="exito">Arribado</x-etiqueta>
                                    @elseif (is_numeric($uc->DIAS_ARRIBO))
                                        <span class="inline-flex items-center gap-1.5 text-[12.5px]">
                                            <span class="h-2 w-2 rounded-full {{ $uc->DIAS_ARRIBO <= 0 ? 'bg-emerald-500' : 'bg-rose-500' }}" aria-hidden="true"></span>
                                            {{ $uc->DIAS_ARRIBO }} días
                                        </span>
                                    @else
                                        {!! $vacio !!}
                                    @endif
                                </td>
                                @foreach (['FECHA_LLEGADA_MCIA', 'FECHA_DESCARGUE', 'FECHA_NACIONALIZACION'] as $campo)
                                    <td>@if (!$sinInfo($uc->$campo))<x-etiqueta variante="acento">{{ $uc->$campo }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                @endforeach
                                <td class="whitespace-nowrap font-semibold">{!! $sinInfo($uc->EFICIENCIA_NACIONALIZACION) ? $vacio : e(mb_strtolower($uc->EFICIENCIA_NACIONALIZACION)) !!}</td>
                                <td class="min-w-[140px] text-[12px]">{!! $sinInfo($uc->TRANSPORTADOR) ? $vacio : e($uc->TRANSPORTADOR) !!}</td>
                                <td class="whitespace-nowrap text-right tabular-nums">{{ $uc->DIAS_PUERTO }} días</td>
                                <td class="whitespace-nowrap">
                                    @if ($uc->FECHA_MAX_RETIRO)
                                        <span class="inline-flex items-center gap-1.5">
                                            @if ($uc->BODEGAJES)<span class="h-2 w-2 rounded-full {{ $uc->BODEGAJES == 'NO' ? 'bg-emerald-500' : 'bg-rose-500' }}" title="Bodegajes: {{ $uc->BODEGAJES }}"></span>@endif
                                            {{ $uc->FECHA_MAX_RETIRO }}
                                        </span>
                                    @else
                                        {!! $vacio !!}
                                    @endif
                                </td>
                                <td>@if ($uc->FECHA_RETIRO_PUERTO)<x-etiqueta variante="acento">{{ $uc->FECHA_RETIRO_PUERTO }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="whitespace-nowrap font-semibold">{{ $uc->PUERTO_RETIRO }}</td>
                                <td>@if ($uc->PLANTA)<x-etiqueta>{{ $uc->PLANTA }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td>@if ($uc->FECHA_INGRESO_PLANTA)<x-etiqueta variante="acento">{{ $uc->FECHA_INGRESO_PLANTA }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="whitespace-nowrap text-right tabular-nums">{{ $uc->DIAS_NAVIERA }} días</td>
                                <td class="whitespace-nowrap">
                                    @if ($uc->FECHA_MAX_DEVOLUCION)
                                        <span class="inline-flex items-center gap-1.5">
                                            @if ($uc->DEMORAS)<span class="h-2 w-2 rounded-full {{ $uc->DEMORAS == 'NO' ? 'bg-emerald-500' : 'bg-rose-500' }}" title="Demoras: {{ $uc->DEMORAS }}"></span>@endif
                                            {{ $uc->FECHA_MAX_DEVOLUCION }}
                                        </span>
                                    @else
                                        {!! $vacio !!}
                                    @endif
                                </td>
                                <td>@if ($uc->FECHA_DEVOLUCION_VACIO)<x-etiqueta variante="acento">{{ $uc->FECHA_DEVOLUCION_VACIO }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td>@if ($uc->LUGAR_DEVOLUCION)<x-etiqueta>{{ $uc->LUGAR_DEVOLUCION }}</x-etiqueta>@else{!! $vacio !!}@endif</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">Sin unidades de carga con esta búsqueda.</p></div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($items->hasPages())
                <div class="border-t border-[var(--borde)] px-5 py-3">{{ $items->links('vendor.pagination.ctc-livewire') }}</div>
            @endif
        </section>
    </x-pagina>

    <x-icono-simbolos :nombres="['o:cube']" />
</div>