{% extends 'frontend/layout.html.twig' %}

{% block css %}
    <link href="{{ asset('assets/css/select2.min.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
	{% set goal = indicateur.target.goal %}
    <div class="container row" style="max-width: 100%;">

        <div class="col-lg-4 entries" style="height:600px;overflow-y: scroll;">
            <br>
            <div class="template-details">
                <h2>Indicateurs </h2>
                <select class="form-control select2" onChange="changeODD(this)">
                    {% for g in goals %} 
                        <option value={{g.id}} {{goal.id==g.id ? 'selected' : ''}}>ODD {{g.code}} : {{g.name}} </option>
                    {% endfor %}
                </select>
                <br>
                <br>

                <ul style="list-style-type: none;">
					{% for target in goal.targets %}
					{% for indicateur in target.indicators %}
						{% set flag=settingsManager.getIndicateurStatutColor(year, indicateur, 1, null) %}
						<li style="padding: 3px 0 2px 0;">
                            <font size="-1">
							<a href="{{ path('indicateur', { 'id': indicateur.id, 'odd': indicateur.target.goal.id }) }}">
								<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1k33q06" style="fill-rule:evenodd;clip-rule:evenodd;fill:{{flag}};stroke:{{flag}};stroke-width:1;stroke-miterlimit:10;" focusable="false" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M12 4.08A7.92 7.92 0 0 0 4.08 12 7.92 7.92 0 0 0 12 19.92 7.92 7.92 0 0 0 19.92 12 7.92 7.92 0 0 0 12 4.08Z" style="stroke-width: 0.792;"></path></svg>
								{{ indicateur.code }}
								-
								{{ indicateur.name }}
							</a>
                            </font>
						</li>
					{% endfor %}
					{% endfor %}
				</ul>
				
			</div>
		</div>
		<div class="row col-lg-8">
		<div class=" col-lg-12 download-template">
				<div class="licenses">
					<div class="title"  style="height : auto;">
						{% if id==0 %}
							<strong>Sélectionner un indicateur pour voir sa situation au Bénin. Pour sa situation dans une commune, choisir d'abord un département.</strong>
						{% else %}
							<strong>{{indicateur.code}}. {{indicateur.name}}</strong>
						{% endif %}
					</div>
				</div>
			</div>

        <div class="col-lg-5">
			<div class="single-sidebar">

				<svg version="1.1" id="Benin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  height="500px" viewbox="0 0 432 755" style="enable-background:new 0 0 432 755;" xml:space="preserve">
						<defs>
							<style>
								#carte path {
									cursor: pointer;
								}
								path:hover {
									opacity: .5;
								}
							</style>
						</defs>
						{% for departement in departements %}
						{% set flag=settingsManager.getIndicateurStatutColor(year, indicateur, 2, departement.id) %}
						<a onclick="chargerCommune({{departement.id}}, {{indicateur.id}})" class="tooltips" data-container="body" data-original-title="{{departement.name}}">
							<path
								id="departement{{departement.id}}" style="fill-rule:evenodd;clip-rule:evenodd;fill:{{flag}};stroke:#000;stroke-width:1;stroke-miterlimit:10;" d="{{departement.coordonnee}}"><title>{{departement.name}}</title>
							</path>
						</a>
						{% endfor %}
					</svg>
			</div>
		</div>

		<div class="col-lg-7">
							<div class="row">
								<div class="col-lg-6">
										<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1k33q06" style="fill-rule:evenodd;clip-rule:evenodd;fill:#cccccc;stroke:#cccccc;stroke-width:1;stroke-miterlimit:10;" focusable="false" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M12 4.08A7.92 7.92 0 0 0 4.08 12 7.92 7.92 0 0 0 12 19.92 7.92 7.92 0 0 0 19.92 12 7.92 7.92 0 0 0 12 4.08Z" style="stroke-width: 0.792;"></path></svg>
										Non applicable
								</div>
							{% for s in status %}
								<div class="col-lg-6">
										<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1k33q06" style="fill-rule:evenodd;clip-rule:evenodd;fill:{{s.flag}};stroke:{{s.flag}};stroke-width:1;stroke-miterlimit:10;" focusable="false" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M12 4.08A7.92 7.92 0 0 0 4.08 12 7.92 7.92 0 0 0 12 19.92 7.92 7.92 0 0 0 19.92 12 7.92 7.92 0 0 0 12 4.08Z" style="stroke-width: 0.792;"></path></svg>
										{{ s.name }}
								</div>
							{% endfor %}
							</div>
			<div id="communes">
                
            </div>		
		</div>
		</div>
	</div>

	<div class='container single-template'>
	<div class="page-header">
		<h1 class="page-title">
			Situation de l'indicateur {{indicateur.code}} au Bénin
		</h1>
	</div>

	<div id="chart"></div>

	</div>

	</div>

	
{% endblock %}

{% block js %}
    <script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
<script>
$(document).ready(function() {
    $('.select2').select2();
});

function changeODD(val){
    let route =  "{{ path('selectodd', {id: 'odd_'})|escape('js') }}";
	route = route.replace('odd_', val.value);
    window.location = route;
}

function commune(id){
    let route =  "{{ path('commune', {id: 'commune_'})|escape('js') }}";
    route = route.replace('commune_', id);
    window.location = route;
}
</script>

<script>
    function chargerCommune(departement, indicateur){
        let route =  "{{ path('chargerCommunes', {id: 'departement_', ind: 'indicateur_'})|escape('js') }}";
        route = route.replace('departement_', departement);
		route = route.replace('indicateur_', indicateur);

        $.ajax({
                url: route,
                data: null,
                type: 'GET',
                success: function(data) {
                    $('#communes').html(data);
                }
            });
    }
</script>

<script src="{{asset('plugins/apexcharts/apexcharts.js')}}"></script>

<script>
$.getJSON('{{asset('plugins/apexcharts/locales/fr.json')}}', function(data) {
var fr = data

var options = {
  chart: {
    type: 'bar',
    locales: [fr],
    defaultLocale: 'fr',
  },
  series: [{
    name: 'Indice global',
    data: {{data | json_encode |raw}}
  }],
  xaxis: {
    categories: {{annees | json_encode |raw}}
  },
  legend: {
      show: false,
      },
  plotOptions: {
        bar: {
            distributed: true,
        },
    },
  colors: {{colors | json_encode |raw}},
  yaxis: { 
	min : 0,
},
}

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

chart.render();
});
</script>

{% endblock %}