{{-- Tabla de órdenes de cargue de exportación con columnas dinámicas, compartida por el listado/búsqueda
     (ExPo.index) y el histórico (ExPo.historico). Gemela de Po._tabla. Layout nuevo con el kit ui-ctc,
     MigracionLayout.MD L3.

     Parámetros: $po, $columname, $ocultas, $conFacturacion, $conAnular (anular, ver orden y notificar),
     $colorear (marca la fila con el color de su estado, como el histórico de siempre), $dobleClic,
     $leyenda (estados con color_fondo, opcional; solo tiene sentido con $colorear). --}}
@php
    $ocultas = $ocultas ?? ['id', 'COLOR', 'COLORCON', 'numped', 'STATUSCON', 'notificaciones'];
    $conFacturacion = $conFacturacion ?? true;
    $conAnular = $conAnular ?? false;
    $colorear = $colorear ?? false;
    $dobleClic = $dobleClic ?? false;
    $leyenda = $leyenda ?? collect();
    $columnas = collect($columname)->reject(fn ($c) => in_array($c, $ocultas, true));
    $hex = fn ($v) => $v && preg_match('/^#?[0-9A-Fa-f]{3,8}$/', trim($v)) ? '#' . ltrim(trim($v), '#') : null;
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
@endphp
<section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
    <x-icono-simbolos :nombres="['o:pencil-square', 'o:calendar-days', 'o:trash', 'o:globe-americas', 'o:document-text', 'o:table-cells', 'o:envelope']" />
    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
        <p class="text-[13px] text-[var(--texto-suave)]"><span class="font-semibold tabular-nums text-[var(--texto)]">{{ number_format($po->total(), 0, ',', '.') }}</span> órdenes de cargue</p>
        @if ($colorear && $leyenda->count())
            <div class="flex flex-wrap items-center gap-x-3.5 gap-y-1.5 text-[12px] text-[var(--texto-suave)]" aria-label="Convención de colores de estado">
                @foreach ($leyenda as $estado)
                    @continue(empty($estado->color_fondo))
                    <span class="inline-flex items-center gap-1.5">
                        <span class="h-2.5 w-2.5 rounded-sm border border-black/10" style="background-color: #{{ ltrim($estado->color_fondo, '#') }};" aria-hidden="true"></span>
                        {{ $estado->titulo }}
                    </span>
                @endforeach
            </div>
        @endif
    </div>
    <div class="ctc-tabla-caja">
        <table class="ctc-tabla">
            <thead>
                <tr>
                    <th class="ctc-fija ctc-fija-ultima" style="left: 0">Acciones</th>
                    @foreach ($columnas as $columna)
                        <th>{{ mb_strtoupper($columna) }}</th>
                    @endforeach
                    @if ($conAnular)
                        <th>Orden</th>
                        <th>Notificar</th>
                        <th><span class="sr-only">Anular</span></th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @forelse ($po as $fila)
                    @php
                        $colorFila = $colorear ? ($hex($fila->COLORCON ?? null) ?: $hex($fila->COLOR ?? null)) : null;
                        $fondo = $colorFila ? "background-color: color-mix(in srgb, $colorFila 22%, var(--superficie));" : '';
                    @endphp
                    <tr class="{{ $dobleClic ? 'cursor-pointer' : '' }}" @if ($colorFila) data-sin-hover style="{{ $fondo }}" @endif
                        @if ($dobleClic) ondblclick="window.ctcAbrirSeguimientoExpo({{ $fila->numped }})" @endif>
                        <td class="ctc-fija ctc-fija-ultima !px-2" style="left: 0; {{ $fondo }} {{ $colorFila ? "box-shadow: inset 4px 0 0 $colorFila;" : '' }}">
                            <div class="flex items-center gap-0.5">
                                <a href="{{ pantalla('/rexpo/create/' . $fila->id) }}" class="ctc-accion" aria-label="Editar orden" title="Editar orden">
                                    <x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" />
                                </a>
                                <a href="{{ pantalla('/rbexactivivad?txtBuscar=' . $fila->numped) }}" class="ctc-accion" aria-label="Seguimiento" title="Seguimiento">
                                    <x-icono nombre="calendar-days" sprite class="h-[18px] w-[18px]" />
                                </a>
                                @if ($conFacturacion)
                                    @livewire('ex-po.ex-po-facturacion', ['id_po' => $fila->id], key('exfac-' . $fila->id))
                                @endif
                            </div>
                        </td>
                        @foreach ($fila as $nombre => $valor)
                            @continue(in_array($nombre, $ocultas, true))
                            @if (str_contains($valor ?? '', 'http'))
                                {{-- Enlaces de rastreo (naviera) que vienen en los datos --}}
                                <td class="!px-2">
                                    <a href="{{ $valor }}" target="_blank" rel="noopener" class="ctc-accion text-[var(--acento-texto)]" aria-label="Rastrear embarque" title="Rastrear embarque">
                                        <x-icono nombre="globe-americas" sprite class="h-[18px] w-[18px]" />
                                    </a>
                                </td>
                            @elseif ($nombre === 'STATUS' && $colorear && $hex($fila->COLOR ?? null))
                                <td><x-etiqueta :color="$hex($fila->COLOR)">{{ $valor }}</x-etiqueta></td>
                            @elseif ($valor === null || $valor === '')
                                <td>{!! $vacio !!}</td>
                            @else
                                <td class="whitespace-nowrap">{{ $valor }}</td>
                            @endif
                        @endforeach
                        @if ($conAnular)
                            <td class="!px-2">
                                <div class="flex gap-0.5">
                                    <a href="/rexpo/notifica/{{ $fila->id }}/pdf" target="_blank" rel="noopener" class="ctc-accion" aria-label="Ver orden en pantalla" title="Ver orden en pantalla">
                                        <x-icono nombre="document-text" sprite class="h-[18px] w-[18px]" />
                                    </a>
                                    <a href="/rexpo/notifica/{{ $fila->id }}/xls" target="_blank" rel="noopener" class="ctc-accion text-emerald-600 dark:text-emerald-400" aria-label="Descargar archivo Excel" title="Descargar archivo Excel">
                                        <x-icono nombre="table-cells" sprite class="h-[18px] w-[18px]" />
                                    </a>
                                </div>
                            </td>
                            <td class="!px-2">
                                @if (isset($fila->notificaciones))
                                    <button type="button" onclick="window.ctcEnviarNotificacion({{ $fila->id }})" title="Enviar por correo"
                                            aria-label="Enviar la orden por correo ({{ $fila->notificaciones }} envíos)"
                                            class="inline-flex h-[30px] items-center gap-1.5 rounded-md px-2 text-[12px] font-semibold tabular-nums focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]
                                                   {{ $fila->notificaciones == 0 ? 'bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300' : 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' }}">
                                        <x-icono nombre="envelope" sprite class="h-4 w-4" />
                                        {{ $fila->notificaciones }}
                                    </button>
                                @endif
                            </td>
                            <td class="!px-2">
                                <form action="/rexpoviewinac" method="post">
                                    @csrf
                                    <input name="id" type="hidden" value="{{ $fila->id }}">
                                    <button type="submit" class="ctc-accion hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-500/10 dark:hover:text-red-400" aria-label="Anular orden" title="Anular orden">
                                        <x-icono nombre="trash" sprite class="h-[18px] w-[18px]" />
                                    </button>
                                </form>
                            </td>
                        @endif
                    </tr>
                @empty
                    <tr data-sin-hover>
                        <td colspan="{{ $columnas->count() + ($conAnular ? 4 : 1) }}" 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 órdenes de cargue con los filtros aplicados.</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if ($po->hasPages())
        <div class="border-t border-[var(--borde)] px-5 py-3">{{ $po->links('vendor.pagination.ctc') }}</div>
    @endif
</section>

@once
    @push('scripts')
        <script>
            // Doble clic en una fila del histórico: seguimiento en una ventana aparte (igual que antes).
            window.ctcAbrirSeguimientoExpo = function (pedido) {
                window.open('/rbexactivivad?txtBuscar=' + encodeURIComponent(pedido), 'Seguimiento de la Orden', 'width=1024,height=768');
            };
            // Envío de la orden por correo (antes: $.ajax). El servidor responde un texto que se muestra tal cual.
            window.ctcEnviarNotificacion = function (id) {
                if (!confirm('CONFIRMACIÓN REQUERIDA\n\n¿Desea enviar esta orden por correo ahora?')) { return; }
                fetch('/rexpo/notifica/' + id + '/mail', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                    .then(function (r) { if (!r.ok) { throw new Error(r.status); } return r.text(); })
                    .then(function (texto) { alert(texto); })
                    .catch(function () { alert('ERROR INESPERADO\n\nOcurrió un error al intentar enviar el correo'); });
            };
        </script>
    @endpush
@endonce