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

{% block title %}{{parent()}}-La législation minière-Arretés-Statistiques{% endblock %}

{#{% block content %}
    <div class="content-wrapper" style="margin-top:180px;">
		<div class="container-full">
			<div class="content-header">
				<div class="d-flex align-items-center">
					<div class="me-auto">
						<h3 class="page-title">Statistiques arrêtés</h3>
						<div class="d-inline-block align-items-center">
							<nav>
								<ol class="breadcrumb">
									<li class="breadcrumb-item"><a href="{{path('app_home')}}"><i class="mdi mdi-home-outline"></i></a></li>
                                    <li class="breadcrumb-item">La législation minière</li>
                                    <li class="breadcrumb-item">Arrêtés</li>
									<li class="breadcrumb-item active" aria-current="page">Statistiques</li>
								</ol>
							</nav>
						</div>
					</div>
				</div>
			</div>

            <!-- Main content -->
			<section class="content">
				<div class="row">
                    <div class="col-12">
						<div class="box">
                            {% set nbreArrete = 0 %}
                            {% for item in arreteByAnnee %}
                                {% set nbreArrete = nbreArrete + item.nbre %}
                            {% endfor %}

							<div class="box-header with-border">
								<h3 class="box-title">Statistiques arrêtés ({{nbreArrete}} arrêtés signés)</h3>
							</div>

							<div class="box-body">
								<div class="row">
                                <div class="col-xl-4 col-12">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h6 class="box-title">Nombre d'arrêtés par opérateur</h6>
                                        </div>

                                    <div class="box-body">
                                        {% set totalContrib = 0 %}
                                        {% set valeurs = "" %}
                                        {% set compter = 1 %}

                                        {% for item in arretesOperateurs %}
                                            {% set totalContrib = totalContrib +  item.nbre %}
                                            {% set valeurs      = valeurs~item.nbre %}	

                                            {% if compter !=  contrubs|length %}
                                                {% set valeurs      = valeurs~',' %}
                                            {% endif %}

                                            {% set compter = compter + 1 %}
                                        {% endfor %}

                                        <div class="text-center py-20">                  
                                            <div class="donut" data-peity='{ "fill": ["#ff4c52", "#faa700", "#3e8ef7", "#8aecd0", "#666ee8", "#689f38"], "radius": 78, "innerRadius": 58  }' >{{valeurs}}</div>
                                        </div>

                                        <ul class="list-inline">
                                            {% set compter = 1 %}

                                            {% for item in arretesOperateurs %}
                                                <li class="flexbox mb-5">
                                                    <div>
                                                        <a href="{{path('app_emine_cadre_juridique_arrete_operateur', {denomination: item.operateur})}}" class="text-dark">
                                                            <span class="badge badge-dot badge-lg me-1" {% if compter == 1 %}style="background-color: #ff4c52"{% elseif compter == 2 %}style="background-color: #faa700"{% elseif compter == 3 %}style="background-color: #3e8ef7"{% elseif compter == 4 %}style="background-color: #8aecd0"{% elseif compter == 5 %}style="background-color: #666ee8"{% elseif compter == 6 %}style="background-color: #689f38"{% endif %}></span>
                                                            <span>{{item.operateur}}</span>
                                                        </a>
                                                    </div>
                                                    <div>
                                                        <a href="{{path('app_emine_cadre_juridique_arrete_operateur', {denomination: item.operateur})}}" class="text-dark">
                                                            {{item.nbre}} ({{ ((item.nbre / totalContrib) * 100)|round(1, 'floor') }}%)
                                                        </a>
                                                    </div>
                                                </li>

                                                {% set compter = compter + 1 %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                    </div>
                                </div>


                            <div class="col-xl-4 col-12">
                                <div class="box">
                                    <div class="box-header with-border">
                                        <h6 class="box-title">Nombre d'arrêtés par catégorie d'arrêtés</h6>
                                    </div>

                                    <div class="box-body">
                                        {% set totalContrib = 0 %}
                                        {% set valeurs = "" %}
                                        {% set compter = 1 %}

                                        {% for item in arretesCategorie %}
                                            {% set totalContrib = totalContrib +  item.nbre %}
                                            {% set valeurs      = valeurs~item.nbre %}	

                                            {% if compter !=  contrubs|length %}
                                                {% set valeurs      = valeurs~',' %}
                                            {% endif %}

                                            {% set compter = compter + 1 %}
                                        {% endfor %}

                                        <div class="text-center py-20">                  
                                            <div class="donut" data-peity='{ "fill": ["#ff4c52", "#faa700", "#3e8ef7", "#8aecd0", "#666ee8", "#689f38"], "radius": 78, "innerRadius": 58  }' >{{valeurs}}</div>
                                        </div>

                                        <ul class="list-inline">
                                            {% set compter = 1 %}

                                            {% for item in arretesCategorie %}
                                                <li class="flexbox mb-5">
                                                    <div>
                                                        <a href="{{path('app_emine_cadre_juridique_arrete_categorie', {categorie: item.categorie})}}" class="text-dark">
                                                            <span class="badge badge-dot badge-lg me-1" {% if compter == 1 %}style="background-color: #ff4c52"{% elseif compter == 2 %}style="background-color: #faa700"{% elseif compter == 3 %}style="background-color: #3e8ef7"{% elseif compter == 4 %}style="background-color: #8aecd0"{% elseif compter == 5 %}style="background-color: #666ee8"{% elseif compter == 6 %}style="background-color: #689f38"{% endif %}></span>
                                                            <span>{{item.categorie}}</span>
                                                        </a>
                                                    </div>
                                                    <div>
                                                        <a href="{{path('app_emine_cadre_juridique_arrete_categorie', {categorie: item.categorie})}}" class="text-dark">
                                                            {{item.nbre}} ({{ ((item.nbre / totalContrib) * 100)|round(1, 'floor') }}%)
                                                        </a>
                                                    </div>
                                                </li>

                                                {% set compter = compter + 1 %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>


                                <div class="col-xl-4 col-12">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h6 class="box-title">Nombre d'arrêtés par type d'arrêtés</h6>
                                        </div>

                                        <div class="box-body">
                                            {% set totalContrib = 0 %}
                                            {% set valeurs = "" %}
                                            {% set compter = 1 %}

                                            {% for item in arretesType %}
                                                {% set totalContrib = totalContrib +  item.nbre %}
                                                {% set valeurs      = valeurs~item.nbre %}	

                                                {% if compter !=  contrubs|length %}
                                                    {% set valeurs      = valeurs~',' %}
                                                {% endif %}

                                                {% set compter = compter + 1 %}
                                            {% endfor %}

                                            <div class="text-center py-20">                  
                                                <div class="donut" data-peity='{ "fill": ["#ff4c52", "#faa700", "#3e8ef7", "#8aecd0", "#666ee8", "#689f38"], "radius": 78, "innerRadius": 58  }' >{{valeurs}}</div>
                                            </div>

                                            <ul class="list-inline" style="margin-bottom:120px;">
                                                {% set compter = 1 %}

                                                {% for item in arretesType %}
                                                    <li class="flexbox mb-5">
                                                        <div>
                                                            <a href="{{path('app_emine_cadre_juridique_arrete_type', {type: item.type})}}" class="text-dark">
                                                                <span class="badge badge-dot badge-lg me-1" {% if compter == 1 %}style="background-color: #ff4c52"{% elseif compter == 2 %}style="background-color: #faa700"{% elseif compter == 3 %}style="background-color: #3e8ef7"{% elseif compter == 4 %}style="background-color: #8aecd0"{% elseif compter == 5 %}style="background-color: #666ee8"{% elseif compter == 6 %}style="background-color: #689f38"{% endif %}></span>
                                                                <span>{{item.type}}</span>
                                                            </a>
                                                        </div>
                                                        <div>
                                                            <a href="{{path('app_emine_cadre_juridique_arrete_type', {type: item.type})}}" class="text-dark">
                                                                {{item.nbre}} ({{ ((item.nbre / totalContrib) * 100)|round(1, 'floor') }}%)
                                                            </a>
                                                        </div>
                                                    </li>

                                                    {% set compter = compter + 1 %}
									            {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
							</div>

                            <div class="row">
                                <div class="col-12">
                                    <div class="box" id="statistique">
                                        <div class="table-responsive">
                                            <div style="min-width:1000px;">
                                                <div class="box-header bg-primary-light">
                                                    <h4 class="box-title">Les statistiques des arrêtés signés par année</h4>
                                                </div>
                                                <div class="box-body">
                                                    <div id="market-chart-arrete" class="h-450"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
						</div>
					</div>
                </div>
            </section>
        </div>
    </div>
{% 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="#">arrêtés</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">Statistiques</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 arrêtés
					</h1>
					<p class="text-muted-mine mb-0" style="font-size: 0.9rem">
                        Les statistiques des arrêtés publiés.
					</p>
				</div>
				<div class="d-flex gap-2 flex-wrap">
				</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">Arrêtés par opérateur</h5>
                        <p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
                            Nombre d'arrêtés par opérateur minier
                        </p>
                        <div class="table-responsive">
                            <div id="container1133" style='background:#f6f7fa;'></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mb-5"></div>
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="chart-container p-4">
                        <h5 class="fw-semibold mb-1">Arrêtés par catégorie</h5>
                        <p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
                            Nombre d'arrêtés par catégorie d'arrêtés
                        </p>
                        <div class="table-responsive">
                            <div id="container13334" style='background:#f6f7fa;'></div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="chart-container p-4">
                        <h5 class="fw-semibold mb-1">Arrêtés par type d'arrêtés</h5>
                        <p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
                            Nombre d'arrêtés par type d'arrêtés
                        </p>
                        <div class="table-responsive">
                            <div id="container143377" style='background:#f6f7fa;'></div>
                        </div>
                    </div>
                </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">Arrêtés par année</h5>
                        <p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
                            Nombre d'arrêtés par année
                        </p>
                        <div class="table-responsive">
                            <div id="market-chart-arrete" style='background:#f6f7fa;'></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mb-5"></div>
		</div>
	</main>
{% endblock %}

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

	<script>
		window.onload = function () {
            var dataArreteOperateur = [];

            {% for item in arretesOperateurs %}
                dataArreteOperateur.push({
                    y: parseInt("{{item.nbre}}"), 
                    name: "{{item.operateur}}"
                });
            {% endfor %}

		
		Highcharts.chart('container1133', {
			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: 'Arrêtés',
					colorByPoint: true,
					data: dataArreteOperateur
				}
			]
		});

		var arreteCategorie = [];

		{% for item in arretesCategorie %}
			arreteCategorie.push({
				y: parseInt("{{item.nbre}}"), 
				name: "{{item.categorie}}"
			});
		{% endfor %}

		Highcharts.chart('container13334', {
			chart: {
				type: 'pie',
				backgroundColor: '#f6f7fa',
				zooming: {
				type: 'xy'
				},
				panning: {
				enabled: true,
				type: 'xy'
				},
				panKey: 'shift'
			},
			title: {
				text: ""
			},
			tooltip: {
				valueSuffix: ''
			},
			plotOptions: {
				pie: {
				allowPointSelect: 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: 'Arrêtés',
					colorByPoint: true,
					data: arreteCategorie
				}
			]
		});

		var dataTypeArrete = [];

		{% for item in arretesType %}
			dataTypeArrete.push({
				y: parseInt("{{item.nbre}}"), 
				name: "{{item.type}}"
			});
		{% endfor %}

		Highcharts.chart('container143377', {
			chart: {
				type: 'pie',
				backgroundColor: '#f6f7fa',
				zooming: {
				type: 'xy'
				},
				panning: {
				enabled: true,
				type: 'xy'
				},
				panKey: 'shift'
			},
			title: {
				text: ""
			},
			tooltip: {
				valueSuffix: ''
			},
			plotOptions: {
				pie: {
				allowPointSelect: 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: 'Arrêtés',
					colorByPoint: true,
					data: dataTypeArrete
				}
			]
		});

            var dataQteArrete = [];
            var annees         = [];

            {% for item in arreteByAnnee %}
                dataQteArrete.push(parseInt("{{item.nbre}}"));
                annees.push("{{item.annee}}");
            {% endfor %}

            Highcharts.chart('market-chart-arrete', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: ""
			},
			xAxis: {
				categories: annees,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: "Nombre arrêtés"
				}
			},
			tooltip: {
				valueSuffix: ''
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: "Nombre arrêtés signés",
					color: '#2caffe',
					data: dataQteArrete
				}
			]
		});
        }
    </script>
{% endblock %}