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

// Consultar la cantidad de cada tipo de competición
$query = "SELECT cod_tipo_presentacion_propuesto, COUNT(*) as total
          FROM ttrabajo
          WHERE cod_tipo_presentacion_propuesto IN ('O', 'M', 'B')
          GROUP BY cod_tipo_presentacion_propuesto";

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

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

// Crear un array para almacenar los resultados
$resultados = [
    'O' => 0, // Presentación Oral
    'M' => 0, // Presentación Mini-Oral
    'B' => 0 // Presentación Ambos
];

// 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_presentacion_propuesto'] == 'O') {
            $resultados['O'] = $row['total'];
        } elseif ($row['cod_tipo_presentacion_propuesto'] == 'M') {
            $resultados['M'] = $row['total'];
        } elseif ($row['cod_tipo_presentacion_propuesto'] == 'B') {
            $resultados['B'] = $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['O']; ?>, // Presentación Oral
                <?php echo $resultados['M']; ?>, // Presentación Mini-Oral
                <?php echo $resultados['B']; ?>  // Presentación Ambos
            ],
            chart: {
                type: "donut",
            },
            labels: ["Presentación Oral", "Presentación Mini-Oral", "Presentación Ambos"],
            dataLabels: {
                enabled: false,
            },
       colors: [
    "#d63384",  // Presentación Oral (Azul)
    "#6f42c1",  // Presentación Mini-Oral (Verde)
    "#198754"  // Presentación Ambos (Amarillo)
  ]
,
            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_presentacion");
        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_presentacion"></div>
