<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráfico de Resúmenes por Fecha y Tipo de Competición</title>
    <!-- Incluye el script de ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>

<?php
include("config/config.php");

// Consulta SQL para obtener la cantidad de resúmenes agrupados por fecha y tipo de competición
$query = "SELECT DATE(fecha) as fecha, cod_tipo_competicion_propuesto, COUNT(*) as total
          FROM ttrabajo
          WHERE cod_tipo_competicion_propuesto IN ('G', 'R', 'E')
          GROUP BY DATE(fecha), cod_tipo_competicion_propuesto";

$result = $conexion->query($query);

$data = [
    'G' => [],
    'R' => [],
    'E' => []
];
$categories = [];

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $fecha = $row['fecha'];
        $tipo = $row['cod_tipo_competicion_propuesto'];
        
        if (!in_array($fecha, $categories)) {
            $categories[] = $fecha;
        }

        $data[$tipo][$fecha] = (int) $row['total'];
    }
}

// Completar con ceros donde faltan datos
foreach ($data as $tipo => &$values) {
    foreach ($categories as $fecha) {
        if (!isset($values[$fecha])) {
            $values[$fecha] = 0;
        }
    }
    ksort($values); // Ordenar por fecha
}

$conexion->close();
?>

<!-- Contenedor para el gráfico -->
<div id="sales-chart-competicion"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Pasar datos de PHP a JavaScript
        const categories = <?php echo json_encode($categories); ?>;
        const dataG = <?php echo json_encode(array_values($data['G'])); ?>;
        const dataR = <?php echo json_encode(array_values($data['R'])); ?>;
        const dataE = <?php echo json_encode(array_values($data['E'])); ?>;

        // Configuración del gráfico
        const sales_chart_options = {
            series: [
                { name: "Competición General", data: dataG },
                { name: "Competición Residente", data: dataR },
                { name: "Competición Estudiantes", data: dataE },
            ],
            chart: {
                height: 300,
                type: "area",
                toolbar: { show: false },
            },
            colors: ["#0d6efd", "#20c997", "#ffc107"],
            dataLabels: { enabled: false },
            stroke: { curve: "smooth" },
            xaxis: {
                type: "datetime",
                categories: categories, // Usamos las fechas como categorías
            },
            tooltip: { x: { format: "dd/MM/yyyy" } },
        };

        // Crear el gráfico
        const sales_chart = new ApexCharts(document.querySelector("#sales-chart-competicion"), sales_chart_options);
        sales_chart.render();
    });
</script>

</body>
</html>
