{{-- Control de contenedores, versión anterior (/control-contenedores). Kit ui-ctc (MigracionLayout.MD, L3): encabezado
     con las acciones (transportadores, importar contenedores ASERCOL o de pedidos existentes, sincronizar con CTI),
     búsqueda con filtros, pestañas En curso / Histórico con cabecera fija y paginación (50), formulario del contenedor
     (citas, productos, entrega) y diálogos de notificación al transportador, asignación masiva de transportador y
     resumen de documentos del DO. No confundir con Control de contenedores V2 (impo/contenedores). --}}
@php
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    // Etiqueta según el texto que arma la consulta (Mora / Faltan / Vencido / A tiempo), igual que antes.
    $variante = function ($texto) {
        $texto = (string) $texto;
        if (stristr($texto, 'mora')) return 'peligro';
        if (stristr($texto, 'faltan')) return 'aviso';
        if (stristr($texto, 'vencido')) return 'peligro';
        return 'exito';
    };
    $esAduana = $id_grupo_empresarial == 7;
    $colEnCurso = 25 + ($esAduana ? 1 : 0);
    $hexNuevo = '#0284c7';
@endphp
<div x-data="{
        docsDe: null, docsHtml: '', docsError: false,
        verDocumentos(ndo) {
            this.docsDe = ndo; this.docsHtml = ''; this.docsError = false;
            fetch('https://central.asercolgroup.com/ctibun/fases/documentosxdo?numdo=' + encodeURIComponent(ndo) + '&formato=tabla')
                .then(r => r.json())
                .then(d => { this.docsHtml = d.general ?? '' })
                .catch(() => { this.docsError = true });
        }
     }"
     x-on:ver-documentos="verDocumentos($event.detail)">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Control de contenedores"
                             :descripcion="$openModal ? null : 'Contenedores de los pedidos, del arribo a la devolución del vacío: citas de retiro, transportador y notificaciones.'">
            @if (! $openModal)
                <x-slot name="acciones">
                    <x-enlace-boton href="{{ pantalla('/transportadores') }}"><x-icono nombre="truck" /> Transportadores</x-enlace-boton>
                    <x-enlace-boton href="{{ pantalla('/importar-contenedores') }}"><x-icono nombre="cube" /> Importar contenedores de pedidos ya existentes</x-enlace-boton>
                    <x-secondary-button wire:click="sincronizarTransportadores()" wire:loading.attr="disabled"><x-icono nombre="arrow-path" /> Sincronizar transportadora CTI</x-secondary-button>
                    @if ($id_grupo_empresarial != 1 && $initImportacion == 0)
                        <x-secondary-button id="importacion" wire:click="$set('initImportacion', 1)"><x-icono nombre="arrow-up-tray" /> Importar contenedores ASERCOL</x-secondary-button>
                    @endif
                </x-slot>
            @endif
        </x-encabezado-pagina>

        @if ($openModal == false)
            @if ($id_grupo_empresarial != 1 && $initImportacion != 0)
                <x-tarjeta titulo="Importar contenedores ASERCOL" descripcion="Pedidos del ERP por fecha de apertura.">
                    <div class="flex flex-wrap items-end gap-3">
                        <x-campo etiqueta="Fecha apertura inicial" para="fec_impo_ini" class="w-48">
                            <x-input type="date" id="fec_impo_ini" wire:model="fec_impo_ini" />
                        </x-campo>
                        <x-campo etiqueta="Fecha apertura final" para="fec_impo_fin" class="w-48">
                            <x-input type="date" id="fec_impo_fin" wire:model="fec_impo_fin" />
                        </x-campo>
                        <x-button type="button" wire:click="importarContenedoresWsimex()" wire:loading.attr="disabled"><x-icono nombre="arrow-up-tray" /> Iniciar importación</x-button>
                    </div>
                </x-tarjeta>
            @endif

            <div wire:loading.block wire:target="importarContenedoresWsimex">
                <x-alerta tipo="info"><strong>Excelente.</strong> La solicitud de importación de contenedores está siendo procesada en estos momentos. Este proceso puede tardar algunos minutos. Por favor espere.</x-alerta>
            </div>
            <div wire:loading.block wire:target="sincronizarTransportadores">
                <x-alerta tipo="info"><strong>Excelente.</strong> La solicitud de sincronización de transportadoras desde CTI está siendo procesada en estos momentos. Este proceso puede tardar algunos minutos. Por favor espere.</x-alerta>
            </div>
            @if (session()->has('message'))
                <x-alerta tipo="exito"><strong>Excelente.</strong> {{ session('message') }}</x-alerta>
            @endif

            <x-barra-busqueda modelo="search" accion="consultar" vivo placeholder="Buscar por número de contenedor, {{ $esAduana ? 'importación' : 'orden de compra' }} o puerto de destino" :activos="count($chips) - (isset($chips['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>
                <x-slot name="filtros">
                    <x-campo etiqueta="Fecha arribo inicial" para="fec_arribo_ini">
                        <x-input type="date" id="fec_arribo_ini" wire:model.live="fec_arribo_ini" />
                    </x-campo>
                    <x-campo etiqueta="Fecha arribo final" para="fec_arribo_fin">
                        <x-input type="date" id="fec_arribo_fin" wire:model.live="fec_arribo_fin" />
                    </x-campo>
                    @if ($esAduana)
                        <x-campo etiqueta="Agencia de aduana" para="aduana">
                            <x-select name="aduana" id="aduana" wire:model.live="aduana">
                                <option value="">SELECCIONE ADUANA</option>
                                @foreach($aduanas as $aduana)
                                <option value="{{ $aduana->razon_social }}">{{ $aduana->razon_social }}</option>
                                @endforeach
                            </x-select>
                        </x-campo>
                    @endif
                    <x-campo etiqueta="Transportador" para="filTransportador">
                        <x-select name="filTransportador" id="filTransportador" wire:model.live="filTransportador">
                            <option value="">SELECCIONE TRANSPORTADOR</option>
                            @foreach($transportadores as $trans)
                            <option value="{{ $trans->razon_social }}">{{ $trans->razon_social }}</option>
                            @endforeach
                        </x-select>
                    </x-campo>
                    <x-campo etiqueta="Status" para="filStatus" :ayuda="'Solo en la lista en curso.'">
                        <x-select name="filStatus" id="filStatus" wire:model.live="filStatus">
                            <option value="">- TODOS -</option>
                            <option value="1">NUEVOS</option>
                            <option value="0">EN PROCESO</option>
                        </x-select>
                    </x-campo>
                </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 }}')" />
                        @endforeach
                        <button type="button" wire:click="limpiarFiltros" class="text-[12px] text-[var(--texto-suave)] underline">Limpiar todo</button>
                    </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="Contenedores en curso" :conteo="$contenedores->total()" icono="cube" :activa="$visualizar == 1" wire:click="verLista(1)" />
                        <x-pestana etiqueta="Histórico de contenedores" :conteo="$contenedoresHistorico->total()" icono="circle-stack" :activa="$visualizar == 0" wire:click="verLista(0)" />
                    </div>
                    <div class="flex flex-wrap items-center gap-4 py-2 text-[12px] text-[var(--texto-suave)]">
                        @if ($visualizar == 1)
                            <span class="flex items-center gap-3">
                                <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm border border-[var(--borde-fuerte)]" style="background-color: color-mix(in srgb, {{ $hexNuevo }} 45%, transparent)"></span>Contenedores nuevos</span>
                                <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm border border-[var(--borde-fuerte)] bg-[var(--superficie)]"></span>Contenedores procesados</span>
                            </span>
                        @endif
                        <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>

                @if ($visualizar == 1)
                    @php
                        // Notificación y asignación de transportador: una celda por pedido (filas seguidas de la página).
                        $filas = array_values($contenedores->items());
                        $grupos = [];
                        for ($i = 0, $n = count($filas); $i < $n; $i = $j + 1) {
                            for ($j = $i; $j + 1 < $n && $filas[$j + 1]->IMPORTACION == $filas[$i]->IMPORTACION; $j++);
                            $grupos[$i] = $j - $i + 1;
                        }
                    @endphp
                    <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">Operaciones</span></th>
                                    <th class="ctc-fija ctc-fija-ultima" style="left: 48px">{{ $esAduana ? 'Importación' : 'Orden de compra' }}</th>
                                    <th>Proveedor</th>
                                    <th>Descripción factura</th>
                                    <th>Status documentos</th>
                                    <th>Contenedor</th>
                                    <th>ETA</th>
                                    <th>Días faltan para arribo</th>
                                    <th>Fecha arribo</th>
                                    <th>Fecha descargue</th>
                                    <th>Fecha nacionalización</th>
                                    <th>Eficiencia nacionalización</th>
                                    <th>Días libre puerto</th>
                                    <th>Plazo máximo para retiro</th>
                                    <th>Fecha retiro en puerto</th>
                                    <th>Alerta retiro en puerto</th>
                                    <th>Días libre devolución contenedor</th>
                                    <th>Plazo máximo para entrega de contenedor</th>
                                    <th>Cumplimiento / demoras contenedores</th>
                                    <th>Transportador</th>
                                    <th>Lugar entrega / CEDI</th>
                                    <th>Fecha devolución contenedor</th>
                                    <th>Fecha colilla</th>
                                    @if ($esAduana)<th>Agencia de aduana</th>@endif
                                    <th>Notificación</th>
                                    <th>Transportador</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($filas as $idx => $conte)
                                    <tr wire:key="cc-{{ $conte->ID_CONTE }}-{{ $idx }}"
                                        @if ($conte->status == 1) data-sin-hover style="background-color: color-mix(in srgb, {{ $hexNuevo }} 22%, transparent); box-shadow: inset 4px 0 0 {{ $hexNuevo }}" @endif>
                                        <td class="ctc-fija !px-2" style="left: 0">
                                            <button type="button" class="ctc-accion" title="Editar el contenedor {{ $conte->NUMERO_DE_CONTENEDOR }}" aria-label="Editar el contenedor {{ $conte->NUMERO_DE_CONTENEDOR }}"
                                                    wire:click="control({{ \Illuminate\Support\Js::from($conte->ORIGEN) }}, {{ \Illuminate\Support\Js::from($conte->ID_CONTENEDOR) }}, {{ \Illuminate\Support\Js::from($conte->NUMERO_DE_CONTENEDOR) }}, {{ \Illuminate\Support\Js::from($conte->ID_PEDIDO) }}, {{ \Illuminate\Support\Js::from($conte->IMPORTACION) }}, {{ \Illuminate\Support\Js::from($conte->ID_CONTE) }})">
                                                <x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" />
                                            </button>
                                        </td>
                                        <td class="ctc-fija ctc-fija-ultima whitespace-nowrap font-semibold" style="left: 48px">{{ $conte->IMPORTACION }}</td>
                                        <td class="min-w-[160px] text-[12px]">{!! $conte->PROVEEDOR ? e($conte->PROVEEDOR) : $vacio !!}</td>
                                        <td class="min-w-[160px]">
                                            <div class="flex flex-wrap gap-1">
                                                @foreach ($productos as $pr)
                                                    @if ($conte->ID_CONTE == $pr->id)
                                                        <x-etiqueta variante="aviso">{{ $pr->producto }}</x-etiqueta>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </td>
                                        <td>@livewire('semaforo.semaforo', ['numero_do' => $conte->NUMERO_DO, 'origen' => 1, 'estado' => $estadosDocumentos[(string) $conte->NUMERO_DO] ?? null], key($conte->NUMERO_DO . $conte->NUMERO_DE_CONTENEDOR))</td>
                                        <td class="whitespace-nowrap font-mono font-semibold">{{ $conte->NUMERO_DE_CONTENEDOR }}</td>
                                        <td class="whitespace-nowrap">{!! $conte->ETA ? e($conte->ETA) : $vacio !!}</td>
                                        <td>@if ($conte->DIAS_FALTAN_PARA_ARRIBO)<x-etiqueta :variante="$variante($conte->DIAS_FALTAN_PARA_ARRIBO)">{{ $conte->DIAS_FALTAN_PARA_ARRIBO }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_ARRIBO ? e($conte->FECHA_ARRIBO) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_DESCARGUE ? e($conte->FECHA_DESCARGUE) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_NACIONALIZACION ? e($conte->FECHA_NACIONALIZACION) : $vacio !!}</td>
                                        <td class="text-right tabular-nums">{!! $conte->EFICIENCIA_NACIONALIZACION !== null && $conte->EFICIENCIA_NACIONALIZACION !== '' ? e($conte->EFICIENCIA_NACIONALIZACION) : $vacio !!}</td>
                                        <td>@if ($conte->DIAS_LIBRE_PUERTO)<x-etiqueta variante="info">{{ $conte->DIAS_LIBRE_PUERTO }} días</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="whitespace-nowrap font-semibold text-rose-700 dark:text-rose-300">{!! $conte->FECHA_LIMITE_RETIRO_PUERTO ? e($conte->FECHA_LIMITE_RETIRO_PUERTO) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_RETIRO_PUERTO ? e($conte->FECHA_RETIRO_PUERTO) : $vacio !!}</td>
                                        <td><x-etiqueta :variante="$variante($conte->ALERTA_BODEGAJE)">{{ $conte->ALERTA_BODEGAJE == '' ? 'NO GENERO BODEGAJE' : $conte->ALERTA_BODEGAJE }}</x-etiqueta></td>
                                        <td>@if ($conte->DIAS_LIBRES_DEVOL_CONTENEDOR)<x-etiqueta variante="aviso">{{ $conte->DIAS_LIBRES_DEVOL_CONTENEDOR }} días</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="whitespace-nowrap font-semibold text-rose-700 dark:text-rose-300">{!! $conte->FECHA_PARA_DEVOLVER_CONTENEDOR ? e($conte->FECHA_PARA_DEVOLVER_CONTENEDOR) : $vacio !!}</td>
                                        <td>@if ($conte->DIAS_VENCIMIENTO_CONTENEDOR != '')<x-etiqueta :variante="$variante($conte->DIAS_VENCIMIENTO_CONTENEDOR)">{{ $conte->DIAS_VENCIMIENTO_CONTENEDOR }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="min-w-[140px] text-[12px]">{!! $conte->TRANSPORTADOR ? e($conte->TRANSPORTADOR) : $vacio !!}</td>
                                        <td>@if ($conte->CEDI != '')<x-etiqueta variante="info">{{ $conte->CEDI }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_DEVOLUCION ? e($conte->FECHA_DEVOLUCION) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_COLILLA ? e($conte->FECHA_COLILLA) : $vacio !!}</td>
                                        @if ($esAduana)<td class="text-[12px]">{!! $conte->AGENCIA_DE_ADUANA ? e($conte->AGENCIA_DE_ADUANA) : $vacio !!}</td>@endif
                                        @isset($grupos[$idx])
                                            <td class="border-l border-[var(--borde)] text-center" rowspan="{{ $grupos[$idx] }}">
                                                <button type="button" id="{{ $conte->IMPORTACION }}" name="{{ $conte->IMPORTACION }}" class="btnNotify ctc-accion"
                                                        title="Notificar al transportador el pedido {{ $conte->IMPORTACION }}" aria-label="Notificar al transportador el pedido {{ $conte->IMPORTACION }}"
                                                        wire:click="controlNotify({{ \Illuminate\Support\Js::from($conte->IMPORTACION) }}, {{ \Illuminate\Support\Js::from($conte->ID_PEDIDO) }})">
                                                    <x-icono nombre="envelope" sprite class="h-[18px] w-[18px]" />
                                                </button>
                                            </td>
                                            <td class="border-l border-[var(--borde)] text-center" rowspan="{{ $grupos[$idx] }}">
                                                <button type="button" id="tr-{{ $conte->IMPORTACION }}" name="tr-{{ $conte->IMPORTACION }}" class="btnNotify ctc-accion"
                                                        title="Asignar transportador a todo el pedido {{ $conte->IMPORTACION }}" aria-label="Asignar transportador a todo el pedido {{ $conte->IMPORTACION }}"
                                                        wire:click="modalTransportador({{ \Illuminate\Support\Js::from($conte->IMPORTACION) }}, {{ \Illuminate\Support\Js::from($conte->ID_PEDIDO) }})">
                                                    <x-icono nombre="truck" sprite class="h-[18px] w-[18px]" />
                                                </button>
                                            </td>
                                        @endisset
                                    </tr>
                                @empty
                                    <tr data-sin-hover>
                                        <td colspan="{{ $colEnCurso }}" 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 contenedores en curso con estos filtros.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if ($contenedores->hasPages())
                        <div class="border-t border-[var(--borde)] px-5 py-3">{{ $contenedores->links('vendor.pagination.ctc-livewire') }}</div>
                    @endif
                @else
                    <div class="ctc-tabla-caja">
                        <table class="ctc-tabla">
                            <thead>
                                <tr>
                                    <th class="ctc-fija ctc-fija-ultima" style="left: 0">Número de importación</th>
                                    <th>Proveedor</th>
                                    <th>Contenedor</th>
                                    <th>ETA</th>
                                    <th>Días faltan para arribo</th>
                                    <th>Fecha arribo</th>
                                    <th>Fecha descargue</th>
                                    <th>Fecha nacionalización</th>
                                    <th>Eficiencia nacionalización</th>
                                    <th>Días libre puerto</th>
                                    <th>Plazo máximo para retiro</th>
                                    <th>Fecha retiro en puerto</th>
                                    <th>Alerta retiro en puerto</th>
                                    <th>Días libre devolución contenedor</th>
                                    <th>Plazo máximo para entrega de contenedor</th>
                                    <th>Cumplimiento / demoras contenedores</th>
                                    <th>Transportador</th>
                                    <th>Fecha devolución contenedor</th>
                                    <th>Fecha colilla</th>
                                    <th>Agencia de aduana</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($contenedoresHistorico as $idx => $conte)
                                    <tr wire:key="ch-{{ $conte->ID_CONTE }}-{{ $idx }}">
                                        <td class="ctc-fija ctc-fija-ultima whitespace-nowrap font-semibold" style="left: 0">{{ $conte->IMPORTACION }}</td>
                                        <td class="min-w-[160px] text-[12px]">{!! $conte->PROVEEDOR ? e($conte->PROVEEDOR) : $vacio !!}</td>
                                        <td class="whitespace-nowrap font-mono font-semibold">{{ $conte->NUMERO_DE_CONTENEDOR }}</td>
                                        <td class="whitespace-nowrap">{!! $conte->ETA ? e($conte->ETA) : $vacio !!}</td>
                                        <td>@if ($conte->DIAS_FALTAN_PARA_ARRIBO)<x-etiqueta :variante="$variante($conte->DIAS_FALTAN_PARA_ARRIBO)">{{ $conte->DIAS_FALTAN_PARA_ARRIBO }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_ARRIBO ? e($conte->FECHA_ARRIBO) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_DESCARGUE ? e($conte->FECHA_DESCARGUE) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_NACIONALIZACION ? e($conte->FECHA_NACIONALIZACION) : $vacio !!}</td>
                                        <td class="text-right tabular-nums">{!! $conte->EFICIENCIA_NACIONALIZACION !== null && $conte->EFICIENCIA_NACIONALIZACION !== '' ? e($conte->EFICIENCIA_NACIONALIZACION) : $vacio !!}</td>
                                        <td>@if ($conte->DIAS_LIBRE_PUERTO)<x-etiqueta variante="info">{{ $conte->DIAS_LIBRE_PUERTO }} días</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="whitespace-nowrap font-semibold text-rose-700 dark:text-rose-300">{!! $conte->FECHA_LIMITE_RETIRO_PUERTO ? e($conte->FECHA_LIMITE_RETIRO_PUERTO) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_RETIRO_PUERTO ? e($conte->FECHA_RETIRO_PUERTO) : $vacio !!}</td>
                                        <td><x-etiqueta :variante="$variante($conte->ALERTA_BODEGAJE)">{{ $conte->ALERTA_BODEGAJE == '' ? 'NO GENERO BODEGAJE' : $conte->ALERTA_BODEGAJE }}</x-etiqueta></td>
                                        <td>@if ($conte->DIAS_LIBRES_DEVOL_CONTENEDOR)<x-etiqueta variante="aviso">{{ $conte->DIAS_LIBRES_DEVOL_CONTENEDOR }} días</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="whitespace-nowrap font-semibold text-rose-700 dark:text-rose-300">{!! $conte->FECHA_PARA_DEVOLVER_CONTENEDOR ? e($conte->FECHA_PARA_DEVOLVER_CONTENEDOR) : $vacio !!}</td>
                                        <td>@if ($conte->DIAS_VENCIMIENTO_CONTENEDOR != '')<x-etiqueta :variante="$variante($conte->DIAS_VENCIMIENTO_CONTENEDOR)">{{ $conte->DIAS_VENCIMIENTO_CONTENEDOR }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="min-w-[140px] text-[12px]">{!! $conte->TRANSPORTADOR ? e($conte->TRANSPORTADOR) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_DEVOLUCION ? e($conte->FECHA_DEVOLUCION) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! $conte->FECHA_COLILLA ? e($conte->FECHA_COLILLA) : $vacio !!}</td>
                                        <td class="text-[12px]">{!! $conte->AGENCIA_DE_ADUANA ? e($conte->AGENCIA_DE_ADUANA) : $vacio !!}</td>
                                    </tr>
                                @empty
                                    <tr data-sin-hover>
                                        <td colspan="20" 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 contenedores en el histórico con estos filtros.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if ($contenedoresHistorico->hasPages())
                        <div class="border-t border-[var(--borde)] px-5 py-3">{{ $contenedoresHistorico->links('vendor.pagination.ctc-livewire') }}</div>
                    @endif
                @endif
            </section>
        @endif

        {{-- Formulario del contenedor (reemplaza la lista mientras está abierto, como antes). --}}
        @if ($openModal == true)
            <x-tarjeta :titulo="'Contenedor asociado al pedido ' . $pedido">
                <div class="grid gap-x-4 gap-y-3.5 [grid-template-columns:repeat(auto-fill,minmax(200px,1fr))]">
                    <x-campo etiqueta="Orden de compra" para="pedido">
                        <x-input type="text" id="pedido" placeholder="Orden de compra / Pedido" value="{{ $pedido }}" :disabled="$origen == 1" />
                        <input type="hidden" wire:model="id_contenedor">
                    </x-campo>
                    <x-campo etiqueta="Número del contenedor" para="contenedor">
                        <x-input type="text" id="contenedor" placeholder="Número del Contenedor" wire:model="contenedor" :disabled="$origen == 1" class="font-mono font-semibold" />
                    </x-campo>
                    <x-campo etiqueta="ITR" para="itr">
                        <x-select name="itr" id="itr" wire:model="itr">
                            <option value="">-SELECCIONE OPCION-</option>
                            <option value="NO">NO</option>
                            <option value="SI">SI</option>
                        </x-select>
                    </x-campo>
                    <x-campo etiqueta="CEDI" para="cedi_id">
                        <x-select name="cedi_id" id="cedi_id" wire:model="cedi_id">
                            <option value="0">- SELECCIONE CEDI DESTINO -</option>
                            @foreach($cedis as $cedi)
                            <option value="{{ $cedi->id }}">{{ $cedi->planta }}</option>
                            @endforeach
                        </x-select>
                    </x-campo>
                    <x-campo etiqueta="Fecha de cita CEDI" para="fecha_cedi">
                        <x-input type="date" id="fecha_cedi" wire:model="fecha_cedi" />
                    </x-campo>
                    <x-campo etiqueta="Sucursal puerto de retiro" para="id_sucursal_retiro">
                        <x-select name="id_sucursal_retiro" id="id_sucursal_retiro" wire:model="id_sucursal_retiro">
                            <option value="0">- SELECCIONE SUCURSAL -</option>
                            @foreach($sucursal_retiro as $suc)
                            <option value="{{ $suc->id }}">{{ $suc->nombre }}</option>
                            @endforeach
                        </x-select>
                    </x-campo>
                    <x-campo etiqueta="Transportador" para="transportador" class="sm:col-span-2">
                        <x-select name="transportador" id="transportador" wire:model="transportador">
                            <option value="">seleccione una opción</option>
                            @foreach($transportadores as $tr)
                            <option value="{{ $tr->id }}">{{ $tr->razon_social }}</option>
                            @endforeach
                        </x-select>
                    </x-campo>
                    {{-- Campos que se agregan para Indicadores de Cargill --}}
                    @if ($id_grupo_empresarial == 28)
                        <x-campo etiqueta="Valor demora" para="valorDemora">
                            <x-input type="number" id="valorDemora" placeholder="Valor de la Demora" wire:model="valorDemora" />
                        </x-campo>
                        <x-campo etiqueta="Motivo de la demora" para="causalesDemora">
                            <x-input type="text" id="causalesDemora" placeholder="Causales de la Demora" wire:model="causalesDemora" />
                        </x-campo>
                    @endif
                </div>
                <x-campo etiqueta="Observaciones" para="observaciones" class="mt-3.5">
                    <textarea id="observaciones" rows="2" wire:model="observaciones"
                              class="form-textarea block w-full rounded-md border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[13px] uppercase text-[var(--texto)] shadow-sm focus:border-[var(--acento)] focus:ring-[var(--acento)]"></textarea>
                </x-campo>
            </x-tarjeta>

            <x-tarjeta titulo="Asignación de citas para retiro en puerto">
                <div class="flex flex-wrap items-end gap-3">
                    <x-campo etiqueta="Fecha de programación de retiro en puerto" para="fecha_programacion_retiro" class="w-56">
                        <x-input type="date" id="fecha_programacion_retiro" wire:model="fec_prog_retiro_tr_bodega" :disabled="$cancelar_cita != 0" />
                    </x-campo>
                    <x-campo etiqueta="Hora de cita" para="hora_cita_bodega" class="w-40">
                        <x-input type="time" id="hora_cita_bodega" wire:model="hora_cita_bodega" :disabled="$cancelar_cita != 0" />
                    </x-campo>
                    @if ($cancelar_cita != 0)
                        <x-campo etiqueta="Observaciones" para="observacion_cita" class="min-w-[16rem] flex-1">
                            <x-input type="text" id="observacion_cita" wire:model="observacion_cita" />
                        </x-campo>
                    @endif
                    @if ($cancelar_cita == 0)
                        <x-secondary-button wire:click="asignarCita()" wire:loading.attr="disabled"><x-icono nombre="calendar-days" /> Agregar cita</x-secondary-button>
                    @else
                        <x-danger-button type="button" wire:click="cancelarCita()" wire:loading.attr="disabled"><x-icono nombre="calendar-days" /> Cancelar cita</x-danger-button>
                    @endif
                </div>
                @error('cita-activa')
                    <x-alerta tipo="error" class="mt-3"><strong>Se han presentado los siguientes errores.</strong> Actualmente el contenedor tiene una cita vigente para el retiro en puerto. Cancele la cita e intente nuevamente.</x-alerta>
                @enderror
                @if ($citas->count() > 0)
                    <div class="ctc-tabla-caja mt-4" style="--alto-tabla: 20rem">
                        <table class="ctc-tabla">
                            <thead>
                                <tr>
                                    <th>Fecha de la cita</th>
                                    <th>Hora de la cita</th>
                                    <th>Observación</th>
                                    <th>Estado</th>
                                    <th><span class="sr-only">Operaciones</span></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($citas as $index => $cita)
                                    <tr wire:key="cita-{{ $cita->id }}">
                                        <td class="whitespace-nowrap">{{ $cita->fecha_cita }}</td>
                                        <td class="whitespace-nowrap">{{ $cita->hora_cita }}</td>
                                        <td>{!! $cita->observacion ? e($cita->observacion) : $vacio !!}</td>
                                        <td>
                                            @if ($cita->estado == 1)
                                                <x-etiqueta variante="exito">Activo</x-etiqueta>
                                            @else
                                                <x-etiqueta variante="peligro">Cancelada</x-etiqueta>
                                            @endif
                                        </td>
                                        <td class="text-right">
                                            @if ($cita->estado == 1)
                                                <button type="button" wire:click="seleccionarCita({{ $cita->id }})" class="ctc-accion"
                                                        title="Seleccionar la cita para cancelarla" aria-label="Seleccionar la cita para cancelarla">
                                                    <x-icono nombre="x-mark" class="h-[18px] w-[18px]" />
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <x-alerta tipo="aviso" class="mt-3"><strong>Alerta informativa.</strong> El contenedor seleccionado no tiene cita asignada para retiro en puerto.</x-alerta>
                @endif
            </x-tarjeta>

            {{-- Productos en contenedor --}}
            @livewire('po.contenedores-productos', ['id_pedido' => $id_po, 'id_contenedor' => $id_seguimiento], key('productos-' . $id_seguimiento))

            <x-tarjeta titulo="Control de entrega por parte del transportador">
                <div class="grid gap-x-4 gap-y-3.5 [grid-template-columns:repeat(auto-fill,minmax(200px,1fr))]">
                    <x-campo etiqueta="Fecha de devolución" para="fecha_devolucion">
                        <x-input type="date" id="fecha_devolucion" wire:model="fecha_devolucion" />
                    </x-campo>
                    <x-campo etiqueta="Lugar de devolución" para="lugar_devolucion">
                        <x-select name="itr" id="lugar_devolucion" wire:model="lugar_devolucion">
                            <option value="">- SELECCIONE UNA OPCIÓN</option>
                            @foreach($lugares_devolucion as $lugar_dev)
                            <option value="{{ $lugar_dev->id }}">{{ $lugar_dev->nombre }}</option>
                            @endforeach
                        </x-select>
                    </x-campo>
                    <x-campo etiqueta="Fecha de colilla" para="fecha_colilla">
                        <x-input type="date" id="fecha_colilla" wire:model="fecha_colilla" />
                    </x-campo>
                </div>
                <x-campo etiqueta="Observaciones del transportador" para="observaciones_trans" class="mt-3.5">
                    <textarea id="observaciones_trans" rows="2" wire:model="observaciones_trans"
                              class="form-textarea block w-full rounded-md border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[13px] uppercase text-[var(--texto)] shadow-sm focus:border-[var(--acento)] focus:ring-[var(--acento)]"></textarea>
                </x-campo>
                <x-slot name="pie">
                    <div class="flex flex-wrap justify-end gap-2">
                        <x-enlace-boton href="{{ pantalla('/control-contenedores') }}"><x-icono nombre="x-mark" /> Cancelar</x-enlace-boton>
                        <x-button type="button" wire:click="salvarContenedor()" wire:loading.attr="disabled"><x-icono nombre="check" /> Registrar</x-button>
                    </div>
                </x-slot>
            </x-tarjeta>
        @endif
    </x-pagina>

    {{-- Notificación al transportador (por pedido) --}}
    <div x-data="{ open: $wire.entangle('openNotify') }">
        <template x-teleport="body">
            <div x-show="open" x-cloak x-on:keydown.escape.window="open = false" class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="notificar-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="open = false"></div>
                <div class="relative flex max-h-[85vh] w-full max-w-xl 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="envelope" class="h-5 w-5" /></span>
                        <h2 id="notificar-titulo" class="text-[15px] font-bold text-[var(--texto)]">Notificación asociada al pedido {{ $pedido }}</h2>
                    </div>
                    <div class="space-y-3.5 overflow-y-auto px-5 py-4">
                        <x-alerta tipo="aviso">Se va notificar al transportador la asignación del pedido <strong>{{ $pedido }}</strong> para retiro de mercancía en puerto.</x-alerta>
                        <x-campo etiqueta="Seleccione grupo de correo al que se enviará copia de la asignación de este pedido" para="grupoSeguimiento">
                            <x-select name="grupoSeguimiento" id="grupoSeguimiento" wire:model="grupoSeguimiento">
                                <option value="">- SELECCIONE UNA OPCIÓN</option>
                                @foreach($correos_seguimiento as $correo)
                                <option value="{{ $correo->id }}">{{ $correo->nombre }}</option>
                                @endforeach
                            </x-select>
                        </x-campo>
                        @if (count($respuesta_notificacion) > 0)
                            <x-alerta tipo="exito">
                                <p class="font-semibold">Resumen proceso de notificación.</p>
                                <ul class="mt-1 space-y-1">
                                    @foreach($respuesta_notificacion as $rs)
                                        <li class="flex items-start gap-1.5">
                                            <x-icono :nombre="$rs['error'] == false ? 'envelope' : 'exclamation-triangle'" class="mt-0.5 h-4 w-4" />
                                            <span>{{ $rs['mensaje'] }}: {{ $rs['correos'][0] ?? '' }}</span>
                                        </li>
                                    @endforeach
                                </ul>
                            </x-alerta>
                        @endif
                        {{-- Validación de contenedores asociados a un transportador --}}
                        @error('contenedor-no-transporte')
                            <x-alerta tipo="error">
                                <p class="font-semibold">Resumen de contenedores sin transportador asignado.</p>
                                <ul class="mt-1 space-y-1">
                                    @foreach($validacion_contenedor as $rs)
                                        <li class="flex items-start gap-1.5"><x-icono nombre="cube" class="mt-0.5 h-4 w-4" /> <span>El contenedor identificado con el número <strong>{{ $rs->contenedor }}</strong> aún no tiene un transportador asignado.</span></li>
                                    @endforeach
                                </ul>
                            </x-alerta>
                        @enderror
                    </div>
                    <div class="flex justify-end gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button x-on:click="open = false"><x-icono nombre="x-mark" /> Cancelar</x-secondary-button>
                        <x-button type="button" wire:click="preAlertTransportador()" wire:loading.attr="disabled"><x-icono nombre="envelope" /> Enviar</x-button>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- Asignación masiva de transportador (por pedido) --}}
    <div x-data="{ open: $wire.entangle('openTransportador') }">
        <template x-teleport="body">
            <div x-show="open" x-cloak x-on:keydown.escape.window="open = false" class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="transportador-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="open = false"></div>
                <div class="relative flex max-h-[85vh] w-full max-w-xl 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="truck" class="h-5 w-5" /></span>
                        <h2 id="transportador-titulo" class="text-[15px] font-bold text-[var(--texto)]">Asignación masiva de transportador asociada al pedido {{ $pedido }}</h2>
                    </div>
                    <div class="space-y-3.5 overflow-y-auto px-5 py-4">
                        <x-alerta tipo="aviso">Se va a asignar al transportador el pedido <strong>{{ $pedido }}</strong> para retiro de mercancía en puerto.</x-alerta>
                        <x-campo etiqueta="Seleccione un transportador" para="transport">
                            <x-select name="transport" id="transport" wire:model="transport">
                                <option value="">seleccione una opción</option>
                                @foreach($transportadores as $tr)
                                <option value="{{ $tr->id }}">{{ $tr->razon_social }}</option>
                                @endforeach
                            </x-select>
                        </x-campo>
                    </div>
                    <div class="flex justify-end gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button x-on:click="open = false"><x-icono nombre="x-mark" /> Cancelar</x-secondary-button>
                        <x-button type="button" wire:click="transportadorPedido()" wire:loading.attr="disabled"><x-icono nombre="truck" /> Enviar</x-button>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- Resumen de documentos cargados del DO (columna Status documentos) --}}
    <template x-teleport="body">
        <div x-show="docsDe" x-cloak x-on:keydown.escape.window="docsDe = null" class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="documentos-titulo">
            <div class="fixed inset-0 bg-black/40" x-on:click="docsDe = null"></div>
            <div class="relative flex max-h-[85vh] w-full max-w-2xl 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="document-text" class="h-5 w-5" /></span>
                    <h2 id="documentos-titulo" class="text-[15px] font-bold text-[var(--texto)]">Resumen de documentos cargados <span class="font-normal text-[var(--texto-suave)]" x-text="docsDe ? '· DO ' + docsDe : ''"></span></h2>
                </div>
                <div class="overflow-y-auto px-5 py-4 text-[12px] text-[var(--texto)]">
                    <p x-show="!docsHtml && !docsError" class="flex items-center gap-1.5 text-[var(--texto-suave)]"><x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…</p>
                    <p x-show="docsError" class="text-rose-700 dark:text-rose-300">Se han presentado errores al consultar el estado de los documentos del DO.</p>
                    <div wire:ignore x-html="docsHtml"></div>
                </div>
                <div class="flex justify-end border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                    <x-secondary-button class="closeModal" x-on:click="docsDe = null">Cerrar</x-secondary-button>
                </div>
            </div>
        </div>
    </template>

    <x-icono-simbolos :nombres="['o:pencil-square', 'o:envelope', 'o:truck']" />
</div>