{% extends 'base.html.twig' %}
{% block title %}Statistiques
{% endblock %}
{% block body %}
	{% block stylesheets %}
		<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">
		<link rel="stylesheet" href="{{asset('assets/css/graphiques.css')}}">
	{% endblock %}

	<div class="wrapper-table">
		<h1>Statistiques</h1>

		{# Graphique des dépenses #}
		<div class="container-graphiques">
			<select name="selectAnneesDepenses" id="selectAnneesDepenses" class="btn select selectAnneesDepenses" data-select="graphique-mois-depenses">
				{% for a in selectAnneesDepenses %}
					<option value="{{a.annee}}">{{a.annee}}</option>
				{% endfor %}
			</select>
			<div id="graphique-depenses">
				<canvas id="graphDepenses" width="600" height="400"></canvas>
			</div>

			<select name="selectAnneesRecettes" id="selectAnneesRecettes" class="btn select selectAnneesRecettes" data-select="graphique-mois-recettes">
				{% for a in selectAnneesRecettes %}
					<option value="{{a.annee}}">{{a.annee}}</option>
				{% endfor %}
			</select>
			<div id="graphique-recettes"></div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
	<script type="text/javascript">

		const selectAnneeDepenses = document.querySelector(".selectAnneeDepenses");
const selectAnneeRecettes = document.querySelector(".selectAnneeRecettes");
const graphDepenses = document.querySelector("#graphDepenses")
const graphRecettes = document.querySelector("#graphique-recettes")

selectAnneesDepenses.addEventListener("change", (e) => {
let selectionAnnee = e.target.value;
filtreAnneeDepenses(selectionAnnee);
});

const filtreAnneeDepenses = (selectionAnnee) => {
let formData = new FormData();
formData.append("selectionAnnee", selectionAnnee);

for (let item of formData) {
console.log(item[0], item[1]);
}
let colDepenses
async function statsDepenses() {
let response = await fetch("/admin/statistiques", {
body: formData,
method: "POST",
cache: "no-cache",
headers: {
"X-Requested-With": "XMLHttpRequest"
}
})
let colDepenses = await response.json();
return colDepenses
};
statsDepenses()
}

// Obtenir dernier mois contenu dans le select et afficher les dépenses au démarrage de la page
if (selectAnneesDepenses.value) {
let selectionAnnee = selectAnneesDepenses[0].value;
selectAnneesDepenses.value = selectionAnnee;
filtreAnneeDepenses(selectionAnnee);

}

selectAnneesDepenses.addEventListener("change", (e) => {
let selectionAnnee = e.target.value;
filtreAnneeDepenses(selectionAnnee);
});
// Graphique dépenses
const afficherGraphique = (colDepenses) => {

let graph = new Chart(graphDepenses, {
type: "line",
data: {
labels: [
"Janv",
"Févr",
"Mars",
"Avr",
"Mai",
"Juin",
"Juil",
"Août",
"Sept",
"Oct",
"Nov",
"Déc",
],
datasets: [
{
label: "Dépenses pour l'année",
data: colDepenses,
backgroundColor: [
"red",
"blue",
"green",
"red",
"blue",
"green",
"red",
"blue",
"green",
"red",
"blue",
"green",
],
borderWidth: 1
},
]
}
})
};
afficherGraphique()
	</script>
{% endblock %}


{# graphique recettes #}
{# selectAnneesRecettes.addEventListener("change", (e) => {
	let selectionAnnee = e.target.value;
	filtreAnneeRecettes(selectionAnnee);
	});
	const filtreAnneeRecettes = async (selectionAnnee) => {
	let formData = new FormData();
	formData.append("selectionAnnee", selectionAnnee);
	
	for (let item of formData) {
	console.log(item[0], item[1]);
	}
	
	const reponse = await fetch("/admin/statistiques", {
	body: formData,
	method: "POST",
	cache: "no-cache",
	headers: {
	"X-Requested-With": "XMLHttpRequest"
	}
	}).then((response) => response.json()).then(data => console.log(data)).catch((error) => alert("Erreur : " + error));
	return reponse;
	};
	}
	
	// //Obtenir dernier mois contenu dans le select et afficher les recettes au démarrage de la page
	{
	# if (selectAnneesRecettes.value) {
	let selectionAnnee = selectAnneesRecettes[0].value;
	selectAnneesRecettes.value = selectionAnnee;
	filtreAnneeRecettes(selectionAnnee);
	}
	#
	} {
	# selectAnneesRecettes.addEventListener("change", (e) => {
	let selectionAnnee = e.target.value;
	console.log('selection année : ', selectionAnnee)
	});#}