{{-- Órdenes de compra emitidas (impo/order, impo/purchase-order). Kit ui-ctc: indicadores por status que filtran,
     los tops de productos, exportadores y valor (componente purchase-order-stats), búsqueda con segmento, y la lista en
     pestañas Abiertas / Cerradas con cabecera fija, paginada de a 50, con el detalle de productos bajo cada fila. --}}
@php
    $columnas = 11 + ($segmento ? 1 : 0);
    $chips = [];
    if ((string) $search !== '') { $chips['search'] = ['Pedido', $search]; }
    if ((string) $idSegmentoCliente !== '') { $chips['idSegmentoCliente'] = [$tituloSegmento, $lstSegmentosClientes[$idSegmentoCliente] ?? $idSegmentoCliente]; }
    if ($filtroStatus !== '') { $chips['filtroStatus'] = ['Status', $filtroStatus === 'proceso' ? 'En proceso' : 'Abiertas']; }
    $variantes = ['abierta' => 'peligro', 'proceso' => 'info', 'cerrada' => 'exito'];
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $puedeEditar = Auth()->user()->operacion == 'E';
@endphp
<div x-data="{ abierto: null }">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Órdenes de compra emitidas">
            @if ($puedeEditar)
                <x-slot name="acciones">
                    @livewire('importaciones.purchase-order-mass-import', [], key('purchase-order-mass-import'))
                    <a href="{{ pantalla(route('purchase-procesar', ['idPurchaseOrder' => '0', 'status' => 'nueva'], false)) }}"
                       class="inline-flex h-9 items-center gap-2 rounded-lg bg-[var(--acento)] px-4 text-[13px] font-semibold text-[var(--acento-contraste)] hover:bg-[var(--acento-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)] focus-visible:ring-offset-2">
                        <x-icono nombre="plus" variante="m" class="h-4 w-4" /> Nueva orden
                    </a>
                </x-slot>
            @endif
        </x-encabezado-pagina>

        <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
            <x-indicador titulo="Abiertas" :valor="$stats['abiertas'] ?? 0" :total="$stats['total'] ?? 0" color="#DC2626" :activo="$filtroStatus === 'abierta'" wire:click="filtrarStatus('abierta')" />
            <x-indicador titulo="En proceso" :valor="$stats['proceso'] ?? 0" :total="$stats['total'] ?? 0" color="#0284C7" :activo="$filtroStatus === 'proceso'" wire:click="filtrarStatus('proceso')" />
            <x-indicador titulo="Cerradas" :valor="$stats['cerradas'] ?? 0" :total="$stats['total'] ?? 0" color="#059669" :activo="$pestana === 'cerradas'" wire:click="filtrarStatus('cerrada')" />
            <x-indicador titulo="Todas" :valor="$stats['total'] ?? 0" wire:click="filtrarStatus('')" />
        </div>

        @livewire('importaciones.purchase-order-stats')

        <x-barra-busqueda modelo="search" accion="consultar" placeholder="Buscar por número de pedido" :activos="count($chips)">
            @if ($segmento)
                <x-slot name="filtros">
                    <x-campo :etiqueta="$tituloSegmento" para="idSegmentoCliente">
                        <x-select id="idSegmentoCliente" wire:model="idSegmentoCliente">
                            <option value="">Todos</option>
                            @foreach ($lstSegmentosClientes as $idSegmento => $nombreSegmento)<option value="{{ $idSegmento }}">{{ $nombreSegmento }}</option>@endforeach
                        </x-select>
                    </x-campo>
                </x-slot>
            @endif
            <x-slot name="ayuda">Podrás consultar información ingresando el número de pedido. Luego de escribirlo presiona Enter o el botón Consultar.</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 hover:text-[var(--texto)]">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 overflow-x-auto" role="tablist">
                    <x-pestana etiqueta="Abiertas" :conteo="$totalAbiertas" icono="list-bullet" :activa="$pestana === 'abiertas'" wire:click="verPestana('abiertas')" />
                    <x-pestana etiqueta="Cerradas" :conteo="$totalCerradas" icono="list-bullet" :activa="$pestana === 'cerradas'" wire:click="verPestana('cerradas')" />
                </div>
                <div class="flex flex-wrap items-center gap-3 py-2 text-[12px] text-[var(--texto-suave)]">
                    <span>Status de las órdenes:</span>
                    @foreach (['Cerradas' => '#059669', 'Proceso' => '#0284C7', 'Abiertas' => '#DC2626'] as $nombreStatus => $colorStatus)
                        <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm border" style="background: color-mix(in srgb, {{ $colorStatus }} 18%, transparent); border-color: {{ $colorStatus }};"></span>{{ $nombreStatus }}</span>
                    @endforeach
                    <span class="tabular-nums">{{ number_format($stats['total'] ?? 0, 0, ',', '.') }} registros consultados</span>
                    <span wire:loading.delay wire:target="consultar,filtrarStatus,verPestana,limpiarFiltro,limpiarFiltros,gotoPage,nextPage,previousPage,anularOrden"
                          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">Pedido</th>
                            <th>Cliente</th>
                            @if ($segmento)<th>{{ $tituloSegmento }}</th>@endif
                            <th>Fecha</th>
                            <th>Supplier</th>
                            <th title="Semana del año de la fecha estimada de despacho">SED</th>
                            <th class="!text-right"># Productos orden</th>
                            <th class="!text-right"># Productos facturados</th>
                            <th class="!text-right">Saldo</th>
                            <th>Status</th>
                            <th><span class="sr-only">Acciones</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($purchaseOrders as $ped)
                            <tr wire:key="oc-{{ $ped->id }}" :class="abierto === {{ $ped->id }} && '[&>td]:!bg-[var(--superficie-3)]'"
                                @if ($ped->status === 'proceso') style="background-color: color-mix(in srgb, #DC2626 6%, transparent);" @endif>
                                <td class="ctc-fija !px-2" style="left: 0">
                                    <button type="button" x-on:click="abierto = abierto === {{ $ped->id }} ? null : {{ $ped->id }}" :aria-expanded="abierto === {{ $ped->id }}"
                                            aria-label="Ver los productos de la orden {{ $ped->po }}" 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 === {{ $ped->id }} && 'rotate-90'" />
                                    </button>
                                </td>
                                <td class="ctc-fija ctc-fija-ultima whitespace-nowrap font-semibold" style="left: 44px">{{ $ped->po }}</td>
                                <td class="max-w-[220px] truncate text-[12.5px]" title="{{ $ped->cliente }}">{!! $ped->cliente ? e($ped->cliente) : $vacio !!}</td>
                                @if ($segmento)
                                    <td class="max-w-[180px] truncate text-[12.5px] text-[var(--texto-suave)]" title="{{ $ped->segmento }}">{!! $ped->segmento ? e($ped->segmento) : $vacio !!}</td>
                                @endif
                                <td class="whitespace-nowrap font-medium text-rose-700 dark:text-rose-300">{{ $ped->fecha_po }}</td>
                                <td class="max-w-[240px] truncate text-[12.5px]" title="{{ $ped->supplier }}">{!! $ped->supplier ? e($ped->supplier) : $vacio !!}</td>
                                <td class="tabular-nums">{!! $ped->sed ? e($ped->sed) : $vacio !!}</td>
                                <td class="text-right tabular-nums">{{ number_format($ped->total_productos, 2) }}</td>
                                <td class="text-right tabular-nums">{{ number_format($ped->total_facturado, 2) }}</td>
                                <td class="text-right tabular-nums">{{ number_format($ped->saldo, 2) }}</td>
                                <td><x-etiqueta :variante="$variantes[$ped->status] ?? 'neutro'" class="capitalize">{{ $ped->status }}</x-etiqueta></td>
                                <td class="w-[1%] whitespace-nowrap !px-2">
                                    <div class="flex items-center justify-end gap-0.5">
                                        <a href="{{ pantalla(route('purchase-procesar', ['idPurchaseOrder' => $ped->id, 'status' => $ped->status], false)) }}"
                                           class="ctc-accion" title="Editar OC {{ $ped->po }}" aria-label="Editar la orden de compra {{ $ped->po }}">
                                            <x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" />
                                        </a>
                                        @if ($ped->status != 'abierta')
                                            <a href="{{ pantalla('/impo/ordenes-compra-historico/?search=' . rawurlencode($ped->po)) }}"
                                               class="ctc-accion" title="Ver ejecución {{ $ped->po }}" aria-label="Ver la ejecución de la orden {{ $ped->po }}">
                                                <x-icono nombre="eye" sprite class="h-[18px] w-[18px]" />
                                            </a>
                                        @endif
                                        @if ($ped->status != 'cerrada' && $puedeEditar)
                                            <button type="button" wire:click="confirmarAnularOrden({{ $ped->id }})"
                                                    class="ctc-accion hover:!bg-rose-50 hover:!text-rose-700 dark:hover:!bg-rose-500/10 dark:hover:!text-rose-300"
                                                    title="Anular Orden de Compra {{ $ped->po }}" aria-label="Anular la orden de compra {{ $ped->po }}">
                                                <x-icono nombre="trash" sprite class="h-[18px] w-[18px]" />
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            {{-- Detalle de la orden: sus productos (vienen con la lista, no se consultan al abrir). --}}
                            <tr wire:key="oc-det-{{ $ped->id }}" data-sin-hover x-show="abierto === {{ $ped->id }}" x-cloak>
                                <td colspan="{{ $columnas }}" class="!border-b !bg-[var(--superficie-3)] !p-0">
                                    <div class="ctc-vacio px-5 py-4 pl-14">
                                        <p class="mb-2 text-[12px] font-semibold uppercase tracking-[0.06em] text-[var(--texto-suave)]">Detalle orden de compra <span class="font-mono normal-case text-[var(--acento-texto)]">{{ $ped->po }}</span></p>
                                        <div class="overflow-hidden rounded-lg border border-[var(--borde)] bg-[var(--superficie)]">
                                            <table class="w-full text-[13px]">
                                                <thead class="bg-[var(--superficie-2)] text-left text-[11.5px] font-semibold uppercase tracking-[0.04em] text-[var(--texto-suave)]">
                                                    <tr>
                                                        <th class="px-3 py-2">Código</th>
                                                        <th class="px-3 py-2">Nombre comercial</th>
                                                        <th class="px-3 py-2">Categoría</th>
                                                        <th class="px-3 py-2 text-right">Cantidad</th>
                                                        <th class="px-3 py-2 text-right">Precio</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="divide-y divide-[var(--borde)]">
                                                    @forelse ($ped->productos as $item)
                                                        <tr>
                                                            <td class="whitespace-nowrap px-3 py-2 font-medium">{{ $item->codigo }}</td>
                                                            <td class="px-3 py-2 text-[var(--texto-suave)]">{{ $item->nombre }}</td>
                                                            <td class="px-3 py-2">{!! $item->categoria ? e($item->categoria) : $vacio !!}</td>
                                                            <td class="whitespace-nowrap px-3 py-2 text-right tabular-nums">{{ number_format($item->cantidad) }}</td>
                                                            <td class="whitespace-nowrap px-3 py-2 text-right tabular-nums">{{ number_format($item->valor, 2) }}</td>
                                                        </tr>
                                                    @empty
                                                        <tr><td colspan="5" class="px-3 py-4 text-center text-[var(--texto-suave)]">Sin productos asociados.</td></tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </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">Sin resultados para la consulta de información.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($purchaseOrders->hasPages())
                <div class="border-t border-[var(--borde)] px-5 py-3">{{ $purchaseOrders->links('vendor.pagination.ctc-livewire') }}</div>
            @endif
        </section>
    </x-pagina>
</div>