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

{% block content %}
<div class="container single-template">
	<div class="page-header">
		<a href="{{ path('odd', { 'id': goal.id }) }}"><h1 class="page-title">
			{{agenda=='2030' ? 'ODD' : 'Aspiration' }} {{ goal.code }} : {{goal.name}}
		</h1></a>
	</div>

	<div class="row gx-md-5 gy-3">
		<div class="{{agenda=='2030' ? 'col-lg-8' : 'col-lg-12'}}">

			<div class="download-template" style="margin-top:0px;">

				<div class="licenses">
					<div class="title">
						<h2>{{agenda=='2030' ? 'Cible' : 'Objectifs' }}  {{ target.code }} : {{target.name}}</h2>
					</div>
				</div>
			</div>


			<div class="single-contnet pt-4">
				{{target.description}}
				<br>
				<br>
				<br>
				<div class="template-details">
					<h2>Les {{agenda=='2030' ? 'indicateurs' : 'domaines' }}  de {{agenda=='2030' ? 'la cible ' : "l'objectif " }}  {{target.code}}
					</h2>
				</div>

				<ul style="list-style-type: none;">
					{% for indicateur in target.indicators %}
						<li style="margin-bottom: 10px;">

							<a href="{{ path('indicateur', { 'id': indicateur.id }) }}">
								<svg class="icon icon-chevron-right" fill="currentColor">
									<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
								</svg>
								{{ indicateur.code }}
								-
								{{ indicateur.name }}
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
		{% if agenda=='2030' %}
		<div class="col-lg-4">
			<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 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" width="300px" height="540px" 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.getTargetStatutColor(year, target, 2, departement.id) %}
						<a onclick="chargerCommune({{departement.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>
		{% endif %}
	</div>
{% if agenda=='2030' %}
<div class="page-header">
		<h1 class="page-title">
			Situation de la cible {{target.code}} au Bénin
		</h1>
	</div>

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

</div>
{% endif %}
{% endblock %}

{% block js %}
<script src="{{ asset('plugins/jquery/jquery.min.js') }}"></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 %}