<?php
/**
 * Layout del cuadro de pedidos con selector de estilos.
 *
 * @package Logistica
 */

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

if ( ! isset( $pedidos_boards ) || ! is_array( $pedidos_boards ) ) {
	$pedidos_boards = Logistica_Pedidos_Board::get_boards();
}

$orden_estados = Logistica_Pedidos_Board::orden_estado_options();
?>
<section class="logistica-pedidos-board" data-pedidos-board>
	<?php if ( ! logistica_is_tabbed_shell() ) : ?>
		<?php logistica_tab_loading_overlay( logistica_tab_loading_message( 'logistica-cuadro-pedidos' ) ); ?>
	<?php endif; ?>

	<div class="logistica-close-toolbar logistica-conversion-intro">
		<?php
		logistica_page_toolbar_intro(
			__( 'Cuadro de pedidos', 'logistica' ),
			__( 'Gestiona órdenes de compra e inventario reportado por cliente. Cada estilo de pedido tiene su propio tablero.', 'logistica' ),
			'dashicons-clipboard'
		);
		?>
	</div>

	<nav class="logistica-pedidos-board__view-nav" aria-label="<?php esc_attr_e( 'Vista del cuadro de pedidos', 'logistica' ); ?>" data-pedidos-board-view-nav>
		<button type="button" class="logistica-pedidos-board__view-tab is-active" data-pedidos-board-view="ordenes" aria-pressed="true">
			<?php esc_html_e( 'Órdenes', 'logistica' ); ?>
		</button>
		<button type="button" class="logistica-pedidos-board__view-tab" data-pedidos-board-view="clientes" aria-pressed="false">
			<?php esc_html_e( 'Clientes', 'logistica' ); ?>
		</button>
	</nav>

	<div class="logistica-pedidos-board__ordenes-view" data-pedidos-board-ordenes-view>
		<nav
			class="logistica-planeacion__machines logistica-planeacion__machines--select logistica-pedidos-board__styles-nav"
			aria-label="<?php esc_attr_e( 'Estilos de pedido', 'logistica' ); ?>"
			data-pedidos-board-select-nav
		></nav>

		<?php require LOGISTICA_PLUGIN_DIR . 'admin/views/partials/cuadro-pedidos-metrics.php'; ?>

		<p class="logistica-pedidos-board__status" data-pedidos-board-status role="status" hidden></p>

		<div class="logistica-pedidos-board__main" data-pedidos-board-main>
		<?php foreach ( $pedidos_boards as $board ) : ?>
			<div
				class="logistica-sheet logistica-pedidos-sheet"
				id="logistica-calc-<?php echo esc_attr( $board['slug'] ); ?>"
				data-sheet="<?php echo esc_attr( $board['slug'] ); ?>"
				data-pedidos-board-sheet="<?php echo esc_attr( $board['slug'] ); ?>"
				hidden
			>
				<?php if ( Logistica_Pedidos_Board::is_board_implemented( $board['slug'] ) ) : ?>
					<?php
					$board_slug   = $board['slug'];
					$sheet_config = Logistica_Pedidos_Board::get_board_sheet_config( $board['slug'] );
					require LOGISTICA_PLUGIN_DIR . 'admin/views/partials/cuadro-pedidos-sheet.php';
					?>
				<?php else : ?>
					<h2 data-pedidos-board-sheet-title><?php echo esc_html( $board['label'] ); ?></h2>
					<div class="logistica-pedidos-board__placeholder">
						<p><?php esc_html_e( 'Este estilo de pedido no está disponible.', 'logistica' ); ?></p>
					</div>
				<?php endif; ?>
			</div>
		<?php endforeach; ?>
		</div>
	</div>

	<div class="logistica-pedidos-board__clientes-view" data-pedidos-board-clientes-view hidden>
		<div class="logistica-pedidos-clientes__toolbar">
			<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--compact" data-action="pedidos-add-cliente">
				<?php esc_html_e( '+ Nuevo cliente', 'logistica' ); ?>
			</button>
			<label class="logistica-pedidos-clientes__search">
				<span class="screen-reader-text"><?php esc_html_e( 'Buscar cliente', 'logistica' ); ?></span>
				<input type="search" data-pedidos-clientes-search placeholder="<?php esc_attr_e( 'Buscar por nombre, código o contacto…', 'logistica' ); ?>" autocomplete="off">
			</label>
		</div>
		<div class="logistica-pedidos-table-wrap logistica-pedidos-table-wrap--clientes">
			<table class="logistica-pedidos-table logistica-pedidos-table--clientes" data-pedidos-clientes-table>
				<thead>
					<tr>
						<th scope="col"><?php esc_html_e( 'Nombre', 'logistica' ); ?></th>
						<th scope="col"><?php esc_html_e( 'Código', 'logistica' ); ?></th>
						<th scope="col"><?php esc_html_e( 'Contacto', 'logistica' ); ?></th>
						<th scope="col"><?php esc_html_e( 'Teléfono', 'logistica' ); ?></th>
						<th scope="col"><?php esc_html_e( 'Correo', 'logistica' ); ?></th>
						<th scope="col"><?php esc_html_e( 'Notas', 'logistica' ); ?></th>
						<th scope="col" class="logistica-pedidos-table__actions-col"><?php esc_html_e( 'Acción', 'logistica' ); ?></th>
					</tr>
				</thead>
				<tbody data-pedidos-clientes-tbody>
					<tr class="logistica-pedidos-table__empty" data-pedidos-clientes-empty>
						<td colspan="7"><?php esc_html_e( 'No hay clientes registrados.', 'logistica' ); ?></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<dialog class="logistica-planeacion__modal logistica-planeacion__machine-modal logistica-pedidos-board__style-modal" data-pedidos-board-style-modal>
		<form class="logistica-planeacion__modal-form" data-pedidos-board-style-form>
			<header class="logistica-planeacion__modal-header">
				<h3 data-pedidos-board-style-modal-title><?php esc_html_e( 'Nuevo estilo de pedido', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close" data-action="pedidos-close-board-style-modal" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<div class="logistica-planeacion__modal-body">
				<input type="hidden" data-pedidos-board-style-slug value="">
				<p class="logistica-planeacion__field-hint" data-pedidos-board-style-modal-hint>
					<?php esc_html_e( 'Cada estilo de pedido tiene su propio cuadro de órdenes de compra e inventario.', 'logistica' ); ?>
				</p>
				<label class="logistica-planeacion__form-span-2">
					<span><?php esc_html_e( 'Nombre del estilo', 'logistica' ); ?></span>
					<input type="text" data-pedidos-board-style-name placeholder="<?php esc_attr_e( 'Ej. Hornitos', 'logistica' ); ?>" required autocomplete="off">
				</label>
			</div>
			<footer class="logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
				<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--danger logistica-planeacion__btn--modal" data-action="pedidos-delete-board-style" hidden>
					<?php esc_html_e( 'Eliminar estilo', 'logistica' ); ?>
				</button>
				<div class="logistica-planeacion__modal-actions">
					<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal" data-action="pedidos-close-board-style-modal">
						<?php esc_html_e( 'Cancelar', 'logistica' ); ?>
					</button>
					<button type="submit" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal" data-pedidos-board-style-submit>
						<?php esc_html_e( 'Crear estilo', 'logistica' ); ?>
					</button>
				</div>
			</footer>
		</form>
	</dialog>

	<div
		class="logistica-pedidos-oc-modal"
		data-pedidos-oc-modal
		data-pedidos-oc-title-new="<?php echo esc_attr( __( 'Nueva orden de compra', 'logistica' ) ); ?>"
		data-pedidos-oc-title-edit="<?php echo esc_attr( __( 'Editar orden de compra', 'logistica' ) ); ?>"
		data-pedidos-oc-save-edit="<?php echo esc_attr( __( 'Guardar cambios', 'logistica' ) ); ?>"
		hidden
	>
		<div class="logistica-pedidos-oc-modal__backdrop" data-action="pedidos-close-oc-modal" aria-hidden="true"></div>
		<div class="logistica-pedidos-oc-modal__panel" role="dialog" aria-modal="true" aria-labelledby="logistica-pedidos-oc-modal-title">
			<header class="logistica-pedidos-oc-modal__head">
				<h3 id="logistica-pedidos-oc-modal-title" data-pedidos-oc-modal-title><?php esc_html_e( 'Nueva orden de compra', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close logistica-pedidos-oc-modal__close" data-action="pedidos-close-oc-modal" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<form class="logistica-pedidos-oc-modal__form" data-pedidos-oc-form novalidate>
				<div class="logistica-pedidos-oc-modal__scroll">
					<div class="logistica-pedidos-oc-modal__grid logistica-pedidos-oc-modal__grid--header" data-pedidos-oc-header>
						<label class="logistica-pedidos-oc-modal__field logistica-pedidos-oc-modal__field--full">
							<span><?php esc_html_e( 'Cliente', 'logistica' ); ?></span>
							<div class="logistica-pedidos-oc-cliente-field" data-pedidos-oc-cliente-field>
								<div class="logistica-pedidos-oc-cliente-field__row">
									<select data-field="cliente_selector" autocomplete="off">
										<option value=""><?php esc_html_e( 'Seleccionar cliente…', 'logistica' ); ?></option>
										<option value="__new__"><?php esc_html_e( 'Crear nuevo cliente…', 'logistica' ); ?></option>
									</select>
									<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--compact logistica-pedidos-oc-cliente-field__edit" data-action="pedidos-oc-edit-cliente" title="<?php esc_attr_e( 'Editar cliente', 'logistica' ); ?>" aria-label="<?php esc_attr_e( 'Editar cliente seleccionado', 'logistica' ); ?>" hidden>
										<span class="dashicons dashicons-edit" aria-hidden="true"></span>
									</button>
								</div>
								<input
									type="text"
									data-field="cliente"
									autocomplete="off"
									placeholder="<?php esc_attr_e( 'Nombre del nuevo cliente', 'logistica' ); ?>"
									hidden
								>
								<button type="button" class="logistica-pedidos-oc-cliente-field__manage" data-action="pedidos-open-clientes-view">
									<?php esc_html_e( 'Gestionar base de clientes', 'logistica' ); ?>
								</button>
							</div>
						</label>
						<label class="logistica-pedidos-oc-modal__field">
							<span><?php esc_html_e( 'OC', 'logistica' ); ?></span>
							<input type="text" data-field="oc_numero" required autocomplete="off">
						</label>
						<label class="logistica-pedidos-oc-modal__field">
							<span><?php esc_html_e( 'Fecha OC', 'logistica' ); ?></span>
							<input type="date" data-field="fecha_oc" required>
						</label>
					</div>
					<div class="logistica-pedidos-oc-modal__grid logistica-pedidos-oc-modal__grid--linea" data-pedidos-oc-linea>
					<label class="logistica-pedidos-oc-modal__field logistica-pedidos-oc-modal__field--full">
						<span><?php esc_html_e( 'Tipo de producto', 'logistica' ); ?></span>
						<span data-pedidos-oc-referencia></span>
					</label>
					<label class="logistica-pedidos-oc-modal__field logistica-pedidos-oc-modal__field--full">
						<span><?php esc_html_e( 'Referencia', 'logistica' ); ?></span>
						<input type="text" data-field="descripcion" autocomplete="off">
					</label>
					<label class="logistica-pedidos-oc-modal__field">
						<span><?php esc_html_e( 'Cantidad solicitada', 'logistica' ); ?></span>
						<input type="text" inputmode="numeric" data-field="cantidad" autocomplete="off">
					</label>
					<label class="logistica-pedidos-oc-modal__field">
						<span><?php esc_html_e( 'Tolerancia ± %', 'logistica' ); ?></span>
						<input type="text" inputmode="decimal" data-field="cantidad_maxima_recibida" autocomplete="off" placeholder="<?php esc_attr_e( 'Ej. 10', 'logistica' ); ?>" title="<?php esc_attr_e( 'Porcentaje permitido sobre la cantidad solicitada. Ej. 10 = ±10%', 'logistica' ); ?>">
					</label>
					<label class="logistica-pedidos-oc-modal__field">
						<span><?php esc_html_e( 'Precio unit.', 'logistica' ); ?></span>
						<input type="text" inputmode="decimal" data-field="precio_unit" autocomplete="off">
					</label>
					<label class="logistica-pedidos-oc-modal__field">
						<span><?php esc_html_e( 'Fecha entrega', 'logistica' ); ?></span>
						<input type="date" data-field="fecha_entrega">
					</label>
					<label class="logistica-pedidos-oc-modal__field">
						<span><?php esc_html_e( 'Prórroga (acordada con cliente)', 'logistica' ); ?></span>
						<input type="date" data-field="fecha_prorroga" title="<?php esc_attr_e( 'Nueva fecha cuando se acordó prórroga tras vencer la fecha original', 'logistica' ); ?>">
					</label>
					<label class="logistica-pedidos-oc-modal__field logistica-pedidos-oc-modal__field--full">
						<span><?php esc_html_e( 'Observaciones', 'logistica' ); ?></span>
						<input type="text" data-field="observaciones" autocomplete="off">
					</label>
				</div>
					<div class="logistica-pedidos-oc-modal__linea-toolbar" data-pedidos-oc-linea-toolbar hidden>
						<p class="logistica-pedidos-oc-modal__lineas-count" data-pedidos-oc-lineas-count hidden></p>
						<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal logistica-pedidos-oc-modal__add-linea" data-action="pedidos-oc-add-linea">
							<?php esc_html_e( '+ Agregar otro producto', 'logistica' ); ?>
						</button>
					</div>
				</div>
				<p class="logistica-pedidos-oc-modal__error" data-pedidos-oc-error role="alert" hidden></p>
				<footer class="logistica-pedidos-oc-modal__foot logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
					<div class="logistica-planeacion__modal-actions logistica-planeacion__modal-actions--end">
						<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal" data-action="pedidos-close-oc-modal"><?php esc_html_e( 'Cancelar', 'logistica' ); ?></button>
						<button type="submit" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal" data-pedidos-oc-save data-pedidos-oc-save-label="<?php esc_attr_e( 'Guardar OC', 'logistica' ); ?>"><?php esc_html_e( 'Guardar OC', 'logistica' ); ?></button>
					</div>
				</footer>
			</form>
		</div>
	</div>

	<div
		class="logistica-pedidos-cf-modal"
		data-pedidos-cantidad-finalizada-modal
		hidden
	>
		<div class="logistica-pedidos-cf-modal__backdrop" data-action="pedidos-close-cantidad-finalizada-modal" aria-hidden="true"></div>
		<div class="logistica-pedidos-cf-modal__panel" role="dialog" aria-modal="true" aria-labelledby="logistica-pedidos-cf-modal-title">
			<header class="logistica-pedidos-cf-modal__head">
				<h3 id="logistica-pedidos-cf-modal-title"><?php esc_html_e( 'Cantidad finalizada', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close logistica-pedidos-cf-modal__close" data-action="pedidos-close-cantidad-finalizada-modal" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<form class="logistica-pedidos-cf-modal__form" data-pedidos-cf-form novalidate>
				<label class="logistica-pedidos-cf-modal__field">
					<span><?php esc_html_e( 'Cantidad finalizada', 'logistica' ); ?></span>
					<input type="text" inputmode="numeric" data-pedidos-cf-input autocomplete="off" required>
				</label>
				<p class="logistica-pedidos-cf-modal__hint" data-pedidos-cf-hint hidden></p>
				<p class="logistica-pedidos-cf-modal__error" data-pedidos-cf-error role="alert" hidden></p>
				<footer class="logistica-pedidos-cf-modal__foot logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
					<div class="logistica-planeacion__modal-actions logistica-planeacion__modal-actions--end">
						<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal" data-action="pedidos-close-cantidad-finalizada-modal"><?php esc_html_e( 'Cancelar', 'logistica' ); ?></button>
						<button type="submit" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal"><?php esc_html_e( 'Guardar', 'logistica' ); ?></button>
					</div>
				</footer>
			</form>
		</div>
	</div>

	<div
		class="logistica-pedidos-op-modal"
		data-pedidos-op-modal
		hidden
	>
		<div class="logistica-pedidos-op-modal__backdrop" data-action="pedidos-close-op-modal" aria-hidden="true"></div>
		<div class="logistica-pedidos-op-modal__panel" role="dialog" aria-modal="true" aria-labelledby="logistica-pedidos-op-modal-title">
			<header class="logistica-pedidos-op-modal__head">
				<h3 id="logistica-pedidos-op-modal-title"><?php esc_html_e( 'OP', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close logistica-pedidos-op-modal__close" data-action="pedidos-close-op-modal" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<form class="logistica-pedidos-op-modal__form" data-pedidos-op-form novalidate>
				<label class="logistica-pedidos-op-modal__field">
					<span><?php esc_html_e( 'Número de OP', 'logistica' ); ?></span>
					<input type="text" data-pedidos-op-input autocomplete="off" placeholder="<?php esc_attr_e( 'Ej. 8510', 'logistica' ); ?>" required>
				</label>
				<p class="logistica-pedidos-op-modal__hint" data-pedidos-op-hint hidden></p>
				<p class="logistica-pedidos-op-modal__error" data-pedidos-op-error role="alert" hidden></p>
				<footer class="logistica-pedidos-op-modal__foot logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
					<div class="logistica-planeacion__modal-actions logistica-planeacion__modal-actions--end">
						<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal" data-action="pedidos-close-op-modal"><?php esc_html_e( 'Cancelar', 'logistica' ); ?></button>
						<button type="submit" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal"><?php esc_html_e( 'Guardar', 'logistica' ); ?></button>
					</div>
				</footer>
			</form>
		</div>
	</div>

	<div
		class="logistica-pedidos-op-modal"
		data-pedidos-fa-modal
		hidden
	>
		<div class="logistica-pedidos-op-modal__backdrop" data-action="pedidos-close-fecha-aprobacion-modal" aria-hidden="true"></div>
		<div class="logistica-pedidos-op-modal__panel" role="dialog" aria-modal="true" aria-labelledby="logistica-pedidos-fa-modal-title">
			<header class="logistica-pedidos-op-modal__head">
				<h3 id="logistica-pedidos-fa-modal-title"><?php esc_html_e( 'Fecha aprobación', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close logistica-pedidos-op-modal__close" data-action="pedidos-close-fecha-aprobacion-modal" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<form class="logistica-pedidos-op-modal__form" data-pedidos-fa-form novalidate>
				<label class="logistica-pedidos-op-modal__field">
					<span><?php esc_html_e( 'Fecha de aprobación', 'logistica' ); ?></span>
					<input type="date" data-pedidos-fa-input required>
				</label>
				<p class="logistica-pedidos-op-modal__hint" data-pedidos-fa-hint hidden></p>
				<p class="logistica-pedidos-op-modal__error" data-pedidos-fa-error role="alert" hidden></p>
				<footer class="logistica-pedidos-op-modal__foot logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
					<div class="logistica-planeacion__modal-actions logistica-planeacion__modal-actions--end">
						<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal" data-action="pedidos-close-fecha-aprobacion-modal"><?php esc_html_e( 'Cancelar', 'logistica' ); ?></button>
						<button type="submit" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal"><?php esc_html_e( 'Guardar', 'logistica' ); ?></button>
					</div>
				</footer>
			</form>
		</div>
	</div>

	<div
		class="logistica-pedidos-parcial-modal"
		data-pedidos-parcial-modal
		hidden
	>
		<div class="logistica-pedidos-parcial-modal__backdrop" data-action="pedidos-close-parcial-modal" aria-hidden="true"></div>
		<div class="logistica-pedidos-parcial-modal__panel" role="dialog" aria-modal="true" aria-labelledby="logistica-pedidos-parcial-modal-title">
			<header class="logistica-pedidos-parcial-modal__head">
				<h3 id="logistica-pedidos-parcial-modal-title" data-pedidos-parcial-modal-title=""><?php esc_html_e( 'Despacho parcial', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close logistica-pedidos-parcial-modal__close" data-action="pedidos-close-parcial-modal" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<form class="logistica-pedidos-parcial-modal__form" data-pedidos-parcial-form novalidate>
				<label class="logistica-pedidos-parcial-modal__field">
					<span><?php esc_html_e( 'Cantidad despachada', 'logistica' ); ?></span>
					<input type="text" inputmode="numeric" data-pedidos-parcial-cantidad-input autocomplete="off">
				</label>
				<label class="logistica-pedidos-parcial-modal__field">
					<span><?php esc_html_e( 'Factura', 'logistica' ); ?></span>
					<input type="text" data-pedidos-parcial-factura-input autocomplete="off">
				</label>
				<p class="logistica-pedidos-parcial-modal__hint" data-pedidos-parcial-hint hidden></p>
				<p class="logistica-pedidos-parcial-modal__error" data-pedidos-parcial-error role="alert" hidden></p>
				<footer class="logistica-pedidos-parcial-modal__foot logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
					<div class="logistica-planeacion__modal-actions logistica-planeacion__modal-actions--end">
						<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal" data-action="pedidos-close-parcial-modal"><?php esc_html_e( 'Cancelar', 'logistica' ); ?></button>
						<button type="submit" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal"><?php esc_html_e( 'Guardar', 'logistica' ); ?></button>
					</div>
				</footer>
			</form>
		</div>
	</div>

	<div
		class="logistica-pedidos-error-modal"
		data-pedidos-error-modal
		hidden
	>
		<div class="logistica-pedidos-error-modal__backdrop" data-action="pedidos-close-error-modal" aria-hidden="true"></div>
		<div class="logistica-pedidos-error-modal__panel" role="alertdialog" aria-modal="true" aria-labelledby="logistica-pedidos-error-modal-title">
			<header class="logistica-pedidos-error-modal__head">
				<h3 id="logistica-pedidos-error-modal-title"><?php esc_html_e( 'No se pudo guardar', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close logistica-pedidos-error-modal__close" data-action="pedidos-close-error-modal" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<div class="logistica-pedidos-error-modal__body">
				<p data-pedidos-error-message></p>
			</div>
			<footer class="logistica-pedidos-error-modal__foot logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
				<div class="logistica-planeacion__modal-actions logistica-planeacion__modal-actions--end">
					<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal" data-action="pedidos-close-error-modal"><?php esc_html_e( 'Entendido', 'logistica' ); ?></button>
				</div>
			</footer>
		</div>
	</div>

	<div
		class="logistica-pedidos-cliente-modal"
		data-pedidos-cliente-modal
		data-pedidos-cliente-title-new="<?php echo esc_attr( __( 'Nuevo cliente', 'logistica' ) ); ?>"
		data-pedidos-cliente-title-edit="<?php echo esc_attr( __( 'Editar cliente', 'logistica' ) ); ?>"
		hidden
	>
		<div class="logistica-pedidos-cliente-modal__backdrop" data-action="pedidos-close-cliente-modal" aria-hidden="true"></div>
		<div class="logistica-pedidos-cliente-modal__panel" role="dialog" aria-modal="true" aria-labelledby="logistica-pedidos-cliente-modal-title">
			<header class="logistica-pedidos-cliente-modal__head">
				<h3 id="logistica-pedidos-cliente-modal-title" data-pedidos-cliente-modal-title><?php esc_html_e( 'Nuevo cliente', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close logistica-pedidos-cliente-modal__close" data-action="pedidos-close-cliente-modal" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<form class="logistica-pedidos-cliente-modal__form" data-pedidos-cliente-form novalidate>
				<input type="hidden" data-field="id" value="">
				<label class="logistica-pedidos-cliente-modal__field logistica-pedidos-cliente-modal__field--full">
					<span><?php esc_html_e( 'Nombre', 'logistica' ); ?></span>
					<input type="text" data-field="nombre" required autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field">
					<span><?php esc_html_e( 'Código', 'logistica' ); ?></span>
					<input type="text" data-field="codigo" autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field">
					<span><?php esc_html_e( 'Contacto', 'logistica' ); ?></span>
					<input type="text" data-field="contacto" autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field">
					<span><?php esc_html_e( 'Teléfono', 'logistica' ); ?></span>
					<input type="text" data-field="telefono" autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field logistica-pedidos-cliente-modal__field--full">
					<span><?php esc_html_e( 'Correo', 'logistica' ); ?></span>
					<input type="email" data-field="email" autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field logistica-pedidos-cliente-modal__field--full">
					<span><?php esc_html_e( 'Notas', 'logistica' ); ?></span>
					<input type="text" data-field="notas" autocomplete="off">
				</label>
				<p class="logistica-pedidos-cliente-modal__error" data-pedidos-cliente-error role="alert" hidden></p>
				<footer class="logistica-pedidos-cliente-modal__foot logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
					<div class="logistica-planeacion__modal-actions logistica-planeacion__modal-actions--end">
						<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal" data-action="pedidos-close-cliente-modal"><?php esc_html_e( 'Cancelar', 'logistica' ); ?></button>
						<button type="submit" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal"><?php esc_html_e( 'Guardar cliente', 'logistica' ); ?></button>
					</div>
				</footer>
			</form>
		</div>
	</div>

	<div
		class="logistica-pedidos-cliente-modal"
		data-pedidos-cliente-modal
		data-pedidos-cliente-title-new="<?php echo esc_attr( __( 'Nuevo cliente', 'logistica' ) ); ?>"
		data-pedidos-cliente-title-edit="<?php echo esc_attr( __( 'Editar cliente', 'logistica' ) ); ?>"
		hidden
	>
		<div class="logistica-pedidos-cliente-modal__backdrop" data-action="pedidos-close-cliente-modal" aria-hidden="true"></div>
		<div class="logistica-pedidos-cliente-modal__panel" role="dialog" aria-modal="true" aria-labelledby="logistica-pedidos-cliente-modal-title">
			<header class="logistica-pedidos-cliente-modal__head">
				<h3 id="logistica-pedidos-cliente-modal-title" data-pedidos-cliente-modal-title><?php esc_html_e( 'Nuevo cliente', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close logistica-pedidos-cliente-modal__close" data-action="pedidos-close-cliente-modal" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<form class="logistica-pedidos-cliente-modal__form" data-pedidos-cliente-form novalidate>
				<input type="hidden" data-field="id" value="">
				<label class="logistica-pedidos-cliente-modal__field logistica-pedidos-cliente-modal__field--full">
					<span><?php esc_html_e( 'Nombre', 'logistica' ); ?></span>
					<input type="text" data-field="nombre" required autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field">
					<span><?php esc_html_e( 'Código', 'logistica' ); ?></span>
					<input type="text" data-field="codigo" autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field">
					<span><?php esc_html_e( 'Contacto', 'logistica' ); ?></span>
					<input type="text" data-field="contacto" autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field">
					<span><?php esc_html_e( 'Teléfono', 'logistica' ); ?></span>
					<input type="text" data-field="telefono" autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field logistica-pedidos-cliente-modal__field--full">
					<span><?php esc_html_e( 'Correo', 'logistica' ); ?></span>
					<input type="email" data-field="email" autocomplete="off">
				</label>
				<label class="logistica-pedidos-cliente-modal__field logistica-pedidos-cliente-modal__field--full">
					<span><?php esc_html_e( 'Notas', 'logistica' ); ?></span>
					<input type="text" data-field="notas" autocomplete="off">
				</label>
				<p class="logistica-pedidos-cliente-modal__error" data-pedidos-cliente-error role="alert" hidden></p>
				<footer class="logistica-pedidos-cliente-modal__foot logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
					<div class="logistica-planeacion__modal-actions logistica-planeacion__modal-actions--end">
						<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal" data-action="pedidos-close-cliente-modal"><?php esc_html_e( 'Cancelar', 'logistica' ); ?></button>
						<button type="submit" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal"><?php esc_html_e( 'Guardar cliente', 'logistica' ); ?></button>
					</div>
				</footer>
			</form>
		</div>
	</div>

	<div
		class="logistica-pedidos-entregado-confirm-modal"
		data-pedidos-entregado-confirm-modal
		hidden
	>
		<div class="logistica-pedidos-entregado-confirm-modal__backdrop" data-action="pedidos-cancel-entregado-confirm" aria-hidden="true"></div>
		<div class="logistica-pedidos-entregado-confirm-modal__panel" role="alertdialog" aria-modal="true" aria-labelledby="logistica-pedidos-entregado-confirm-title">
			<header class="logistica-pedidos-entregado-confirm-modal__head">
				<h3 id="logistica-pedidos-entregado-confirm-title"><?php esc_html_e( 'Confirmar entregado', 'logistica' ); ?></h3>
				<button type="button" class="logistica-planeacion__modal-close logistica-pedidos-entregado-confirm-modal__close" data-action="pedidos-cancel-entregado-confirm" aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<div class="logistica-pedidos-entregado-confirm-modal__body">
				<p><?php esc_html_e( 'Al marcar esta línea como entregada, se ocultará del tablero operativo y solo podrá consultarse en el historial de entregados.', 'logistica' ); ?></p>
				<p><?php esc_html_e( 'Los datos se conservan de forma segura para trazabilidad y auditoría de productos.', 'logistica' ); ?></p>
				<p><strong><?php esc_html_e( '¿Desea continuar?', 'logistica' ); ?></strong></p>
			</div>
			<footer class="logistica-pedidos-entregado-confirm-modal__foot logistica-planeacion__modal-footer logistica-planeacion__modal-footer--task">
				<div class="logistica-planeacion__modal-actions logistica-planeacion__modal-actions--end">
					<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--secondary logistica-planeacion__btn--modal" data-action="pedidos-cancel-entregado-confirm"><?php esc_html_e( 'Cancelar', 'logistica' ); ?></button>
					<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--modal" data-action="pedidos-confirm-entregado"><?php esc_html_e( 'Confirmar entregado', 'logistica' ); ?></button>
				</div>
			</footer>
		</div>
	</div>
</section>

<script type="application/json" id="logistica-pedidos-board-config">
<?php
Logistica_Database::ensure_pedidos_board_tables();
$pedidos_clientes = Logistica_Pedidos_Board::get_clientes();
echo wp_json_encode(
	array(
		'boards'        => $pedidos_boards,
		'estadoOptions' => $orden_estados,
		'clientes'      => $pedidos_clientes,
	),
	JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
);
?>
</script>
