<?php
/**
 * Rotulado de estibas con producto terminado (impresión tamaño Carta).
 *
 * @package Logistica
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<section class="logistica-rotulo-estibas-board" data-rotulo-estibas-board>
	<div class="logistica-close-toolbar logistica-rotulo-rollos-toolbar">
		<div class="logistica-rotulo-rollos-toolbar__intro">
			<div class="logistica-rotulo-rollos-toolbar__badge" aria-hidden="true">
				<span class="dashicons dashicons-products"></span>
			</div>
			<div>
				<h2><?php esc_html_e( 'Estibas — producto terminado', 'logistica' ); ?></h2>
				<p><?php esc_html_e( 'Genera rótulos de estiba con referencia, cajas, unidades por caja y total. Impresión en hoja Carta (una estiba por página).', 'logistica' ); ?></p>
			</div>
		</div>
	</div>

	<div class="logistica-rotulo-estibas-size-note" role="note">
		<span class="logistica-rotulo-rollos-print-settings__badge">Carta · 215,9 × 279,4 mm</span>
		<p><?php esc_html_e( 'Al imprimir usa márgenes «Ninguno», sin encabezados/pies y activa «Gráficos de fondo».', 'logistica' ); ?></p>
	</div>

	<p class="logistica-rotulo-estibas-status" data-rotulo-estibas-status role="status" aria-live="polite"></p>

	<div class="logistica-rotulo-estibas-layout">
		<form class="logistica-rotulo-estibas-form" data-rotulo-estibas-form novalidate>
			<div class="logistica-rotulo-rollos-section-head logistica-rotulo-rollos-section-head--compact">
				<span class="logistica-rotulo-rollos-section-head__icon" aria-hidden="true">
					<span class="dashicons dashicons-edit" title="<?php esc_attr_e( 'Editar datos', 'logistica' ); ?>"></span>
				</span>
				<p class="logistica-rotulo-rollos-section-head__title"><?php esc_html_e( 'Datos del rótulo', 'logistica' ); ?></p>
			</div>

			<label class="logistica-rotulo-estibas-form__field"><?php esc_html_e( 'Referencia', 'logistica' ); ?>
				<input type="text" name="referencia" data-estiba-referencia required autocomplete="off" maxlength="120" placeholder="<?php esc_attr_e( 'Ej. REF-12345', 'logistica' ); ?>">
			</label>

			<div class="logistica-rotulo-estibas-form__row">
				<label class="logistica-rotulo-estibas-form__field"><?php esc_html_e( 'Cantidad de cajas', 'logistica' ); ?>
					<input type="number" name="cantidad_cajas" data-estiba-cajas min="1" step="1" required value="1">
				</label>
				<label class="logistica-rotulo-estibas-form__field"><?php esc_html_e( 'Unidades por caja', 'logistica' ); ?>
					<input type="number" name="unidades_por_caja" data-estiba-und-caja min="1" step="1" required value="1">
				</label>
			</div>

			<label class="logistica-rotulo-estibas-form__field"><?php esc_html_e( 'Total (unidades)', 'logistica' ); ?>
				<input type="text" name="total" data-estiba-total readonly tabindex="-1" value="1" inputmode="numeric">
			</label>

			<div class="logistica-rotulo-estibas-form__row logistica-rotulo-estibas-form__row--meta">
				<label class="logistica-rotulo-estibas-form__field"><?php esc_html_e( 'Copias a imprimir', 'logistica' ); ?>
					<input type="number" name="num_copias" data-estiba-copias min="1" max="50" step="1" value="1">
				</label>
				<label class="logistica-rotulo-estibas-form__field logistica-rotulo-estibas-form__field--color"><?php esc_html_e( 'Color de cabecera', 'logistica' ); ?>
					<span class="logistica-rotulo-estibas-color">
						<input type="color" name="accent_color" data-estiba-accent value="#86efac" aria-label="<?php esc_attr_e( 'Color de cabecera del rótulo', 'logistica' ); ?>">
						<span class="logistica-rotulo-estibas-color__swatch" data-estiba-accent-swatch style="background:#86efac"></span>
					</span>
				</label>
			</div>

			<div class="logistica-rotulo-estibas-form__actions">
				<button type="button" class="button logistica-rotulo-estibas-btn logistica-rotulo-estibas-btn--preview" data-estiba-preview>
					<span class="dashicons dashicons-visibility" aria-hidden="true"></span>
					<?php esc_html_e( 'Vista previa', 'logistica' ); ?>
				</button>
				<button type="submit" class="button button-primary logistica-rotulo-estibas-btn logistica-rotulo-estibas-btn--print">
					<span class="dashicons dashicons-printer" aria-hidden="true"></span>
					<?php esc_html_e( 'Imprimir', 'logistica' ); ?>
				</button>
			</div>
		</form>

		<div class="logistica-rotulo-estibas-preview-column">
			<div class="logistica-rotulo-rollos-section-head logistica-rotulo-rollos-section-head--compact">
				<span class="logistica-rotulo-rollos-section-head__icon" aria-hidden="true">
					<span class="dashicons dashicons-visibility" title="<?php esc_attr_e( 'Vista previa', 'logistica' ); ?>"></span>
				</span>
				<p class="logistica-rotulo-rollos-section-head__title"><?php esc_html_e( 'Vista previa (Carta)', 'logistica' ); ?></p>
			</div>
			<div class="logistica-rotulo-estibas-preview" data-rotulo-estibas-preview aria-live="polite"></div>
		</div>
	</div>
</section>
