{% extends 'base_emine.html.twig' %}

{% block title %}{{parent()}}-Gisements-Statistiques{% endblock %}

{% block content %}
	<main style="padding-top: 180px; min-height: 100vh;" class="bg-charcoal-light">
		<div class="container py-4">
			<nav class="operators-breadcrumb mb-4">
				<ol>
					<li>
						<a href="/">
							<svg width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
								<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
							</svg>
							Accueil
						</a>
					</li>
					<li class="separator">
						<svg width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
							<polyline points="9 18 15 12 9 6"/>
						</svg>
					</li>
					<li>
						<a href="#">Plus</a>
					</li>
                    <li class="separator">
						<svg width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
							<polyline points="9 18 15 12 9 6"/>
						</svg>
					</li>
					<li>
						<a href="#">Gisements</a>
					</li>
					<li class="separator">
						<svg width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
							<polyline points="9 18 15 12 9 6"/>
						</svg>
					</li>
					<li class="active">Les statistiques des gisements</li>
				</ol>
			</nav>

			<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3 mb-4">
				<div>
					<h1 class="fw-bold mb-1" style="font-family: var(--font-display); font-size: 1.6rem;">
						📊 Statistiques des gisements
					</h1>
					<p class="text-muted-mine mb-0" style="font-size: 0.9rem">
						Les statistiques des gisements publiés
					</p>
				</div>
				<div class="d-flex gap-2 flex-wrap">

                    <a class="operators-btn operators-btn-primary btn" href="#">
                        <svg width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
                        </svg>
                        Exporter en Excel
                    </a>
				</div>
			</div>

			<div class="mb-5"></div>
            <div class="row g-4">
                <div class="col-lg-12">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Gisements par province</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des gisements par province
						</p>
						<div class="table-responsive">
							<div id="chart-maladie"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="mb-5"></div>
		</div>
	</main>
{% endblock %}

{% block javascripts %}
	{{parent()}}

    <script>
		var typesContrantNbre = [];

        {% for item in gisements %}
			typesContrantNbre.push({
				y: parseInt("{{item.nbre}}"), 
				name: "{{item.province}}"
			});
        {% endfor %}

		Highcharts.chart('chart-maladie', {
			chart: {
				type: 'pie',
				backgroundColor: '#f6f7fa',
				zooming: {
				type: 'xy'
				},
				panning: {
				enabled: true,
				type: 'xy'
				},
				panKey: 'shift'
			},
			title: {
				text: ""
			},
			tooltip: {
				valueSuffix: ''
			},
			plotOptions: {
				pie: {
					showInLegend: true,
					allowPointSelect: true,
					showInLegend: true,
					cursor: 'pointer',
					dataLabels: [{
						enabled: true,
						distance: 20,
					}, {
						enabled: true,
						distance: -40,
						format: '{point.y}',
						style: {
							fontSize: '1.2em',
							textOutline: 'none',
							opacity: 0.7
						},
							filter: {
							operator: '>',
							property: 'percentage',
							value: 10
						}
					}]
				}
			},
			series: [
				{
					name: 'Nombre des gisements',
					colorByPoint: true,
					data: typesContrantNbre
				}
			]
		});

		var options1 = {
			chart: {
				height: 330,
				type: 'line',
				zoom: {
					enabled: false,
				}
			},
			colors: ['#17418a'],
			series: [{
				name: "Nombre de gisements",
				type: 'column',
				data: typesContrantNbre
			}],
			stroke: {
				width: [0, 3]
			},
			legend: {				
				position: 'top',
				horizontalAlign: 'left',
			},
			labels: typesContrantName,
			xaxis: {
				type: 'string'
			},
			yaxis: [{
				title: {
					text: "Nombre de gisements par province",
				},
				min: 1,
				max: 500,
				tickAmount: 11,
			}],tooltip: {
				y: {
					formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
						return value + " gisement(s)";
					}
				}
			}
		}

		var chart1 = new ApexCharts(
			document.querySelector("#chart-maladie"),
			options1
		);
		chart1.render();
    </script>
{% endblock %}