// Función para limpiar gráficos existentes antes de crear nuevos
function limpiarGraficos() {
    if (window.Highcharts && window.Highcharts.charts) {
        window.Highcharts.charts.forEach(function(chart) {
            if (chart) {
                chart.destroy();
            }
        });
        window.Highcharts.charts.length = 0;
    }
}

// Limpiar gráficos existentes
limpiarGraficos();

(
    function(){
        const containerEl = document.getElementById('container');
        if (!containerEl) return;
        console.log(containerEl);
        let seriesData = [];
        try {
          seriesData = containerEl.dataset.series ? JSON.parse(containerEl.dataset.series) : [];
        } catch (e) {
          seriesData = [];
        }
      
        if (!Array.isArray(seriesData) || seriesData.length === 0) return;
        console.log(seriesData);
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
          xAxis: {
            categories: seriesData.map(item => item.Periodo)
          },
          title: { text: 'Media de notas por periodo' },
          series: [{ data: seriesData.map(item => ({ y: item.MediaNotas, id: item.Periodo })) }],
          annotations: [{
            labels: [
              { point: 'max', text: 'Max' },
              { point: 'min', text: 'Min', backgroundColor: 'white' }
            ]
          }]
        });
      })();
    
    
      (
        function(){
            const containerEl = document.getElementById('container1');
            if (!containerEl) return;
            console.log(containerEl);
            let seriesData = [];
            try {
              seriesData = containerEl.dataset.series ? JSON.parse(containerEl.dataset.series) : [];
            } catch (e) {
              seriesData = [];
            }
          
            if (!Array.isArray(seriesData) || seriesData.length === 0) return;
            console.log(seriesData);
            Highcharts.chart('container1', {
                chart: {
                    type: 'line'
                },
              xAxis: {
                categories: seriesData.map(item => item.Periodo)
              },
              title: { text: 'Media de notas por periodo' },
              series: [{ data: seriesData.map(item => ({ y: item.MediaNotas, id: item.Periodo })) }],
              annotations: [{
                labels: [
                  { point: 'max', text: 'Max' },
                  { point: 'min', text: 'Min', backgroundColor: 'white' }
                ]
              }]
            });
          })();

          (
            function(){
              const containerEl = document.getElementById('container2');
            if (!containerEl) return;
            console.log(containerEl);
            let seriesData = [];
            try {
              seriesData = containerEl.dataset.series ? JSON.parse(containerEl.dataset.series) : [];
            } catch (e) {
              seriesData = [];
            }
          
            if (!Array.isArray(seriesData) || seriesData.length === 0) return;
            console.log(seriesData);
          Highcharts.chart('container2', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Distribución de Indicadores de Estudiantes'
            },
            xAxis: {
                categories: seriesData.map(item => item.NombreEstado),
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: 'Valores'
                }
            },
            series: [{
                name: 'Media de notas',
                data: seriesData.map(item => item.MediaNotas)},
                {
                name: 'Nota Minima',
                data: seriesData.map(item => item.NotaMinima)},
                {
                name: 'Nota Maxima',
                data: seriesData.map(item => item.NotaMaxima)}  
            ]
        });
      })();

      (
        function(){
          const containerEl = document.getElementById('container2');
        if (!containerEl) return;
        console.log(containerEl);
        let seriesData = [];
        try {
          seriesData = containerEl.dataset.series ? JSON.parse(containerEl.dataset.series) : [];
        } catch (e) {
          seriesData = [];
        }
      
        if (!Array.isArray(seriesData) || seriesData.length === 0) return;
        console.log(seriesData);
      Highcharts.chart('container3', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Distribución de Indicadores de Estudiantes'
        },
        xAxis: {
            categories: seriesData.map(item => item.NombreEstado),
            title: {
                text: null
            }
        },
        yAxis: {
            title: {
                text: 'Valores'
            }
        },
        series: [{
            name: 'Media de notas',
            data: seriesData.map(item => item.MediaNotas)},
            {
            name: 'Nota Minima',
            data: seriesData.map(item => item.NotaMinima)},
            {
            name: 'Nota Maxima',
            data: seriesData.map(item => item.NotaMaxima)}  
        ]
    });
  })();


  (function() {
    const containerEl = document.getElementById('container4');
    if (!containerEl) return;

    let seriesData = [];
    try {
        seriesData = containerEl.dataset.series ? JSON.parse(containerEl.dataset.series) : [];
    } catch (e) {
        seriesData = [];
    }

    if (!Array.isArray(seriesData) || seriesData.length === 0) return;
    console.log(seriesData);
    Highcharts.chart('container4', {
        chart: {
            polar: true,
            type: 'line'
        },
        title: {
            text: 'Comparación de Cursos'
        },
        pane: {
            startAngle: 0,
            endAngle: 360
        },
        xAxis: {
            categories: [
                'Media de Notas',
                'Estudiantes Aprobados',
                'Estudiantes Reprobados'
            ],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },
        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },
        plotOptions: {
            series: {
                events: {
                    legendItemClick: function(e) {
                        const chart = this.chart;
                        const seriesVisibles = chart.series.filter(s => s.visible);
                        // Si solo hay uno visible y es el que se está clickeando, mostrar todos
                        if (seriesVisibles.length === 0 ) {
                            chart.series.forEach(s => s.show());
                        } else {
                            chart.series.forEach(s => {
                                if (s !== this) {
                                    s.hide(); // Ocultar otros cursos
                                } else {
                                    s.show(); // Asegurar que el clickeado se muestre
                                }
                            });
                        }
                        return false; // Evita el comportamiento normal de toggle
                    }
                }
            }
        },
        series: seriesData.map(item => ({
            name: item.CursoNombre,
            data: [
                item.MediaNotas,
                item.EstudiantesAprobados,
                item.EstudiantesReprobados
            ],
            pointPlacement: 'on'
        }))
    });
})();


(function() {
  const containerEl = document.getElementById('container5');
  if (!containerEl) return;

  let seriesData = [];
  try {
      seriesData = containerEl.dataset.series ? JSON.parse(containerEl.dataset.series) : [];
  } catch (e) {
      seriesData = [];
      console.log(containerEl.dataset.series);
      console.log('Error al parsear los datos container5:', e);
  }

  if (!Array.isArray(seriesData) || seriesData.length === 0) return;
  console.log(seriesData);

  // Cambiamos a una gráfica de columnas 3D
  Highcharts.chart('container5', {
      chart: {
          type: 'column',
          options3d: {
              enabled: true,
              alpha: 15,
              beta: 15,
              depth: 50,
              viewDistance: 25
          }
      },
      title: {
          text: 'Comparación de Cursos (3D)'
      },
      xAxis: {
          categories: [
              'Media de Notas',
              'Estudiantes Aprobados',
              'Estudiantes Reprobados'
          ],
          tickmarkPlacement: 'on',
          lineWidth: 0
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Cantidad / Promedio'
          }
      },
      plotOptions: {
          column: {
              depth: 25
          },
          series: {
              events: {
                  legendItemClick: function(e) {
                      const chart = this.chart;
                      const seriesVisibles = chart.series.filter(s => s.visible);
                      // Si solo hay uno visible y es el que se está clickeando, mostrar todos
                      if (seriesVisibles.length === 0 ) {
                          chart.series.forEach(s => s.show());
                      } else {
                          chart.series.forEach(s => {
                              if (s !== this) {
                                  s.hide(); // Ocultar otros cursos
                              } else {
                                  s.show(); // Asegurar que el clickeado se muestre
                              }
                          });
                      }
                      return false; // Evita el comportamiento normal de toggle
                  }
              }
          }
      },
      series: seriesData.map(item => ({
          name: item.CursoNombre,
          data: [
              item.MediaNotas,
              item.EstudiantesAprobados,
              item.EstudiantesReprobados
          ],
          pointPlacement: 'on'
      }))
  });
})();

  (function() {
    const containerEl = document.getElementById('container6');
    if (!containerEl) return;

    let seriesData = [];
    try {
        seriesData = containerEl.dataset.series ? JSON.parse(containerEl.dataset.series) : [];
    } catch (e) {
        seriesData = [];
        console.log(containerEl.dataset.series);
        console.log('Error al parsear los datos container6:', e);  
    }

    if (!Array.isArray(seriesData) || seriesData.length === 0) return;
    console.log('Top 5 Estudiantes:', seriesData);

    // Crear datos para el gráfico con colores especiales para el podium
    const chartData = seriesData.map((item, index) => {
        let color;
        switch(index) {
            case 0: color = '#FFD700'; break; // Oro
            case 1: color = '#C0C0C0'; break; // Plata  
            case 2: color = '#CD7F32'; break; // Bronce
            default: color = '#8B1B1B'; break; // Color institucional
        }
        
        return {
            name: item.NombreEstudiante,
            y: parseFloat(item.PromedioNotas),
            color: color,
            estudiante: item.CodigoEstudiante,
            materias: item.TotalMaterias,
            programa: item.ProgramaNombre,
            periodo: item.Periodo
        };
    });

    Highcharts.chart('container6', {
        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: '🏆 Top 5 Estudiantes - Mejor Rendimiento',
            style: {
                color: '#8B1B1B',
                fontWeight: 'bold',
                fontSize: '18px'
            }
        },
        subtitle: {
            text: 'Estudiantes con mínimo 5 materias cursadas',
            style: {
                color: '#666'
            }
        },
        xAxis: {
            categories: seriesData.map((item, index) => {
                const posicion = index + 1;
                const emoji = posicion === 1 ? '🥇' : posicion === 2 ? '🥈' : posicion === 3 ? '🥉' : '#' + posicion;
                return emoji + ' ' + item.NombreEstudiante;
            }),
            labels: {
                rotation: -45,
                style: {
                    fontSize: '11px'
                }
            }
        },
        yAxis: {
            title: {
                text: 'Promedio de Notas',
                style: {
                    color: '#8B1B1B',
                    fontWeight: 'bold'
                }
            },
            min: 0,
            max: 5
        },
        plotOptions: {
            column: {
                depth: 25,
                colorByPoint: true,
                dataLabels: {
                    enabled: true,
                    format: '{point.y}',
                    style: {
                        fontWeight: 'bold',
                        color: '#000'
                    }
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0"><b>Estudiante:</b> </td>' +
                        '<td style="padding:0"><b>{point.estudiante}</b></td></tr>' +
                        '<tr><td style="color:{series.color};padding:0"><b>Programa:</b> </td>' +
                        '<td style="padding:0">{point.programa}</td></tr>' +
                        '<tr><td style="color:{series.color};padding:0"><b>Promedio:</b> </td>' +
                        '<td style="padding:0"><b>{point.y}</b></td></tr>' +
                        '<tr><td style="color:{series.color};padding:0"><b>Total Materias:</b> </td>' +
                        '<td style="padding:0">{point.materias}</td></tr>' +
                        '<tr><td style="color:{series.color};padding:0"><b>Periodo:</b> </td>' +
                        '<td style="padding:0">{point.periodo}</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Promedio de Notas',
            data: chartData
        }],
        credits: {
            enabled: false
        }
    });
  })();


  // Gráfico tipo "pie" para el Top 5 de estudiantes con mejor rendimiento
  (function() {
    const containerEl = document.getElementById('container7');
    if (!containerEl) return;

    let seriesData = [];
    try {
        seriesData = containerEl.dataset.series ? JSON.parse(containerEl.dataset.series) : [];
    } catch (e) {
        seriesData = [];  
        console.log(containerEl.dataset.series);
        console.log('Error al parsear los datos container7:', e);  
    }

    if (!Array.isArray(seriesData) || seriesData.length === 0) return;
    console.log('Top 5 Estudiantes:', seriesData);

    // Asignar colores especiales para el podio
    const coloresPodio = ['#FFD700', '#C0C0C0', '#CD7F32', '#8B1B1B', '#8B1B1B'];

    // Preparar los datos para el gráfico tipo pie
    const chartData = seriesData.map((item, index) => {
        let color = coloresPodio[index] || '#8B1B1B';
        const posicion = index + 1;
        const emoji = posicion === 1 ? '🥇' : posicion === 2 ? '🥈' : posicion === 3 ? '🥉' : '#' + posicion;
        return {
            name: `${emoji} ${item.NombreEstudiante}`,
            y: parseFloat(item.PromedioNotas),
            color: color,
            estudiante: item.CodigoEstudiante,
            materias: item.TotalMaterias,
            programa: item.ProgramaNombre,
            periodo: item.Periodo
        };
    });

    Highcharts.chart('container7', {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '🏆 Top 5 Estudiantes - Mejor Rendimiento',
            style: {
                color: '#8B1B1B',
                fontWeight: 'bold',
                fontSize: '18px'
            }
        },
        subtitle: {
            text: 'Estudiantes con mínimo 5 materias cursadas',
            style: {
                color: '#666'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:13px">{point.name}</span><table>',
            pointFormat: '<tr><td style="color:{point.color};padding:0"><b>Estudiante:</b> </td>' +
                        '<td style="padding:0"><b>{point.estudiante}</b></td></tr>' +
                        '<tr><td style="color:{point.color};padding:0"><b>Programa:</b> </td>' +
                        '<td style="padding:0">{point.programa}</td></tr>' +
                        '<tr><td style="color:{point.color};padding:0"><b>Promedio:</b> </td>' +
                        '<td style="padding:0"><b>{point.y}</b></td></tr>' +
                        '<tr><td style="color:{point.color};padding:0"><b>Total Materias:</b> </td>' +
                        '<td style="padding:0">{point.materias}</td></tr>' +
                        '<tr><td style="color:{point.color};padding:0"><b>Periodo:</b> </td>' +
                        '<td style="padding:0">{point.periodo}</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.y}',
                    style: {
                        fontWeight: 'bold',
                        color: '#000'
                    }
                }
            }
        },
        legend: {
            enabled: true
        },
        series: [{
            name: 'Promedio de Notas',
            data: chartData
        }],
        credits: {
            enabled: false
        }
    });
  })(); 

    // Gráfico tipo "pie" para el Top 5 de estudiantes con peor rendimiento
    (function() {
        const containerEl = document.getElementById('container8');
        if (!containerEl) return;
    
        let seriesData = [];
        try {
            seriesData = containerEl.dataset.series ? JSON.parse(containerEl.dataset.series) : [];
        } catch (e) {
            seriesData = [];  
            console.log(containerEl.dataset.series);
            console.log('Error al parsear los datos container8:', e);  
        }
    
        if (!Array.isArray(seriesData) || seriesData.length === 0) return;
        console.log('Top 5 Estudiantes Peor Rendimiento:', seriesData);
    
        // Asignar colores especiales para el podio
        const coloresPodio = ['#FFD700', '#C0C0C0', '#CD7F32', '#8B1B1B', '#8B1B1B'];
    
        // Preparar los datos para el gráfico tipo pie
        const chartData = seriesData.map((item, index) => {
            let color = coloresPodio[index] || '#8B1B1B';
            const posicion = index + 1;
            const emoji = posicion === 1 ? '😢🥇' : posicion === 2 ? '😬🥈' : posicion === 3 ? '👎🥉' : '#' + posicion;
            return {
                name: `${emoji} ${item.NombreEstudiante}`,
                y: 1, // Valor fijo para que cada estudiante ocupe la misma porción
                color: color,
                estudiante: item.CodigoEstudiante,
                materias: item.TotalMaterias,
                programa: item.ProgramaNombre,
                periodo: item.Periodo,
                promedio: parseFloat(item.PromedioNotas) // Guardamos el promedio para el tooltip
            };
        });
    
        Highcharts.chart('container8', {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: '👎 Top 5 Estudiantes - Peor Rendimiento',
                style: {
                    color: '#8B1B1B',
                    fontWeight: 'bold',
                    fontSize: '18px'
                }
            },
            subtitle: {
                text: 'Estudiantes con mínimo 5 materias cursadas y promedio de notas menor a 3.0',
                style: {
                    color: '#666'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:13px">{point.name}</span><table>',
                pointFormat: '<tr><td style="color:{point.color};padding:0"><b>Estudiante:</b> </td>' +
                            '<td style="padding:0"><b>{point.estudiante}</b></td></tr>' +
                            '<tr><td style="color:{point.color};padding:0"><b>Programa:</b> </td>' +
                            '<td style="padding:0">{point.programa}</td></tr>' +
                            '<tr><td style="color:{point.color};padding:0"><b>Promedio:</b> </td>' +
                            '<td style="padding:0"><b>{point.promedio}</b></td></tr>' +
                            '<tr><td style="color:{point.color};padding:0"><b>Total Materias:</b> </td>' +
                            '<td style="padding:0">{point.materias}</td></tr>' +
                            '<tr><td style="color:{point.color};padding:0"><b>Periodo:</b> </td>' +
                            '<td style="padding:0">{point.periodo}</td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}',
                        style: {
                            fontWeight: 'bold',
                            color: '#000'
                        }
                    }
                }
            },
            legend: {
                enabled: true
            },
            series: [{
                name: 'Promedio de Notas',
                data: chartData
            }],
            credits: {
                enabled: false
            }
        });
      })(); 

  
