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

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

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

			<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3 mb-4">
				<div>
					<h1 class="fw-bold mb-1" style="font-family: var(--font-display); font-size: 1.6rem;">
						📊 Production
					</h1>
					<p class="text-muted-mine mb-0" style="font-size: 0.9rem">
						Statistiques de la production
					</p>
				</div>

                <div class="d-flex gap-2 flex-wrap">
                    <button class="operators-btn operators-btn-outline btn-flitre-prod" data-bs-toggle="modal" data-bs-target="#staticBackdrop1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
                            <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/>
                        </svg>
                        Filtrer
                    </button>
				</div>
			</div>

			<div class="mb-4" style='background-color: var(--card-bg);border: 1px solid var(--border-color);border-radius: 1rem;transition: all 0.3s ease;'>
				<div class="d-flex flex-column flex-md-row gap-3 p-3">
					<div class="d-flex gap-2 flex-wrap align-items-center">
						<a class="operators-status-chip btn" href="#">
							Soumission EDF
						</a>

						<a class="operators-status-chip btn" href="#">
							Soumission rapport d'activités
						</a>

						<a class="operators-status-chip btn active" href="#">
							Production
						</a>

						<a class="operators-status-chip btn" href="#">
							Exportations
						</a>

                        <a class="operators-status-chip btn" href="#">
							Ventes locales
						</a>

                        <a class="operators-status-chip btn" href="#">
							Obligations des opérateurs
						</a>

                        <a class="operators-status-chip btn" href="#">
							Arrêtes
						</a>

                        <a class="operators-status-chip btn" href="#">
							Ressources et reserves
						</a>

                        <div class="dropdown nav-scroller-dropdown" style='position:relative;z-index:999999;'>
                            <button
                                class="operators-action-btn"
                                type="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                                title="Opérations sur le titre"
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                <circle cx="12" cy="12" r="1" /><circle cx="12" cy="5" r="1" /><circle cx="12" cy="19" r="1" />
                                </svg>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-dark-mine" 
                                style='position:fixed;top:20;left:20;z-index: 999999;background:#ffffff; border: 1px solid rgba(23, 65, 138, 0.15);border-radius: 0 0 10px 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.22), 0 0 0 1px rgba(23,65,138,0.1);padding:0.4rem;min-width: 220px;animation: dropdown-slide 0.2s ease-out;'>
                                <div>
                                    <a class="dropdown-item titres-dropdown-item" href="#">
                                        Besoins des opérateurs
                                    </a>
                                </div>
                                <div><hr class="dropdown-divider" /></div>
                                <div>
                                    <a
                                    class="dropdown-item titres-dropdown-item"
                                    href="#"
                                    >
                                    Emplois créés
                                    </a>
                                </div>
                            </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">Production mensuelle</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Réalisation mensuelle de la production en {{dateAnnnee|date('Y')}}
                            <br>
                            {% if operateur is not null %}
                                Par {{operateur.denomination}}
                            {% endif %}
						</p>
						<div>
							<div id="market-chart"></div>
						</div>
					</div>
				</div>

                <div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Production trimestrielle</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Réalisation trimestrielle de la production en {{dateAnnnee|date('Y')}}
                            <br>
                            {% if operateur is not null %}
                                Par {{operateur.denomination}}
                            {% endif %}
						</p>
						<div>
							<div id="market-chart2"></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">Production semestrielle</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Réalisation semestrielle de la production en {{dateAnnnee|date('Y')}}
                            <br>
                            {% if operateur is not null %}
                                Par {{operateur.denomination}}
                            {% endif %}
						</p>
						<div>
							<div id="market-chart3"></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6">
					<div class="chart-container p-4">
						<h5 class="fw-semibold mb-1">Evolution</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Evolution de la production durant les années
                            <br>
                            {% if operateur is not null %}
                                Par {{operateur.denomination}}
                            {% endif %}
						</p>
						<div>
							<div id="market-chart1"></div>
						</div>
					</div>
				</div>
			</div>
            <div class="mb-5"></div>
		</div>
	</main>
{% endblock %}

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

    <script src="{{asset('js/pages/ico-filter.js')}}"></script>
    <script src="{{asset('js/apexChart.js')}}"></script>
	<script>
        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 choices6 = new Choices(element);

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

        var element = document.querySelector('.js-choice9');
        const choices8 = new Choices(element);

        var dataInit    = [];
        var dataActulle = [];
        var dataName    = [];

        {% for item in ressourceEtReserve %}
            dataName.push("{{item.commodit}}");
            dataActulle.push("{{item.qteReserve}}");
            dataInit.push("{{item.qteRessource}}");
        {% endfor %}

		window.onload = function () {
            var options1 = {
                chart: {
                    height: 330,
                    type: 'line',
                    zoom: {
                        enabled: false,
                    }
                },
                colors: ['#17418a', '#b52825'],
                series: [{
                    name: 'Ressource',
                    type: 'column',
                    data: dataInit
                },{
                    name: 'Reserve',
                    type: 'column',
                    data: dataActulle
                }],
                stroke: {
                    width: [0, 0]
                },
                legend: {				
                    position: 'top',
                    horizontalAlign: 'left',
                },
                labels: dataName,
                xaxis: {
                    type: 'string'
                },
                yaxis: [{
                    title: {
                    text: '',
                    },

                }],tooltip: {
                    y: {
                        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            return value + " {{filiere.unite}}";
                        }
                    }
                }
            }

            var chart1 = new ApexCharts(
                document.querySelector("#market-chart1"),
                options1
            );

            chart1.render(); 

            var dataQteAnnuel        = [];
            var dataAnnees1          = [];
            var chiffreAffaire       = [];
            var dataDot              = [];
            var dataTotalProjet      = [];
            var dataCoutProjet       = [];
            var dataProjetTermine    = [];
            var dataProjetNonTermine = [];
            var dataProjetNonExecute = [];
            var dataDotation         = [];
            var dataCahier           = [];
            var dataRedevance        = [];
            var totalProjetTermine    = 0;
            var totalProjetNonTermine = 0;
            var totalProjetNonExecute = 0;

            console.log('{{anneeMin}}')
            console.log('{{anneeMax}}')

            {% for item1 in anneeMinDot..anneeMaxDot %}
                dataAnnees1[dataAnnees1.length] = "{{item1}}";

                {% for item in dotations %}
                    {% if item1 == item.annee %}
                        dataDotation[dataDotation.length] = "{{item.montant}}";
                    {% endif %}
                {% endfor %}

                {% for item in cahier %}
                    {% if item1 == item.annee %}
                        dataCahier[dataCahier.length] = "{{item.montant}}";
                    {% endif %}
                {% endfor %}

                {% for item in redevance %}
                    {% if item1 == item.annee %}
                        dataRedevance[dataRedevance.length] = "{{item.montant}}";
                    {% endif %}
                {% endfor %}


                if(dataDotation['{{loop.index0}}'] == null) {
                    dataDotation[dataDotation.length] = '0';
                }

                if(dataCahier['{{loop.index0}}'] == null) {
                    dataCahier[dataCahier.length] = '0';
                }

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

            var dataAnnees           = [];
            
            {% for item1 in anneeMin..anneeMax %}
                dataAnnees[dataAnnees.length] = "{{item1}}";

                {% for item in dotations %}
                    {% if item1 == item.annee %}
                        dataQteAnnuel[dataQteAnnuel.length]   = "{{item.montant}}";
                        chiffreAffaire[chiffreAffaire.length] = "{{item.montant}}";
                    {% endif %}
                {% endfor %}

                {% for item in dots %}
                    {% if item1 == item.annee %}
                        dataDot.push("{{item.nbre}}");
                    {% endif %}
                {% endfor %}

                {% for item in totalProjet %}
                    {% if item1 == item.annee %}
                        dataTotalProjet.push("{{item.nbre}}");
                    {% endif %}
                {% endfor %}

                {% for item in coutProjet %}
                    {% if item1 == item.annee %}
                        dataCoutProjet.push("{{item.montant}}");
                    {% endif %}
                {% endfor %}

                {% for item in projetTermine %}
                    {% if item1 == item.annee %}
                        dataProjetTermine.push("{{item.nbre}}");
                    {% endif %}
                {% endfor %}

                {% for item in projetNonTermine %}
                    {% if item1 == item.annee %}
                        dataProjetNonTermine.push("{{item.nbre}}");
                    {% endif %}
                {% endfor %}

                {% for item in projetNonExecute %}
                    {% if item1 == item.annee %}
                        dataProjetNonExecute.push("{{item.nbre}}");
                    {% endif %}
                {% endfor %}

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

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

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

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

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

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

                if(dataDot['{{loop.index0 - 1}}'] != null) {
                    var total = parseInt(dataDot['{{loop.index0 - 1}}']) + parseInt(dataDot['{{loop.index0}}']);
                    dataDot['{{loop.index0}}'] = total;
                }
 
                if(chiffreAffaire['{{loop.index0}}'] == null) {
                    chiffreAffaire.push('0');
                    dataQteAnnuel.push('0');
                }
            {% endfor %}

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

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

            {% for item in projetNonExecute1 %}
                totalProjetNonExecute = totalProjetNonExecute + parseInt("{{item.nbre}}");
            {% endfor %}
            
            var options1 = {
                chart: {
                    height: 330,
                    type: 'line',
                    zoom: {
                        enabled: false,
                    }
                },
                colors: ['#17418a', '#b52825', '#edb717'],
                series: [{
                    name: 'Chiffre d\'affaires',
                    type: 'column',
                    data: chiffreAffaire
                },{
                    name: 'Dotation 0,3% ',
                    type: 'column',
                    data: dataQteAnnuel
                },{
                    name: 'Coût de projets ',
                    type: 'column',
                    data: dataCoutProjet
                }],
                stroke: {
                    width: [0, 0, 0]
                },
                legend: {				
                    position: 'top',
                    horizontalAlign: 'left',
                },
                labels: dataAnnees,
                xaxis: {
                    type: 'string'
                },
                yaxis: [{
                    title: {
                    text: '',
                    },

                }],tooltip: {
                    y: {
                        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            if(seriesIndex == 0) {
                                return value + " USD";
                            } else if(seriesIndex == 1) {
                                return value + " USD";
                            } else if(seriesIndex == 2) {
                                return value + " USD";
                            } else if(seriesIndex == 3) {
                                return value + " Dot(s)";
                            } else {
                                return value + " Projet(s)";
                            }
                            
                            return value;
                        }
                    }
                }
            }

            var chart1 = new ApexCharts(
                document.querySelector("#market-chart-dotation"),
                options1
            );
            chart1.render();


            var options1 = {
                chart: {
                    height: 330,
                    type: 'line',
                    zoom: {
                        enabled: false,
                    }
                },
                colors: ['#17418a', '#b52825', '#edb717'],
                series: [{
                    name: 'Cahier des charges',
                    type: 'column',
                    data: dataCahier
                },{
                    name: 'Dotation 0,3% ',
                    type: 'column',
                    data: dataDotation
                },{
                    name: 'Redevance ',
                    type: 'column',
                    data: dataRedevance
                }],
                stroke: {
                    width: [0, 0, 0]
                },
                legend: {				
                    position: 'top',
                    horizontalAlign: 'left',
                },
                labels: dataAnnees1,
                xaxis: {
                    type: 'string'
                },
                yaxis: [{
                    title: {
                    text: '',
                    },

                }],tooltip: {
                    y: {
                        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            if(seriesIndex == 0) {
                                return value + " USD";
                            } else if(seriesIndex == 1) {
                                return value + " USD";
                            } else if(seriesIndex == 2) {
                                return value + " USD";
                            }
                            
                            return value;
                        }
                    }
                }
            }
            var chart12 = new ApexCharts(
                document.querySelector("#market-chart-dotation-evolution"),
                options1
            );

            chart12.render();

            var dataQteArrete = [];

            {% for item in 0..11 %}
                {% if arretes[item] is defined %}
                    dataQteArrete.push("{{arretes[item]}}");
                {% endif %}

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

            var options13 = {
                chart: {
                    height: 330,
                    type: 'line',
                    zoom: {
                        enabled: false,
                    }
                },
                colors: ['#17418a', '#ffffff'],
                series: [{
                    name: 'Nombre arrêtés signés',
                    type: 'column',
                    data: dataQteArrete
                },{
                    name: '',
                    type: 'column',
                    data: []
                }],
                stroke: {
                    width: [0]
                },
                legend: {				
                    position: 'top',
                    horizontalAlign: 'left',
                },
                labels: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                xaxis: {
                    type: 'string'
                },
                yaxis: [{
                    title: {
                    text: '',
                    },

                }],tooltip: {
                    y: {
                        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            return value + " arrêté(s)";
                        }
                    }
                }
            }

            var chart13 = new ApexCharts(
                document.querySelector("#market-chart-arrete"),
                options13
            );

            chart13.render();

            {% for commodite in commodites %}
                {% set step = loop.index0 %}
                var dataProdIndu = [];
                var dataProdArti = [];
                var dataExport1   = [];

                {% for item in prodArtisa[step] %}
                    dataProdArti["{{loop.index0}}"] = "{{item}}";
                {% endfor %}

                {% for item in prodIndust[step] %}
                    dataProdIndu["{{loop.index0}}"] = "{{item}}";
                {% endfor %}

                {% for item in dataExport[step] %}
                    dataExport1["{{loop.index0}}"] = "{{item}}";
                {% endfor %}

                var spark2 = {
                chart: {
                    type: 'area',
                    height: 120,
                    sparkline: {
                    enabled: true
                    },
                },
                stroke: {
                    curve: 'smooth'
                },
                fill: {
                    opacity: 0,
                    type: 'solid',
                    gradient: {
                    gradientToColors: ['{{commodite.color}}']
                    },
                },
                series: [{
                    name: 'Production industrielle',
                    data: dataProdIndu
                }],
                labels: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                yaxis: {
                    min: 0
                },
                xaxis: {
                    type: 'string',
                },
                colors: ['{{commodite.color}}'],
                    tooltip: {
                        theme: 'dark',
                        y: {
                            formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            return value + " {{commodite.filiere ? commodite.filiere.unite : ''}}";
                        }
                    }
                    },
                }
                
                var spark2 = new ApexCharts(document.querySelector("#spark_prod_indu_{{commodite.id}}"), spark2);
                spark2.render();

                var spark1 = {
                chart: {
                    type: 'area',
                    height: 120,
                    sparkline: {
                    enabled: true
                    },
                },
                stroke: {
                    curve: 'smooth'
                },
                fill: {
                    opacity: 0,
                    type: 'solid',
                    gradient: {
                    gradientToColors: ['{{commodite.color}}']
                    },
                },
                series: [{
                    name: 'Exportation',
                    data: dataExport1
                }],
                labels: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                yaxis: {
                    min: 0
                },
                xaxis: {
                    type: 'string',
                },
                colors: ['{{commodite.color}}'],
                    tooltip: {
                        theme: 'dark',
                        y: {
                            formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            return value + " {{commodite.filiere ? commodite.filiere.unite : ''}}";
                        }
                    }
                    },
                }
                
                var spark1 = new ApexCharts(document.querySelector("#spark_export_{{commodite.id}}"), spark1);
                spark1.render();  


                var spark3 = {
                chart: {
                    type: 'area',
                    height: 120,
                    sparkline: {
                    enabled: true
                    },
                },
                stroke: {
                    curve: 'smooth'
                },
                fill: {
                    opacity: 0,
                    type: 'solid',
                    gradient: {
                    gradientToColors: ['{{commodite.color}}']
                    },
                },
                series: [{
                    name: 'Production artisanale',
                    data: dataProdArti
                }],
                labels: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                yaxis: {
                    min: 0
                },
                xaxis: {
                    type: 'string',
                },
                colors: ['{{commodite.color}}'],
                    tooltip: {
                        theme: 'dark',
                        y: {
                            formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            return value + " {{commodite.filiere ? commodite.filiere.unite : ''}}";
                        }
                    }
                    },
                }
                
                var spark3 = new ApexCharts(document.querySelector("#spark_prod_arti_{{commodite.id}}"), spark3);
                spark3.render();                    
            {% endfor %}

            var natures        = [];
            var filieres       = [];
            var dataFiliere    = [];
            var colorsFiliere  = [];
            var dataNature     = [];
            var colorsNature   = [];
            var compter        = 0;
            var provinces      = [];
            var dataProvinces  = [];
            var colorsProvince = [];
            var colors         = ["#17418a", "#b52825", "#edb717", "#ee1044", "#278A2F", "#C98714" , '#276B8A', '#307868', '#553078', '#667830', '#783050'];

            {% for item in projetDotByNature %}
                dataNature.push({value: "{{item.nbre}}", name: '{{item.nature}}'});
                natures.push("{{item.nature}}");

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

            compter = 0;

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

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

            compter = 0;

            {% for item in dotByFiliere %}
                dataFiliere.push({value: "{{item.nbre}}", name: '{{item.filiere}}'});
                filieres.push("{{item.filiere}}");

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

            var basicpieChart = echarts.init(document.getElementById('basic-pie'));
            var option = {
            // Add title
                title: {
                    text: '',
                    subtext: '',
                    x: 'center'
                },

                // Add tooltip
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },

                // Add legend
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: natures
                },

                // Add custom colors
                color: colorsNature,

                // Display toolbox
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    feature: {
                        mark: {
                            show: true,
                            title: {
                                mark: 'Markline switch',
                                markUndo: 'Undo markline',
                                markClear: 'Clear markline'
                            }
                        },
                        dataView: {
                            show: true,
                            readOnly: false,
                            title: 'View data',
                            lang: ['View chart data', 'Close', 'Update']
                        },
                        magicType: {
                            show: true,
                            title: {
                                pie: 'Switch to pies',
                                funnel: 'Switch to funnel',
                            },
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    y: '20%',
                                    width: '50%',
                                    height: '70%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {
                            show: true,
                            title: 'Restore'
                        },
                        saveAsImage: {
                            show: true,
                            title: 'Same as image',
                            lang: ['Save']
                        }
                    }
                },

                // Enable drag recalculate
                calculable: true,

                // Add series
                series: [{
                    name: 'Nombre de projets',
                    type: 'pie',
                    radius: '80%',
                    center: ['50%', '57.5%'],
                    data: dataNature
                }]
        };
    
        basicpieChart.setOption(option);

        var basicpieChart = echarts.init(document.getElementById('basic-doughnut'));
            var option = {
            // Add title
                title: {
                    text: '',
                    subtext: '',
                    x: 'center'
                },

                // Add tooltip
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },

                // Add legend
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: filieres
                },

                // Add custom colors
                color: colorsFiliere,

                // Display toolbox
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    feature: {
                        mark: {
                            show: true,
                            title: {
                                mark: 'Markline switch',
                                markUndo: 'Undo markline',
                                markClear: 'Clear markline'
                            }
                        },
                        dataView: {
                            show: true,
                            readOnly: false,
                            title: 'View data',
                            lang: ['View chart data', 'Close', 'Update']
                        },
                        magicType: {
                            show: true,
                            title: {
                                pie: 'Switch to pies',
                                funnel: 'Switch to funnel',
                            },
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    y: '20%',
                                    width: '50%',
                                    height: '70%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {
                            show: true,
                            title: 'Restore'
                        },
                        saveAsImage: {
                            show: true,
                            title: 'Same as image',
                            lang: ['Save']
                        }
                    }
                },

                // Enable drag recalculate
                calculable: true,

                // Add series
                series: [{
                    name: 'Nombre de Dots',
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '57.5%'],
                    data: dataFiliere
                }]
        };
    
        basicpieChart.setOption(option);

        var basicpieChart = echarts.init(document.getElementById('basic-doughnut-province'));
            var option = {
            // Add title
                title: {
                    text: '',
                    subtext: '',
                    x: 'center'
                },

                // Add tooltip
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },

                // Add legend
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: provinces
                },

                // Add custom colors
                color: colorsProvince,

                // Display toolbox
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    feature: {
                        mark: {
                            show: true,
                            title: {
                                mark: 'Markline switch',
                                markUndo: 'Undo markline',
                                markClear: 'Clear markline'
                            }
                        },
                        dataView: {
                            show: true,
                            readOnly: false,
                            title: 'View data',
                            lang: ['View chart data', 'Close', 'Update']
                        },
                        magicType: {
                            show: true,
                            title: {
                                pie: 'Switch to pies',
                                funnel: 'Switch to funnel',
                            },
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    y: '20%',
                                    width: '50%',
                                    height: '70%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {
                            show: true,
                            title: 'Restore'
                        },
                        saveAsImage: {
                            show: true,
                            title: 'Same as image',
                            lang: ['Save']
                        }
                    }
                },

                // Enable drag recalculate
                calculable: true,

                // Add series
                series: [{
                    name: 'Nombre de Dots',
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '57.5%'],
                    data: dataProvinces
                }]
        };
    
        basicpieChart.setOption(option);

        var basicpieChart = echarts.init(document.getElementById('basic-pie-projet'));
            var option = {
            // Add title
                title: {
                    text: '',
                    subtext: '',
                    x: 'center'
                },

                // Add tooltip
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },

                // Add legend
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ["Projets réalisés", "Projets en cours", "Projets non réalisés"]
                },
                // Add custom colors
                color: ['#2D9155', "#D1761B", '#C91414'],

                // Display toolbox
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    feature: {
                        mark: {
                            show: true,
                            title: {
                                mark: 'Markline switch',
                                markUndo: 'Undo markline',
                                markClear: 'Clear markline'
                            }
                        },
                        dataView: {
                            show: true,
                            readOnly: false,
                            title: 'View data',
                            lang: ['View chart data', 'Close', 'Update']
                        },
                        magicType: {
                            show: true,
                            title: {
                                pie: 'Switch to pies',
                                funnel: 'Switch to funnel',
                            },
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    y: '20%',
                                    width: '50%',
                                    height: '70%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {
                            show: true,
                            title: 'Restore'
                        },
                        saveAsImage: {
                            show: true,
                            title: 'Same as image',
                            lang: ['Save']
                        }
                    }
                },

                // Enable drag recalculate
                calculable: true,

                // Add series
                series: [{
                    name: 'Nombre de projets',
                    type: 'pie',
                    radius: '80%',
                    center: ['50%', '57.5%'],
                    data: [
                        {value: totalProjetTermine, name: "Projets réalisés"},
                        {value: totalProjetNonTermine, name:"Projets en cours"},
                        {value: totalProjetNonExecute, name:"Projets non réalisés"}
                    ]
                }]
            };
    
            basicpieChart.setOption(option);
        } 

            var dataJour             = [];
            var dataSemaine          = [];
            var coutJour             = [];
            var coutSemaine          = [];

            {% for item in semaines %}
                var data = {
                    x: "{{item}}",
                    y: 0
                }
                dataSemaine.push(data);
                
                var data = {
                    x: "{{item}}",
                    y: 0
                }

                coutSemaine.push(data);
            {% endfor %}

            var dateOne = new Date("{{dateAnnnee|date('Y')}}" + "-{{mois}}-01");

            {% for item in prodJour %}
                var data = {
                    x: new Date("{{item.dateProd|date('Y-m-d')}}").getTime(),
                    y: "{{item.quantite}}"
                }
                dataJour.push(data);

                {% if item.cout is not null %}
                    var data = {
                        x: new Date("{{item.dateProd|date('Y-m-d')}}").getTime(),
                        y: "{{item.cout}}"
                    }
                {% else %}
                    var data = {
                        x: new Date("{{item.dateProd|date('Y-m-d')}}").getTime(),
                        y: 0
                    }
                {% endif %}
                coutJour.push(data);

                var dateTwo = new Date("{{item.dateProd|date('Y-m-d')}}");

                var dure = dateTwo - dateOne;
                dure     = dure/86400000;
                dure     = dure/7;

                console.log(dure);

                if(dure <= 1) {
                    dataSemaine[0].y = parseFloat(dataSemaine[0].y) + parseFloat("{{item.quantite}}");

                    {% if item.cout is not null %}
                        coutSemaine[0].y = parseFloat(coutSemaine[0].y) + parseFloat("{{item.cout}}");
                    {% endif %}
                    
                } else if(dure > 4) {
                    dataSemaine[4].y = parseFloat(dataSemaine[4].y) + parseFloat("{{item.quantite}}");

                    {% if item.cout is not null %}
                        coutSemaine[4].y = parseFloat(coutSemaine[4].y) + parseFloat("{{item.cout}}");
                    {% endif %}
                } else {
                    var step = parseInt(dure);

                    dataSemaine[step].y = parseFloat(dataSemaine[step].y) + parseFloat("{{item.quantite}}");

                    {% if item.cout is not null %}
                        coutSemaine[step].y = parseFloat(coutSemaine[step].y) + parseFloat("{{item.cout}}");
                    {% endif %}
                }
            {% endfor %}

            var options = {
                series: [{
                    name: "Quantité",
                    type: 'column',
                    data: dataJour
                },
                {
                    name: "Coût",
                    type: 'line',
                    data: coutJour
                }],
                colors: ['{{commodite.color}}', '#b52825'],
                chart: {
                height: 350,
                type: 'line',
                zoom: {
                    enabled: false
                }
                },
                markers: {
                    size: 5,
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'straight'
                },
                title: {
                    text: "",
                    align: 'center'
                },
                grid: {
                row: {
                    colors: ['#f4f6f9', 'transparent'],
                    opacity: 0.5
                },
                },
                xaxis: {
                    type: 'datetime',
                },
                tooltip: {
                    y: {
                        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            if(seriesIndex == 0) {
                                return value + " {{commodite.filiere.unite}}";
                            } else {
                                return value + " USD";
                            }
                        }
                    }
                }
            };

            var chart = new ApexCharts(document.querySelector("#journaliere"), options);
            chart.render();

            var options = {
                series: [{
                    name: "Quantité",
                    type: 'column',
                    data: dataSemaine
                },
                {
                    name: "Coût",
                    type: 'line',
                    data: coutSemaine
                }],
                colors: ['{{commodite.color}}', '#b52825'],
                chart: {
                height: 350,
                type: 'line',
                zoom: {
                    enabled: false
                }
                },
                markers: {
                    size: 5,
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'straight'
                },
                title: {
                    text: "",
                    align: 'center'
                },
                grid: {
                row: {
                    colors: ['#f4f6f9', 'transparent'],
                    opacity: 0.5
                },
                },
                xaxis: {
                    type: 'string',
                },
                yaxis: [{
                    title: {
                    text: '',
                    },
                }],
                tooltip: {
                    y: {
                        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            if(seriesIndex == 0) {
                                return value + " {{commodite.filiere.unite}}";
                            } else {
                                return value + " USD";
                            }
                        }
                    }
                }
            };

            var chart = new ApexCharts(document.querySelector("#semaine"), options);
            chart.render(); 

            var datadataAnneesIntrant = [];
            var dataQteAnnuelIntrant  = [];

            {% for item in besoinIntrat %}
                datadataAnneesIntrant.push("{{item.annee}}");
                dataQteAnnuelIntrant.push("{{item.montant}}");
            {% endfor %}


            var options1 = {
                chart: {
                    height: 330,
                    type: 'line',
                    zoom: {
                        enabled: false,
                    }
                },
                colors: ['#17418a'],
                series: [{
                    name: 'Montant',
                    type: 'column',
                    data: datadataAnneesIntrant
                }],
                stroke: {
                    width: [0]
                },
                legend: {				
                    position: 'top',
                    horizontalAlign: 'left',
                },
                labels: dataQteAnnuelIntrant,
                xaxis: {
                    type: 'string'
                },
                yaxis: [{
                    title: {
                    text: '',
                    },

                }],tooltip: {
                    y: {
                        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                            return value + " {{intrant.unite}}";
                        }
                    }
                }
            }

            var chart1 = new ApexCharts(
                document.querySelector("#market-chartIntrant"),
                options1
            );

            chart1.render(); 


        var dataInit1    = [];
        var dataActulle1 = [];
        var dataName1    = [];

        {% for item in besoinEnergie %}
            dataName1.push("{{item.commodit}}");
            dataActulle1.push("{{item.qteReserve}}");
            dataInit1.push("{{item.qteRessource}}");
        {% endfor %}

        var options1 = {
            chart: {
                height: 330,
                type: 'line',
                zoom: {
                    enabled: false,
                }
            },
            colors: ['#17418a', '#b52825'],
            series: [{
                name: 'Total',
                type: 'column',
                data: dataInit1
            },{
                name: 'Demande spécifique',
                type: 'column',
                data: dataActulle1
            }],
            stroke: {
                width: [0, 0]
            },
            legend: {				
                position: 'top',
                horizontalAlign: 'left',
            },
            labels: dataName1,
            xaxis: {
                type: 'string'
            },
            yaxis: [{
                title: {
                text: '',
                },

            }],tooltip: {
                y: {
                    formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                        return value + " Kw";
                    }
                }
            }
        }

        var chart1 = new ApexCharts(
            document.querySelector("#market-chartEnergie"),
            options1
        );

        chart1.render(); 

        var dotProjet    = [];
        var dotVersement = [];
        var montantDotProjet    = [];
        var montantDotVersement = [];

        {% for item in versementByDot %}
            dotVersement.push('{{item.dot}}');
            montantDotVersement.push('{{item.montant}}');
        {% endfor %}

        {% for item in coutProjetByDot %}
            dotProjet.push('{{item.dot}}');
            montantDotProjet.push('{{item.montant}}');
        {% endfor %}

        var options1 = {
            chart: {
                height: 330,
                type: 'line',
                zoom: {
                    enabled: false,
                }
            },
            colors: ['#17418a'],
            series: [{
                name: 'Coût de projets',
                type: 'column',
                data: montantDotProjet
            }],
            stroke: {
                width: [0]
            },
            legend: {				
                position: 'top',
                horizontalAlign: 'left',
            },
            labels: dotProjet,
            xaxis: {
                type: 'string'
            },
            yaxis: [{
                title: {
                text: '',
                },

            }],tooltip: {
                y: {
                    formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                        return value + " USD";
                    }
                }
            }
        }

        var chart1 = new ApexCharts(
            document.querySelector("#market-chart-dotation123"),
            options1
        );

        chart1.render(); 

        var options1 = {
            chart: {
                height: 330,
                type: 'line',
                zoom: {
                    enabled: false,
                }
            },
            colors: ['#17418a'],
            series: [{
                name: 'Dotation 0,3% versée',
                type: 'column',
                data: montantDotVersement
            }],
            stroke: {
                width: [0]
            },
            legend: {				
                position: 'top',
                horizontalAlign: 'left',
            },
            labels: dotVersement,
            xaxis: {
                type: 'string'
            },
            yaxis: [{
                title: {
                text: '',
                },

            }],tooltip: {
                y: {
                    formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
                        return value + " USD";
                    }
                }
            }
        }

        var chart1 = new ApexCharts(
            document.querySelector("#market-chart-dotation12"),
            options1
        );

        chart1.render(); 
    </script>
{% endblock %}