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

{% block title %}{{parent()}}-Accueil{% endblock %}

{% block stylesheets %}
	{{parent()}}
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

{% endblock %}

{% block content %}
	{% set mois = {
            '01': 'janvier',
            '02': 'février',
            '03': 'mars',
            '04': 'avril',
            '05': 'mais',
            '06': 'juin',
            '07': 'juillet',
            '08': 'août',
            '09': 'septembre',
            '10': 'octobre',
            '11': 'novembre',
            '12': 'décembre'
        }
    %}

	<!-- Content Wrapper. Contains page content -->
	<section class="hero-section">
		<img src="{{asset('images/hero-mine.jpg')}}" alt="Mine à ciel ouvert en RDC" class="hero-bg" />
		<div class="hero-overlay"></div>

		<div class="container content position-relative pb-5 mb-3" style='z-index: 10;'>
			<div class="mb-5" style='max-width: 700px;'>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-2">
				DRC MINING DATA WAREHOUSE
				</p>
				<h1 class="display-3 fw-bold lh-sm mb-3">
				Entrepôt de données minières
				<span class="text-gradient-copper">de la RDC</span>
				</h1>
				<p class="text-muted-mine fs-5" style='max-width: 520px;'>
				Entrepôt de données du secteur minier de la République Démocratique du Congo.
				</p>
			</div>

			<div class="row g-3 g-md-4">
				<div class="col-6 col-md-3">
					<div class="stat-item">
						{% set contratTotal = totalContrant.nbre  %}
						<p class="stat-value fs-3 mb-0">{{contratTotal - 3}}+</p>
						<p class="text-muted-mine small mb-0 mt-1">Contrats miniers</p>
					</div>
				</div>
				<div class="col-6 col-md-3">
					{% set totalPermis  = 0 %}

					{% for item in permis %}
						{% set totalPermis  = totalPermis + item.nbre %}
					{% endfor %}
					<div class="stat-item">
						<p class="stat-value fs-3 mb-0">{{totalPermis - 3}}+</p>
						<p class="text-muted-mine small mb-0 mt-1">Titres miniers</p>
					</div>
				</div>
				<div class="col-6 col-md-3">
					<div class="stat-item">
						<p class="stat-value fs-3 mb-0">{{nbreOperateurEnProd - 10}}+</p>
						<p class="text-muted-mine small mb-0 mt-1">Opérateurs en production</p>
					</div>
				</div>
				<div class="col-6 col-md-3">
					<div class="stat-item">
						<p class="stat-value fs-3 mb-0">1 700+</p>
						<p class="text-muted-mine small mb-0 mt-1">Opérateurs miniers et des carrières</p>
					</div>
				</div>
			</div>

			<div class="text-center mt-20">
				<a href="#statistique" class="text-muted-mine">
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
						<path d="M12 5v14M19 12l-7 7-7-7" />
					</svg>
				</a>
			</div>
		</div>
	</section>

	<section id="statistique" class="py-5 bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Statistiques</p>
				<h2 class="fw-bold mb-2">Production, vente locale & exportations</h2>
				<p class="text-muted-mine mb-0" style='max-width: 500px'>
					Évolution de la production, des ventes locales et des exportations en {{anneeStat|date('Y')}}.
				</p>
				</div>
				<button type="button" class="filter-trigger-btn btn-flitre-stat d-none d-md-inline-flex mt-1 mt-md-0">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
					<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
					</svg>
					Filtrer
				</button>
				<button type="button" class="filter-trigger-btn btn-flitre-stat d-inline-flex d-md-none w-100 justify-content-center">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
					<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
					</svg>
					Filtrer
				</button>
			</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">{{commoditeStat ? commoditeStat.nom : ' '}}</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
						{{commoditeStat ? commoditeStat.symboleChimique : ' '}} (Filière: {{commoditeStat ? commoditeStat.filiere.nom : ' '}})
						</p>
						<div class="table-responsive">
							<div id="container" style='background:#f6f7fa;'></div>
						</div>
					</div>
					</div>

					<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">{{commoditeStat1 ? commoditeStat1.nom : ' '}}</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							{{commoditeStat1 ? commoditeStat1.symboleChimique : ' '}} (Filière: {{commoditeStat1 ? commoditeStat1.filiere.nom : ' '}})
						</p>
						<div class="table-responsive">
							<div id="container2" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
			<div class="mb-5"></div>
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2" id="evolution">
				<div>
					<h2 class="fw-bold mb-2">Production & exportations</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Évolution de la production et des exportations au cours des dernières années.
					</p>
				</div>
				<button type="button" class="filter-trigger-btn btn-flitre-prod d-none d-md-inline-flex mt-1 mt-md-0">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
					<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
					</svg>
					Filtrer
				</button>
				<button type="button" class="filter-trigger-btn btn-flitre-prod btn-flitre-prod d-inline-flex d-md-none w-100 justify-content-center">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
					<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
					</svg>
					Filtrer
				</button>
			</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">Production</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
						{{comoditeProd ? comoditeProd.nom : ' '}} ({{comoditeProd ? comoditeProd.symboleChimique : ' '}})
						</p>
						<div class="table-responsive">
							<div id="container3" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Exportation</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							{{comoditeProd ? comoditeProd.nom : ' '}} ({{comoditeProd ? comoditeProd.symboleChimique : ' '}})
						</p>
						<div class="table-responsive">
							<div id="container4" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
		</div>
  	</section>

	<section class="py-5 bg-charcoal">
      <div class="container py-4">
        <div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
          <div>
            <p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Contrats</p>
            <h2 class="fw-bold mb-2">Contrats miniers</h2>
            <p class="text-muted-mine mb-0" style='max-width: 560'>
              Suivi des contrats miniers en République Démocratique du Congo.
            </p>
          </div>
        </div>
        <div class="mb-4"></div>

        <div class="contracts-summary-row mb-4">
          	<div class="contracts-summary-card">
				<div class="contracts-summary-icon" style='background: #3b82f618;'>
					<a href="{{path('app_emine_cadre_juridique_contrat_principal_contrat_base', {sp: 'fc'})}}">
						<span>📄</span>
					</a>
				</div>
				<div class="contracts-summary-value" style='color:#3b82f6;'>{{totalContrant.nbre + totalContratsRel.nbre}}</div>
				<div class="contracts-summary-label">Nombre total des contrats</div>
			</div>

			<div class="contracts-summary-card">
				<div class="contracts-summary-icon" style='background: #3b82f618;'>
					<a href="{{path('app_emine_cadre_juridique_contrat_principal_contrat_base', {sp: 'fc'})}}">
						<span>📄</span>
					</a>
				</div>
				<div class="contracts-summary-value" style='color:#3b82f6;'>{{totalContrant.nbre}}</div>
				<div class="contracts-summary-label">Nombre total des contrats de base</div>
			</div>

			<div class="contracts-summary-card">
				<div class="contracts-summary-icon" style='background: #3b82f618;'>
					<a href="{{path('app_emine_cadre_juridique_contrat_principal_index', {sp: 'tc'})}}">
						<span>📄</span>
					</a>
				</div>
				<div class="contracts-summary-value" style='color:#3b82f6;'>{{totalContratsRel.nbre}}</div>
				<div class="contracts-summary-label">Nombre total des documents relatifs</div>
			</div>

			<div class="contracts-summary-card">
				<div class="contracts-summary-icon" style='background: #3b82f618;'>
					<a href='#'><span>📄</span></a>
				</div>
				<div class="contracts-summary-value" style='color:#3b82f6;'>{{nbreContratAnne.nbre}}</div>
				<div class="contracts-summary-label">Cette année</div>
			</div>
        </div>

        <div class="dashboard-card">
          <div class="dashboard-card-header">
            <div class="d-flex align-items-center gap-3">
              <div class="dashboard-card-icon" style='background: linear-gradient(135deg, #17418a, #17418acc);'>
                📋
              </div>
              <div>
                <h5 class="fw-bold mb-0" style='fontFamily: var(--font-display);'>Répartition des contrats</h5>
                <small class="text-muted-mine">Vue d'ensemble par type de contrat</small>
              </div>
            </div>
          </div>

          <div class="dashboard-table-wrap">
				<div id="container4123k" style='background:#f6f7fa;'></div>
          </div>
        </div>
      </div>
    </section>

	<section class="py-5 bg-charcoal" id="operateurs">
      <div class="container py-4">
        <div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
			<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Opérateurs</p>
				<h2 class="fw-bold mb-2">Opérateurs miniers et des carrières</h2>
				<p class="text-muted-mine mb-0" style='max-width: 560'>
				Registre et suivi des opérateurs miniers et des carrières valides en {{anneeOperateur}} en République Démocratique du Congo.
				</p>
			</div>
		  	<button type="button" class="filter-trigger-btn btn-flitre-operateur d-none d-md-inline-flex mt-1 mt-md-0">
				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
				<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
				</svg>
				Filtrer
			</button>
			<button type="button" class="filter-trigger-btn btn-flitre-operateur d-inline-flex d-md-none w-100 justify-content-center">
				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
				<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
				</svg>
				Filtrer
			</button>
        </div>
        <div class="mb-4"></div>

        <div class="contracts-summary-row mb-4">
			{% for item in nbreOperateur %}
				{% if item.secteur == 1 %}
					<div class="contracts-summary-card">
						<div class="contracts-summary-icon" style='background: #3b82f618;'>
							<a href="{{path('app_emine_operateur_operateur_industriel', {annee: anneeOperateur})}}">
								<span>🏗️</span>
							</a>
						</div>
						<div class="contracts-summary-value" style='color:#3b82f6;'>{{item.nbre}}</div>
						<div class="contracts-summary-label">Industriel</div>
					</div>
				{% endif %}

				{% if item.secteur == 4 %}
					<div class="contracts-summary-card">
						<div class="contracts-summary-icon" style='background: #3b82f618;'>
							<a href="{{path('app_emine_operateur_operateur_semi_industriel', {annee: anneeOperateur})}}">
								<span>⚙️</span>
							</a>
						</div>
						<div class="contracts-summary-value" style='color:#3b82f6;'>{{item.nbre}}</div>
						<div class="contracts-summary-label">Semi-industriel</div>
					</div>
				{% endif %}
				
				{% if item.secteur == 3 %}
					<div class="contracts-summary-card">
						<div class="contracts-summary-icon" style='background: #3b82f618;'>
							<a href="{{path('app_emine_operateur_operateur_service', {annee: anneeOperateur})}}">
								<span>🔧</span>
							</a>
						</div>
						<div class="contracts-summary-value" style='color:#3b82f6;'>{{item.nbre}}</div>
						<div class="contracts-summary-label">Services</div>
					</div>
				{% endif %}
				
				{% if item.secteur == 2 %}
					<div class="contracts-summary-card">
						<div class="contracts-summary-icon" style='background: #3b82f618;'>
							<a href='{{path('app_emine_operateur_operateur_artisanal' ,{annee: anneeOperateur})}}'><span>⛏️</span></a>
						</div>
						<div class="contracts-summary-value" style='color:#3b82f6;'>{{item.nbre}}</div>
						<div class="contracts-summary-label">Artisanal</div>
					</div>
				{% endif %}
			{% endfor %}
        </div>

        <div class="dashboard-card">
          <div class="dashboard-card-header">
            <div class="d-flex align-items-center gap-3">
              <div class="dashboard-card-icon" style='background: linear-gradient(135deg, #17418a, #17418acc);'>
                🏭
              </div>
              <div>
                <h5 class="fw-bold mb-0" style='fontFamily: var(--font-display);'>Répartition par catégorie</h5>
                <small class="text-muted-mine">Nombre d'opérateurs par catégorie d'activité</small>
              </div>
            </div>
          </div>

          <div class="dashboard-table-wrap">
            <table class="dashboard-table">
              <thead>
                <tr>
                  <th>Catégorie</th>
                  <th class="text-center">Actifs</th>
                  <th class="text-center">En recherche</th>
                  <th class="text-center">En production</th>
                  <th class="text-center">En cessation d'activité</th>
				  <th class="text-center">Action</th>
                </tr>
              </thead>
              <tbody>

				{% set totalActif      = 0 %}
				{% set totalRecherche  = 0 %}
				{% set totalProduction = 0 %}
				{% set totalessation   = 0 %}
				{% set nombre          = 0 %}

                {% for row in nbreOperateurCategorie %}
                  <tr class="animate-fade-in-up">
                    <td class="fw-medium">{{row.nom}}</td>
                    <td class="text-center">
                      <span class="dashboard-badge" style='background: #3b82f622; color: #3b82f6; border-color:#3b82f644'>
                        <span style='display: inline-block; width: 8; height: 8; border-radius: 50%; background: #3b82f6; margin-right: 6;box-shadow: 0 0 6px #3b82f666;'/>
                      </span>
					  {% set nombre = operateur.getNbreByStatut(row.id, 'Actif', nbreOperateurStatut) %}
					  {% set totalActif      = totalActif + nombre  %}
					  {{nombre}}
                    </td>
                    <td class="text-center">
                      <span class="dashboard-badge" style='background:#f59e0b22; color:#f59e0b; border-color:#f59e0b44;'>
                        {% set nombre = operateur.getNbreByStatut(row.id, 'En recherche', nbreOperateurStatut) %}
						{% set totalRecherche  = totalRecherche + nombre  %}
						{{nombre}}
                      </span>
                    </td>
                    <td class="text-center">
                      <span class="dashboard-badge dashboard-badge-muted">
					  	{% set nombre = operateur.getNbreByStatut(row.id, 'En production', nbreOperateurStatut) %}
						{% set totalProduction  = totalProduction + nombre  %}
						{{nombre}}
					  </span>
                    </td>
                    <td class="text-center">
                      <span class="dashboard-badge dashboard-badge-danger">
					  	{% set nombre = operateur.getNbreByStatut(row.id, "En cessation d'activité", nbreOperateurStatut) %}
						{% set totalessation  = totalessation + nombre  %}
						{{nombre}}
					  </span>
                    </td>
					<td class="text-center">
                      <a
					  	href="{{path('app_emine_operateur_operateur_cat_valide', {id: row.id, annee: dateAnnee|date('Y')})}}"
                        class="btn btn-sm"
                        style="background: #1a4691;color: #fff;border: none;border-radius: 6;padding: 4px 14px;font-size:0.78rem;font-weight: 600;cursor: pointer;"
                    	>
                        Afficher
                      </a>
                  </tr>
                {% endfor %}

				<tr class="animate-fade-in-up">
                    <td class="fw-medium">Mandataires en mines</td>
                    <td class="text-center">
                      <span class="dashboard-badge" style='background: #3b82f622; color: #3b82f6; border-color:#3b82f644'>
                        <span style='display: inline-block; width: 8; height: 8; border-radius: 50%; background: #3b82f6; margin-right: 6;box-shadow: 0 0 6px #3b82f666;'/>
                      </span>
					  {{nbreMandataire.nbre}}
                    </td>
                    <td class="text-center">
                      <span class="dashboard-badge" style='background:#f59e0b22; color:#f59e0b; border-color:#f59e0b44;'>
                        0
                      </span>
                    </td>
                    <td class="text-center">
                      <span class="dashboard-badge dashboard-badge-muted">
					  	0
					  </span>
                    </td>
                    <td class="text-center">
                      <span class="dashboard-badge dashboard-badge-danger">
					  	0
					  </span>
                    </td>
					<td class="text-center">
                      <a
					  	href="{{path('app_emine_operateur_mandataire_valide', {page: 1, annee: dateAnnee|date('Y')})}}"
                        class="btn btn-sm"
                        style="background: #1a4691;color: #fff;border: none;border-radius: 6;padding: 4px 14px;font-size:0.78rem;font-weight: 600;cursor: pointer;"
                    	>
                        Afficher
                      </a>
                  </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td class="fw-bold">Total</td>
                  <td class="text-center fw-bold" style='color: #3b82f6;'>{{totalActif + nbreMandataire.nbre}}</td>
                  <td class="text-center fw-bold" style='color:#f59e0b;'>{{totalRecherche}}</td>
                  <td class="text-center fw-bold text-muted-mine">{{totalProduction}}</td>
                  <td class="text-center fw-bold text-danger">{{totalessation}}</td>
				  <td class="text-center fw-bold text-danger"></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>

		<div class="contracts-summary-row mt-4">
			<div class="contracts-summary-card">
				<div class="contracts-summary-icon" style='background: #3b82f618;'>
					<a href="{{path('app_emine_operateur_operateur_public', {annee: anneeOperateur})}}">
						<span>🏭</span>
					</a>
				</div>
				<div class="contracts-summary-value" style='color:#3b82f6;'>{{nbreOperateurPublic[0].nbre}}</div>
				<div class="contracts-summary-label">Entreprises publiques</div>
			</div>

			<div class="contracts-summary-card">
				<div class="contracts-summary-icon" style='background: #3b82f618;'>
					<a href="{{path('app_emine_operateur_operateur_porte', {annee: anneeOperateur})}}">
						<span>🏭</span>
					</a>
				</div>
				<div class="contracts-summary-value" style='color:#3b82f6;'>{{nbreOperateurPorte[0].nbre}}</div>
				<div class="contracts-summary-label">Entreprises du portefeuille</div>
			</div>

			<div class="contracts-summary-card">
				<div class="contracts-summary-icon" style='background: #3b82f618;'>
					<a href="{{path('app_emine_operateur_operateur_mixte', {annee: anneeOperateur})}}">
						<span>🏭</span>
					</a>
				</div>
				<div class="contracts-summary-value" style='color:#3b82f6;'>{{nbreOperateurMixte[0].nbre}}</div>
				<div class="contracts-summary-label">Entreprises mixtes</div>
			</div>

			<div class="contracts-summary-card">
				<div class="contracts-summary-icon" style='background: #3b82f618;'>
					<a href="{{path('app_emine_operateur_operateur_itie', {annee: anneeOperateur})}}">
						<span>🏭</span>
					</a>
				</div>
				<div class="contracts-summary-value" style='color:#3b82f6;'>{{nbreOperateurItie.nbre}}</div>
				<div class="contracts-summary-label">Entreprises périmètre ITIE</div>
			</div>
        </div>
      </div>
    </section>

	<section class="py-5 bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Projets</p>
				<h2 class="fw-bold mb-2">Projets miniers & des carrières</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Les projets miniers industriels en République Démocratique du Congo.
					</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">Carthographie</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							La carthographie des projets miniers industriels en RDC, avec la localisation des sites d'exploitation et des zones d'exploration.
						</p>
						<div id="map"></div>
					</div>
				</div>

				<div class="col-lg-12">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Projets par année & catégorie</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets miniers et des carrières par année et catégorie
						</p>
						<div class="table-responsive">
							<div id="container1112" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
		</div>
  	</section>
  
  <section class="py-5 bg-charcoal">
    <div class="container py-4">
      <div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
        <div>
          <p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Titres</p>
          <h2 class="fw-bold mb-2">Titres miniers & des carrières</h2>
          <p class="text-muted-mine mb-0" style='max-width: 560;'>
            Suivi des titres miniers et des carrières en RDC.
          </p>
        </div>
        
      </div>
      <div class="mb-5"></div>
      <div class="row g-4">
        <div class="col-lg-12">
			<div class="dashboard-card h-100">
				<div class="dashboard-card-header">
					<div class="d-flex align-items-center gap-3 mb-3">
						<div class="dashboard-card-icon" style='background: linear-gradient(135deg, #17418a, #17418acc);'>
							⛏️
						</div>
						<div>
							<h5 class="fw-bold mb-0" style='fontFamily: var(--font-display);'>Titres des carrières</h5>
							<small class="text-muted-mine">Permis et autorisations des carrières</small>
						</div>
					</div>

					<div class="row g-2">
						<div class="col-6 col-sm-3">
							<div class="card border-0 text-center h-100" style='background: rgba(255,255,255,0.04); border-radius: 12;'>
								<div class="card-body py-3 px-2">
									<div class="mb-2" style='font-size: 1.5rem;'>✅</div>
									<div class="fw-bold fs-4" style='color:#22c55e;'>{{titre.getNbreByStatutCarriere('Actif', permis)}}</div>
									<div class="text-muted-mine small mt-1">Actif</div>
								</div>
							</div>
						</div>

						<div class="col-6 col-sm-3">
							<div class="card border-0 text-center h-100" style='background: rgba(255,255,255,0.04); border-radius: 12;'>
								<div class="card-body py-3 px-2">
									<div class="mb-2" style='font-size: 1.5rem;'>📋</div>
									<div class="fw-bold fs-4" style='color:#17418a;'>{{titre.getNbreByStatutCarriere('Actif-En Convention', permis)}}</div>
									<div class="text-muted-mine small mt-1">Actif en convention</div>
								</div>
							</div>
						</div>
						
						<div class="col-6 col-sm-3">
							<div class="card border-0 text-center h-100" style='background: rgba(255,255,255,0.04); border-radius: 12;'>
								<div class="card-body py-3 px-2">
									<div class="mb-2" style='font-size: 1.5rem;'>⏳</div>
									<div class="fw-bold fs-4" style='color:#17418a;'>{{titre.getNbreByStatutCarriere('Renouvellement Octroi', permis)}}</div>
									<div class="text-muted-mine small mt-1">Renouvellement octroi</div>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-3">
							<div class="card border-0 text-center h-100" style='background: rgba(255,255,255,0.04); border-radius: 12;'>
								<div class="card-body py-3 px-2">
									<div class="mb-2" style='font-size: 1.5rem;'>✅</div>
									<div class="fw-bold fs-4" style='color:#22c55e;'>{{titre.getNbreByStatutCarriere('Actif-En Renouvellement', permis)}}</div>
									<div class="text-muted-mine small mt-1">Actif en renouvellement</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="dashboard-table-wrap">
					<table class="dashboard-table">
					<thead>
						<tr>
						<th>Type de titre</th>
						<th class="text-center">Actif</th>
						<th class="text-center">Actif en convention</th>
						<th class="text-center">Renouvellement octroi</th>
						<th class="text-center">Actif en renouvellement</th>
						<th class="text-center">Autre</th>
						</tr>
					</thead>
					<tbody>
						{% set totalActif           = 0 %}
						{% set totalActifConve      = 0 %}
						{% set totalRenouvellement  = 0 %}
						{% set totalRenouvellement1 = 0 %}
						{% set totalAutre           = 0 %}

						<tr class="animate-fade-in-up">
							<td class="fw-medium">AECP</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success">
									{% set nombre     = titre.getNbreByStatutEtType('AECP', 'Actif', permis) %}
									{% set totalActif = totalActif +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #17418a22; color: #17418a; border-color: #17418a44;'>
									{% set nombre          = titre.getNbreByStatutEtType('AECP', 'Actif-En Convention', permis) %}
									{% set totalActifConve = totalActifConve +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #17418a22; color: #17418a; border-color: #17418a44;'>
									{% set nombre              = titre.getNbreByStatutEtType('AECP', 'Renouvellement Octroi', permis) %}
									{% set totalRenouvellement = totalRenouvellement +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success">
									{% set nombre              = titre.getNbreByStatutEtType('AECP', 'Actif-En Renouvellement', permis) %}
									{% set totalRenouvellement1 = totalRenouvellement1 +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-muted">
									{% set nombre     = titre.getNbreByStatutEtTypeAutre('AECP', permis) %}
									{% set totalAutre = totalAutre +  nombre %}

									{{nombre}}
								</span>
							</td>
						</tr>

						<tr class="animate-fade-in-up">
							<td class="fw-medium">ARCP</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success" >
									{% set nombre     = titre.getNbreByStatutEtType('ARCP', 'Actif', permis) %}
									{% set totalActif = totalActif +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #17418a22; color: #17418a; border-color: #17418a44;'>
									{% set nombre          = titre.getNbreByStatutEtType('ARCP', 'Actif-En Convention', permis) %}
									{% set totalActifConve = totalActifConve +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #17418a22; color: #17418a; border-color: #17418a44;'>
									{% set nombre          = titre.getNbreByStatutEtType('ARCP', 'Renouvellement Octroi', permis) %}
									{% set totalRenouvellement = totalRenouvellement +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success">
									{% set nombre              = titre.getNbreByStatutEtType('ARCP', 'Actif-En Renouvellement', permis) %}
									{% set totalRenouvellement1 = totalRenouvellement1 +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-muted">
									{% set nombre     = titre.getNbreByStatutEtTypeAutre('ARCP', permis) %}
									{% set totalAutre = totalAutre +  nombre %}

									{{nombre}}
								</span>
							</td>
						</tr>

						<tr class="animate-fade-in-up">
							<td class="fw-medium">C.U.P</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success" >
									{% set nombre     = titre.getNbreByStatutEtType('C.U.P', 'Actif', permis) %}
									{% set totalActif = totalActif +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #17418a22; color: #17418a; border-color: #17418a44;'>
									{% set nombre          = titre.getNbreByStatutEtType('C.U.P', 'Actif-En Convention', permis) %}
									{% set totalActifConve = totalActifConve +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #17418a22; color: #17418a; border-color: #17418a44;'>
									{% set nombre              = titre.getNbreByStatutEtType('C.U.P', 'Renouvellement Octroi', permis) %}
									{% set totalRenouvellement = totalRenouvellement +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success">
									{% set nombre              = titre.getNbreByStatutEtType('C.U.P', 'Actif-En Renouvellement', permis) %}
									{% set totalRenouvellement1 = totalRenouvellement1 +  nombre %}

									{{nombre}}
								</span>
							</td>

							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-muted">
									{% set nombre     = titre.getNbreByStatutEtTypeAutre('C.U.P', permis) %}
									{% set totalAutre = totalAutre +  nombre %}

									{{nombre}}
								</span>
							</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
						<td class="fw-bold">Total</td>
						<td class="text-center fw-bold text-success">{{totalActif}}</td>
						<td class="text-center fw-bold" style='color: #17418a;'>{{totalActifConve}}</td>
						<td class="text-center fw-bold" style='color: #17418a;'>{{totalRenouvellement}}</td>
						<td class="text-center fw-bold text-success">{{totalRenouvellement1}}</td>
						<td class="text-center fw-bold text-muted-mine">{{totalAutre}}</td>
						</tr>
					</tfoot>
					</table>
				</div>
			</div>
        </div>
		
        <div class="col-lg-12">
			<div class="dashboard-card h-100">
				<div class="dashboard-card-header">
					<div class="d-flex align-items-center gap-3 mb-3">
						<div class="dashboard-card-icon" style='background: linear-gradient(135deg, #d97706, #d97706cc);'>
							🏔️
						</div>
						<div>
							<h5 class="fw-bold mb-0" style='fontFamily: var(--font-display);'>Titres miniers</h5>
							<small class="text-muted-mine">Permis de recherches et d'exploitation</small>
						</div>
					</div>

					<div class="row g-2">
						<div class="col-6 col-sm-3">
							<div class="card border-0 text-center h-100" style='background: rgba(255,255,255,0.04); border-radius: 12;'>
								<div class="card-body py-3 px-2">
									<div class="mb-2" style='font-size: 1.5rem;'>✅</div>
									<div class="fw-bold fs-4" style='color:#22c55e;'>{{titre.getNbreByStatutMine('Actif', permis)}}</div>
									<div class="text-muted-mine small mt-1">Actif</div>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-3">
							<div class="card border-0 text-center h-100" style='background: rgba(255,255,255,0.04); border-radius: 12;'>
								<div class="card-body py-3 px-2">
									<div class="mb-2" style='font-size: 1.5rem;'>📋</div>
									<div class="fw-bold fs-4" style='color:#d97706;'>{{titre.getNbreByStatutMine('Actif-En Convention', permis)}}</div>
									<div class="text-muted-mine small mt-1">Actif en convention</div>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-3">
							<div class="card border-0 text-center h-100" style='background: rgba(255,255,255,0.04); border-radius: 12;'>
								<div class="card-body py-3 px-2">
									<div class="mb-2" style='font-size: 1.5rem;'>⏳</div>
									<div class="fw-bold fs-4" style='color:#d97706;'>{{titre.getNbreByStatutMine('Renouvellement Octroi', permis)}}</div>
									<div class="text-muted-mine small mt-1">Renouvellement octroi</div>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-3">
							<div class="card border-0 text-center h-100" style='background: rgba(255,255,255,0.04); border-radius: 12;'>
								<div class="card-body py-3 px-2">
									<div class="mb-2" style='font-size: 1.5rem;'>✅</div>
									<div class="fw-bold fs-4" style='color:#22c55e;'>{{titre.getNbreByStatutMine('Actif-En Renouvellement', permis)}}</div>
									<div class="text-muted-mine small mt-1">Actif en renouvellement</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="dashboard-table-wrap">
					<table class="dashboard-table">
					<thead>
						<tr>
						<th>Type de titre</th>
						<th class="text-center">Actif</th>
						<th class="text-center">Actif en convention</th>
						<th class="text-center">Renouvellement octroi</th>
						<th class="text-center">Actif en renouvellement</th>
						<th class="text-center">Autre</th>
						</tr>
					</thead>
					<tbody>
						{% set totalActif           = 0 %}
						{% set totalActifConve      = 0 %}
						{% set totalRenouvellement  = 0 %}
						{% set totalRenouvellement1 = 0 %}
						{% set totalAutre           = 0 %}

						<tr class="animate-fade-in-up">
							<td class="fw-medium">PE</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success">
									{% set nombre     = titre.getNbreByStatutEtType('PE', 'Actif', permis) %}
									{% set totalActif = totalActif +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #d9770622; color: #d97706; border-color: #d9770644;'>
									{% set nombre          = titre.getNbreByStatutEtType('PE', 'Actif-En Convention', permis) %}
									{% set totalActifConve = totalActifConve +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #d9770622; color: #d97706; border-color: #d9770644;'>
									{% set nombre              = titre.getNbreByStatutEtType('PE', 'Renouvellement Octroi', permis) %}
									{% set totalRenouvellement = totalRenouvellement +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success">
									{% set nombre              = titre.getNbreByStatutEtType('PE', 'Actif-En Renouvellement', permis) %}
									{% set totalRenouvellement1 = totalRenouvellement1 +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-muted">
									{% set nombre     = titre.getNbreByStatutEtTypeAutre('PE', permis) %}
									{% set totalAutre = totalAutre +  nombre %}

									{{nombre}}
								</span>
							</td>
						</tr>

						<tr class="animate-fade-in-up">
							<td class="fw-medium">PR</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success" >
									{% set nombre     = titre.getNbreByStatutEtType('PR', 'Actif', permis) %}
									{% set totalActif = totalActif +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #d9770622; color: #d97706; border-color: #d9770644;'>
									{% set nombre          = titre.getNbreByStatutEtType('PR', 'Actif-En Convention', permis) %}
									{% set totalActifConve = totalActifConve +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #d9770622; color: #d97706; border-color: #d9770644;'>
									{% set nombre          = titre.getNbreByStatutEtType('PR', 'Renouvellement Octroi', permis) %}
									{% set totalRenouvellement = totalRenouvellement +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success">
									{% set nombre              = titre.getNbreByStatutEtType('PR', 'Actif-En Renouvellement', permis) %}
									{% set totalRenouvellement1 = totalRenouvellement1 +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-muted">
									{% set nombre     = titre.getNbreByStatutEtTypeAutre('PR', permis) %}
									{% set totalAutre = totalAutre +  nombre %}

									{{nombre}}
								</span>
							</td>
						</tr>

						<tr class="animate-fade-in-up">
							<td class="fw-medium">PER</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success" >
									{% set nombre     = titre.getNbreByStatutEtType('PER', 'Actif', permis) %}
									{% set totalActif = totalActif +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #d9770622; color: #d97706; border-color: #d9770644;'>
									{% set nombre          = titre.getNbreByStatutEtType('PER', 'Actif-En Convention', permis) %}
									{% set totalActifConve = totalActifConve +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #d9770622; color: #d97706; border-color: #d9770644;'>
									{% set nombre              = titre.getNbreByStatutEtType('PER', 'Renouvellement Octroi', permis) %}
									{% set totalRenouvellement = totalRenouvellement +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success">
									{% set nombre              = titre.getNbreByStatutEtType('PER', 'Actif-En Renouvellement', permis) %}
									{% set totalRenouvellement1 = totalRenouvellement1 +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-muted">
									{% set nombre     = titre.getNbreByStatutEtTypeAutre('PER', permis) %}
									{% set totalAutre = totalAutre +  nombre %}

									{{nombre}}
								</span>
							</td>
						</tr>

						<tr class="animate-fade-in-up">
							<td class="fw-medium">PEPM</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success" >
									{% set nombre     = titre.getNbreByStatutEtType('PEPM', 'Actif', permis) %}
									{% set totalActif = totalActif +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #d9770622; color: #d97706; border-color: #d9770644;'>
									{% set nombre          = titre.getNbreByStatutEtType('PEPM', 'Actif-En Convention', permis) %}
									{% set totalActifConve = totalActifConve +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge" style='background: #d9770622; color: #d97706; border-color: #d9770644;'>
									{% set nombre              = titre.getNbreByStatutEtType('PEPM', 'Renouvellement Octroi', permis) %}
									{% set totalRenouvellement = totalRenouvellement +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-success">
									{% set nombre              = titre.getNbreByStatutEtType('PEPM', 'Actif-En Renouvellement', permis) %}
									{% set totalRenouvellement1 = totalRenouvellement1 +  nombre %}

									{{nombre}}
								</span>
							</td>
							<td class="text-center">
								<span class="dashboard-badge dashboard-badge-muted">
									{% set nombre     = titre.getNbreByStatutEtTypeAutre('PEPM', permis) %}
									{% set totalAutre = totalAutre +  nombre %}

									{{nombre}}
								</span>
							</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
						<td class="fw-bold">Total</td>
						<td class="text-center fw-bold text-success">{{totalActif}}</td>
						<td class="text-center fw-bold" style='color: #d97706;'>{{totalActifConve}}</td>
						<td class="text-center fw-bold" style='color: #d97706;'>{{totalRenouvellement}}</td>
						<td class="text-center fw-bold text-success">{{totalRenouvellement1}}</td>
						<td class="text-center fw-bold text-muted-mine">{{totalAutre}}</td>
						</tr>
					</tfoot>
					</table>
				</div>
			</div>
        </div>
      </div>
    </div>
  </section>


	<section class="py-5 bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Dotation de 0,3%</p>
				<h2 class="fw-bold mb-2">Projets communautaires</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Analyses sur la réalisation des projets communautaires sur la Dotation de 0,3% de chiffre d'affaires des opérateurs miniers en RDC.
					</p>
				</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">Projets par type d'infrastructures</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombres des projets réalisés par type d'infrastructures
						</p>
						<div class="table-responsive">
							<div id="container11" style='background:#f6f7fa;'></div>
						</div>
					</div>
					</div>

					<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Projets par stade</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets par stades des projets
						</p>
						<div class="table-responsive">
							<div id="container21" 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">Projets par province</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets par province
						</p>
						<div class="table-responsive">
							<div id="container13" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Projets par année</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets par année et stade
						</p>
						<div class="table-responsive">
							<div id="container14" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
		</div>
  	</section>

	<section class="bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Cahiers des charges</p>
				<h2 class="fw-bold mb-2">Projets communautaires</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Analyses sur la réalisation des projets communautaires des cahiers des charges des opérateurs miniers en RDC.
					</p>
				</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">Projets par type d'infrastructures</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombres des projets réalisés par type d'infrastructures
						</p>
						<div class="table-responsive">
							<div id="container112" style='background:#f6f7fa;'></div>
						</div>
					</div>
					</div>

					<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Projets par stade</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets par stades des projets
						</p>
						<div class="table-responsive">
							<div id="container212" 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">Projets par province</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets par province
						</p>
						<div class="table-responsive">
							<div id="container132" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Projets par année & stade</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets communautaires des cahiers des charges par année et stade
						</p>
						<div class="table-responsive">
							<div id="container111" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
			<div class="mb-5"></div>
		</div>
  	</section>

	<section class="bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Entités territoriales descentralisées</p>
				<h2 class="fw-bold mb-2">Projets communautaires</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Analyses sur la réalisation des projets communautaires des entités territoriales descentralisées en RDC.
					</p>
				</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">Projets par type d'infrastructures</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombres des projets réalisés par type d'infrastructures
						</p>
						<div class="table-responsive">
							<div id="container1121" style='background:#f6f7fa;'></div>
						</div>
					</div>
					</div>

					<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Projets par stade</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets par stades des projets
						</p>
						<div class="table-responsive">
							<div id="container2121" 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">Projets par province</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets par province
						</p>
						<div class="table-responsive">
							<div id="container1321" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Projets par année & stade</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets communautaires des cahiers des charges par année et stade
						</p>
						<div class="table-responsive">
							<div id="container1111" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
			<div class="mb-5"></div>
		</div>
  	</section>

	<section class="bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">FOMIN</p>
				<h2 class="fw-bold mb-2">Projets pour la génération future</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Analyses sur la réalisation des projets pour la génération future financés par FOMIN en RDC.
					</p>
				</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">Projets par type d'infrastructures</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombres des projets réalisés par type d'infrastructures
						</p>
						<div class="table-responsive">
							<div id="container1124" style='background:#f6f7fa;'></div>
						</div>
					</div>
					</div>

					<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Projets par stade</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets par stades des projets
						</p>
						<div class="table-responsive">
							<div id="container2124" 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">Projets par province</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets par province
						</p>
						<div class="table-responsive">
							<div id="container1324" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Projets par année & stade</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des projets communautaires des cahiers des charges par année et stade
						</p>
						<div class="table-responsive">
							<div id="container1114" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
			<div class="mb-5"></div>
		</div>
  	</section>

	<section class="bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Arrêtés</p>
				<h2 class="fw-bold mb-2">Arrêtés Ministériels & Interministériels</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Analyse et suivi des arrêtés dans le secteur minier en République Démocratique du Congo.
					</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">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>
  	</section>

	<section class="py-5 bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Actionnariat</p>
				<h2 class="fw-bold mb-2">Propriétaires effectifs & Investisseurs</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Analyse et suivi des propriétaires effectifs et investisseurs dans le secteur minier en République Démocratique du Congo.
					</p>
				</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">Propriétaires effectifs par pays</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des propriétaires effectifs par pays
						</p>
						<div class="table-responsive">
							<div id="container1333477" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Investisseurs par pays</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre d'investisseurs par pays
						</p>
						<div class="table-responsive">
							<div id="container14337788" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
		</div>
  	</section>

	<section class="py-5 bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Emplois</p>
				<h2 class="fw-bold mb-2">Emplois directs & indirects</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Analyse et suivi d'emplois directs et indirects dans le secteur minier en République Démocratique du Congo.
					</p>
				</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">Emplois créés par année</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombres d'emplois directs et indirects créés dans le secteur minier année par année
						</p>
						<div class="table-responsive">
							<div id="container111999" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Sous-traitants par service</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des sous-traitants par service
						</p>
						<div class="table-responsive">
							<div id="container1119976" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
		</div>
  	</section>

	{#<section class="py-5 bg-charcoal">
		<div class="container py-4">
			<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-2">
				<div>
				<p class="text-copper fw-medium small tracking-widest text-uppercase mb-1">Sous-traitance</p>
				<h2 class="fw-bold mb-2">Sous-traitants</h2>
					<p class="text-muted-mine mb-0" style='max-width: 500px'>
						Analyse et suivi de la sous-traitance dans le secteur minier en République Démocratique du Congo.
					</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">Sous-traitants par service</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Nombre des sous-traitants par service
						</p>
						<div class="table-responsive">
							<div id="container1119976" style='background:#f6f7fa;'></div>
						</div>
					</div>
				</div>
			</div>
		</div>
  	</section>#}

	<div class="filter-modal-overlay modal-stat" style='display:none;'>
      <div class="filter-modal">
        <div class="filter-modal-header">
          <div>
            <h5 class="fw-bold mb-0" style="font-family:var(--font-display);color:var(--bs-body-color)">
              Filtrer les Statistiques
            </h5>
            <small style="color:var(--muted-color); font-size: 0.8rem">
              Affinez les résultats affichés
            </small>
          </div>
          <button class="filter-modal-close btn-flitre-stat">✕</button>
        </div>

		<form action="{{path('app_filter_stat')}}#statistique" method="POST">
			<div class="filter-modal-body">
				<div class="filter-group">
					<label class="filter-label" htmlFor="filter-year">
					<span class="filter-label-icon" style="background:$17418a18;color:17418a;">📅</span>
					Année
					</label>
					<select
					id="filter-year"
					name="anneeStat"
					class="form-select js-choice3">
						{% for item in 2010..'now'|date('Y') %}
							<option value="{{item}}">{{item}}</option>
						{% endfor %}
					</select>
				</div>
					
					<div class="filter-group">
						<label class="filter-label" htmlFor="filter-status">
						<span class="filter-label-icon" style='background: $17418a18; color: #17418a;'>💎</span>
						Première commodité
						</label>
						<select
						id="filter-status"
						name="commoditeStat"
						class="form-select js-choice1">
							{% for item in commodites %}
								<option key="{{item.id}}" value="{{item.id}}">{{item.nom}}</option>
							{% endfor %}
						</select>
					</div>
					
					<div class="filter-group">
						<label class="filter-label" htmlFor="filter-province">
						<span class="filter-label-icon" style="background: $17418a18; color: #17418a;">💎</span>
						Deuxième commodité
						</label>
						<select
						id="filter-province"
						name="commoditeStat1"
						class="form-select js-choice2">
							{% for item in commodites %}
								<option key="{{item.id}}" value="{{item.id}}">{{item.nom}}</option>
							{% endfor %}
						</select>
					</div>
				</div>

				<input name="anneeOperateur" value='{{anneeOperateur}}' style="display:none;"/>
				<input name="comoditeEvolution" value='{{comoditeEvolution ? comoditeEvolution.id : null }}' style="display:none;"/>
				<input name="comoditeProd" value='{{comoditeProd ? comoditeProd.id : null }}' style="display:none;"/>

				<div class="filter-modal-footer">
					<a class="filter-btn-reset btn" href="{{path('app_home')}}">Réinitialiser</a>
					<button class="filter-btn-apply" type='submit' style="background: #17418a;">
						Appliquer les filtres
					</button>
				</div>
			</form>
		</div>
    </div>

	<div class="filter-modal-overlay modal-prod" style='display:none;'>
      <div class="filter-modal">
        <div class="filter-modal-header">
          <div>
            <h5 class="fw-bold mb-0" style="font-family:var(--font-display);color:var(--bs-body-color)">
              Filtrer les exportations et la production
            </h5>
            <small style="color:var(--muted-color); font-size: 0.8rem">
              Affinez les résultats affichés
            </small>
          </div>
          <button class="filter-modal-close btn-flitre-prod">✕</button>
        </div>

		<form action="{{path('app_filter_prod')}}#evolution" method="POST">
			<div class="filter-modal-body">
				<div class="filter-group">
					<label class="filter-label" htmlFor="filter-status">
					<span class="filter-label-icon" style='background: $17418a18; color: #17418a;'>💎</span>
					Commodité
					</label>
					<select
					id="filter-status"
					name="comoditeProd"
					class="form-select js-choice4">
						{% for item in commodites %}
							<option key="{{item.id}}" value="{{item.id}}">{{item.nom}}</option>
						{% endfor %}
					</select>
				</div>
				</div>

				<input name="anneeStat" value='{{anneeStat}}' style="display:none;"/>
				<input name="commoditeStat" value='{{commoditeStat ? commoditeStat.id : null }}' style="display:none;"/>
				<input name="commoditeStat1" value='{{commoditeStat1 ? commoditeStat1.id : null }}' style="display:none;"/>
				<input name="anneeOperateur" value='{{anneeOperateur}}' style="display:none;"/>
				<input name="comoditeEvolution" value='{{comoditeEvolution ? comoditeEvolution.id : null }}' style="display:none;"/>

				<div class="filter-modal-footer">
					<a class="filter-btn-reset btn" href="{{path('app_home')}}">Réinitialiser</a>
					<button class="filter-btn-apply" type='submit' style="background: #17418a;">
						Appliquer les filtres
					</button>
				</div>
			</form>
		</div>
    </div>

	<div class="filter-modal-overlay modal-operateur" style='display:none;'>
      <div class="filter-modal">
        <div class="filter-modal-header">
          <div>
            <h5 class="fw-bold mb-0" style="font-family:var(--font-display);color:var(--bs-body-color)">
              Filtrer les opérateurs valides
            </h5>
            <small style="color:var(--muted-color); font-size: 0.8rem">
              Affinez les résultats affichés
            </small>
          </div>
          <button class="filter-modal-close btn-flitre-operateur">✕</button>
        </div>

		<form action="{{path('app_filter_operateur')}}#operateurs" method="POST">
			<div class="filter-modal-body">
				<div class="filter-group">
					<label class="filter-label" htmlFor="filter-year">
					<span class="filter-label-icon" style="background:$17418a18;color:17418a;">📅</span>
					Année
					</label>
					<select
					id="filter-year"
					name="anneeOperateur"
					class="form-select js-choice5">
						{% for item in 1999..'now'|date('Y') %}
							<option value="{{item}}">{{item}}</option>
						{% endfor %}
					</select>
				</div>
			</div>

				<input name="anneeStat" value='{{anneeStat}}' style="display:none;"/>
				<input name="commoditeStat" value='{{commoditeStat ? commoditeStat.id : null }}' style="display:none;"/>
				<input name="commoditeStat1" value='{{commoditeStat1 ? commoditeStat1.id : null }}' style="display:none;"/>
				<input name="comoditeEvolution" value='{{comoditeEvolution ? comoditeEvolution.id : null }}' style="display:none;"/>
				<input name="comoditeProd" value='{{comoditeProd ? comoditeProd.id : null }}' style="display:none;"/>

				<div class="filter-modal-footer">
					<a class="filter-btn-reset btn" href="{{path('app_home')}}">Réinitialiser</a>
					<button class="filter-btn-apply" type='submit' style="background: #17418a;">
						Appliquer les filtres
					</button>
				</div>
			</form>
		</div>
    </div>
{% endblock %}


{% block javascripts %}
	{{parent()}}
	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

	 <script src="{{asset("js/rdc.js")}}"></script>

	<script>
		window.onload = function () {
			var element = document.querySelector('.js-choice1');
  			const choices = new Choices(element);

  			var element = document.querySelector('.js-choice2');
  			const choices1 = new Choices(element);

  			var element = document.querySelector('.js-choice3');
  			const choices2 = new Choices(element);
			
  			var element = document.querySelector('.js-choice4');
  			const choices3 = new Choices(element);

  			var element = document.querySelector('.js-choice5');
  			const choices4 = new Choices(element);

			/*
  			var element = document.querySelector('.js-choice6');
  			const choices5 = new Choices(element);

			var element = document.querySelector('.js-choice7');
  			const choices7 = new Choices(element);*/

			$('.btn-flitre-stat').click(function() {
				$('.modal-stat').toggle();
			});

			$('.btn-flitre-prod').click(function() {
				$('.modal-prod').toggle();
			});

			$('.btn-flitre-operateur').click(function() {
				$('.modal-operateur').toggle();
			});

			var dataRevenue             = [];
			var dataEmploiCadre         = [];
			var dataEmploiOuvrier       = [];
			var dataEmploiFeminLocal    = [];
			var dataMascuLocal          = [];
			var dataEmploiFeminEtranger = [];
			var dataEmploiMascuEtranger = [];
			var dataEvolution           = [];
			var annees                  = [];
			var anneesProd              = [];
			var dataProd                = [];
			var colorProd               = [];
			var compter                 = 0;
			var colorExportation        = [];
			var exportVal               = [];
			var anneesArrete            = [];
			var colorsArrete            = [];
			var exportValArrete         = [];
			var dataAnneeEmploi         = [];
			var colors                  = ["#17418a", "#edb717", "#b52825", "#ee1044", "#ff8f00"];
			var nbreInvestisseurs       = [];
			var paysInvestisseurs       = [];
			var colorsInvestisseur      = [];
			var colorsProprietaire      = [];
			var nbreProprietaires       = [];
			var paysProprietaires       = [];

			var nbreGisement            = [];
			var provinces               = [];
			var colorsProvince          = [];

			var services                = [];
			var nbreOperateur           = [];
			var colorsService           = [];

			var prod    = [];
			var vente   = [];
			var exporta = [];

			var prod1    = [];
			var vente1   = [];
			var exporta1 = [];

			{% for item in 0..11 %}
				{% set mois = '' %}

				{% if item < 10 %}
					{% set mois = '0'~item %}
				{% else %}
					{% set mois = item %}
				{% endif %}

				{% if dataProd[item] is defined %}
					prod.push(parseFloat(parseFloat("{{dataProd[item]}}")));
				{% else %}
					prod.push(0);
				{% endif %}

				{% if dataProd1[item] is defined %}
					prod1.push(parseFloat("{{dataProd1[item]}}"));
				{% else %}
					prod1.push(0);
				{% endif %}

				{% if dataVente[item] is defined %}
					vente.push(parseFloat("{{dataVente[item]}}"))
				{% else %}
					vente.push(0);
				{% endif %}

				{% if dataVente1[item] is defined %}
					vente1.push(parseFloat("{{dataVente1[item]}}"))
				{% else %}
					vente1.push(0);
				{% endif %}

				{% if dataExport[item] is defined %}
					exporta.push(parseFloat("{{dataExport[item]}}"));
				{% else %}
					exporta.push(0);
				{% endif %}

				{% if dataExport1[item] is defined %}
					exporta1.push(parseFloat("{{dataExport1[item]}}"));
				{% else %}
					exporta1.push(0);
				{% endif %}
			

				{% if dataEmploiCadre[item] is defined %}
					dataEmploiCadre.push(parseInt("{{dataEmploiCadre[item]}}"));
				{% endif %}

				{% if dataEmploiOuvrier[item] is defined %}
					dataEmploiOuvrier.push(parseInt("{{dataEmploiOuvrier[item]}}"));
				{% endif %}

				{% if dataEmploiFeminLocal[item] is defined %}
					dataEmploiFeminLocal.push(parseInt("{{dataEmploiFeminLocal[item]}}"));
				{% endif %}

				{% if dataMascuLocal[item] is defined %}
					dataMascuLocal.push(parseInt("{{dataMascuLocal[item]}}"));
				{% endif %}

				{% if dataEmploiFeminEtranger[item] is defined %}
					dataEmploiFeminEtranger.push(parseInt("{{dataEmploiFeminEtranger[item]}}"));
				{% endif %}

				{% if dataEmploiMascuEtranger[item] is defined %}
					dataEmploiMascuEtranger.push(parseInt("{{dataEmploiMascuEtranger[item]}}"));
				{% endif %}
			{% endfor %}

			{% for item in prodEvolution %}
				anneesProd.unshift("{{item.annee}}");
				dataProd.unshift(parseFloat("{{item.quantite}}"));
				
				colorProd.push("{{comoditeProd.color}}");
			{% endfor %}

			{% for item in exportGenral %}
				annees.unshift("{{item.annee}}");
				exportVal.unshift(parseFloat("{{item.quantite}}"));

				colorExportation.push("{{comoditeEvolution.color}}");
			{% endfor %}


			Highcharts.chart('container', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Statistiques en {{anneeStat|date('Y')}} ({{commoditeStat ? commoditeStat.nom : ' '}})"
			},
			xAxis: {
				categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Quantité'
				}
			},
			tooltip: {
				valueSuffix: ' {{commoditeStat.filiere.unite}}'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Production',
					color: '#17418a',
					data: prod
				},
				{
					name: 'Exportation',
					color: '#b52825',
					data: exporta
				},
				{
					name: 'Vente locale',
					color: '#edb717',
					data: vente
				},
			]
		});

		Highcharts.chart('container2', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Statistiques en {{anneeStat|date('Y')}} ({{commoditeStat1 ? commoditeStat1.nom : ' '}})"
			},
			xAxis: {
				categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Quantité'
				}
			},
			tooltip: {
				valueSuffix: ' {{commoditeStat1.filiere.unite}}'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Production',
					color: '#17418a',
					data: prod1
				},
				{
					name: 'Exportation',
					color: '#b52825',
					data: exporta1
				},
				{
					name: 'Vente locale',
					color: '#edb717',
					data: vente1
				},
			]
		});

		Highcharts.chart('container3', {
			chart: {
				type: 'line',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Evolution de la production ({{comoditeProd ? comoditeProd.nom : ' '}})"
			},
			xAxis: {
				categories: anneesProd,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Quantité'
				}
			},
			tooltip: {
				valueSuffix: ' {{comoditeProd.filiere.unite}}'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Production',
					color: '{{comoditeProd.color}}',
					data: dataProd
				},
			]
		});

		Highcharts.chart('container4', {
			chart: {
				type: 'line',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Evolution des exportations ({{comoditeProd ? comoditeProd.nom : ' '}})"
			},
			xAxis: {
				categories: annees,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Quantité'
				}
			},
			tooltip: {
				valueSuffix: ' {{comoditeProd.filiere.unite}}'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Exportation',
					color: '{{comoditeProd.color}}',
					data: exportVal
				}
			]
		});

		var naturesEtd       = [];
		var naturesCharge    = [];
		var dataNature    = [];
		var dataNatureEtd    = [];
		var dataNatureCharge = [];
		var dataNatureFomin  = [];
		var colorsNature     = [];
		var colorsNatureEtd  = [];
		var colorsNatureCharge  = [];
		var compter       = 0;
		var provinces     = [];
		var provincesEtd  = [];
		var provincesCharge  = [];
		var dataProvinces = [];
		var dataProvincesEtd = [];
		var dataProvincesCharge = [];
		var dataProvincesFomin = [];
		var colorsProvince = [];
		var colorsProvinceEtd = [];
		var colorsProvinceCharge = [];
		var totalProjetTermine    = 0;
        var totalProjetNonTermine = 0;
        var totalProjetNonExecute = 0;

		var totalProjetTermineEtd    = 0;
        var totalProjetNonTermineEtd = 0;
        var totalProjetNonExecuteEtd = 0;

		var totalProjetTermineCharge    = 0;
        var totalProjetNonTermineCharge = 0;
        var totalProjetNonExecuteCharge = 0;

		var totalProjetTermineFomin    = 0;
        var totalProjetNonTermineFomin = 0;
        var totalProjetNonExecuteFomin = 0;

		{% for item in projetDotByNature %}
			dataNature.push({name: '{{item.nature}}', y: parseInt("{{item.nbre}}")});
			naturesEtd.push("{{item.nature}}");
		{% endfor %}

		{% for item in projetFominByNature %}
			dataNatureFomin.push({name: '{{item.nature}}', y: parseInt("{{item.nbre}}")});
		{% endfor %}

		compter = 0;

		{% for item in projetDotByNatureEtd %}
			dataNatureEtd.push({value: "{{item.nbre}}", name: '{{item.nature}}'});
			naturesEtd.push("{{item.nature}}");
		{% endfor %}

		compter = 0;

		{% for item in projetDotByNatureCharge %}
			dataNatureCharge.push({name: '{{item.nature}}', y: parseInt("{{item.nbre}}")});
		{% endfor %}

		compter = 0;

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

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

		compter = 0;

		{% for item in projetByProvinceEtd %}
			dataProvincesEtd.push({value: "{{item.nbre}}", name: '{{item.province}}'});
			provincesEtd.push("{{item.province}}");

			if(compter < 12) {
				colorsProvinceEtd.push(colors[compter]);
			} else {
				compter = 0;
				colorsProvinceEtd.push(colors[compter]);
			}
			compter++;
		{% endfor %}

		compter = 0;

		{% for item in projetByProvinceCharge %}
			dataProvincesCharge.push({value: "{{item.nbre}}", name: '{{item.province}}'});
		{% endfor %}

		{% for item in projetTermineDot1 %}
			totalProjetTermine = totalProjetTermine + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetNonTermieDot1 %}
			totalProjetNonTermine = totalProjetNonTermine + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetNonExecuteDot1 %}
			totalProjetNonExecute = totalProjetNonExecute + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetTermineEtd %}
			totalProjetTermineEtd = totalProjetTermineEtd + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetNonTermieEtd %}
			totalProjetNonTermineEtd = totalProjetNonTermineEtd + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetNonExecuteEtd %}
			totalProjetNonExecuteEtd = totalProjetNonExecuteEtd + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetTermineCharge %}
			totalProjetTermineCharge = totalProjetTermineCharge + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetNonTermieCharge %}
			totalProjetNonTermineCharge = totalProjetNonTermineCharge + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetNonExecuteCharge %}
			totalProjetNonExecuteCharge = totalProjetNonExecuteCharge + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetFominTermine %}
			totalProjetTermineFomin = totalProjetTermineFomin + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetFominNonTermie %}
			totalProjetNonTermineFomin = totalProjetNonTermineFomin + parseInt("{{item.nbre}}");
		{% endfor %}

		{% for item in projetFominNonExecute %}
			totalProjetNonExecuteFomin = totalProjetNonExecuteFomin + parseInt("{{item.nbre}}");
		{% endfor %}

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

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

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

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

		Highcharts.chart('container21', {
			chart: {
				type: 'pie',
				backgroundColor: '#f6f7fa',
				zooming: {
				type: 'xy'
				},
				panning: {
				enabled: true,
				type: 'xy'
				},
				panKey: 'shift'
			},
			title: {
				text: 'Nombre des projets par stade'
			},
			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: 'Nombre des projets',
				colorByPoint: true,
				data: [
					{
						name: 'En cours',
						sliced: true,
						selected: true,
						y: totalProjetNonTermine
					},
					{
						name: 'Non exécutés',
						y: totalProjetNonExecute
					},
					{
						name: 'Terminés',
						y: totalProjetTermine
					}
				]
				}
			]
			})
		;

		Highcharts.chart('container212', {
			chart: {
				type: 'pie',
				backgroundColor: '#f6f7fa',
				zooming: {
				type: 'xy'
				},
				panning: {
				enabled: true,
				type: 'xy'
				},
				panKey: 'shift'
			},
			title: {
				text: 'Nombre des projets par stade'
			},
			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: 'Nombre des projets',
				colorByPoint: true,
				data: [
					{
						name: 'En cours',
						sliced: true,
						selected: true,
						y: totalProjetNonTermineCharge
					},
					{
						name: 'Non exécutés',
						y: totalProjetNonExecuteCharge
					},
					{
						name: 'Terminés',
						y: totalProjetTermineCharge
					}
				]
				}
			]
			})
		;

		Highcharts.chart('container2121', {
			chart: {
				type: 'pie',
				backgroundColor: '#f6f7fa',
				zooming: {
				type: 'xy'
				},
				panning: {
				enabled: true,
				type: 'xy'
				},
				panKey: 'shift'
			},
			title: {
				text: 'Nombre des projets par stade'
			},
			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: 'Nombre des projets',
				colorByPoint: true,
				data: [
					{
						name: 'En cours',
						sliced: true,
						selected: true,
						y: totalProjetNonTermineEtd
					},
					{
						name: 'Non exécutés',
						y: totalProjetNonExecuteEtd
					},
					{
						name: 'Terminés',
						y: totalProjetTermineEtd
					}
				]
				}
			]
		});

		Highcharts.chart('container2124', {
			chart: {
				type: 'pie',
				backgroundColor: '#f6f7fa',
				zooming: {
				type: 'xy'
				},
				panning: {
				enabled: true,
				type: 'xy'
				},
				panKey: 'shift'
			},
			title: {
				text: 'Nombre des projets par stade'
			},
			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: 'Nombre des projets',
				colorByPoint: true,
				data: [
					{
						name: 'En cours',
						sliced: true,
						selected: true,
						y: totalProjetNonTermineFomin
					},
					{
						name: 'Non exécutés',
						y: totalProjetNonExecuteFomin
					},
					{
						name: 'Terminés',
						y: totalProjetTermineFomin
					}
				]
				}
			]
		});

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

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

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

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


		var anneeProjetDot    = [];
		var anneeProjetCahier = [];
		var anneeProjetEtd    = [];
		var anneeProjetFomin  = [];

		var totalProjetDot    = [];
		var totalProjetCahier = [];
		var totalProjetEtd = [];

		var projetDotNonExecute = [];
		var projetDotTermine    = [];
		var projetDotNonTermine = [];
		var totalProjetDot      = [];

		var projetCahierNonExecute = [];
		var projetCahierTermine    = [];
		var projetCahierNonTermine = [];
		var totalProjetCahier      = [];

		var projetEtdNonExecute = [];
		var projetEtdTermine    = [];
		var projetEtdNonTermine = [];
		var totalProjetEtd      = [];

		var projetFominNonExecute = [];
		var projetFominTermine    = [];
		var projetFominNonTermine = [];
		var totalProjetFomin      = [];
		
		var grandProjet = [];
		var anneeProjet = [];
		var petitProjet = [];
		var moyenProjet = [];


		{% for item in minAnneeDot..maxAnneeDot %}
			anneeProjetDot.push("{{item}}");
			
			{% for item1 in projetTermineDot %}
				{% if item == item1.annee %}
					projetDotTermine.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetNonTermieDot %}
				{% if item == item1.annee %}
					projetDotNonTermine.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetNonExecuteDot %}
				{% if item == item1.annee %}
					projetDotNonExecute.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			if(projetDotTermine['{{loop.index0}}'] == null) {
                projetDotTermine.push(0);
            }

			if(projetDotNonTermine['{{loop.index0}}'] == null) {
                projetDotNonTermine.push(0);
            }

			if(projetDotNonExecute['{{loop.index0}}'] == null) {
                projetDotNonExecute.push(0);
            }
		{% endfor %}

		{% for item in minAnneeCahier..maxAnneeCahier %}
			anneeProjetCahier.push("{{item}}");
			
			{% for item1 in projetTermineCahier %}
				{% if item == item1.annee %}
					projetCahierTermine.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetNonTermieCahier %}
				{% if item == item1.annee %}
					projetCahierNonTermine.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetNonExecuteCahier %}
				{% if item == item1.annee %}
					projetCahierNonExecute.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			if(projetCahierTermine['{{loop.index0}}'] == null) {
                projetCahierTermine.push(0);
            }

			if(projetCahierNonTermine['{{loop.index0}}'] == null) {
                projetCahierNonTermine.push(0);
            }

			if(projetCahierNonExecute['{{loop.index0}}'] == null) {
                projetCahierNonExecute.push(0);
            }
		{% endfor %}


		{% for item in minAnneeEtd..maxAnneeEtd %}
			anneeProjetEtd.push("{{item}}");
			
			{% for item1 in projetTermineEtd %}
				{% if item == item1.annee %}
					projetEtdTermine.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetNonTermieEtd %}
				{% if item == item1.annee %}
					projetEtdNonTermine.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetNonExecuteEtd %}
				{% if item == item1.annee %}
					projetEtdNonExecute.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			if(projetEtdTermine['{{loop.index0}}'] == null) {
                projetEtdTermine.push(0);
            }

			if(projetEtdNonTermine['{{loop.index0}}'] == null) {
                projetEtdNonTermine.push(0);
            }

			if(projetEtdNonExecute['{{loop.index0}}'] == null) {
                projetEtdNonExecute.push(0);
            }
		{% endfor %}

		{% for item in minAnneeFomin..maxAnneeFomin %}
			anneeProjetFomin.push("{{item}}");
			
			{% for item1 in projetFominTermine %}
				{% if item == item1.annee %}
					projetFominTermine.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetFominNonTermie %}
				{% if item == item1.annee %}
					projetFominNonTermie.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetFominNonExecute %}
				{% if item == item1.annee %}
					projetFominNonExecute.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			if(projetFominTermine['{{loop.index0}}'] == null) {
                projetFominTermine.push(0);
            }

			if(projetFominNonTermine['{{loop.index0}}'] == null) {
                projetFominNonTermine.push(0);
            }

			if(projetFominNonExecute['{{loop.index0}}'] == null) {
                projetFominNonExecute.push(0);
            }
		{% endfor %}

		{% for item in minAnneeProjet..maxAnneeProjet %}
			anneeProjet.push("{{item}}");
			
			{% for item1 in projetOperateur %}
				{% if item == item1.annee and item1.type == 'Grand projet' %}
					grandProjet.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetOperateur %}
				{% if item == item1.annee and item1.type == 'Petit projet' %}
					petitProjet.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			{% for item1 in projetOperateur %}
				{% if item == item1.annee and item1.type == 'Moyen projet' %}
					moyenProjet.push(parseInt("{{item1.nbre}}"))
				{% endif %}
			{% endfor %}

			if(grandProjet['{{loop.index0}}'] == null) {
                grandProjet.push(0);
            }

			if(petitProjet['{{loop.index0}}'] == null) {
                petitProjet.push(0);
            }

			if(moyenProjet['{{loop.index0}}'] == null) {
                moyenProjet.push(0);
            }
		{% endfor %}


		Highcharts.chart('container14', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des projets par année et stade"
			},
			xAxis: {
				categories: anneeProjetDot,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Nombre des projets'
				}
			},
			tooltip: {
				valueSuffix: ' Projets'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Terminés',
					color: '#00e272',
					data: projetDotTermine
				},
				{
					name: 'En cours',
					color: '#edb717',
					data: projetDotNonTermine
				},
				{
					name: 'Non exécutés',
					color: '#b52825',
					data: projetDotNonExecute
				}
			]
		});

		Highcharts.chart('container111', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des projets par année et stade"
			},
			xAxis: {
				categories: anneeProjetCahier,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Nombre des projets'
				}
			},
			tooltip: {
				valueSuffix: ' Projets'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Terminés',
					color: '#00e272',
					data: projetCahierTermine
				},
				{
					name: 'En cours',
					color: '#edb717',
					data: projetCahierNonTermine
				},
				{
					name: 'Non exécutés',
					color: '#b52825',
					data: projetCahierNonExecute
				}
			]
		});

		Highcharts.chart('container1111', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des projets par année et stade"
			},
			xAxis: {
				categories: anneeProjetEtd,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Nombre des projets'
				}
			},
			tooltip: {
				valueSuffix: ' Projets'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Terminés',
					color: '#00e272',
					data: projetEtdTermine
				},
				{
					name: 'En cours',
					color: '#edb717',
					data: projetEtdNonTermine
				},
				{
					name: 'Non exécutés',
					color: '#b52825',
					data: projetEtdNonExecute
				}
			]
		});

		Highcharts.chart('container1114', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des projets par année et stade"
			},
			xAxis: {
				categories: anneeProjetFomin,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Nombre des projets'
				}
			},
			tooltip: {
				valueSuffix: ' Projets'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Terminés',
					color: '#00e272',
					data: projetFominTermine
				},
				{
					name: 'En cours',
					color: '#edb717',
					data: projetFominNonTermine
				},
				{
					name: 'Non exécutés',
					color: '#b52825',
					data: projetFominNonExecute
				}
			]
		});

		Highcharts.chart('container1112', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des projets miniers et des carrières par année & catégorie"
			},
			xAxis: {
				categories: anneeProjet,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Nombre des projets'
				}
			},
			tooltip: {
				valueSuffix: ' Projets'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Grand projet',
					color: '#00e272',
					data: grandProjet
				},
				{
					name: 'Moyen projet',
					color: '#edb717',
					data: moyenProjet
				},
				{
					name: 'Petit projet',
					color: '#2caffe',
					data: petitProjet
				}
			]
		});

		

		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: "Nombre d'arrêtés par opérateur minier"
			},
			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: "Nombre d'arrêtés par catégorie d'arrêtés"
			},
			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: "Nombre d'arrêtés par type d'arrêtés"
			},
			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
				}
			]
		});

		{% for item in nbreProprietaire %}
			nbreProprietaires.push(parseInt("{{item.nbre}}"));
			paysProprietaires.push("{{item.libelle}}");
		{% endfor %}

		Highcharts.chart('container1333477', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des propriétaires effectifs par pays"
			},
			xAxis: {
				categories: paysProprietaires,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: 'Nombre des propriétaires'
				}
			},
			tooltip: {
				valueSuffix: ' '
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Propriétaires effectifs',
					color: '#2caffe',
					data: nbreProprietaires
				}
			]
		});

		{% for item in nbreInvestisseur %}
			nbreInvestisseurs.push(parseInt("{{item.nbre}}"));
			paysInvestisseurs.push("{{item.libelle}}");
		{% endfor %}

		Highcharts.chart('container14337788', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre d'Investisseurs par pays"
			},
			xAxis: {
				categories: paysInvestisseurs,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: "Nombre d'investisseurs"
				}
			},
			tooltip: {
				valueSuffix: ''
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: "Investisseurs",
					color: '#2caffe',
					data: nbreInvestisseurs
				}
			]
		});

		{% if anneDebut is not null %}
			{% for item in anneDebut..anneFin %}
				dataAnneeEmploi.push("{{item}}")
			{% endfor %}
		{% endif %}


		Highcharts.chart('container111999', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombres d'emplois directs et indirects créés dans le secteur minier année par année"
			},
			xAxis: {
				categories: dataAnneeEmploi,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: "Nombre d'emplois"
				}
			},
			tooltip: {
				valueSuffix: ' Emplois'
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				{
					name: 'Cadres',
					color: '#00e272',
					data: dataEmploiCadre
				},
				{
					name: 'Ouvriers',
					color: '#edb717',
					data: dataEmploiOuvrier
				},
				{
					name: 'Femmes locales',
					color: '#2caffe',
					data: dataEmploiFeminLocal
				},
				{
					name: 'Hommes locaux',
					color: '#38649f',
					data: dataMascuLocal
				},
				{
					name: 'Femmes étrangères',
					color: '#ff562f',
					data: dataEmploiFeminEtranger
				},
				{
					name: 'Hommes étrangers',
					color: '#04a08b',
					data: dataEmploiMascuEtranger
				}
			]
		});

		{% for item in serviceSousTraitant %}
			services.push("{{item.service}}");
			nbreOperateur.push(parseInt("{{item.nbre}}"));
		{% endfor %}

		Highcharts.chart('container1119976', {
			chart: {
				type: 'column',
				backgroundColor: '#f6f7fa'
			},
			title: {
				text: "Nombre des sous-traitants par service"
			},
			xAxis: {
				categories: services,
				crosshair: true,
				accessibility: {
				description: 'Countries'
				}
			},
			yAxis: {
				min: 0,
				title: {
				text: "Nombre des sous-traitants"
				}
			},
			tooltip: {
				valueSuffix: ' '
			},
			plotOptions: {
				column: {
				pointPadding: 0.2,
				borderWidth: 0
				}
			},
			series: [
				
				{
					name: 'Sous-traitant',
					color: '#2caffe',
					data: nbreOperateur
				}
			]
		});

		var typesContrantName = [];
		var typesContrantNbre = [];

		{% for item in contratByType %}
            typesContrantName.push("{{item.type}}");
            typesContrantNbre.push(parseInt("{{item.nbre}}"));
        {% endfor %}

		Highcharts.chart('container4123k', {
			chart: {
				type: 'column',
				backgroundColor: '#ffffff'
			},
			title: {
				text: ""
			},
			xAxis: {
				categories: typesContrantName,
				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: typesContrantNbre
				}
			]
		});

		var drc = {
		"type": "Feature",
		"properties": {
		"name": "Democratic Republic of the Congo",
		"code": "COD",
		"group": "Countries"
		},
		"geometry": {
		"type": "Polygon",
		"coordinates": [
		[
			[
			30.83386,
			3.509166
			],
			[
			30.773347,
			2.339883
			],
			[
			31.174149,
			2.204465
			],
			[
			30.85267,
			1.849396
			],
			[
			30.468508,
			1.583805
			],
			[
			30.086154,
			1.062313
			],
			[
			29.875779,
			0.59738
			],
			[
			29.819503,
			-0.20531
			],
			[
			29.587838,
			-0.587406
			],
			[
			29.579466,
			-1.341313
			],
			[
			29.291887,
			-1.620056
			],
			[
			29.254835,
			-2.21511
			],
			[
			29.117479,
			-2.292211
			],
			[
			29.024926,
			-2.839258
			],
			[
			29.276384,
			-3.293907
			],
			[
			29.339998,
			-4.499983
			],
			[
			29.519987,
			-5.419979
			],
			[
			29.419993,
			-5.939999
			],
			[
			29.620032,
			-6.520015
			],
			[
			30.199997,
			-7.079981
			],
			[
			30.740015,
			-8.340007
			],
			[
			30.346086,
			-8.238257
			],
			[
			29.002912,
			-8.407032
			],
			[
			28.734867,
			-8.526559
			],
			[
			28.449871,
			-9.164918
			],
			[
			28.673682,
			-9.605925
			],
			[
			28.49607,
			-10.789884
			],
			[
			28.372253,
			-11.793647
			],
			[
			28.642417,
			-11.971569
			],
			[
			29.341548,
			-12.360744
			],
			[
			29.616001,
			-12.178895
			],
			[
			29.699614,
			-13.257227
			],
			[
			28.934286,
			-13.248958
			],
			[
			28.523562,
			-12.698604
			],
			[
			28.155109,
			-12.272481
			],
			[
			27.388799,
			-12.132747
			],
			[
			27.16442,
			-11.608748
			],
			[
			26.553088,
			-11.92444
			],
			[
			25.75231,
			-11.784965
			],
			[
			25.418118,
			-11.330936
			],
			[
			24.78317,
			-11.238694
			],
			[
			24.314516,
			-11.262826
			],
			[
			24.257155,
			-10.951993
			],
			[
			23.912215,
			-10.926826
			],
			[
			23.456791,
			-10.867863
			],
			[
			22.837345,
			-11.017622
			],
			[
			22.402798,
			-10.993075
			],
			[
			22.155268,
			-11.084801
			],
			[
			22.208753,
			-9.894796
			],
			[
			21.875182,
			-9.523708
			],
			[
			21.801801,
			-8.908707
			],
			[
			21.949131,
			-8.305901
			],
			[
			21.746456,
			-7.920085
			],
			[
			21.728111,
			-7.290872
			],
			[
			20.514748,
			-7.299606
			],
			[
			20.601823,
			-6.939318
			],
			[
			20.091622,
			-6.94309
			],
			[
			20.037723,
			-7.116361
			],
			[
			19.417502,
			-7.155429
			],
			[
			19.166613,
			-7.738184
			],
			[
			19.016752,
			-7.988246
			],
			[
			18.464176,
			-7.847014
			],
			[
			18.134222,
			-7.987678
			],
			[
			17.47297,
			-8.068551
			],
			[
			17.089996,
			-7.545689
			],
			[
			16.860191,
			-7.222298
			],
			[
			16.57318,
			-6.622645
			],
			[
			16.326528,
			-5.87747
			],
			[
			13.375597,
			-5.864241
			],
			[
			13.024869,
			-5.984389
			],
			[
			12.735171,
			-5.965682
			],
			[
			12.322432,
			-6.100092
			],
			[
			12.182337,
			-5.789931
			],
			[
			12.436688,
			-5.684304
			],
			[
			12.468004,
			-5.248362
			],
			[
			12.631612,
			-4.991271
			],
			[
			12.995517,
			-4.781103
			],
			[
			13.25824,
			-4.882957
			],
			[
			13.600235,
			-4.500138
			],
			[
			14.144956,
			-4.510009
			],
			[
			14.209035,
			-4.793092
			],
			[
			14.582604,
			-4.970239
			],
			[
			15.170992,
			-4.343507
			],
			[
			15.75354,
			-3.855165
			],
			[
			16.00629,
			-3.535133
			],
			[
			15.972803,
			-2.712392
			],
			[
			16.407092,
			-1.740927
			],
			[
			16.865307,
			-1.225816
			],
			[
			17.523716,
			-0.74383
			],
			[
			17.638645,
			-0.424832
			],
			[
			17.663553,
			-0.058084
			],
			[
			17.82654,
			0.288923
			],
			[
			17.774192,
			0.855659
			],
			[
			17.898835,
			1.741832
			],
			[
			18.094276,
			2.365722
			],
			[
			18.393792,
			2.900443
			],
			[
			18.453065,
			3.504386
			],
			[
			18.542982,
			4.201785
			],
			[
			18.932312,
			4.709506
			],
			[
			19.467784,
			5.031528
			],
			[
			20.290679,
			4.691678
			],
			[
			20.927591,
			4.322786
			],
			[
			21.659123,
			4.224342
			],
			[
			22.405124,
			4.02916
			],
			[
			22.704124,
			4.633051
			],
			[
			22.84148,
			4.710126
			],
			[
			23.297214,
			4.609693
			],
			[
			24.410531,
			5.108784
			],
			[
			24.805029,
			4.897247
			],
			[
			25.128833,
			4.927245
			],
			[
			25.278798,
			5.170408
			],
			[
			25.650455,
			5.256088
			],
			[
			26.402761,
			5.150875
			],
			[
			27.044065,
			5.127853
			],
			[
			27.374226,
			5.233944
			],
			[
			27.979977,
			4.408413
			],
			[
			28.428994,
			4.287155
			],
			[
			28.696678,
			4.455077
			],
			[
			29.159078,
			4.389267
			],
			[
			29.715995,
			4.600805
			],
			[
			29.9535,
			4.173699
			],
			[
			30.83386,
			3.509166
			]
		]
		]
		},
		"_id": "democratic republic of the congo"
		}

		var map = L.map('map').setView([-4.0347884999999994, 21.75502799999998], 5.4);

		L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
		}).addTo(map);

		L.geoJson(drc).addTo(map);

		{% for item in projetCarte %}
			var marker = L.marker([parseFloat('{{item.latitude}}'), parseFloat('{{item.longitude}}')]).addTo(map).bindPopup("<strong>{{item.nom}}</strong><br>{{item.operateur ? item.operateur.sigle : ''}}");
			var popup = L.popup();
		{% endfor %}
	}
	</script>
{% endblock %}