{{-- Tabla de órdenes de compra con columnas dinámicas (JMetodos::SqlPOGeneral), compartida por el
     listado/búsqueda (Po.index) y el histórico (Po.historico). Layout nuevo con el kit ui-ctc, MigracionLayout.MD L3.

     Parámetros: $po (paginador de filas stdClass), $columname, $ocultas (columnas que no se pintan),
     $conAnular (bool), $leyenda (estados con color_fondo, opcional). Los colores de fila y de estado vienen de la
     base (configuración del cliente). --}}
@php
    $ocultas = $ocultas ?? ['id', 'COLOR', 'COLORCON', 'numped', 'STATUSCON', 'NUM_DO', 'NUM DO'];
    $conAnular = $conAnular ?? 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']" />
    <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 compra</p>
        @if ($leyenda->count())
            {{-- Convención de colores de estado: configuración del cliente --}}
            <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>{{ $columna }}</th>
                    @endforeach
                    @if ($conAnular)<th><span class="sr-only">Anular</span></th>@endif
                </tr>
            </thead>
            <tbody>
                @forelse ($po as $fila)
                    @php
                        // Convención de colores del cliente (leyenda de arriba): COLOR es el color del estado de la fila
                        // y COLORCON, el de la condición especial cuando el cliente la tiene configurada (manda sobre COLOR).
                        // La fila completa queda marcada: barra a la izquierda y un fondo suave del mismo color. El fondo se
                        // mezcla con la superficie (opaco) para que la columna fija de acciones lo tenga igual.
                        $colorEstado = $hex($fila->COLOR ?? null);
                        $colorFila = $hex($fila->COLORCON ?? null) ?: $colorEstado;
                        $fondo = $colorFila ? "background-color: color-mix(in srgb, $colorFila 22%, var(--superficie));" : '';
                    @endphp
                    <tr class="cursor-pointer" @if ($colorFila) data-sin-hover style="{{ $fondo }}" @endif
                        ondblclick="window.ctcAbrirSeguimiento({{ $fila->numped }})">
                        <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('/rpo/' . $fila->id . '/edit') }}" 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('/rbactivivad?txtBuscar=' . $fila->numped) }}" class="ctc-accion" aria-label="Seguimiento" title="Seguimiento">
                                    <x-icono nombre="calendar-days" sprite class="h-[18px] w-[18px]" />
                                </a>
                                @livewire('po.facturacion', ['id_po' => $fila->id], key('fac-' . $fila->id))
                            </div>
                        </td>
                        @foreach ($fila as $nombre => $valor)
                            @continue(in_array($nombre, $ocultas, true))
                            @if ($nombre === 'STATUS' && $colorEstado)
                                <td><x-etiqueta :color="$colorEstado">{{ $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">
                                <form action="/rpoviewinac" 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 ? 2 : 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 compra 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: seguimiento de la orden en una ventana aparte (igual que antes).
            window.ctcAbrirSeguimiento = function (pedido) {
                window.open('/rbactivivad?txtBuscar=' + encodeURIComponent(pedido), 'Seguimiento de la Orden de Compra', 'width=1024,height=768');
            };
        </script>
    @endpush
@endonce