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

{% block title %}{{parent()}}-Contrats miniers-Statistique{% 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="#">Contrats</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 contrats</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 contrats
              </h1>
              <p class="text-muted-mine mb-0" style="font-size: 0.9rem">
                Statistiques des contrats publiés
              </p>
            </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">Contrats par type</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des contrats par type de contrat
						</p>
						<div>
							<div id="chart-maladie"></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">Contrats par commodité</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des contrats par commodité
						</p>
						<div>
							<div id="commodite"></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Contrats par investisseur</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des contrats par investisseur
						</p>
						<div>
							<div id="pays"></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">Contrats de base par année</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
						 	Nombre des contrats de base par année de signature
						</p>
						<div>
							<div id="pays1"></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Avenants et annexes par année </h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre d'avenants et annexes par année de signature
						</p>
						<div class="table-responsive">
							<div id="pays12"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="mb-5"></div>
        </div>
    </main>   
{% endblock %}

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

    <script>
        var typesContrantName = [];
		var typesContrantNbre = [];
        var paysName          = [];
		var paysNbre          = [];
        var commoditeName     = [];
		var commoditeNbre     = [];
		var avenatAnnee       = [];
		var avenatNbre        = [];
		var contratAnnee      = [];
		var contratNbre       = [];

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

		{% for item in nbreAvenant %}
            avenatAnnee.push("{{item.annee}}");
            avenatNbre.push(parseInt("{{item.nbre}}"));
        {% endfor %}

        {% for item in pays %}
            paysName.push("{{item.pays}}");
            paysNbre.push(parseInt("{{item.nbre}}"));
        {% endfor %}

        {% for item in commodites %}
            commoditeName.push("{{item.commodite}}");
            commoditeNbre.push(parseInt("{{item.nbre}}"));
        {% endfor %}

		{% for item in minAnnee..maxAnnee %}
			{% set total = 0 %}

			contratAnnee.push("{{item}}");
			
			{% for item1 in nbreContratPrincip %}
				{% if item == item1.annee %}
					{% set total = total + item1.nbre %}
				{% endif %}
			{% endfor %}

			contratNbre.push(parseInt('{{total}}'));
		{% endfor %}

		Highcharts.chart('chart-maladie', {
			chart: {
				type: 'pie',
				backgroundColor: '#f6f7fa',
				zooming: {
				type: 'xy'
				},
				panning: {
				enabled: true,
				type: 'xy'
				},
				panKey: 'shift'
			},
			title: {
				text: "Nombre des contrats par type de contrat"
			},
			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 contrats',
					colorByPoint: true,
					data: typesContrantNbre
				}
			]
		});

		Highcharts.chart('pays12', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre d'avenants et annexes par année de signature"
			},
			xAxis: {
				categories: avenatAnnee,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: "Nombre d'avenants et annexes"
				}
			},
			tooltip: {
				valueSuffix: ' '
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: "Nombre d'avenants et annexes",
					color: '#2caffe',
					data: avenatNbre
				}
			]
		});

		Highcharts.chart('pays1', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des contrats de base par année de signature"
			},
			xAxis: {
				categories: contratAnnee,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: "Nombre des contrats de base"
				}
			},
			tooltip: {
				valueSuffix: ' '
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: "Nombre des contrats de base",
					color: '#2caffe',
					data: contratNbre
				}
			]
		});

		Highcharts.chart('commodite', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des contrats par commodité"
			},
			xAxis: {
				categories: commoditeName,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: "Nombre des contrats"
				}
			},
			tooltip: {
				valueSuffix: ' '
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: "Nombre des contrats",
					color: '#2caffe',
					data: commoditeNbre
				}
			]
		});

		Highcharts.chart('pays', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des contrats par investisseur"
			},
			xAxis: {
				categories: paysName,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: "Nombre des contrats"
				}
			},
			tooltip: {
				valueSuffix: ' '
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: "Nombre des contrats",
					color: '#2caffe',
					data: paysNbre
				}
			]
		});
    </script>
{% endblock %}