<?php
/**
 * Tablero de producción en tiempo real (día actual).
 *
 * @package Logistica
 */

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

require_once LOGISTICA_PLUGIN_DIR . 'admin/views/partials.php';

$board_date = wp_date( 'Y-m-d' );
$lanes      = Logistica_Production_Board::get_lanes();
$priorities = Logistica_Production_Board::get_priorities();
$alerts     = Logistica_Production_Board::get_alerts();

logistica_admin_header( __( 'Tablero de producción', 'logistica' ) );
?>
<section
	class="logistica-panel logistica-tv-board"
	data-tv-board
	data-tv-poll="<?php echo esc_attr( (string) Logistica_Production_Board::POLL_SECONDS ); ?>"
>
	<?php if ( ! logistica_is_tabbed_shell() ) : ?>
		<?php logistica_tab_loading_overlay( logistica_tab_loading_message( 'logistica-tablero-produccion' ) ); ?>
	<?php endif; ?>

	<header class="logistica-tv-board__header">
		<div class="logistica-tv-board__brand">
			<span class="logistica-tv-board__eyebrow"><?php esc_html_e( 'Producción · día actual', 'logistica' ); ?></span>
			<h2 class="logistica-tv-board__title"><?php esc_html_e( 'Tablero de planta', 'logistica' ); ?></h2>
			<p class="logistica-tv-board__subtitle" data-tv-subtitle>
				<?php echo esc_html( wp_date( 'l j \d\e F Y' ) ); ?>
			</p>
		</div>
		<div class="logistica-tv-board__clock-wrap" aria-live="polite">
			<span class="logistica-tv-board__clock" data-tv-clock>—</span>
			<span class="logistica-tv-board__refresh" data-tv-refresh-status><?php esc_html_e( 'Actualizando…', 'logistica' ); ?></span>
		</div>
		<div class="logistica-tv-board__toolbar">
			<label class="logistica-tv-board__filter">
				<span><?php esc_html_e( 'Etapa', 'logistica' ); ?></span>
				<select data-tv-filter data-tv-etapa>
					<option value="all"><?php esc_html_e( 'Todas las etapas', 'logistica' ); ?></option>
					<?php foreach ( $lanes as $lane_key => $lane_label ) : ?>
						<option value="<?php echo esc_attr( $lane_key ); ?>"><?php echo esc_html( $lane_label ); ?></option>
					<?php endforeach; ?>
				</select>
			</label>
			<button type="button" class="button button-secondary" data-tv-fullscreen title="<?php esc_attr_e( 'Pantalla completa', 'logistica' ); ?>">
				<span class="dashicons dashicons-fullscreen-alt" aria-hidden="true"></span>
				<?php esc_html_e( 'TV', 'logistica' ); ?>
			</button>
		</div>
	</header>

	<div class="logistica-tv-board__stats" data-tv-stats>
		<span data-tv-stat="total">0 <?php esc_html_e( 'órdenes', 'logistica' ); ?></span>
		<span data-tv-stat="plan_a">0 <?php esc_html_e( 'Plan A', 'logistica' ); ?></span>
		<span data-tv-stat="overtime">0 <?php esc_html_e( 'fuera de tiempo', 'logistica' ); ?></span>
	</div>

	<div class="logistica-tv-board__legend" aria-label="<?php esc_attr_e( 'Leyenda', 'logistica' ); ?>">
		<?php foreach ( $priorities as $key => $label ) : ?>
			<span class="logistica-tv-board__chip logistica-tv-board__chip--<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></span>
		<?php endforeach; ?>
		<?php foreach ( $alerts as $key => $label ) : ?>
			<?php if ( '' === $key ) { continue; } ?>
			<span class="logistica-tv-board__chip logistica-tv-board__alert-chip logistica-tv-board__alert-chip--<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></span>
		<?php endforeach; ?>
	</div>

	<div class="logistica-tv-board__lanes" data-tv-lanes>
		<?php foreach ( $lanes as $lane_key => $lane_label ) : ?>
			<section class="logistica-tv-board__lane" data-tv-lane="<?php echo esc_attr( $lane_key ); ?>">
				<header class="logistica-tv-board__lane-head">
					<h3><?php echo esc_html( $lane_label ); ?></h3>
					<span class="logistica-tv-board__lane-count" data-tv-lane-count>0</span>
				</header>
				<div class="logistica-tv-board__lane-body" data-tv-lane-body></div>
			</section>
		<?php endforeach; ?>
	</div>

	<p class="logistica-tv-board__empty" data-tv-empty hidden>
		<?php esc_html_e( 'No hay actividades programadas para hoy en la planeación.', 'logistica' ); ?>
	</p>

	<dialog class="logistica-tv-board__dialog" data-tv-edit-dialog>
		<form method="dialog" class="logistica-tv-board__edit-form" data-tv-edit-form>
			<header>
				<h3><?php esc_html_e( 'Actualizar orden', 'logistica' ); ?></h3>
				<button type="button" data-tv-edit-close aria-label="<?php esc_attr_e( 'Cerrar', 'logistica' ); ?>">&times;</button>
			</header>
			<input type="hidden" data-tv-edit="id">
			<input type="hidden" data-tv-edit="source">
			<input type="hidden" data-tv-edit="machine">
			<label>
				<span><?php esc_html_e( 'Persona asignada', 'logistica' ); ?></span>
				<input type="text" data-tv-edit="assigned_person" placeholder="<?php esc_attr_e( 'Nombre del operario', 'logistica' ); ?>">
			</label>
			<label>
				<span><?php esc_html_e( 'Prioridad', 'logistica' ); ?></span>
				<select data-tv-edit="board_priority">
					<?php foreach ( $priorities as $key => $label ) : ?>
						<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></option>
					<?php endforeach; ?>
				</select>
			</label>
			<label>
				<span><?php esc_html_e( 'Novedad / alerta', 'logistica' ); ?></span>
				<select data-tv-edit="board_alert">
					<?php foreach ( $alerts as $key => $label ) : ?>
						<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></option>
					<?php endforeach; ?>
				</select>
			</label>
			<footer>
				<button type="submit" class="button button-primary"><?php esc_html_e( 'Guardar', 'logistica' ); ?></button>
				<button type="button" class="button" data-tv-edit-close><?php esc_html_e( 'Cancelar', 'logistica' ); ?></button>
			</footer>
		</form>
	</dialog>
</section>
