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

// Consultar la cantidad de cada tipo de competición
$query = "SELECT cod_tipo_competicion_propuesto, COUNT(*) as total
          FROM ttrabajo
          WHERE cod_tipo_competicion_propuesto IN ('G', 'R', 'E')
          GROUP BY cod_tipo_competicion_propuesto";

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

if (!$result) {
    die("Error en la consulta: " . $conexion->error);
}

// Crear un array para almacenar los resultados
$resultados = [
    'G' => 0, // Competición General
    'R' => 0, // Competición Residente
    'E' => 0  // Competición Estudiantes
];

// Recorrer los resultados y asignar los valores a los tipos correspondientes
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        if ($row['cod_tipo_competicion_propuesto'] == 'G') {
            $resultados['G'] = $row['total'];
        } elseif ($row['cod_tipo_competicion_propuesto'] == 'R') {
            $resultados['R'] = $row['total'];
        } elseif ($row['cod_tipo_competicion_propuesto'] == 'E') {
            $resultados['E'] = $row['total'];
        }
    }
}

// Cerrar la conexión
$conexion->close();
?>

<!-- Incluir la librería de ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<!-- Pasar los datos a JavaScript y mostrar los resultados en la consola -->
<script>
    // Esperar a que el DOM esté completamente cargado antes de ejecutar el gráfico
    document.addEventListener('DOMContentLoaded', function() {
        // Mostrar los resultados en la consola para depuración
        console.log("Resultados:", <?php echo json_encode($resultados); ?>);

        const pie_chart_options = {
            series: [
                <?php echo $resultados['G']; ?>, // Competición General
                <?php echo $resultados['R']; ?>, // Competición Residente
                <?php echo $resultados['E']; ?>  // Competición Estudiantes
            ],
            chart: {
                type: "donut",
            },
            labels: ["Competición General", "Competición Residente", "Competición Estudiantes"],
            dataLabels: {
                enabled: false,
            },
            colors: [
                "#0d6efd",  // Competición General
                "#20c997",  // Competición Residente
                "#ffc107"   // Competición Estudiantes
            ],
            legend: {
                show: true,
                position: "right", // Leyenda a la derecha
                formatter: function(seriesName, opts) {
                    // Personalizar el formato de la leyenda para incluir el valor
                    return seriesName + ": " + opts.w.globals.series[opts.seriesIndex];
                }
            }
        };

        // Verificar que el elemento existe
        const chartElement = document.querySelector("#chart_competicion");
        if (chartElement) {
            var chart = new ApexCharts(chartElement, pie_chart_options);
            chart.render();
        } else {
            console.error("Elemento con id 'chart' no encontrado");
        }
    });
</script>

<!-- Aquí renderizas el gráfico en tu página -->
<div id="chart_competicion"></div>
