{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content_title %}
	Tableau de bord
{% endblock %}

{% block page_title %} {{ block('content_title') }}
{% endblock %}


{% block page_actions %}
	{# <a class="btn btn-primary" href="">Some Action</a> #}
{% endblock %}

{% block stylesheets %} {{ parent() }}
	<link rel="stylesheet" href="{{ asset('node_modules/bootstrap-icons/font/bootstrap-icons.css')}}" type="text/css">
{% endblock %}

{% block main %}
	<div class="container-fluid">
		<div class="row">
			<div class="col-6">
				<div id="chartEtatContainer" style="height: 370px; width: 100%;"></div>
			</div>
			<div class="col-6">
				<div id="chartContactContainer" style="height: 370px; width: 100%;"></div>
			</div>
		</div>
		<div class="col-12 mt-5">
			<div id="chartDemandesContainer" style="height: 370px; width: 100%;"></div>
		</div>
	</div>
{% endblock %}

{% block body_javascript %} {{ parent() }}
	<script>
		window.onload = function () {
			var chartEtat = new CanvasJS.Chart("chartEtatContainer", {
				animationEnabled: true,
				exportEnabled: true,
				title: {
					text: "Les demandes clients par états"
				},
				subtitles: [
					{
						text: ""
					}
				],
				data: [
					{
						type: "pie",
						showInLegend: "true",
						legendText: "{label}",
						indexLabelFontSize: 16,
						indexLabel: "{label} - #percent%",
						yValueFormatString: "",
						dataPoints: {{ dataPointsEtat|raw }}
					}
				]
			});
			chartEtat.render();
			
			var chartContact = new CanvasJS.Chart("chartContactContainer", {
				animationEnabled: true,
				exportEnabled: true,
				title: {
					text: "Les demandes clients par contacts"
				},
				subtitles: [
					{
						text: ""
					}
				],
				data: [
					{
						type: "pie",
						showInLegend: "true",
						legendText: "{label}",
						indexLabelFontSize: 16,
						indexLabel: "{label} - #percent%",
						yValueFormatString: "",
						dataPoints: {{ dataPointsContact|raw }}
					}
				]
			});
			chartContact.render();
		}

		var chartDemandes = new CanvasJS.Chart("chartDemandesContainer", {
			animationEnabled: true,
			title:{
				text: "Nombre des demandes par mois"
			},
			axisY: {
				title: "",
				includeZero: true,
				prefix: "",
				suffix:  " demandes"
			},
			data: [{
				type: "bar",
				yValueFormatString: "#,##0 demandes",
				indexLabel: "{y}",
				indexLabelPlacement: "inside",
				indexLabelFontWeight: "bolder",
				indexLabelFontColor: "white",
				dataPoints: {{ jsonOptionDemande|raw }}
			}]
		});
		chartDemandes.render();
	</script>

{% endblock %}