// SIDEBAR DROPDOWN
const allDropdown = document.querySelectorAll('#sidebar .side-dropdown');
const sidebar = document.getElementById('sidebar');


allDropdown.forEach(item=> {
	const a = item.parentElement.querySelector('a:first-child');
	a.addEventListener('click', function (e) {
		e.preventDefault();

		if(!this.classList.contains('active')) {
			allDropdown.forEach(i=> {
				const aLink = i.parentElement.querySelector('a:first-child');

				aLink.classList.remove('active');
				i.classList.remove('show');
			})
		}

		this.classList.toggle('active');
		item.classList.toggle('show');
	})
})





// SIDEBAR COLLAPSE
const toggleSidebar = document.querySelector('nav .toggle-sidebar');
const allSideDivider = document.querySelectorAll('#sidebar .divider');

if(sidebar.classList.contains('hide')) {
	allSideDivider.forEach(item=> {
		item.textContent = '-'
	})
	allDropdown.forEach(item=> {
		const a = item.parentElement.querySelector('a:first-child');
		a.classList.remove('active');
		item.classList.remove('show');
	})
} else {
	allSideDivider.forEach(item=> {
		item.textContent = item.dataset.text;
	})
}

toggleSidebar.addEventListener('click', function () {
	sidebar.classList.toggle('hide');

	if(sidebar.classList.contains('hide')) {
		allSideDivider.forEach(item=> {
			item.textContent = '-'
		})

		allDropdown.forEach(item=> {
			const a = item.parentElement.querySelector('a:first-child');
			a.classList.remove('active');
			item.classList.remove('show');
		})
	} else {
		allSideDivider.forEach(item=> {
			item.textContent = item.dataset.text;
		})
	}
})




sidebar.addEventListener('mouseleave', function () {
	if(this.classList.contains('hide')) {
		allDropdown.forEach(item=> {
			const a = item.parentElement.querySelector('a:first-child');
			a.classList.remove('active');
			item.classList.remove('show');
		})
		allSideDivider.forEach(item=> {
			item.textContent = '-'
		})
	}
})



sidebar.addEventListener('mouseenter', function () {
	if(this.classList.contains('hide')) {
		allDropdown.forEach(item=> {
			const a = item.parentElement.querySelector('a:first-child');
			a.classList.remove('active');
			item.classList.remove('show');
		})
		allSideDivider.forEach(item=> {
			item.textContent = item.dataset.text;
		})
	}
})




// PROFILE DROPDOWN
const profile = document.querySelector('nav .profile');
const imgProfile = profile.querySelector('img');
const dropdownProfile = profile.querySelector('.profile-link');

imgProfile.addEventListener('click', function () {
	dropdownProfile.classList.toggle('show');
})




// MENU
const allMenu = document.querySelectorAll('main .content-data .head .menu');

allMenu.forEach(item=> {
	const icon = item.querySelector('.icon');
	const menuLink = item.querySelector('.menu-link');

	icon.addEventListener('click', function () {
		menuLink.classList.toggle('show');
	})
})



window.addEventListener('click', function (e) {
	if(e.target !== imgProfile) {
		if(e.target !== dropdownProfile) {
			if(dropdownProfile.classList.contains('show')) {
				dropdownProfile.classList.remove('show');
			}
		}
	}

	allMenu.forEach(item=> {
		const icon = item.querySelector('.icon');
		const menuLink = item.querySelector('.menu-link');

		if(e.target !== icon) {
			if(e.target !== menuLink) {
				if (menuLink.classList.contains('show')) {
					menuLink.classList.remove('show')
				}
			}
		}
	})
})





// PROGRESSBAR
const allProgress = document.querySelectorAll('main .card .progress');

allProgress.forEach(item=> {
	item.style.setProperty('--value', item.dataset.value)
})





import { obtenerDatosGeneros, obtenerDatosEdades, obtenerDatosEstados,obtenerDatosExamenes } from '../js/funcionesGraficos.js';

async function inicializarGrafico() {
    const [femenino, masculino, noDefinido] = await obtenerDatosGeneros("");

    const options = {
        series: [
            { name: 'Femenino', data: [femenino] },
            { name: 'Masculino', data: [masculino] },
            { name: 'Prefiero no decirlo', data: [noDefinido] },
        ],
        chart: {
            height: 350,
            type: 'bar',
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '55%',
                borderRadius: 5,
            },
        },
        dataLabels: {
            enabled: false,
        },
        xaxis: {
            categories: ['Géneros'],
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " personas";
                },
            },
        },
    };

    const chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
}

inicializarGrafico();

async function inicializarGrafico2() {
    const [edad1,edad2,edad3,edad4,edad5,edad6,edad7] = await obtenerDatosEdades();

    const options2 = {
        series: [
            { name: 'Menor de 18 años', data: [edad1] },
			{ name: '18 a 24 años', data: [edad2] },
			{ name: '25 a 34 años', data: [edad3] },
			{ name: '35 a 44 años', data: [edad4] },
			{ name: '45 a 54 años', data: [edad5] },
			{ name: '55 a 64 años', data: [edad6] },
			{ name: '65 años o más', data: [edad7] },
        ],
        chart: {
            height: 350,
            type: 'bar',
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '55%',
                borderRadius: 5,
            },
        },
        dataLabels: {
            enabled: false,
        },
        xaxis: {
            categories: ['Edades'],
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " Años";
                },
            },
        },
    };

    const chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
    chart2.render();
}

inicializarGrafico2();


async function inicializarGrafico3() {
    try {
        const estados = await obtenerDatosEstados();

        if (!Array.isArray(estados)) {
            console.error("Error: 'estados' no es un array. Verifica la funcion obtenerDatosEstados");
            return;
        }

        const seriesData = estados.map(estado => ({
            name: estado.estado, 
            data: [estado.cantidad]
        }));

        const options3 = {
            series: seriesData,
            chart: {
                height: 350,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    borderRadius: 5,
                },
            },
            dataLabels: {
                enabled: false,
            },
            xaxis: {
                categories: estados.map(estado => estado.estado), // categorias en el eje X
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return val + " personas";
                    },
                },
            },
        };

        const chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
        chart3.render();
    } catch (error) {
        console.error("Error al inicializar el gráfico 3:", error);
    }
}

inicializarGrafico3();

async function inicializarGrafico4() {
    try {
        const examenes = await obtenerDatosExamenes();

        if (!Array.isArray(examenes)) {
            console.error("Error: 'examenes' no es un array. Verifica la función obtenerDatosExamenes");
            return;
        }

        const seriesData = examenes.map(examen => ({
            name: examen.examen, 
            data: [examen.cantidad]
        }));

        const options4 = {
            series: seriesData,
            chart: {
                height: 350,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    borderRadius: 5,
                },
            },
            dataLabels: {
                enabled: false,
            },
            xaxis: {
                categories: examenes.map(examen => examen.examen), // categorías en el eje X
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return val + " examenes";
                    },
                },
            },
        };

        const chart4 = new ApexCharts(document.querySelector("#chart4"), options4);
        chart4.render();
    } catch (error) {
        console.error("Error al inicializar el grafico 4:", error);
    }
}


inicializarGrafico4();