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

{% block content %}
<div class="container single-template">
	<div class="page-header">
		<h1 class="page-title">
			ODD
			{{ goal.code }}
			:
			{{ goal.name }}
		</h1>
	</div>

	<div class="row gx-md-5 gy-3">
		<div class="col-lg-8">

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

				<div class="licenses">
					<div class="title" style="height: 100%">
						<h2>{{ goal.description }}</h2>
					</div>
				</div>
			</div>


			<div class="single-contnet pt-4">
				{% set file =  'html/goal_'  ~  goal.code  ~ '.html' %}
				{% include file %}
				<br>
			</div>
		</div>
		<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.getGoalStatutColor(year, goal, 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>
	</div>




<section id="faq" class="faq">
      <div class="container aos-init aos-animate" data-aos="fade-up">

        <ul class="faq-list accordion aos-init aos-animate" data-aos="fade-up">

         <li>
            <a data-bs-toggle="collapse" class="" data-bs-target="#faq1" aria-expanded="true">
				<div class="template-details">
					<h2>Les cibles prioritaires de l'ODD {{goal.code}}</h2>
				</div>
			
			<i class="bx bx-chevron-down icon-show"></i>
			<i class="bx bx-x icon-close"></i>
			</a>
            <div id="faq1" class="collapse show" data-bs-parent=".faq-list" style="">
              <ul style="list-style-type: none;">
					{% for target in targets %}
						<li style="margin-bottom: 10px; padding-bottom: 0px;">

							<a href="{{ path('cible', { 'id': target.id }) }}">
								<svg class="icon icon-chevron-right" fill="currentColor">
									<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
								</svg>
								{{ target.code }}
								-
								{{ target.description }}
							</a>
						</li>
					{% endfor %}
				</ul>

            </div>
          </li>

          <li>
            <a data-bs-toggle="collapse" class="collapsed" data-bs-target="#faq2" aria-expanded="false">
				<div class="template-details">
					<h2>Les indicateurs de l'ODD
						{{goal.code}}</h2>
				</div>
			
			<i class="bx bx-chevron-down icon-show"></i>
			<i class="bx bx-x icon-close"></i>
			</a>
            <div id="faq2" class="collapse" data-bs-parent=".faq-list" style="">
              <ul style="list-style-type: none;">
					{% for target in targets %}
						<li style="margin-bottom: 10px; padding-bottom: 0px;">
								<strong>
								<svg class="icon icon-chevron-right" fill="currentColor">
									<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
								</svg>
								{{ target.code }}
								-
								{{ target.description }}
								</strong>

								<ul style="list-style-type: none;">
					{% for indicator in target.indicators %}
						<li style="margin-bottom: 10px; padding-bottom: 0px;">
							<a href="{{ path('indicateur', { 'id': indicator.id }) }}">
								<svg class="icon icon-chevron-right" fill="currentColor">
									<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
								</svg>
								{{ indicator.code }}
								-
								{{ indicator.name }}
							</a>
						</li>
					{% endfor %}
				</ul>
						</li>
					{% endfor %}
				</ul>

            </div>
          </li>
		 {% if goal.alignement %}
		  <li>
            <a data-bs-toggle="collapse" class="collapsed" data-bs-target="#faq3" aria-expanded="false">
				<div class="template-details">
					<h2>Alignement de l'ODD avec l'agenda 2063</h2>
				</div>
			
			<i class="bx bx-chevron-down icon-show"></i>
			<i class="bx bx-x icon-close"></i>
			</a>
            <div id="faq3" class="collapse" data-bs-parent=".faq-list" style="">
              <ul style="list-style-type: none;">
					{% for ali in goal.alignement %}
						{% set entity = settingsManager.getODD(ali[0]) %}
						<li style="margin-bottom: 10px; padding-bottom: 0px;">
								<svg class="icon icon-chevron-right" fill="currentColor">
									<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
								</svg>
								Aspiration {{entity.code}} :  {{entity.name}}
								
								<br>
								<button type="button" class="btn btn-{{ali[1]=='Fort' ? 'success' : 'danger'}} btn-sm" style="padding: 2px; font-size: 10px;">{{ali[1]}}</button>
						</li>
					{% endfor %}
				</ul>

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

        </ul>

      </div>
    </section>





<div class="page-header">
		<h1 class="page-title">
			Evolution de l'ODD {{goal.code}} au Bénin
		</h1>
	</div>

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

<div class="page-header">
		<h1 class="page-title">
			Les autres ODD
		</h1>
	</div>

<div class="row gx-md-5 gy-3">
		{% for g in goals %}
						{% if g.code != goal.code %}
							<div class="col-xl-2 col-lg-2">
								<div class="icon-box">
										<a href="{{ path('odd', { 'id': g.id }) }}"> <img src="{{asset('dist/img/goal-')}}{{ g.code }}.png" style="width:100%"></a>
								</div>
							</div>
						{% endif %}
					{% endfor %}

</div>
</div>
{% 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 %}