<?php
/**
 * Orden de producción de vasos — página 1 (editable e imprimible Carta).
 * Layout fiel al formulario FR-LAT-003.
 *
 * @package Logistica
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$opv_logo_url = Logistica_Orden_Produccion_Vasos::logo_url();

/**
 * Fecha DÍA / MES / AÑO (etiquetas arriba, cajas abajo) + selector.
 *
 * @param string $key   Clave.
 * @param string $label Etiqueta a la izquierda.
 * @return void
 */
$opv_render_date = static function ( $key, $label ) {
	$key   = sanitize_key( $key );
	$label = (string) $label;
	?>
	<div class="opv-date" data-opv-date="<?php echo esc_attr( $key ); ?>">
		<?php if ( '' !== $label ) : ?>
			<span class="opv-date__label"><?php echo esc_html( $label ); ?></span>
		<?php endif; ?>
		<div class="opv-date__group">
			<div class="opv-date__boxes">
				<label class="opv-date__part">
					<span class="opv-date__cap">DÍA</span>
					<input type="text" name="<?php echo esc_attr( $key ); ?>_dia" inputmode="numeric" maxlength="2" autocomplete="off" data-opv-date-part="d" aria-label="<?php echo esc_attr( $label . ' día' ); ?>">
				</label>
				<label class="opv-date__part">
					<span class="opv-date__cap">MES</span>
					<input type="text" name="<?php echo esc_attr( $key ); ?>_mes" inputmode="numeric" maxlength="2" autocomplete="off" data-opv-date-part="m" aria-label="<?php echo esc_attr( $label . ' mes' ); ?>">
				</label>
				<label class="opv-date__part">
					<span class="opv-date__cap">AÑO</span>
					<input type="text" name="<?php echo esc_attr( $key ); ?>_anio" inputmode="numeric" maxlength="4" autocomplete="off" data-opv-date-part="y" aria-label="<?php echo esc_attr( $label . ' año' ); ?>">
				</label>
			</div>
			<label class="opv-date__picker-wrap" title="<?php esc_attr_e( 'Seleccionar fecha', 'logistica' ); ?>">
				<span class="opv-date__picker-icon" aria-hidden="true">▾</span>
				<input type="date" class="opv-date__picker" aria-label="<?php echo esc_attr( sprintf( __( 'Seleccionar %s', 'logistica' ), $label ) ); ?>">
			</label>
		</div>
	</div>
	<?php
};

/**
 * Celda etiqueta + input (label a la izquierda).
 *
 * @param string $name    Name.
 * @param string $label   Label con o sin dos puntos.
 * @param string $class   Clases extra en la celda.
 * @param array  $attrs   Atributos extra del input (maxlength, etc.).
 * @param bool   $hl      Fondo naranja en etiqueta.
 * @return void
 */
$opv_render_cell = static function ( $name, $label, $class = '', $attrs = array(), $hl = false ) {
	$max = isset( $attrs['maxlength'] ) ? (string) $attrs['maxlength'] : '120';
	$mode = isset( $attrs['inputmode'] ) ? (string) $attrs['inputmode'] : '';
	?>
	<label class="opv-cell<?php echo $hl ? ' opv-cell--hl' : ''; ?><?php echo $class ? ' ' . esc_attr( $class ) : ''; ?>">
		<span class="opv-cell__lab"><?php echo esc_html( $label ); ?></span>
		<input type="text" class="opv-cell__inp" name="<?php echo esc_attr( $name ); ?>" maxlength="<?php echo esc_attr( $max ); ?>"<?php echo $mode ? ' inputmode="' . esc_attr( $mode ) . '"' : ''; ?>>
	</label>
	<?php
};

/**
 * Check: texto + casilla a la derecha (como en el papel).
 *
 * @param string $name  Name.
 * @param string $label Label.
 * @param string $class Extra class.
 * @return void
 */
$opv_render_check = static function ( $name, $label, $class = '' ) {
	?>
	<label class="opv-check opv-check--right<?php echo $class ? ' ' . esc_attr( $class ) : ''; ?>">
		<input type="checkbox" name="<?php echo esc_attr( $name ); ?>" value="1">
		<span class="opv-check__text"><?php echo esc_html( $label ); ?></span>
		<span class="opv-check__box" aria-hidden="true"></span>
	</label>
	<?php
};

/**
 * Check con casilla a la izquierda (P1S, P2S, SI/NO).
 *
 * @param string $name   Name.
 * @param string $label  Label.
 * @param string $type   checkbox|radio.
 * @param string $value  Value.
 * @return void
 */
$opv_render_check_left = static function ( $name, $label, $type = 'checkbox', $value = '1' ) {
	?>
	<label class="opv-check opv-check--left">
		<input type="<?php echo 'radio' === $type ? 'radio' : 'checkbox'; ?>" name="<?php echo esc_attr( $name ); ?>" value="<?php echo esc_attr( $value ); ?>">
		<span class="opv-check__box" aria-hidden="true"></span>
		<span class="opv-check__text"><?php echo esc_html( $label ); ?></span>
	</label>
	<?php
};
?>
<section class="opv-board" data-opv-board>
	<div class="logistica-close-toolbar opv-toolbar">
		<div class="opv-toolbar__intro">
			<div class="opv-toolbar__badge" aria-hidden="true">
				<span class="dashicons dashicons-media-document"></span>
			</div>
			<div>
				<h2><?php esc_html_e( 'Orden de producción de vasos', 'logistica' ); ?></h2>
				<p><?php esc_html_e( 'Formulario editable e imprimible (página 1 · FR-LAT-003). Impresión en hoja Carta.', 'logistica' ); ?></p>
			</div>
		</div>
		<div class="opv-toolbar__actions">
			<button type="button" class="button" data-opv-clear>
				<span class="dashicons dashicons-trash" aria-hidden="true"></span>
				<?php esc_html_e( 'Limpiar', 'logistica' ); ?>
			</button>
			<button type="button" class="button button-primary" data-opv-print>
				<span class="dashicons dashicons-printer" aria-hidden="true"></span>
				<?php esc_html_e( 'Imprimir', 'logistica' ); ?>
			</button>
		</div>
	</div>

	<div class="opv-size-note" role="note">
		<span class="opv-size-note__badge">Carta · 215,9 × 279,4 mm · FR-LAT-003</span>
		<p><?php esc_html_e( 'Al imprimir: márgenes «Ninguno», sin encabezados/pies y activa «Gráficos de fondo» para que salgan recuadros, bordes y colores.', 'logistica' ); ?></p>
	</div>

	<p class="opv-status" data-opv-status role="status" aria-live="polite"></p>

	<div class="opv-sheet-wrap">
		<form class="opv-sheet" data-opv-sheet novalidate autocomplete="off"
			style="--opv-w-mm:<?php echo esc_attr( (string) Logistica_Orden_Produccion_Vasos::SHEET_WIDTH_MM ); ?>;--opv-h-mm:<?php echo esc_attr( (string) Logistica_Orden_Produccion_Vasos::SHEET_HEIGHT_MM ); ?>;">

			<!-- CABECERA -->
			<header class="opv-head">
				<div class="opv-head__left">
					<h1 class="opv-head__title">
						ORDEN DE PRODUCCIÓN DE VASOS N°
						<input type="text" class="opv-head__num" name="numero_orden" maxlength="40" aria-label="<?php esc_attr_e( 'Número de orden', 'logistica' ); ?>">
					</h1>
					<div class="opv-head__dates">
						<?php $opv_render_date( 'expedicion', 'Fecha de Expedición' ); ?>
						<?php $opv_render_date( 'entrega', 'Fecha de Entrega' ); ?>
					</div>
				</div>
				<div class="opv-head__brand">
					<img src="<?php echo esc_url( $opv_logo_url ); ?>" alt="LATIN CUP" class="opv-head__logo" width="220" height="72">
					<span class="opv-head__code">FR-LAT-003</span>
				</div>
			</header>

			<!-- DATOS GENERALES — filas fijas como el papel -->
			<div class="opv-body">

				<div class="opv-row opv-row--2">
					<?php $opv_render_cell( 'cliente', 'Cliente:', 'opv-cell--wide', array( 'maxlength' => '160' ) ); ?>
					<?php $opv_render_cell( 'producto', 'Producto:', 'opv-cell--wide', array( 'maxlength' => '160' ) ); ?>
				</div>

				<div class="opv-row opv-row--3">
					<?php $opv_render_cell( 'cantidad_pedido', 'Cantidad Pedido:', 'opv-cell--sm', array( 'maxlength' => '40', 'inputmode' => 'numeric' ) ); ?>
					<div class="opv-cell opv-cell--date">
						<?php $opv_render_date( 'aprobacion_arte', 'Aprobación Arte' ); ?>
					</div>
					<?php $opv_render_cell( 'dimensiones', 'Dimensiones:', 'opv-cell--md', array( 'maxlength' => '80' ) ); ?>
				</div>

				<div class="opv-row opv-row--material">
					<?php $opv_render_cell( 'tipo_material', 'Tipo de Material:', 'opv-cell--md', array( 'maxlength' => '80' ) ); ?>
					<div class="opv-cell opv-cell--prices">
						<?php $opv_render_check_left( 'precio_p1', 'P1S' ); ?>
						<?php $opv_render_check_left( 'precio_p2', 'P2S' ); ?>
						<label class="opv-check opv-check--left opv-check--otro">
							<input type="checkbox" name="precio_otro" value="1" data-opv-otro-check>
							<span class="opv-check__box" aria-hidden="true"></span>
							<span class="opv-check__text">Otro</span>
						</label>
						<label class="opv-otro-cual">
							<span class="opv-otro-cual__lab">cuál:</span>
							<input type="text" class="opv-otro-cual__inp" name="precio_otro_cual" maxlength="60" data-opv-otro-cual aria-label="<?php esc_attr_e( 'Cuál otro', 'logistica' ); ?>">
						</label>
					</div>
					<div class="opv-cell opv-cell--papel">
						<span class="opv-cell__lab">Tamaño de papel:</span>
						<div class="opv-papel">
							<label class="opv-papel__part">
								<span>Ancho Rollo</span>
								<input type="text" name="papel_ancho" maxlength="20">
							</label>
							<span class="opv-papel__x" aria-hidden="true">X</span>
							<label class="opv-papel__part">
								<span>Largo</span>
								<input type="text" name="papel_largo" maxlength="20">
							</label>
						</div>
					</div>
				</div>

				<div class="opv-row opv-row--2">
					<?php $opv_render_cell( 'cara_impresion', 'Cara de Impresión:', 'opv-cell--wide', array( 'maxlength' => '120' ) ); ?>
					<?php $opv_render_cell( 'tipo_cierre', 'Tipo de Cierre:', 'opv-cell--wide', array( 'maxlength' => '120' ) ); ?>
				</div>

				<div class="opv-row opv-row--4">
					<?php $opv_render_cell( 'calibre_papel', 'Calibre de papel:', 'opv-cell--sm', array( 'maxlength' => '40' ) ); ?>
					<?php $opv_render_cell( 'tira_por', 'Tira por:', 'opv-cell--sm', array( 'maxlength' => '40' ) ); ?>
					<?php $opv_render_cell( 'caja_por', 'Caja por:', 'opv-cell--sm', array( 'maxlength' => '40' ) ); ?>
					<?php $opv_render_cell( 'acabado', 'Acabado:', 'opv-cell--md', array( 'maxlength' => '80' ) ); ?>
				</div>

				<div class="opv-row opv-row--3">
					<?php $opv_render_cell( 'unidades_por_tamano', 'Unidades por tamaño:', 'opv-cell--sm', array( 'maxlength' => '40', 'inputmode' => 'numeric' ) ); ?>
					<?php $opv_render_cell( 'cantidad_max_recibida', 'Cantidad max. recibida', 'opv-cell--sm', array( 'maxlength' => '40', 'inputmode' => 'numeric' ), true ); ?>
					<?php $opv_render_cell( 'numero_tamanos', 'Numero de tamaños:', 'opv-cell--sm', array( 'maxlength' => '40', 'inputmode' => 'numeric' ) ); ?>
				</div>

				<div class="opv-row opv-row--tintas">
					<?php $opv_render_cell( 'numero_tintas', 'Número de tintas:', 'opv-cell--sm', array( 'maxlength' => '40', 'inputmode' => 'numeric' ) ); ?>
					<?php $opv_render_cell( 'clases_tintas', 'Clases de tintas:', 'opv-cell--fill', array( 'maxlength' => '200' ) ); ?>
				</div>

				<!-- Tipo de Montaje -->
				<div class="opv-montaje" role="radiogroup" aria-label="Tipo de Montaje">
					<label class="opv-montaje__opt">
						<input type="radio" name="tipo_montaje" value="horizontal">
						<span class="opv-montaje__frame">
							<svg class="opv-montaje__svg" viewBox="0 0 140 78" aria-hidden="true">
								<!-- Vasos horizontales anidados -->
								<path d="M6,22 C18,10 34,10 46,22 L46,68 L6,68 Z" fill="none" stroke="#111" stroke-width="1.3"/>
								<path d="M28,22 C40,10 56,10 68,22 L68,68 L28,68 Z" fill="none" stroke="#111" stroke-width="1.3"/>
								<path d="M50,22 C62,10 78,10 90,22 L90,68 L50,68 Z" fill="none" stroke="#111" stroke-width="1.3"/>
								<path d="M72,22 C84,10 100,10 112,22 L112,68 L72,68 Z" fill="none" stroke="#111" stroke-width="1.3"/>
								<path d="M94,22 C106,10 122,10 134,22 L134,68 L94,68 Z" fill="none" stroke="#111" stroke-width="1.3"/>
							</svg>
						</span>
						<span class="opv-montaje__cap">Vaso Horizontal</span>
					</label>
					<label class="opv-montaje__opt">
						<input type="radio" name="tipo_montaje" value="vertical">
						<span class="opv-montaje__frame">
							<svg class="opv-montaje__svg" viewBox="0 0 140 78" aria-hidden="true">
								<!-- Vasos verticales anidados -->
								<path d="M38,6 L58,6 L72,28 L58,72 L38,72 L24,28 Z" fill="none" stroke="#111" stroke-width="1.3"/>
								<path d="M54,6 L74,6 L88,28 L74,72 L54,72 L40,28 Z" fill="none" stroke="#111" stroke-width="1.3"/>
								<path d="M70,6 L90,6 L104,28 L90,72 L70,72 L56,28 Z" fill="none" stroke="#111" stroke-width="1.3"/>
								<path d="M86,6 L106,6 L120,28 L106,72 L86,72 L72,28 Z" fill="none" stroke="#111" stroke-width="1.3"/>
							</svg>
						</span>
						<span class="opv-montaje__cap">Vaso Vertical</span>
					</label>
					<label class="opv-montaje__opt">
						<input type="radio" name="tipo_montaje" value="otro">
						<span class="opv-montaje__frame opv-montaje__frame--empty"></span>
						<span class="opv-montaje__cap">Otro Producto (dibujar)</span>
					</label>
				</div>

				<div class="opv-row opv-row--1">
					<?php $opv_render_cell( 'observaciones', 'Observaciones:', 'opv-cell--fill', array( 'maxlength' => '300' ) ); ?>
				</div>
				<div class="opv-row opv-row--1">
					<?php $opv_render_cell( 'responsable', 'Responsable:', 'opv-cell--fill', array( 'maxlength' => '160' ) ); ?>
				</div>
			</div>

			<!-- PRE-PRENSA -->
			<section class="opv-pre">
				<h2 class="opv-pre__title">P R E - P R E N S A</h2>

				<div class="opv-row opv-row--pre-top">
					<?php $opv_render_cell( 'pre_proveedor', 'Proveedor:', 'opv-cell--wide', array( 'maxlength' => '160' ) ); ?>
					<?php $opv_render_cell( 'pre_fecha', 'Fecha:', 'opv-cell--md', array( 'maxlength' => '40' ) ); ?>
				</div>
				<div class="opv-row opv-row--1">
					<?php $opv_render_cell( 'pre_responsable', 'Responsable:', 'opv-cell--fill', array( 'maxlength' => '160' ) ); ?>
				</div>

				<div class="opv-row opv-row--suministro">
					<span class="opv-suministro__lab">Se suministra para impresion:</span>
					<div class="opv-suministro__list">
						<?php $opv_render_check( 'suministro_sherpa', 'Sherpa:' ); ?>
						<?php $opv_render_check( 'suministro_progresiva', 'Progresiva:' ); ?>
						<?php $opv_render_check( 'suministro_arte', 'Arte:' ); ?>
						<?php $opv_render_check( 'suministro_muestra', 'Muestra:' ); ?>
					</div>
				</div>

				<div class="opv-row opv-row--pinza">
					<?php $opv_render_cell( 'pinza', 'Pinza', 'opv-cell--pinza', array( 'maxlength' => '40' ) ); ?>
				</div>

				<div class="opv-row opv-row--flags">
					<div class="opv-flag">
						<span class="opv-flag__lab">Planchas Repetitivas</span>
						<?php $opv_render_check_left( 'planchas_repetitivas', 'SI', 'radio', 'SI' ); ?>
						<?php $opv_render_check_left( 'planchas_repetitivas', 'NO', 'radio', 'NO' ); ?>
					</div>
					<div class="opv-flag opv-flag--hl">
						<span class="opv-flag__lab">Eliminar planchas después de usar</span>
						<?php $opv_render_check_left( 'eliminar_planchas', 'SI', 'radio', 'SI' ); ?>
						<?php $opv_render_check_left( 'eliminar_planchas', 'NO', 'radio', 'NO' ); ?>
					</div>
				</div>

				<div class="opv-verify">
					<div class="opv-verify__cols">
						<div class="opv-verify__col">
							<p class="opv-verify__head">En caso de ser planchas repetitivas VERIFICAR</p>
							<div class="opv-verify__list">
								<?php $opv_render_check( 'ver_rep_pinza', 'Pinza y Contrapinza reventadas :' ); ?>
								<?php $opv_render_check( 'ver_rep_emulsion', 'Emulsion de planchas :' ); ?>
								<?php $opv_render_check( 'ver_rep_rayadas', 'Rayadas:' ); ?>
								<?php $opv_render_check( 'ver_rep_completas', 'Planchas Completas :' ); ?>
							</div>
						</div>
						<div class="opv-verify__col opv-verify__col--nuevas">
							<p class="opv-verify__head">En caso de ser planchas nuevas VERIFICAR</p>
							<div class="opv-verify__list">
								<?php $opv_render_check( 'ver_nueva_arte', 'Arte vs Imposicion:' ); ?>
								<?php $opv_render_check( 'ver_nueva_reservas', 'Reservas - Sobreimpresos:' ); ?>
								<?php $opv_render_check( 'ver_nueva_traping', 'Traping:' ); ?>
								<?php $opv_render_check( 'ver_nueva_imposicion', 'Imposicion vs planchas:' ); ?>
								<?php $opv_render_check( 'ver_nueva_guias_color', 'Guías de Control Color:' ); ?>
								<?php $opv_render_check( 'ver_nueva_guias_corte', 'Guías de Corte:' ); ?>
								<?php $opv_render_check( 'ver_nueva_pinza', 'Pinza Correcta:' ); ?>
							</div>
						</div>
					</div>
					<label class="opv-obs">
						<span class="opv-obs__lab">Observaciones:</span>
						<textarea class="opv-obs__box" name="pre_observaciones" rows="3" maxlength="500" aria-label="<?php esc_attr_e( 'Observaciones', 'logistica' ); ?>"></textarea>
					</label>
				</div>
			</section>
		</form>
	</div>
</section>
