{{-- Órdenes de compra V2 (impo/purchase-order-v2, impo/order-v2). Layout nuevo con el kit ui-ctc: embudo del ciclo
     de vida (indicadores que filtran por fase), búsqueda con año y segmento, pestañas de estado comercial, y la tabla
     con cabecera fija, paginada en el servidor y con el detalle de la orden bajo la fila. Ver specs/SPEC_PurchaseOrderV2.MD.
     Colores: tokens del layout (--acento es el color de la empresa activa). --}}
@php
    $totalColumnas = 10 + ($variasCompanias ? 1 : 0) + ($segmento ? 1 : 0);
    $chips = [];
    if ($search !== '') { $chips[] = ['Búsqueda', $search, 'quitarBusqueda']; }
    if ($filtroFase !== '' && isset($stats['fases'][$filtroFase])) { $chips[] = ['Fase', $stats['fases'][$filtroFase]['titulo'], "filtrarFase('" . $filtroFase . "')"]; }
@endphp
<div x-data="{ embudo: true }">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Órdenes de compra emitidas"
                             :descripcion="number_format($stats['total'] ?? 0, 0, ',', '.') . ' órdenes en ' . $anio">
            <x-slot name="acciones">
                <x-secondary-button x-on:click="embudo = !embudo" x-bind:aria-expanded="embudo">
                    <x-icono nombre="chevron-down" variante="m" class="h-4 w-4 transition-transform" x-bind:class="embudo ? '' : '-rotate-90'" />
                    <span x-text="embudo ? 'Ocultar embudo' : 'Mostrar embudo'">Ocultar embudo</span>
                </x-secondary-button>
                {{-- Catálogo de compradores del cliente (tarea 4.4) --}}
                <x-enlace-boton href="{{ pantalla(route('oc-compradores', [], false)) }}">
                    <x-icono nombre="users" class="h-4 w-4" /> Compradores
                </x-enlace-boton>
                {{-- Solicitudes de clasificación del cliente (tarea 2.4) --}}
                <x-enlace-boton href="{{ pantalla(route('oc-clasificaciones', [], false)) }}">
                    <x-icono nombre="clipboard-document-check" class="h-4 w-4" /> Clasificación
                </x-enlace-boton>
                {{-- Un tercero solo consulta: no se pinta nada que cree o modifique. --}}
                @if (!$esTercero && Auth()->user()->operacion == 'E')
                    {{-- Plantilla e importador v2 (OC y Clasificación, tareas 1.3 a 1.5). La V1 conserva purchase-order-mass-import. --}}
                    @livewire('importaciones.orden-compra-carga-excel', [], key('orden-compra-carga-excel'))
                    <a href="{{ pantalla(route('purchase-procesar-v2', ['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>
                @endif
            </x-slot>
        </x-encabezado-pagina>

        @if ($esTercero && empty($gruposVisibles))
            <x-alerta tipo="aviso">Tu acceso no tiene grupos empresariales asignados, así que no hay información que mostrar. Avisa al administrador.</x-alerta>
        @elseif ($enlaceMixto)
            <x-alerta tipo="aviso">Los grupos que consultas usan formas distintas de enlazar con el ERP. El avance del ciclo y el recibido pueden no ser exactos en algunos de ellos. Avisa al administrador.</x-alerta>
        @endif

        <div x-show="embudo">
            @include('livewire.importaciones.purchase-order-v2._embudo')
        </div>

        <x-barra-busqueda modelo="search" accion="consultar" placeholder="Buscar por pedido, supplier, SED o contenedor" :activos="count($chips)" :abierto="true">
            <x-slot name="filtros">
                <x-campo etiqueta="Año" para="anio">
                    <x-select id="anio" wire:model.live="anio">
                        @foreach ($lstAnios as $anioDisponible)<option value="{{ $anioDisponible }}">{{ $anioDisponible }}</option>@endforeach
                    </x-select>
                </x-campo>
                @if ($segmento)
                    <x-campo :etiqueta="$tituloSegmento" para="idSegmentoCliente">
                        <x-select id="idSegmentoCliente" wire:model.live="idSegmentoCliente">
                            <option value="">Todos</option>
                            @foreach ($lstSegmentosClientes as $idSegmento => $nombreSegmento)<option value="{{ $idSegmento }}">{{ $nombreSegmento }}</option>@endforeach
                        </x-select>
                    </x-campo>
                @endif
            </x-slot>
            <x-slot name="ayuda">SED: semana del año de la fecha estimada de despacho (1 a 53). El contenedor se busca desde 4 caracteres.</x-slot>
            @if (count($chips) || $filtroEstado !== '')
                <x-slot name="chips">
                    @foreach ($chips as [$etiqueta, $valor, $accion])
                        <x-chip-filtro :etiqueta="$etiqueta" :valor="$valor" wire:click="{{ $accion }}" />
                    @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="Todas" :conteo="(int) ($stats['total'] ?? 0)" :activa="$filtroEstado === ''" wire:click="filtrarEstado('')" />
                    <x-pestana etiqueta="Abiertas" :conteo="(int) (($stats['abiertas'] ?? 0) + ($stats['proceso'] ?? 0))" :activa="$filtroEstado === 'abiertas'" wire:click="filtrarEstado('abiertas')" />
                    <x-pestana etiqueta="Cerradas" :conteo="(int) ($stats['cerradas'] ?? 0)" :activa="$filtroEstado === 'cerradas'" wire:click="filtrarEstado('cerradas')" />
                    <x-pestana etiqueta="En riesgo" :conteo="(int) ($stats['riesgo'] ?? 0)" icono="exclamation-triangle" :activa="$filtroEstado === 'riesgo'" wire:click="filtrarEstado('riesgo')"
                               title="ETA vencida sin arribo, o más de {{ $diasSinConfirmarRiesgo }} días sin confirmación del proveedor" />
                    <x-pestana etiqueta="En clasificación" :conteo="(int) ($stats['clasificacion'] ?? 0)" icono="clipboard-document-check" :activa="$filtroEstado === 'clasificacion'" wire:click="filtrarEstado('clasificacion')"
                               title="Órdenes con productos que no existen en Websimex y tienen una solicitud de clasificación abierta" />
                </div>
                <div class="flex flex-wrap items-center gap-3 py-2 text-[12px] text-[var(--texto-suave)]">
                    @foreach (['Sin confirmar' => '#64748B', 'Sin embarcar' => 'var(--acento)', 'En tránsito' => '#B4740A', 'Con arribo' => '#1F7A4D'] as $nombreFase => $colorFase)
                        <span class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full" style="background: {{ $colorFase }};"></span>{{ $nombreFase }}</span>
                    @endforeach
                    <span wire:loading.delay wire:target="consultar,filtrarFase,filtrarEstado,verDetalle,gotoPage,nextPage,previousPage,anio,idSegmentoCliente,limpiarFiltros,quitarBusqueda"
                          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-10 min-w-10" style="left: 0"><span class="sr-only">Detalle</span></th>
                            <th class="ctc-fija ctc-fija-ultima" style="left: 40px">
                                <x-orden-columna etiqueta="Orden" :activo="$ordenarPor === 'fecha_po'" :direccion="$direccionOrden" wire:click="ordenar('fecha_po')" title="Ordenar por fecha de la orden" />
                            </th>
                            @if ($variasCompanias)<th>Compañía</th>@endif
                            <th>Supplier / origen</th>
                            <th>
                                <x-orden-columna etiqueta="Entrega proveedor" :activo="$ordenarPor === 'fecha_entrega_proveedor'" :direccion="$direccionOrden" wire:click="ordenar('fecha_entrega_proveedor')" title="Ordenar por fecha de entrega del proveedor" />
                            </th>
                            @if ($segmento)<th>{{ $tituloSegmento }}</th>@endif
                            <th title="Semana del año de la fecha estimada de despacho">
                                <x-orden-columna etiqueta="SED" :activo="$ordenarPor === 'fecha_etd'" :direccion="$direccionOrden" wire:click="ordenar('fecha_etd')" title="Ordenar por fecha estimada de despacho" />
                            </th>
                            <th>Ruta</th>
                            <th class="!text-right">ETA</th>
                            <th>Avance del ciclo</th>
                            <th class="!text-right">Recibido</th>
                            <th><span class="sr-only">Acciones</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($ordenes as $orden)
                            @include('livewire.importaciones.purchase-order-v2._fila', ['orden' => $orden])
                        @empty
                            <tr data-sin-hover>
                                <td colspan="{{ $totalColumnas }}" 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 órdenes de compra para la consulta.</p>
                                        @if (!empty($otrosAnios))
                                            {{-- Caso típico al buscar por contenedor: la orden existe, pero es de otro año. --}}
                                            <p class="mt-3 flex flex-wrap items-center justify-center gap-2 text-[13px]">
                                                Sí hay coincidencias en:
                                                @foreach ($otrosAnios as $anioCoincidencia => $cuantas)
                                                    <button type="button" wire:click="$set('anio', '{{ $anioCoincidencia }}')"
                                                            class="rounded-full border border-[var(--borde-fuerte)] bg-[var(--superficie)] px-2.5 py-1 text-[12px] font-semibold text-[var(--acento-texto)] hover:bg-[var(--nav-hover)]">
                                                        {{ $anioCoincidencia }} ({{ $cuantas }})
                                                    </button>
                                                @endforeach
                                            </p>
                                        @else
                                            <p class="mt-1 text-[12.5px] text-[var(--texto-tenue)]">Ajuste el año, la búsqueda o el filtro del embudo.</p>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="flex flex-wrap items-center justify-between gap-3 border-t border-[var(--borde)] px-5 py-3">
                <div class="min-w-0 flex-1">{{ $ordenes->links('vendor.pagination.ctc-livewire') }}</div>
                <span class="text-[11.5px] italic text-[var(--texto-tenue)]">Los campos sin dato en el ERP se muestran como “—”.</span>
            </div>
        </section>
    </x-pagina>
</div>