<?php
/**
 * Panel de métricas y gráficos de planeación.
 *
 * @package Logistica
 */

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

$show_pedidos_metrics             = ! empty( $show_pedidos_metrics );
$planeacion_metrics_use_period_form = ! empty( $planeacion_metrics_use_period_form );
$planeacion_metrics_compare_title = isset( $planeacion_metrics_compare_title )
	? $planeacion_metrics_compare_title
	: __( 'Resultados semana actual vs semana anterior', 'logistica' );
?>
<section class="logistica-planeacion__metrics" data-planeacion-metrics aria-label="<?php esc_attr_e( 'Métricas de planeación', 'logistica' ); ?>"<?php echo $show_pedidos_metrics ? ' data-planeacion-metrics-pedidos="1"' : ''; ?><?php echo $planeacion_metrics_use_period_form ? ' data-planeacion-metrics-period="1"' : ''; ?>>
	<div class="logistica-planeacion__metrics-week" data-planeacion-metrics-week hidden></div>

	<?php if ( $show_pedidos_metrics ) : ?>
	<div class="logistica-planeacion__metrics-pedidos" data-planeacion-metrics-pedidos-panel hidden></div>

	<details class="logistica-planeacion__metrics-compare logistica-planeacion__metrics-pedidos-period">
		<summary class="logistica-planeacion__metrics-compare-summary">
			<span class="dashicons dashicons-chart-area" aria-hidden="true"></span>
			<?php esc_html_e( 'Gráficos de pedidos por período', 'logistica' ); ?>
		</summary>
		<div class="logistica-planeacion__metrics-compare-body">
			<p class="logistica-planeacion__metrics-compare-hint" data-planeacion-pedidos-period-hint>
				<?php esc_html_e( 'Seleccione un rango de fechas para ver cumplimiento, prórrogas, retrasos y entregas a tiempo por semana.', 'logistica' ); ?>
			</p>
			<div class="logistica-planeacion__metrics-pedidos-period-form">
				<label>
					<span><?php esc_html_e( 'Desde', 'logistica' ); ?></span>
					<input type="date" data-planeacion-pedidos-period-from>
				</label>
				<label>
					<span><?php esc_html_e( 'Hasta', 'logistica' ); ?></span>
					<input type="date" data-planeacion-pedidos-period-to>
				</label>
				<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--compact" data-action="planeacion-pedidos-period-charts">
					<?php esc_html_e( 'Generar gráficos', 'logistica' ); ?>
				</button>
			</div>
			<div class="logistica-planeacion__metrics-charts logistica-planeacion__metrics-charts--pedidos" data-planeacion-pedidos-period-charts hidden>
				<div class="logistica-planeacion__metrics-chart-card">
					<h4><?php esc_html_e( 'Cumplimiento (%)', 'logistica' ); ?></h4>
					<div class="logistica-planeacion__metrics-chart-wrap">
						<canvas data-planeacion-pedidos-chart="cumplimiento" role="img" aria-label="<?php esc_attr_e( 'Cumplimiento por semana', 'logistica' ); ?>"></canvas>
					</div>
				</div>
				<div class="logistica-planeacion__metrics-chart-card">
					<h4><?php esc_html_e( 'Pedidos comprometidos vs entregas a tiempo', 'logistica' ); ?></h4>
					<div class="logistica-planeacion__metrics-chart-wrap">
						<canvas data-planeacion-pedidos-chart="entregas" role="img" aria-label="<?php esc_attr_e( 'Comprometidos y entregas a tiempo por semana', 'logistica' ); ?>"></canvas>
					</div>
				</div>
				<div class="logistica-planeacion__metrics-chart-card">
					<h4><?php esc_html_e( 'Prórrogas y retrasos', 'logistica' ); ?></h4>
					<div class="logistica-planeacion__metrics-chart-wrap">
						<canvas data-planeacion-pedidos-chart="riesgos" role="img" aria-label="<?php esc_attr_e( 'Prórrogas y retrasos por semana', 'logistica' ); ?>"></canvas>
					</div>
				</div>
			</div>
		</div>
	</details>
	<?php endif; ?>

	<details class="logistica-planeacion__metrics-compare logistica-planeacion__metrics-month">
		<summary class="logistica-planeacion__metrics-compare-summary logistica-planeacion__metrics-month-summary">
			<span class="dashicons dashicons-chart-bar" aria-hidden="true"></span>
			<?php echo esc_html( $planeacion_metrics_compare_title ); ?>
			<?php if ( $planeacion_metrics_use_period_form ) : ?>
			<span class="logistica-planeacion__metrics-compare-label logistica-planeacion__metrics-month-label" data-planeacion-metrics-period-label></span>
			<?php elseif ( ! $planeacion_metrics_use_period_form ) : ?>
			<span class="logistica-planeacion__metrics-compare-label logistica-planeacion__metrics-month-label" data-planeacion-metrics-compare-label data-planeacion-metrics-month-label></span>
			<?php endif; ?>
		</summary>
		<div class="logistica-planeacion__metrics-compare-body logistica-planeacion__metrics-month-body">
			<p class="logistica-planeacion__metrics-compare-hint logistica-planeacion__metrics-month-hint" data-planeacion-metrics-compare-hint data-planeacion-metrics-month-hint>
				<?php if ( $planeacion_metrics_use_period_form ) : ?>
					<?php esc_html_e( 'Seleccione un rango de fechas para generar los gráficos de resultados por período para la máquina seleccionada.', 'logistica' ); ?>
				<?php else : ?>
					<?php esc_html_e( 'Compara la semana que estás viendo con la semana inmediatamente anterior para la máquina seleccionada (datos guardados).', 'logistica' ); ?>
				<?php endif; ?>
			</p>
			<?php if ( $planeacion_metrics_use_period_form ) : ?>
			<div class="logistica-planeacion__metrics-pedidos-period-form">
				<label>
					<span><?php esc_html_e( 'Desde', 'logistica' ); ?></span>
					<input type="date" data-planeacion-metrics-period-from>
				</label>
				<label>
					<span><?php esc_html_e( 'Hasta', 'logistica' ); ?></span>
					<input type="date" data-planeacion-metrics-period-to>
				</label>
				<button type="button" class="logistica-planeacion__btn logistica-planeacion__btn--primary logistica-planeacion__btn--compact" data-action="planeacion-metrics-period-charts">
					<?php esc_html_e( 'Generar gráficos', 'logistica' ); ?>
				</button>
			</div>
			<?php endif; ?>
			<div class="logistica-planeacion__metrics-charts" data-planeacion-metrics-charts hidden>
				<div class="logistica-planeacion__metrics-chart-card">
					<h4><?php esc_html_e( 'Horas disponibles y ocupadas', 'logistica' ); ?></h4>
					<div class="logistica-planeacion__metrics-chart-wrap">
						<canvas data-planeacion-chart="hours" role="img" aria-label="<?php esc_attr_e( 'Horas disponibles y ocupadas: semana anterior vs semana actual', 'logistica' ); ?>"></canvas>
					</div>
				</div>
				<div class="logistica-planeacion__metrics-chart-card">
					<h4><?php esc_html_e( 'Ocupación y eficiencia', 'logistica' ); ?></h4>
					<div class="logistica-planeacion__metrics-chart-wrap">
						<canvas data-planeacion-chart="performance" role="img" aria-label="<?php esc_attr_e( 'Porcentaje de ocupación y eficiencia: semana anterior vs semana actual', 'logistica' ); ?>"></canvas>
					</div>
				</div>
				<div class="logistica-planeacion__metrics-chart-card">
					<h4><?php esc_html_e( 'Actividades por estado', 'logistica' ); ?></h4>
					<div class="logistica-planeacion__metrics-chart-wrap logistica-planeacion__metrics-chart-wrap--compact">
						<canvas data-planeacion-chart="status" role="img" aria-label="<?php esc_attr_e( 'Minutos por estado: semana anterior vs semana actual', 'logistica' ); ?>"></canvas>
					</div>
				</div>
				<div class="logistica-planeacion__metrics-chart-card">
					<h4><?php esc_html_e( 'Tiempo en retraso', 'logistica' ); ?></h4>
					<div class="logistica-planeacion__metrics-chart-wrap">
						<canvas data-planeacion-chart="delay" role="img" aria-label="<?php esc_attr_e( 'Horas en retraso: semana anterior vs semana actual', 'logistica' ); ?>"></canvas>
					</div>
				</div>
			</div>
		</div>
	</details>
</section>
