{{-- Alta / edición de una línea de producto, con los campos de la plantilla. Diálogo del kit ui-ctc. --}}
<div x-data="{ abierto: false }"
	x-on:abrir-modal-producto.window="abierto = true"
	x-on:cerrar-modal-producto.window="abierto = false"
	x-on:keydown.escape.window="abierto = false">
	<template x-teleport="body">
		<div x-show="abierto" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4"
			role="dialog" aria-modal="true" aria-labelledby="oc-producto-titulo">
			<div class="fixed inset-0 bg-black/40" x-on:click="abierto = false"></div>

			<div class="relative flex max-h-[90vh] w-full max-w-xl flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
				<div class="flex items-center gap-3 border-b border-[var(--borde)] px-5 py-4">
					<span class="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--acento-suave)] text-[var(--acento-texto)]">
						<x-icono nombre="cube" class="h-5 w-5" />
					</span>
					<div class="min-w-0">
						<h2 id="oc-producto-titulo" class="text-[15px] font-bold text-[var(--texto)]">
							{{ is_null($productoEditando) ? 'Agregar producto' : 'Editar línea' }}
						</h2>
						<p class="text-[12px] text-[var(--texto-suave)]">Si el producto no está en el maestro de materiales, se crea al guardar la orden.</p>
					</div>
					<button type="button" x-on:click="abierto = false" class="ctc-accion ml-auto" title="Cerrar" aria-label="Cerrar">
						<x-icono nombre="x-mark" class="h-[18px] w-[18px]" />
					</button>
				</div>

				<div class="space-y-4 overflow-y-auto px-5 py-4">
					{{-- Precarga desde el maestro: opcional. --}}
					<x-campo etiqueta="Buscar en el maestro de materiales" para="oc-buscar-material">
						<div class="relative">
							<x-icono nombre="magnifying-glass" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--texto-tenue)]" />
							<x-input id="oc-buscar-material" type="text" class="pl-9" placeholder="Código o descripción"
								wire:model.live.debounce.400ms="buscarMaterial" />
						</div>
					</x-campo>
					@if (count($resultadosMaterial) > 0)
						<div class="overflow-hidden rounded-lg border border-[var(--borde)]">
							@foreach ($resultadosMaterial as $id => $etiqueta)
								<button type="button" wire:click="elegirMaterial({{ $id }})" wire:key="resultado-material-{{ $id }}"
									class="block w-full border-b border-[var(--borde)] px-3 py-2 text-left text-[13px] text-[var(--texto)] last:border-0 hover:bg-[var(--nav-hover)]">
									{{ $etiqueta }}
								</button>
							@endforeach
						</div>
					@endif

					<div class="grid gap-4 sm:grid-cols-3">
						<x-campo etiqueta="Posición" para="oc-p-posicion" error="pPosicion">
							<x-input id="oc-p-posicion" type="number" step="1" min="1" class="tabular-nums" wire:model.blur="pPosicion" />
						</x-campo>
						<x-campo etiqueta="Código SAP" para="oc-p-sap" error="pCodigoSap">
							<x-input id="oc-p-sap" type="text" maxlength="50" class="font-mono" wire:model.blur="pCodigoSap" />
						</x-campo>
						<x-campo etiqueta="Código producto" para="oc-p-codigo">
							<x-input id="oc-p-codigo" type="text" maxlength="50" class="font-mono" wire:model.blur="pCodigoProducto" />
						</x-campo>
					</div>

					<x-campo etiqueta="Descripción corta *" para="oc-p-descripcion" error="pDescripcion"
						ayuda="Sin código SAP, la descripción hace de código del producto en Websimex.">
						<x-input id="oc-p-descripcion" type="text" maxlength="200" wire:model.blur="pDescripcion" />
					</x-campo>

					<div class="grid gap-4 sm:grid-cols-3">
						<x-campo etiqueta="Cantidad *" para="oc-p-cantidad" error="pCantidad">
							<x-input id="oc-p-cantidad" type="number" step="any" class="tabular-nums" wire:model.blur="pCantidad" />
						</x-campo>
						<x-campo etiqueta="Unidad" para="oc-p-unidad">
							<x-input id="oc-p-unidad" type="text" maxlength="50" wire:model.blur="pUnidad" />
						</x-campo>
						<div class="hidden sm:block"></div>
						<x-campo etiqueta="Precio unitario" para="oc-p-precio" error="pValorUnitario">
							<x-input id="oc-p-precio" type="number" step="any" class="tabular-nums" wire:model.blur="pValorUnitario" />
						</x-campo>
						<x-campo etiqueta="Valor total" para="oc-p-total" error="pValorTotal" class="sm:col-span-2">
							<x-input id="oc-p-total" type="number" step="any" class="tabular-nums" wire:model.blur="pValorTotal" />
						</x-campo>
					</div>

					<p class="text-[12px] leading-snug text-[var(--texto-suave)]">
						Con precio y total, deben cuadrar con la cantidad. Si solo conoces el total, deja el precio vacío:
						se calcula como total ÷ cantidad y la línea queda marcada como precio calculado.
					</p>
				</div>

				<div class="flex justify-end gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
					<x-secondary-button x-on:click="abierto = false">Cancelar</x-secondary-button>
					<x-button type="button" wire:click="guardarProducto" wire:loading.attr="disabled" wire:target="guardarProducto">
						{{ is_null($productoEditando) ? 'Agregar' : 'Guardar' }}
					</x-button>
				</div>
			</div>
		</div>
	</template>
</div>