{{-- Sincronización de órdenes de compra pendientes con Websimex (layout nuevo, MigracionLayout.MD L3).
     El diálogo es de Alpine (antes, modal Bootstrap); la consulta de pendientes la hace consultarPedidos(). --}}
<div x-data="{ abierto: false }" x-on:keydown.escape.window="abierto = false">
    <x-secondary-button wire:click="consultarPedidos()" x-on:click="abierto = true">
        <x-icono nombre="circle-stack" />
        Actualizar órdenes de compra
    </x-secondary-button>

    <template x-teleport="body">
        <div x-show="abierto" x-cloak class="fixed inset-0 z-[60] flex items-start justify-center overflow-y-auto px-4 py-10" role="dialog" aria-modal="true" aria-labelledby="sincronizacion-titulo">
            <div class="fixed inset-0 bg-black/40" x-on:click="abierto = false"></div>
            <div class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <header class="flex items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-4">
                    <h2 id="sincronizacion-titulo" class="text-[15px] font-bold text-[var(--texto)]">Sincronización de órdenes de compra</h2>
                    <x-boton-icono etiqueta="Cerrar" x-on:click="abierto = false">
                        <x-icono nombre="x-mark" class="h-5 w-5" />
                    </x-boton-icono>
                </header>
                <div class="max-h-[70vh] overflow-y-auto px-5 py-4">
                    <div wire:loading.flex wire:target="consultarPedidos" class="items-center justify-center gap-2 py-6 text-[13px] text-[var(--texto-suave)]"><x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando pendientes…</div>
                    <div wire:loading.remove wire:target="consultarPedidos">
                        @if (empty($pedidos) || count($pedidos) === 0)
                            <p class="py-6 text-center text-[13px] text-[var(--texto-tenue)]">No hay órdenes de compra pendientes de actualizar.</p>
                        @else
                            <div class="ctc-tabla-caja rounded-xl border border-[var(--borde)]" style="--alto-tabla: 55vh">
                                <table class="ctc-tabla">
                                    <thead>
                                        <tr>
                                            @foreach (['Orden de compra', 'Importación', 'Proveedor', 'Tipo de actualización', 'Operación'] as $columna)
                                                <th>{{ $columna }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pedidos as $pedido)
                                            @livewire('po.linea-orden-compra-act', [
                                                'id_pedido' => $pedido->id,
                                                'importacion' => $pedido->Item,
                                                'po' => $pedido->po,
                                                'proveedor' => $pedido->nombre,
                                                'tipo_actualizacion' => $pedido->tipo_actualizacion,
                                                'numero_do' => $pedido->numero_do,
                                                'id_actualizacion' => $pedido->id_actualizacion,
                                            ], key($pedido->id . $pedido->id_actualizacion))
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        <p class="mt-3 text-[13px] font-semibold text-[var(--texto-suave)]">Actualizaciones pendientes: {{ count($pedidos) }}</p>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>