{{--
	Información general de la orden. Cada campo lleva su etiqueta de confianza,
	su procedencia y su marca de cotejo. Ningún campo se coteja solo: lo
	confirma el usuario. Los campos son los de la plantilla CTC-OC-2 y los
	catálogos los de Websimex (tarea 1.6, RN-1.6 y RN-1.20).
--}}
@php
	$porCrear = \App\Http\Livewire\Importaciones\PurchaseOrderFormV2::PROVEEDOR_POR_CREAR;
	$todoCotejado = $progreso['campos'] > 0 && $progreso['campos'] === $progreso['cotejados'];

	// Borde del control según el estado del campo (clases completas: el JIT no
	// arma clases con variables).
	$bordes = [
		'cotejado' => '!border-emerald-400 dark:!border-emerald-500/60',
		'revisar'  => '!border-amber-400 dark:!border-amber-500/60',
		'extraido' => '!border-sky-300 dark:!border-sky-500/50',
		'manual'   => '',
	];
	$controlTextarea = 'form-textarea block w-full rounded-md text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] focus:border-[var(--acento)] focus:ring-[var(--acento)]';
@endphp
<x-tarjeta titulo="Información general" :descripcion="!empty($extraccion['exito'])
	? 'Los campos vienen del documento. Confírmalos o corrígelos; al editar uno vuelve a quedar sin cotejar.'
	: 'Diligencia los campos y márcalos como cotejados para poder confirmar la orden. Los marcados con * son obligatorios.'">
	<x-slot name="acciones">
		<span class="flex items-center gap-3 text-[12px] text-[var(--texto-suave)]">
			@if (!empty($extraccion['exito']))
				<span class="hidden items-center gap-1.5 sm:flex"><span class="h-2.5 w-2.5 rounded-sm border border-sky-300 bg-sky-50 dark:border-sky-500/50 dark:bg-sky-500/10"></span>Extraído</span>
				<span class="hidden items-center gap-1.5 sm:flex"><span class="h-2.5 w-2.5 rounded-sm border border-amber-400 bg-amber-50 dark:border-amber-500/60 dark:bg-amber-500/10"></span>Revisar</span>
			@endif
			<x-etiqueta :variante="$todoCotejado ? 'exito' : 'aviso'">
				{{ $progreso['cotejados'] }} de {{ $progreso['campos'] }} cotejados
			</x-etiqueta>
		</span>
	</x-slot>

	<div class="space-y-4">
		{{-- Resultado de la última validación: mismas reglas que la carga Excel. --}}
		@if (count($erroresValidacion) > 0)
			<x-alerta tipo="error">
				<p class="font-semibold">No se guardó: {{ count($erroresValidacion) }} error(es)</p>
				<ul class="mt-1 list-disc space-y-0.5 pl-5">
					@foreach (array_slice($erroresValidacion, 0, 15) as $error)
						<li>@if ($error['linea']) Línea {{ $error['linea'] }} · @endif<strong>{{ $error['columna'] }}</strong>: {{ $error['motivo'] }}</li>
					@endforeach
					@if (count($erroresValidacion) > 15)
						<li>… y {{ count($erroresValidacion) - 15 }} más.</li>
					@endif
				</ul>
			</x-alerta>
		@endif
		@if (count($avisosValidacion) > 0)
			<x-alerta tipo="aviso">
				<ul class="list-disc space-y-0.5 pl-5">
					@foreach (array_slice($avisosValidacion, 0, 15) as $aviso)
						<li>@if ($aviso['linea']) Línea {{ $aviso['linea'] }} · @endif<strong>{{ $aviso['columna'] }}</strong>: {{ $aviso['motivo'] }}</li>
					@endforeach
				</ul>
			</x-alerta>
		@endif

		{{-- Importador: no sale del documento, es del CTC. --}}
		<x-campo etiqueta="Importador *" para="oc-importador" error="idCompania">
			<x-select id="oc-importador" wire:model.live="idCompania">
				<option value="">- Seleccione -</option>
				@foreach ($lstImportadores as $id => $nombre)
					<option value="{{ $id }}">{{ $nombre }}</option>
				@endforeach
			</x-select>
		</x-campo>

		<div class="grid gap-4 sm:grid-cols-2">
			@foreach ($definicion as $clave => $def)
				@php
					$campo = $campos[$clave];
					$tieneValor = $campo['valor'] !== null && $campo['valor'] !== '';
					// Un campo vacío no está cotejado aunque venga marcado (al editar, la
					// orden se carga toda como cotejada).
					$estado = ($campo['cotejado'] && $tieneValor) ? 'cotejado'
						: ($campo['confianza'] === 'revisar' ? 'revisar' : ($campo['confianza'] === 'alta' ? 'extraido' : 'manual'));
					$etiquetaEstado = ['cotejado' => ['exito', 'Cotejado'], 'revisar' => ['aviso', 'Revisar'], 'extraido' => ['info', 'Extraído']][$estado] ?? null;

					// ${$def['lista']} y no $$def['lista']: la sintaxis uniforme de
					// variables interpreta esa segunda forma como ${$def}['lista'].
					$opciones = isset($def['lista']) ? ${$def['lista']} : [];
					$claseControl = $bordes[$estado] . (!empty($def['mono']) ? ' font-mono' : '');
					$idControl = 'oc-' . $clave;
				@endphp

				<div @class(['min-w-0', 'sm:col-span-2' => $def['span'] === 2])>
					<div class="flex items-center justify-between gap-2">
						<x-label :for="$idControl">
							{{ $def['etiqueta'] }}@if (!empty($def['obligatorio'])) <span class="text-red-600 dark:text-red-400">*</span>@endif
						</x-label>
						@if ($etiquetaEstado)
							<x-etiqueta :variante="$etiquetaEstado[0]" class="!px-1.5 !py-0.5 !text-[11px]">{{ $etiquetaEstado[1] }}</x-etiqueta>
						@endif
					</div>

					<div class="mt-1 flex items-start gap-2">
						<div class="min-w-0 flex-1 space-y-2">
							@if ($clave === 'modalidad' && $modalidadVigente !== null)
								{{-- OC guardada: la modalidad solo cambia con motivo (RN-5.2). --}}
								<div class="flex items-center gap-2">
									<x-input id="{{ $idControl }}" type="text" disabled value="{{ $lstModalidades[$modalidadVigente] ?? $modalidadVigente }}" />
									@unless ($soloLectura)
										<x-secondary-button wire:click="abrirCambioModalidad" class="!px-3">
											<x-icono nombre="arrows-right-left" class="h-4 w-4" /> Cambiar
										</x-secondary-button>
									@endunless
								</div>
							@elseif ($def['tipo'] === 'select' || $def['tipo'] === 'proveedor')
								<x-select id="{{ $idControl }}" wire:model.live="campos.{{ $clave }}.valor" class="{{ $claseControl }}">
									<option value="">- Seleccione -</option>
									@foreach ($opciones as $id => $nombre)
										<option value="{{ $id }}">{{ $nombre }}</option>
									@endforeach
									@if ($def['tipo'] === 'proveedor')
										<option value="{{ $porCrear }}">Otro: proveedor por crear en Websimex…</option>
									@endif
								</x-select>
								@if ($def['tipo'] === 'proveedor' && $campo['valor'] === $porCrear)
									<x-input type="text" wire:model.blur="proveedorPorCrear" maxlength="200"
										placeholder="Nombre del proveedor, tal como aparece en el documento"
										aria-label="Nombre del proveedor por crear" />
								@endif
							@elseif ($def['tipo'] === 'comprador')
								{{-- Catálogo de compradores del cliente en Central (tarea 4.4, RN-8.7 y RN-8.8). --}}
								@php
									// Nombre de una OC anterior al catálogo, o leído y no encontrado: se ve aquí y al guardar
									// se busca por nombre o se agrega por aprobar (sin pedir correo, como la plantilla).
									$compradorTexto = ($idComprador === '' && $tieneValor) ? $campo['valor'] : null;
								@endphp
								<x-select id="{{ $idControl }}" wire:model.live="idComprador" class="{{ $claseControl }}">
									<option value="">{{ $compradorTexto ? $compradorTexto . ' (fuera del catálogo)' : '- Seleccione -' }}</option>
									@foreach ($lstCompradores as $id => $nombre)
										<option value="{{ $id }}">{{ $nombre }}</option>
									@endforeach
									@if ($compradorActual)
										<option value="{{ $compradorActual['id'] }}">{{ $compradorActual['nombre'] }} (por aprobar o inactivo)</option>
									@endif
									<option value="{{ \App\Services\OrdenCompra\CompradoresOc::NUEVO }}">Nuevo: no está en la lista…</option>
								</x-select>
								@if ($idComprador === \App\Services\OrdenCompra\CompradoresOc::NUEVO)
									<x-input type="text" wire:model.blur="campos.comprador.valor" maxlength="150" placeholder="Nombre completo del comprador" aria-label="Nombre del comprador nuevo" />
									<x-input type="email" wire:model.blur="correoComprador" maxlength="150" placeholder="Correo del comprador" aria-label="Correo del comprador nuevo" />
									<x-input-error for="correoComprador" />
									<p class="text-[12px] text-[var(--texto-suave)]">Queda por aprobar en el catálogo del cliente; la orden se guarda igual.</p>
								@endif
								@if ($compradorTexto)
									<p class="text-[12px] text-[var(--texto-suave)]">No está en el catálogo del cliente: elígelo de la lista o, al guardar, quedará por aprobar.</p>
								@endif
							@elseif ($def['tipo'] === 'puerto')
								{{-- ~82.000 puertos: se escribe el código UN/LOCODE o se busca por nombre. --}}
								<x-input id="{{ $idControl }}" type="text" list="sugerencias-puerto" maxlength="120"
									wire:model.live.debounce.500ms="campos.{{ $clave }}.valor"
									placeholder="Código UN/LOCODE (p. ej. FRLEH), nombre del puerto o país (FR)" class="{{ $claseControl }}" />
								<datalist id="sugerencias-puerto">
									@foreach ($sugerenciasPuerto as $codigo => $etiqueta)
										<option value="{{ $etiqueta }}"></option>
									@endforeach
								</datalist>
							@elseif ($def['tipo'] === 'area')
								<textarea id="{{ $idControl }}" wire:model.blur="campos.{{ $clave }}.valor" rows="2"
									class="{{ $controlTextarea }} {{ $claseControl }}"></textarea>
							@else
								<x-input id="{{ $idControl }}"
									type="{{ ['fecha' => 'date', 'numero' => 'number', 'email' => 'email'][$def['tipo']] ?? 'text' }}"
									:step="$def['tipo'] === 'numero' ? '0.01' : null"
									:maxlength="$def['maxlength'] ?? null"
									wire:model.blur="campos.{{ $clave }}.valor" class="{{ $claseControl }}" />
							@endif
						</div>

						@if ($tieneValor && !($clave === 'modalidad' && $modalidadVigente !== null))
							<button type="button" wire:click="cotejar('{{ $clave }}')"
								title="{{ $campo['cotejado'] ? 'Quitar el cotejo' : 'Marcar como cotejado contra el documento' }}"
								aria-label="{{ $campo['cotejado'] ? 'Quitar el cotejo de ' : 'Cotejar ' }}{{ $def['etiqueta'] }}"
								aria-pressed="{{ $campo['cotejado'] ? 'true' : 'false' }}"
								@class([
									'flex h-[38px] w-10 flex-none items-center justify-center rounded-md border transition',
									'border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-300' => $campo['cotejado'],
									'border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto-tenue)] hover:bg-[var(--nav-hover)] hover:text-[var(--texto)]' => !$campo['cotejado'],
								])>
								<x-icono nombre="check" variante="m" class="h-4 w-4" />
							</button>
						@endif
					</div>

					@if ($campo['procedencia'])
						<p @class(['mt-1 text-[12px] leading-snug',
							'text-amber-800 dark:text-amber-300' => $estado === 'revisar',
							'text-[var(--texto-suave)]' => $estado !== 'revisar'])>
							{{ $campo['procedencia'] }}@if ($campo['pagina']) · pág. {{ $campo['pagina'] }}@endif
						</p>
					@endif

					@if ($clave === 'puerto_origen')
						@if ($nombrePuerto)
							<p class="mt-1 flex items-center gap-1 text-[12px] text-emerald-700 dark:text-emerald-300">
								<x-icono nombre="check-circle" variante="m" class="h-4 w-4" /> {{ $nombrePuerto }}
							</p>
						@elseif ($tieneValor && count($sugerenciasPuerto) === 0)
							<p class="mt-1 text-[12px] text-amber-800 dark:text-amber-300">No se encontró en el catálogo de puertos de Websimex.</p>
						@elseif (count($sugerenciasPuerto) > 0)
							<p class="mt-1 text-[12px] text-[var(--texto-suave)]">
								{{ count($sugerenciasPuerto) }} coincidencia(s): escoge una de la lista.
								@if ($this->paisDelPuerto()) Primero las de {{ $this->paisDelPuerto() }}. @endif
							</p>
						@endif
					@endif

					{{-- El Número DO se contrasta contra el ERP al escribirlo. --}}
					@if ($clave === 'numero_do')
						@if ($avisoNumeroDo)
							<p @class(['mt-1 flex items-start gap-1 text-[12px] leading-snug',
								'text-emerald-700 dark:text-emerald-300' => $avisoNumeroDo['tipo'] === 'ok',
								'text-amber-800 dark:text-amber-300' => $avisoNumeroDo['tipo'] !== 'ok'])>
								<x-icono :nombre="$avisoNumeroDo['tipo'] === 'ok' ? 'check-circle' : 'exclamation-triangle'" variante="m" class="mt-px h-4 w-4" />
								{{ $avisoNumeroDo['texto'] }}
							</p>
						@elseif (!$tieneValor)
							<p class="mt-1 text-[12px] text-[var(--texto-suave)]">Enlaza la orden con su ejecución en el ERP. Requerido para confirmar.</p>
						@endif
					@endif

					<x-input-error for="campos.{{ $clave }}.valor" />
				</div>
			@endforeach
		</div>
	</div>
</x-tarjeta>