{{-- Seguimiento de arribo en destino y descargue del contenedor (shipsgo/ifame), con los datos de ShipsGo cruzados con
     shipsgo_seguimiento_maestro. Kit ui-ctc (MigracionLayout.MD L3, pantallas de L2a). El mapa es el visor embebido de
     ShipsGo (el dibujo propio con Leaflet no se usaba y se quitó). Abrir el detalle actualiza la fecha de descargue en
     la tabla local (actualizarFechaDescargue), como antes. --}}
@php
    $estadoDe = function ($status) {
        $status = strtoupper((string) $status);
        if (in_array($status, ['SAILING', 'IN_TRANSIT', 'INPROGRESS'])) { return ['info', 'En tránsito']; }
        if (in_array($status, ['ARRIVED', 'WAITING_POD'])) { return ['aviso', 'En puerto']; }
        if ($status === 'DISCHARGED') { return ['exito', 'Entregado']; }
        if ($status === 'DELAYED') { return ['peligro', 'Con retraso']; }
        return ['neutro', $status ?: '—'];
    };
    $filtros = ['TODOS' => 'Todos', 'EN_TRANSITO' => 'En tránsito', 'EN_PUERTO' => 'En puerto', 'ENTREGADO' => 'Entregado', 'CON_RETRASO' => 'Con retraso'];
    $eventos = ['EMSH' => 'Vacío al remitente', 'GTIN' => 'Entrada', 'LOAD' => 'Cargado', 'DEPA' => 'Salida', 'ARRV' => 'Llegada', 'DISC' => 'Descargado'];
    $fechaCorta = fn ($f) => $f ? \Carbon\Carbon::parse($f)->format('d M') : null;
@endphp
<div x-data x-on:keydown.escape.window="$wire.modalMapaAbierto ? $wire.cerrarModalMapa() : ($wire.modalDetalleAbierto && $wire.cerrarModalDetalle())">
<x-pagina>
    <x-icono-simbolos :nombres="['o:map', 'o:document-text']" />

    <x-encabezado-pagina ruta="Importaciones · Seguimiento" titulo="Seguimiento de arribo en destino"
                         descripcion="Arribo y descargue del contenedor, en tiempo real vía ShipsGo." />

    <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
        <x-indicador estatico titulo="Embarques activos" :valor="$kpis['activos'] ?? 0" :barra="false" />
        <x-indicador estatico titulo="Contenedores" :valor="$kpis['contenedores'] ?? 0" :barra="false" />
        <x-indicador estatico titulo="Con retraso" :valor="$kpis['con_retraso'] ?? 0" :alerta="$kpis['con_retraso'] ?? 0" :barra="false" />
        <x-indicador estatico titulo="Tránsito promedio" :valor="($kpis['transito_promedio'] ?? 0) . ' días'" :barra="false" />
    </div>

    <x-barra-busqueda modelo="busqueda" accion="$refresh" vivo placeholder="Buscar por pedido, DO, destinatario, NIT, contenedor, booking o naviera" :activos="$busqueda ? 1 : 0">
        @if ($busqueda)
            <x-slot name="chips"><x-chip-filtro etiqueta="Búsqueda" :valor="$busqueda" wire:click="$set('busqueda', '')" /></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 role="tablist" class="flex gap-1 overflow-x-auto">
                @foreach ($filtros as $clave => $etiqueta)
                    <x-pestana :etiqueta="$etiqueta" :activa="$filtroEstado === $clave" wire:click="cambiarFiltroEstado('{{ $clave }}')" />
                @endforeach
            </div>
            <span class="flex items-center gap-3 py-2 text-[12px] text-[var(--texto-suave)]">
                <span><b class="font-bold text-[var(--texto)]">{{ count($envios) }}</b> embarques</span>
                <span wire:loading.delay class="flex items-center gap-1.5 text-[var(--acento-texto)]" role="status"><x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…</span>
            </span>
        </div>
        <div class="ctc-tabla-caja">
            <table class="ctc-tabla">
                <thead>
                    <tr><th>Pedido cliente</th><th>Naviera</th><th>Ruta y avance</th><th>ETA</th><th>Estado</th><th class="!text-right">Acciones</th></tr>
                </thead>
                <tbody>
                    @forelse ($envios as $item)
                        @php
                            [$variante, $estado] = $estadoDe($item['status'] ?? '');
                            $avance = min(100, max(0, $item['route']['transit_percentage'] ?? 0));
                        @endphp
                        <tr wire:key="item-{{ $item['id'] ?? $loop->index }}">
                            <td class="min-w-[220px]">
                                <span class="block font-semibold">{{ $item['numero_pedido'] ?? 'DO: ' . $item['numero_do'] }}</span>
                                <span class="block text-[12px] text-[var(--texto-suave)]">
                                    @if (!empty($item['numero_pedido']))DO {{ $item['numero_do'] }} · @endif{{ $item['container_number'] ?? 'Sin contenedor' }}
                                </span>
                                @if (!empty($item['razon_social_destinatario']))
                                    <span class="block max-w-xs truncate text-[11.5px] text-[var(--texto-tenue)]" title="{{ $item['razon_social_destinatario'] }}">{{ $item['razon_social_destinatario'] }}</span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap">
                                <span class="block font-semibold uppercase">{{ $item['carrier']['name'] ?? 'N/A' }}</span>
                                <span class="block text-[12px] text-[var(--texto-suave)]">{{ $item['carrier']['scac'] ?? '' }}</span>
                            </td>
                            <td class="min-w-[260px]">
                                <div class="flex justify-between gap-3 text-[12px] font-semibold">
                                    <span>{{ $item['route']['port_of_loading']['location']['name'] ?? 'POL' }}</span>
                                    <span>{{ $item['route']['port_of_discharge']['location']['name'] ?? 'POD' }}</span>
                                </div>
                                <div class="mt-1 h-1.5 overflow-hidden rounded-full bg-[var(--superficie-2)]"><div class="h-full rounded-full bg-[var(--acento)]" style="width: {{ $avance }}%"></div></div>
                                <span class="mt-1 block text-[11px] text-[var(--texto-tenue)]">{{ $item['route']['transit_percentage'] ?? 0 }}% · {{ $item['route']['transit_time'] ?? 0 }} días de tránsito</span>
                            </td>
                            <td class="whitespace-nowrap">
                                <span class="block font-semibold">{{ $fechaCorta($item['route']['port_of_discharge']['date_of_discharge'] ?? null) ?? 'Pendiente' }}</span>
                            </td>
                            <td><x-etiqueta :variante="$variante">{{ $estado }}</x-etiqueta></td>
                            <td class="!px-2">
                                <div class="flex justify-end gap-0.5">
                                    <button type="button" wire:click="abrirModalMapa({{ (int) $item['id'] }})" class="ctc-accion" title="Ver ruta en el mapa" aria-label="Ver ruta en el mapa"><x-icono nombre="map" sprite class="h-[18px] w-[18px]" /></button>
                                    <button type="button" wire:click="abrirModalDetalle({{ (int) $item['id'] }})" class="ctc-accion" title="Detalle del embarque" aria-label="Detalle del embarque"><x-icono nombre="document-text" sprite class="h-[18px] w-[18px]" /></button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr data-sin-hover>
                            <td colspan="6" 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 se encontraron embarques para el filtro seleccionado.</p></div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</x-pagina>

    {{-- Detalle del embarque --}}
    @if ($modalDetalleAbierto && $embarqueSeleccionado)
        @php
            $e = $embarqueSeleccionado;
            [$variante, $estado] = $estadoDe($e['status'] ?? '');
            $avance = min(100, max(0, $e['route']['transit_percentage'] ?? 0));
            $movimientos = $e['movements'] ?? ($e['containers'][0]['movements'] ?? $e['events'] ?? []);
        @endphp
        <div class="fixed inset-0 z-[60] flex items-start justify-center overflow-y-auto px-4 py-10" role="dialog" aria-modal="true" aria-labelledby="detalle-titulo" wire:key="modal-detalle">
            <div class="fixed inset-0 bg-black/40" wire:click="cerrarModalDetalle"></div>
            <div class="relative w-full max-w-3xl overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <header class="flex items-start gap-3 border-b border-[var(--borde)] px-6 py-4">
                    <div class="min-w-0 flex-1">
                        <p class="text-[11px] font-bold uppercase tracking-[0.08em] text-[var(--texto-tenue)]">Detalle del embarque</p>
                        <h2 id="detalle-titulo" class="mt-0.5 text-[20px] font-semibold text-[var(--texto)]">Pedido cliente: {{ $e['numero_pedido'] ?? 'DO: ' . ($e['numero_do'] ?? $e['reference']) }}</h2>
                        <p class="mt-0.5 text-[13px] text-[var(--texto-suave)]">DO {{ $e['numero_do'] ?? $e['reference'] ?? 'N/A' }} · Contenedor {{ $e['container_number'] ?? 'sin contenedor' }} · {{ $e['carrier']['name'] ?? 'N/A' }}</p>
                        @if (!empty($e['razon_social_destinatario']))
                            <p class="mt-0.5 text-[13px] font-semibold text-[var(--acento-texto)]">{{ $e['razon_social_destinatario'] }}@if (!empty($e['numero_identificacion_destin'])) ({{ $e['numero_identificacion_destin'] }})@endif</p>
                        @endif
                    </div>
                    <x-etiqueta :variante="$variante">{{ $estado }}</x-etiqueta>
                    <x-boton-icono etiqueta="Cerrar" wire:click="cerrarModalDetalle"><x-icono nombre="x-mark" class="h-5 w-5" /></x-boton-icono>
                </header>
                <div class="space-y-5 px-6 py-5">
                    <div>
                        <div class="h-1.5 overflow-hidden rounded-full bg-[var(--superficie-2)]"><div class="h-full rounded-full bg-[var(--acento)]" style="width: {{ $avance }}%"></div></div>
                        <div class="mt-2 flex justify-between gap-4 text-[12px]">
                            <span><b class="block text-[14px] text-[var(--texto)]">{{ $e['route']['port_of_loading']['location']['name'] ?? 'POL' }}</b><span class="text-[var(--texto-tenue)]">{{ $e['route']['port_of_loading']['location']['code'] ?? '' }} @if ($f = $fechaCorta($e['route']['port_of_loading']['date_of_loading'] ?? null))· salida {{ $f }}@endif</span></span>
                            <span class="text-right"><b class="block text-[14px] text-[var(--texto)]">{{ $e['route']['port_of_discharge']['location']['name'] ?? 'POD' }}</b><span class="text-[var(--texto-tenue)]">{{ $e['route']['port_of_discharge']['location']['code'] ?? '' }} @if ($f = $fechaCorta($e['route']['port_of_discharge']['date_of_discharge'] ?? null))· llegada {{ $f }}@endif</span></span>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
                        @foreach ([
                            'Tránsito' => ($e['route']['transit_time'] ?? 0) . ' días',
                            'Avance' => ($e['route']['transit_percentage'] ?? 0) . '%',
                            'Contenedores' => $e['container_count'] ?? 1,
                            'Actualizado' => isset($e['updated_at']) ? \Carbon\Carbon::parse($e['updated_at'])->diffForHumans() : 'Reciente',
                        ] as $titulo => $valor)
                            <div class="rounded-xl border border-[var(--borde)] p-3 text-center">
                                <p class="text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--texto-suave)]">{{ $titulo }}</p>
                                <p class="mt-1 text-[16px] font-bold text-[var(--texto)]">{{ $valor }}</p>
                            </div>
                        @endforeach
                    </div>
                    <div class="ctc-tabla-caja rounded-xl border border-[var(--borde)]" style="--alto-tabla: 20rem">
                        <table class="ctc-tabla">
                            <thead><tr><th>Evento</th><th>Localización</th><th>Buque</th><th>Viaje</th><th>Fecha</th></tr></thead>
                            <tbody>
                                @forelse ($movimientos as $mov)
                                    <tr>
                                        <td class="whitespace-nowrap"><x-etiqueta class="font-mono">{{ $mov['event'] ?? 'N/A' }}</x-etiqueta> <span class="ml-1 text-[12.5px]">{{ $eventos[$mov['event'] ?? ''] ?? 'N/A' }}</span></td>
                                        <td class="text-[12.5px] uppercase">{{ $mov['location']['name'] ?? (is_string($mov['location'] ?? null) ? $mov['location'] : 'N/A') }}@if (isset($mov['location']['country']['code'])) <span class="text-[var(--texto-tenue)]">({{ $mov['location']['country']['code'] }})</span>@endif</td>
                                        <td class="text-[12.5px] uppercase">{{ $mov['vessel']['name'] ?? (is_string($mov['vessel'] ?? null) ? $mov['vessel'] : '—') }}</td>
                                        <td class="text-[12.5px] uppercase">{{ $mov['voyage'] ?? '—' }}</td>
                                        <td class="whitespace-nowrap">{{ isset($mov['timestamp']) ? \Carbon\Carbon::parse($mov['timestamp'])->format('d/m/Y') : '—' }}</td>
                                    </tr>
                                @empty
                                    <tr data-sin-hover><td colspan="5" class="!p-0"><p class="ctc-vacio py-8 text-center text-[13px] text-[var(--texto-suave)]">No hay movimientos registrados para este embarque.</p></td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if (($e['delay_days'] ?? 0) > 0)
                        <x-alerta tipo="aviso">Se ha registrado un retraso de {{ $e['delay_days'] }} día(s) en la fecha estimada de llegada (ETA).</x-alerta>
                    @endif
                </div>
                <footer class="flex flex-row-reverse flex-wrap gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-6 py-3">
                    <x-button type="button" wire:click="abrirModalMapa({{ (int) $e['id'] }})"><x-icono nombre="map" /> Ver ruta en el mapa</x-button>
                    <x-secondary-button wire:click="cerrarModalDetalle">Cerrar</x-secondary-button>
                </footer>
            </div>
        </div>
    @endif

    {{-- Mapa de la ruta: visor embebido de ShipsGo --}}
    @if ($modalMapaAbierto && $embarqueMapaSeleccionado)
        @php $m = $embarqueMapaSeleccionado; @endphp
        <div class="fixed inset-0 z-[60] flex items-center justify-center px-2 py-4 sm:px-4" role="dialog" aria-modal="true" aria-labelledby="mapa-titulo" wire:key="modal-mapa">
            <div class="fixed inset-0 bg-black/60" wire:click="cerrarModalMapa"></div>
            <div class="relative flex h-[88vh] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <header class="flex items-start gap-3 border-b border-[var(--borde)] px-5 py-3">
                    <div class="min-w-0 flex-1">
                        <h2 id="mapa-titulo" class="text-[16px] font-semibold text-[var(--texto)]">Pedido cliente: {{ $m['numero_pedido'] ?? 'DO: ' . ($m['numero_do'] ?? $m['reference'] ?? 'N/A') }}</h2>
                        <p class="text-[12.5px] text-[var(--texto-suave)]">DO {{ $m['numero_do'] ?? $m['reference'] ?? 'N/A' }} · Contenedor {{ $m['container_number'] ?? 'sin contenedor' }} · {{ $m['carrier']['name'] ?? 'N/A' }}@if (!empty($m['razon_social_destinatario'])) · {{ $m['razon_social_destinatario'] }}@endif</p>
                    </div>
                    <x-boton-icono etiqueta="Cerrar" wire:click="cerrarModalMapa"><x-icono nombre="x-mark" class="h-5 w-5" /></x-boton-icono>
                </header>
                <iframe id="shipsgo-embed" class="min-h-0 w-full flex-1 border-0 bg-[var(--superficie-2)]" title="Ruta del embarque en ShipsGo"
                        src="https://embed.shipsgo.com/?token={{ urlencode((string) $tokenEmbebed) }}&tabs=none&transport=ocean&query={{ urlencode($m['container_number'] ?? '') }}"></iframe>
            </div>
        </div>
    @endif
</div>