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

{% block title %}{{parent()}}-Tableau de bord-DOT{% endblock %}

{% block content %}
    <div class="content-wrapper" style="margin-top:180px;">
		<div class="container-full">
			<div class="content-header">
				<div class="d-flex align-items-center">
					<div class="me-auto">
						<h3 class="page-title">Dashboard de la Dotation de 0,3%</h3>
						<div class="d-inline-block align-items-center">
							<nav>
								<ol class="breadcrumb">
									<li class="breadcrumb-item"><a href="{{path('app_home')}}"><i class="mdi mdi-home-outline"></i></a></li>
                                    <li class="breadcrumb-item" aria-current="page">Dashboard</li>
                                    <li class="breadcrumb-item active" aria-current="page">Dotation de 0,3%</li>
								</ol>
							</nav>
						</div>
					</div>
				</div>
			</div>

            <section class="content">
				<div class="row">
                    <div class="mix production all">
                        <div class="row">
                            <div class="col-12 mix production all" style="margin-top:20px;margin-bottom:40px;">
                                <div class="btn-group pull-right" role="group" aria-label="Basic outlined example">
                                    <a href="#" class="badge badge-pill badge-xl badge-primary px-15 btn-outline btn-primary-light text-white" style="background-color:#17418a;" data-bs-toggle="modal" data-bs-target="#staticBackdrop1">
                                        <i class="fa fa-filter"></i>
                                        Filtrer</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12" style="margin-top:30px;">
						<div class="box" id="statistique">
							<div class="table-responsive">
								<div style="min-width:800px;">
									<div class="box-header">
										<h4 class="box-title">Volume total de projets de DOTS par domaine</h4>
									</div>
									<div class="box-body">
										<div id="market-chart11"></div>
									</div>
								</div>
							</div>
						</div>
					</div>

                    <div class="col-xl-6 col-12" style="margin-top:30px;">
						<div class="box" id="statistique">
							<div>
								<div>
									<div class="box-header">
										<h4 class="box-title">Volume total de projets de DOTS par domaine</h4>
									</div>
									<div class="box-body">
										<div id="market-chart12"></div>
									</div>
								</div>
							</div>
						</div>
					</div>

                    <div class="col-xl-6 col-12" style="margin-top:30px;">
						<div class="box" id="statistique">
							<div>
								<div>
									<div class="box-header">
										<h4 class="box-title">Volume total de dotation de 0,3% par province</h4>
									</div>
									<div class="box-body">
										<div id="market-chart13"></div>
									</div>
								</div>
							</div>
						</div>
					</div>

                    <div class="col-12 mix dotation sponsored all" style="margin-top:30px;">
                        <div class="box" id="statistique">
                            <div class="table-responsive">
                                <div style="min-width:1000px;">
                                    <div class="box-header bg-primary-light">
                                        <h4 class="box-title">Versement de la dotation de 0,3% par DOT</h4>
                                    </div>
                                    <div class="box-body">
                                        <div id="market-chart-dotation12"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 mix dotation sponsored all" style="margin-top:30px;">
                        <div class="box" id="statistique">
                            <div class="table-responsive">
                                <div style="min-width:1000px;">
                                    <div class="box-header bg-primary-light">
                                        <h4 class="box-title">Coût de projets par DOT</h4>
                                    </div>
                                    <div class="box-body">
                                        <div id="market-chart-dotation123"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12" style="margin-top:30px;">
						<div class="box" id="statistique">
							<div class="table-responsive">
								<div style="min-width:800px;">
									<div class="box-header">
										<h4 class="box-title">Volume total de dotation de 0,3% par an</h4>
									</div>
									<div class="box-body">
										<div id="market-chart1"></div>
									</div>
								</div>
							</div>
						</div>
					</div>

                    <div class="col-12" style="margin-top:30px;">
                        <div class="box" id="statistique">
                            <div>
                                <div>
                                    <div class="box-header bg-primary-light">
                                        <h4 class="box-title">Evolution comparative entre la redevance, la dotation de 0,3%  et les cahiers des charges.</h4>
                                    </div>
                                    <div class="box-body">
                                        <div id="market-chart-dotation-evolution"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <elevenlabs-convai agent-id="agent_0701kh8g5nenf9y9jcwbs8qfmvyw"></elevenlabs-convai><script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
{% endblock %}

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

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

            var dataNbreOperateur = [];
            var dataProvince      = [];
            var dataMontant       = [];

            var dataNature        = [];
            var dataMontantNature = [];
            var dataNbreNature    = [];

            var dataStade        = [];
            var dataMontantStade = [];
            var dataNbreStade    = [];
            
            {% for item in exportAnnuel %}
                dataAnnees.push("{{item.annee}}");
                dataQteAnnuel.push("{{item.montant}}");
            {% endfor %}

            {% for item in dotationByProvince %}
                dataNbreOperateur.push("{{item.nbre}}");
                dataProvince.push("{{item.province}}");
                dataMontant.push("{{item.montant}}");
            {% endfor %}

            {% for item in projetDotByNature %}
                dataNature.push("{{item.nature}}");
                dataMontantNature.push("{{item.montant}}");
                dataNbreNature.push("{{item.nbre}}");
            {% endfor %}
                

            {% for item in projetDotByStade %}
                {% if item.stade == 'Fini' %}
                    dataStade.push("Projets réalisés");
                    dataMontantStade.push("{{item.montant}}");
                    dataNbreStade.push("{{item.nbre}}");
                {% elseif item.stade == 'En cours' %}
                    dataStade.push("Projets en cours");
                    dataMontantStade.push("{{item.montant}}");
                    dataNbreStade.push("{{item.nbre}}");
                {% elseif item.stade == 'Non exécuté' %}
                    dataStade.push("Projets non réalisés");
                    dataMontantStade.push("{{item.montant}}");
                    dataNbreStade.push("{{item.nbre}}");
                {% else %}
                    dataStade.push("{{item.stade}}");
                    dataMontantStade.push("{{item.montant}}");
                    dataNbreStade.push("{{item.nbre}}");
                {% endif %}
            {% endfor %}

            var options1 = {
                chart: {
                    height: 330,
                    type: 'line',
                    zoom: {
                        enabled: false,
                    }
                },
                colors: ['#17418a'],
                series: [{
                    name: 'Montant',
                    type: 'column',
                    data: dataQteAnnuel
                }],
                stroke: {
                    width: [0]
                },
                legend: {				
                    position: 'top',
                    horizontalAlign: 'left',
                },
                labels: dataAnnees,
                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-chart1"),
                options1
            );
            chart1.render(); 


            var options1 = {
                chart: {
                    height: 330,
                    type: 'line',
                    zoom: {
                        enabled: false,
                    }
                },
                colors: ['#17418a', '#b52825'],
                series: [{
                    name: 'Montant',
                    type: 'line',
                    data: dataMontantNature
                },{
                    name: 'Nombre de projets',
                    type: 'column',
                    data: dataNbreNature
                }],
                stroke: {
                    width: [3]
                },
                legend: {				
                    position: 'top',
                    horizontalAlign: 'left',
                },
                labels: dataNature,
                xaxis: {
                    type: 'string'
                },
                yaxis: [{
                    title: {
                    text: '',
                    },

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

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


            var options1 = {
                chart: {
                    height: 330,
                    type: 'line',
                    zoom: {
                        enabled: false,
                    }
                },
                colors: ['#17418a', '#b52825'],
                series: [{
                    name: 'Montant',
                    type: 'line',
                    data: dataMontantStade
                },{
                    name: 'Nombre de projets',
                    type: 'column',
                    data: dataNbreStade
                }],
                stroke: {
                    width: [3]
                },
                legend: {				
                    position: 'top',
                    horizontalAlign: 'left',
                },
                labels: dataStade,
                xaxis: {
                    type: 'string'
                },
                yaxis: [{
                    title: {
                    text: '',
                    },

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

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


            var options1 = {
                chart: {
                    height: 330,
                    type: 'line',
                    zoom: {
                        enabled: false,
                    }
                },
                colors: ['#17418a', '#b52825'],
                series: [{
                    name: 'Montant',
                    type: 'line',
                    data: dataMontant
                },{
                    name: 'Nombre de sociétés',
                    type: 'column',
                    data: dataNbreOperateur
                }],
                stroke: {
                    width: [3]
                },
                legend: {				
                    position: 'top',
                    horizontalAlign: 'left',
                },
                labels: dataProvince,
                xaxis: {
                    type: 'string'
                },
                yaxis: [{
                    title: {
                    text: '',
                    },

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

            var chart1 = new ApexCharts(
                document.querySelector("#market-chart13"),
                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();

            var dataAnnees1   = [];
            var dataDotation  = [];
            var dataCahier    = [];
            var dataRedevance = [];

            {% 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 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();
        }
    </script>
{% endblock %}