<?php
/**
 * Métricas del cuadro de pedidos (resumen semanal y gráficos por período).
 *
 * @package Logistica
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<section class="logistica-planeacion__metrics logistica-pedidos-board__metrics" data-planeacion-metrics data-planeacion-metrics-pedidos="1" aria-label="<?php esc_attr_e( 'Métricas de pedidos', 'logistica' ); ?>">
	<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="logistica-pedidos-metrics-period__head">
				<span class="dashicons dashicons-chart-area" aria-hidden="true"></span>
				<?php esc_html_e( 'Gráficos de pedidos por período', 'logistica' ); ?>
			</span>
			<span class="logistica-pedidos-metrics-period__chevron dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
		</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>
</section>
