{{-- Programación de Arribos y notificación al transporte (impo/programacion-arribos). Layout nuevo con el kit ui-ctc:
     métricas del mes, búsqueda con filtros (se aplican al pulsar Consultar), lista con cabecera fija y el detalle de
     cada DO, gráficas laterales, y —para clientes que administran el transporte— asignación y prealerta. --}}
@php
    $aplicados = $filtrosAplicados;
    $formatoFecha = fn ($f) => $f ? implode('/', array_reverse(explode('-', $f))) : '…';
    $chips = [];
    if ($aplicados['search'] ?? '') { $chips['search'] = ['Búsqueda', $aplicados['search']]; }
    if ($aplicados['codigoProceso'] ?? '') { $chips['codigoProceso'] = ['Proceso', $procesos[$aplicados['codigoProceso']] ?? $aplicados['codigoProceso']]; }
    if ($aplicados['codigoSucursal'] ?? '') { $chips['codigoSucursal'] = ['Sucursal', $sucursales[$aplicados['codigoSucursal']] ?? $aplicados['codigoSucursal']]; }
    if ($aplicados['tipoDeclaracion'] ?? '') { $chips['tipoDeclaracion'] = ['Tipo declaración', $aplicados['tipoDeclaracion']]; }
    if ($segmento && ($aplicados['idSegmentoCliente'] ?? '')) { $chips['idSegmentoCliente'] = [$tituloSegmento, $lstSegmentosClientes[$aplicados['idSegmentoCliente']] ?? $aplicados['idSegmentoCliente']]; }
    if ($aplicados['fechaInicial'] ?? '') { $chips['fechas'] = ['ETA', $formatoFecha($aplicados['fechaInicial']) . ' – ' . $formatoFecha($aplicados['fechaFinal'])]; }
    $columnas = $adminTransporte ? 13 : 12;
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    // Días para el arribo: más de 5 verde, de 2 a 5 amarillo, menos de 2 rojo (la convención de siempre).
    $semaforoEta = fn ($dias) => !is_numeric($dias) ? 'neutro' : ($dias > 5 ? 'exito' : ($dias >= 2 ? 'aviso' : 'peligro'));
@endphp
<div x-data="{ ...ctcDetalleDo(), modalTransporte: false, modalNotificacion: false }"
     x-on:keydown.escape.window="modalTransporte = false; modalNotificacion = false">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Programación de Arribos"
                             :descripcion="$adminTransporte ? 'Notificación al transporte: asigne transportador y envíe la prealerta de retiro.' : null">
            <x-slot name="acciones">
                @if ($adminTransporte)
                    <x-secondary-button x-on:click="modalNotificacion = true">
                        <x-icono nombre="envelope" class="h-4 w-4" />
                        Prealerta al transporte
                        @if (count($pedidosNotificacion))
                            <span class="rounded-full bg-[var(--acento-suave)] px-1.5 text-[11px] font-bold text-[var(--acento-texto)]">{{ count($pedidosNotificacion) }}</span>
                        @endif
                    </x-secondary-button>
                @endif
                <x-secondary-button wire:click="descargarPedidos" wire:loading.attr="disabled" wire:target="descargarPedidos">
                    <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                    <span wire:loading.remove wire:target="descargarPedidos">Descargar</span>
                    <span wire:loading wire:target="descargarPedidos">Generando…</span>
                </x-secondary-button>
            </x-slot>
        </x-encabezado-pagina>

        @livewire('importaciones.dashboard-arribos')

        <x-barra-busqueda modelo="search" accion="consultarPedidos" placeholder="Buscar por N° documento de transporte, 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="Tipo declaración" para="tipoDeclaracion">
                    <x-select id="tipoDeclaracion" wire:model="tipoDeclaracion">
                        <option value="">Todos</option>
                        @foreach ($lstTipoDeclaracion as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
                @if ($segmento)
                    <x-campo :etiqueta="$tituloSegmento" para="idSegmentoCliente">
                        <x-select id="idSegmentoCliente" wire:model="idSegmentoCliente">
                            <option value="">Todos</option>
                            @foreach ($lstSegmentosClientes as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                        </x-select>
                    </x-campo>
                @endif
                <div class="sm:col-span-2">
                    <x-label for="fechaAperturaInicial" value="ETA" />
                    <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="ETA 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="ETA 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>
            <x-slot name="ayuda">Los filtros se aplican al pulsar Consultar. Sin ETA final, se toma hasta el 31 de diciembre de este año.</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>

        <div class="grid items-start gap-5 xl:grid-cols-[minmax(0,1fr)_300px]">
            <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="truck" class="h-[18px] w-[18px] text-[var(--texto-suave)]" />
                        Pedidos por arribar
                        <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)]">ETA</span>
                            <span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-[3px] border border-emerald-300 bg-emerald-100 dark:border-emerald-500/50 dark:bg-emerald-500/20"></span>más de 5 días</span>
                            <span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-[3px] border border-amber-300 bg-amber-100 dark:border-amber-500/50 dark:bg-amber-500/20"></span>2 a 5</span>
                            <span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-[3px] border border-rose-300 bg-rose-100 dark:border-rose-500/50 dark:bg-rose-500/20"></span>menos de 2</span>
                        </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-cyan-300 bg-cyan-100 dark:border-cyan-500/50 dark:bg-cyan-500/20"></span>Pedido notificado</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>Pedido</th>
                                <th>Cliente</th>
                                <th>Pto arribo</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>Motonave</th>
                                <th>Declaración</th>
                                <th>Medio</th>
                                <th>Unidades</th>
                                <th>Transportador</th>
                                <th>Documentación</th>
                                @if ($adminTransporte)<th><span class="sr-only">Asignar transporte</span></th>@endif
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($pedidos as $ped)
                                @php
                                    $do = (string) $ped['NUMERO_DO'];
                                    $doJs = \Illuminate\Support\Js::from($do)->toHtml();
                                    $docCompleta = $ped['VALIDACION_DOCUMENTAL']['bl'] && $ped['VALIDACION_DOCUMENTAL']['factura'] && $ped['VALIDACION_DOCUMENTAL']['lista_empaque'];
                                @endphp
                                <tr wire:key="arribo-{{ $do }}"
                                    @if ($ped['NOTIFICADO']) data-sin-hover style="background-color: color-mix(in srgb, #06b6d4 12%, transparent);" @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), @js($ped['NUMERO_PEDIDO'] ?: $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="max-w-[200px] truncate" title="{{ $ped['NUMERO_PEDIDO'] }}">{{ $ped['NUMERO_PEDIDO'] }}</td>
                                    <td class="min-w-[170px] text-[12px] leading-snug">{{ $ped['CLIENTE'] }}</td>
                                    <td>@if ($ped['SUCURSAL_OP'])<x-etiqueta variante="acento" class="font-bold">{{ $ped['SUCURSAL_OP'] }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                    <td class="min-w-[120px]">
                                        @if ($ped['ETA'])
                                            <x-etiqueta :variante="$semaforoEta($ped['DIAS_ARRIBO'])">{{ $ped['ETA'] }}</x-etiqueta>
                                            <p class="mt-1 text-[11.5px] text-[var(--texto-suave)]">
                                                @if (empty($ped['FECHA_ARRIBO'])){{ $ped['DIAS_ARRIBO'] }} días @else Arribado @endif
                                            </p>
                                        @else
                                            {!! $vacio !!}
                                        @endif
                                    </td>
                                    <td class="min-w-[140px] text-[12px]">{{ $ped['MOTONAVE'] }}</td>
                                    <td>@if ($ped['TIPO_DECLARACION'])<x-etiqueta class="text-[11.5px]">{{ $ped['TIPO_DECLARACION'] }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                    <td>@if ($ped['MEDIO_TRANSPORTE'])<x-etiqueta class="text-[11.5px]">{{ $ped['MEDIO_TRANSPORTE'] }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                    <td>
                                        @if ($ped['TOTAL_UNIDADES'] > 0)
                                            <x-etiqueta :variante="$ped['TIPO_CARGA'] == 'FCL' ? 'aviso' : 'info'">{{ $ped['TIPO_CARGA'] }} · {{ $ped['TOTAL_UNIDADES'] }} {{ $ped['TOTAL_UNIDADES'] == 1 ? 'unidad' : 'unidades' }}</x-etiqueta>
                                        @else
                                            {!! $vacio !!}
                                        @endif
                                    </td>
                                    <td class="min-w-[140px] text-[12px] {{ $ped['RAZON_SOCIAL_TRANSPORTE'] == 'SIN ASIGNAR' ? 'text-[var(--texto-tenue)]' : '' }}">{{ $ped['RAZON_SOCIAL_TRANSPORTE'] }}</td>
                                    <td>
                                        @if ($docCompleta)
                                            <x-etiqueta variante="exito">Completa</x-etiqueta>
                                        @else
                                            <x-etiqueta variante="peligro" title="{{ $ped['PENDIENTES_DOCUMENTALES'] }}" class="cursor-help">Pendiente</x-etiqueta>
                                        @endif
                                    </td>
                                    @if ($adminTransporte)
                                        <td class="!px-2">
                                            <button type="button" x-on:click="modalTransporte = true" wire:click="seleccionarPedido({{ \Illuminate\Support\Js::from($do) }})"
                                                    class="ctc-accion" title="Asignar transporte al DO {{ $do }}" aria-label="Asignar transporte al DO {{ $do }}">
                                                <x-icono nombre="truck" sprite class="h-[18px] w-[18px]" />
                                            </button>
                                        </td>
                                    @endif
                                </tr>
                                <tr wire:key="arribo-{{ $do }}-detalle" data-sin-hover x-show="abierto === @js($do)" x-cloak>
                                    <td colspan="{{ $columnas }}" class="!border-b !bg-[var(--superficie-3)] !p-0" wire:ignore
                                        x-effect="if (abierto === @js($do) && !$el.firstElementChild) { $el.append(document.getElementById('plantilla-detalle-do').content.cloneNode(true)); }"></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 pedidos por arribar 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>

            @livewire('importaciones.graficos-arribos', ['series' => $seriesGraficas])
        </div>
    </x-pagina>

    <x-icono-simbolos :nombres="['m:chevron-right', 'o:truck']" />

    <template id="plantilla-detalle-do">
        @include('partials.detalle-importacion.panel', ['local' => null])
    </template>

    @if ($adminTransporte)
        {{-- Asignación de transporte al DO --}}
        <template x-teleport="body">
            <div x-show="modalTransporte" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="transporte-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="modalTransporte = false; $wire.limpiarForm()"></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="truck" class="h-5 w-5" /></span>
                        <h2 id="transporte-titulo" class="text-[15px] font-bold text-[var(--texto)]">Asignación de transporte al DO <span class="font-mono">{{ $numeroDo }}</span></h2>
                    </div>
                    <div class="space-y-4 overflow-y-auto px-5 py-4">
                        @if ($errors->any())
                            <x-alerta tipo="error">
                                <ul class="list-disc pl-4">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                            </x-alerta>
                        @endif
                        <div wire:loading wire:target="seleccionarPedido" class="text-[13px] text-[var(--texto-suave)]" role="status">Cargando el pedido…</div>
                        @if (!empty($numeroDo))
                            <dl class="grid gap-x-6 gap-y-3 rounded-lg border border-[var(--borde)] bg-[var(--superficie-3)] p-4 sm:grid-cols-2">
                                @foreach ([
                                    'Pedido' => $registroSeleccionado['NUMERO_PEDIDO'],
                                    'Documento de transporte' => $registroSeleccionado['DOCUMENTO_TRANSPORTE'],
                                    'Puerto de arribo' => $registroSeleccionado['NOMBRE_SUCURSAL'],
                                    'ETA' => !empty($registroSeleccionado['ETA']) ? date('Y-m-d H:i', strtotime($registroSeleccionado['ETA'])) : '',
                                ] as $etiqueta => $valor)
                                    <div>
                                        <dt class="text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--texto-tenue)]">{{ $etiqueta }}</dt>
                                        <dd class="mt-0.5 text-[14px] font-semibold text-[var(--texto)]">{{ $valor ?: '—' }}</dd>
                                    </div>
                                @endforeach
                                <div>
                                    <dt class="text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--texto-tenue)]">Tipo de carga (unidades)</dt>
                                    <dd class="mt-1">
                                        @if ($registroSeleccionado['TOTAL_UNIDADES'] > 0)
                                            <x-etiqueta :variante="$registroSeleccionado['TIPO_CARGA'] == 'FCL' ? 'aviso' : 'info'">{{ $registroSeleccionado['TIPO_CARGA'] }} · {{ $registroSeleccionado['TOTAL_UNIDADES'] }}</x-etiqueta>
                                        @else
                                            <span class="text-[var(--texto-tenue)]">—</span>
                                        @endif
                                    </dd>
                                </div>
                            </dl>
                        @endif
                        <div class="grid gap-3 sm:grid-cols-2">
                            <x-campo etiqueta="Transportador" para="idTransporte">
                                <x-select id="idTransporte" wire:model="idTransporte">
                                    <option value="">Seleccione…</option>
                                    @foreach ($lstTransportes as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                                </x-select>
                            </x-campo>
                            <x-campo etiqueta="Planta" para="idPlanta">
                                <x-select id="idPlanta" wire:model="idPlanta">
                                    <option value="">Seleccione…</option>
                                    @foreach ($lstPlantas as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                                </x-select>
                            </x-campo>
                        </div>
                    </div>
                    <div class="flex flex-row-reverse flex-wrap gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-button type="button" wire:click="asignarTransporte" wire:loading.attr="disabled" wire:target="asignarTransporte">Guardar</x-button>
                        <x-secondary-button x-on:click="modalTransporte = false" wire:click="limpiarForm">Cerrar</x-secondary-button>
                    </div>
                </div>
            </div>
        </template>

        {{-- Prealerta al transporte: pedidos sin notificar, por transportador --}}
        <template x-teleport="body">
            <div x-show="modalNotificacion" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="prealerta-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="modalNotificacion = false"></div>
                <div class="relative flex max-h-[85vh] w-full max-w-3xl 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>
                        <div>
                            <h2 id="prealerta-titulo" class="text-[15px] font-bold text-[var(--texto)]">Envío de prealerta al transporte</h2>
                            <p class="text-[12px] text-[var(--texto-suave)]">Pedidos por transportador que aún no han sido prealertados.</p>
                        </div>
                    </div>
                    <div class="overflow-y-auto px-5 py-4">
                        @if ($errors->any())
                            <x-alerta tipo="error" class="mb-3">
                                <ul class="list-disc pl-4">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                            </x-alerta>
                        @endif
                        <div class="overflow-hidden rounded-lg border border-[var(--borde)]">
                            <table class="ctc-tabla">
                                <thead>
                                    <tr><th>Transportador</th><th class="text-right">Pedidos asignados</th><th class="text-right">Unidades de carga</th><th><span class="sr-only">Enviar</span></th></tr>
                                </thead>
                                <tbody>
                                    @forelse ($pedidosNotificacion as $item)
                                        <tr wire:key="prealerta-{{ $item['id_transporte'] }}">
                                            <td class="font-semibold">{{ $item['nombre_transportador'] }}</td>
                                            <td class="text-right">{{ $item['num_pedidos'] }}</td>
                                            <td class="text-right">{{ $item['num_unidades_carga'] }}</td>
                                            <td class="text-right">
                                                <x-button type="button" class="!h-8 !px-3" wire:click="enviarNotificaciones({{ \Illuminate\Support\Js::from($item['id_transporte']) }})"
                                                          wire:loading.attr="disabled" wire:target="enviarNotificaciones">
                                                    <x-icono nombre="paper-airplane" class="h-4 w-4" /> Enviar
                                                </x-button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr data-sin-hover><td colspan="4" class="!py-8 text-center text-[var(--texto-suave)]">No hay pedidos pendientes de prealerta.</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="flex justify-end border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button x-on:click="modalNotificacion = false">Cerrar</x-secondary-button>
                    </div>
                </div>
            </div>
        </template>
    @endif
</div>