{{--
	Orden de compra V2: creación, edición y cotejo (canales IA y Manual). Kit ui-ctc (MigracionLayout.MD, L3):
	visor del documento a la izquierda y, a la derecha, el cotejo campo por campo, los productos, la trazabilidad
	y el historial de modalidad. Colores: tokens del layout (--acento es el color de la empresa activa).
--}}
@php
	$puedeConfirmar = $this->listaParaConfirmar();
	$soloLectura = Auth()->user()->operacion != 'E';
	$numeros = array_filter(preg_split('/[\s,\/-]+/', (string) $campos['numeros_orden']['valor'], -1, PREG_SPLIT_NO_EMPTY));
	$enFormulario = !is_null($documento) || !empty($extraccion['manual']) || $idPurchaseOrder;

	if (count($numeros) > 1) {
		$titulo = 'Orden de compra consolidada';
		$descripcion = count($numeros) . ' pedidos: ' . implode(' · ', $numeros);
	} elseif ($idPurchaseOrder) {
		$titulo = 'Orden de compra ' . ($numeros ? reset($numeros) : '');
		$descripcion = 'Edición de la orden';
	} else {
		$titulo = 'Nueva orden de compra';
		$descripcion = $numeros ? 'Orden ' . reset($numeros) : 'Sin número asignado';
	}
@endphp
<div>
	<x-pagina>
		<x-encabezado-pagina ruta="Importaciones · Órdenes de compra" :titulo="$titulo" :descripcion="$descripcion">
			<x-slot name="acciones">
				<x-enlace-boton href="{{ pantalla(route('purchase-v2-iframe', [], false)) }}">
					<x-icono nombre="arrow-left" variante="m" class="h-4 w-4" /> Regresar
				</x-enlace-boton>

				@unless ($soloLectura)
					<x-secondary-button wire:click="guardar" wire:loading.attr="disabled" wire:target="guardar,confirmar">
						<x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" wire:loading wire:target="guardar" />
						<span wire:loading.remove wire:target="guardar">Guardar borrador</span>
						<span wire:loading wire:target="guardar">Guardando…</span>
					</x-secondary-button>

					<x-button type="button" wire:click="confirmar" wire:loading.attr="disabled" wire:target="guardar,confirmar"
						:disabled="!$puedeConfirmar"
						title="{{ $puedeConfirmar ? 'Confirmar y crear la orden' : $this->motivoNoConfirmable() }}">
						<x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" wire:loading wire:target="confirmar" />
						<span wire:loading.remove wire:target="confirmar">Confirmar y crear orden</span>
						<span wire:loading wire:target="confirmar">Confirmando…</span>
					</x-button>
				@endunless
			</x-slot>
		</x-encabezado-pagina>

		@if ($soloLectura)
			<x-alerta tipo="aviso">Tu usuario tiene acceso de consulta: puedes revisar la orden pero no guardarla.</x-alerta>
		@elseif (!$puedeConfirmar && $enFormulario)
			<p class="text-[12px] text-[var(--texto-suave)]">
				<x-icono nombre="information-circle" class="mr-1 inline h-4 w-4 align-[-3px] text-[var(--texto-tenue)]" />
				Para confirmar: {{ $this->motivoNoConfirmable() }}
			</p>
		@endif

		@include('livewire.importaciones.purchase-order-form-v2._documento')

		@if ($enFormulario)
			<div @class([
				'grid items-start gap-5',
				'xl:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]' => !is_null($documento),
			])>
				@if (!is_null($documento))
					@include('livewire.importaciones.purchase-order-form-v2._visor')
				@endif

				<div class="min-w-0 space-y-5">
					@include('livewire.importaciones.purchase-order-form-v2._campos')
					@include('livewire.importaciones.purchase-order-form-v2._productos')
					@include('livewire.importaciones.purchase-order-form-v2._trazabilidad')
					@include('livewire.importaciones.purchase-order-form-v2._historial-modalidad')
				</div>
			</div>
		@endif
	</x-pagina>

	@include('livewire.importaciones.purchase-order-form-v2._modal-producto')
	@include('livewire.importaciones.purchase-order-form-v2._modal-modalidad')

	{{-- Velo mientras se lee el documento: la lectura corre dentro del request
	     porque QUEUE_CONNECTION=sync (ver §5.8 de la spec). --}}
	<div wire:loading.flex wire:target="archivo,reextraer,leerDocumento"
		class="fixed inset-0 z-[80] items-center justify-center bg-black/40">
		<div class="flex items-center gap-3 rounded-xl border border-[var(--borde)] bg-[var(--superficie)] px-5 py-3.5 shadow-[var(--sombra-panel)]">
			<x-icono nombre="arrow-path" class="h-5 w-5 animate-spin text-[var(--acento-texto)]" />
			<div class="flex flex-col">
				<span class="text-[13px] font-semibold text-[var(--texto)]">Procesando el documento…</span>
				<span class="text-[12px] text-[var(--texto-suave)]">Puede tomar unos segundos. No cierres la ventana.</span>
			</div>
		</div>
	</div>
</div>