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

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

{% block content %}
	<div class="container single-template">
		<div class="page-header">
			<div style="margin-bottom: 20px;">
				<select class="form-control select2" onChange="changeCommune(this)" style="margin-bottom: 30px;">
						{% for c in communes %} 
							<option value={{c.id}} {{commune.id==c.id ? 'selected' : ''}}> {{c.name}} </option>
						{% endfor %}
				</select>
			</div>

			<div class="row">
				<div class="col-xl-6 col-lg-6">
					<h1 class="page-title">
						Commune
																									:
						{{ commune.name }}
					</h1>
				</div>
				<div class="col-xl-6 col-lg-6">
					<a href="{{ path('download_commune', { 'id': commune.id }) }}">
						<span style="background: #009b !important; font-size: 16px; padding: 10px 10px 10px 10px; color: #fff; border: 0; text-align: center; width: 250px; float: right;">
							Télécharger les données
						</span>
					</a>
				</div>
			</div>
		</div>

		<div class="container row" style="max-width: 100%;">

			<!-- <div class="col-lg-4 entries">
				<div class="template-details">
					<h2>Indicateurs renseignables
					</h2>
					<ul style="list-style-type: none;">
						{% for indicateur in indicators %}
							<li style="padding: 3px 0 2px 0;">
								<font size="-1">
									<a href="">
										<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>
								</font>
							</li>
						{% endfor %}
					</ul>

				</div>
			</div>-->

			<div class="col-lg-12">
				{{commune.description}}
				<div class="template-details" style="margin-top: 30px; margin-bottom : 30px;">
					<h2>Les cibles spatialisées par la commune</h2>
				</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">
						{% for odd in odds %}
							{% if settingsManager.getCibleCommuneByOdd(commune, odd) | length  > 0 %}
						<li>

							<a data-bs-toggle="collapse" data-bs-target="#faq{{odd.id}}" class="collapsed" aria-expanded="false">
								<div class="template-details">
									<h2>
										ODD {{odd.code}} : {{odd.name}}
									</h2>
								</div>
							</a>
							
							<div id="faq{{odd.id}}" class="collapse show" data-bs-parent=".faq-list">
							<ul style="list-style-type: none;">
							{% for cible in settingsManager.getCibleCommuneByOdd(commune, odd) %}
										<li style="margin-bottom: 10px; padding-bottom: 0px; color: #023b6d;">
												<svg class="icon icon-chevron-right" fill="currentColor">
													<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
												</svg>
												Cible {{ cible.code }}
												-
												{{ cible.description }}


												{% if settingsManager.getIndicateurDesagregeCommuneByCible(cible) | length > 0  or settingsManager.getIndicateursRenseignablesByCible(cible) | length > 0  %}
												<div style="margin:10px;">
													<table id="suiviIndicateurTable" class="table table-striped">
														<thead>
															<th>
																<div class="row mt-2 mb-2">
																	<div class="col-7">Indicateur</div>
																		{% for i in 4..0 %}
																		<div class="col-1 float-left text-center">{{ year - i }}</div>
																		{% endfor %}
																</div>
															</th>
														</thead>
													{% for indicateur in settingsManager.getIndicateurDesagregeCommuneByCible(cible) %}
														<tr>
															<td>
																<div class="row mt-2 mb-2">
																	<div class="col-7">{{ indicateur.code }} : {{indicateur.name}}</div>
																		{% for i in 4..0 %}
																		<div class="col-1 float-left text-center">{{ settingsManager.getValeurIndicateur(year - i, indicateur, 3,commune.id ) }}</div>
																		{% endfor %}
																</div>
															</td>
														</tr>
													{% endfor %}
													{% for indicateur in settingsManager.getIndicateursRenseignablesByCible(cible) %}
													<tr>
														<td>
															<div class="row mt-2 mb-2">
																<div class="col-7">{{ indicateur.code }} : {{indicateur.name}}</div>
																	{% for i in 4..0 %}
																	<div class="col-1 float-left text-center">{{ settingsManager.getIndiceCommune(commune, indicateur, year - i) }}</div>
																	{% endfor %}
															</div>
														</td>
													</tr>
													{% endfor %}
													</table>
												</div>
												{% endif %}
										</li>
									{% endfor %}
								</ul>
							</div>
						</li>
						{% endif %}
						{% endfor %}
						</ul>

					</div>
					</section>

			

		</div>

		<div class="page-header">
			<h1 class="page-title" style="margin-top:40px;">
				Valeur des indicateurs renseignables par la commune
			</h1>
		</div>

		<div class="row gx-md-5 gy-3">
			<div class="col-lg-12">
				<a href="{{ path('download_commune', { 'id': commune.id }) }}">
					<span style="background: #009b !important; font-size: 16px; padding: 10px 10px 10px 10px; color: #fff; border: 0; text-align: center; width: 250px; float: right;">
							Télécharger
						</span>
				</a>

				<div id="download-template" class="pt-4">
					<div class="row gx-1 download-template">
						<div class="col-xl-12 licenses">
							<div class="row gx-1">
								<div class="col-lg-1">
									<div class="title" style="border-bottom: 0px; height: 55px;">
										<h2>Code</h2>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="title" style="border-bottom: 0px; height: 55px;">
										<h2>Indicateur</h2>
									</div>
								</div>
								{% for i in 4..0 %}
								<div class="col-lg-1">
									<div class="title" style="border-bottom: 0px; height: 55px;">
										<h2>{{year - i}}</h2>
									</div>
								</div>
								{% endfor %}
							</div>
							{% for indicateur in indicators %}
								<div class="row gx-1">
									<div class="col-lg-1 d-none d-xl-block features-list" style="margin-top: 0px;">
										<ul>
											<li>
												<span style="margin-top: 15px;">{{indicateur.code}}</span>
											</li>
										</ul>
									</div>
									<div class="col-lg-6 d-none d-xl-block features-list" style="margin-top: 0px;">
										<ul>
											<li>
												<span style="margin-top: 15px;">{{indicateur.name}}</span>
											</li>
										</ul>
									</div>
									{% for i in 4..0 %}
									<div class="col-lg-1 d-none d-xl-block features-list" style="margin-top: 0px;">
										<ul>
											<li>
												<span style="margin-top: 15px;">
													{{settingsManager.getIndiceCommune(commune, indicateur, settingsManager.getYear(year - i))}}
												</span>
											</li>
										</ul>
									</div>
									{% endfor  %}
								</div>
							{% endfor %}
						</div>
					</div>
				</div>

			</div>

		</div>

		<div class="page-header">
			<h1 class="page-title" style="margin-top:40px;">
				Les normes d'actions de la commune
			</h1>
		</div>


		<div id="faqNorme" class="collapse show" data-bs-parent=".faq-list">
							<ul style="list-style-type: none;">
							{% for norme in commune.normeActionCommunes %}
										<li style="margin-bottom: 10px; padding-bottom: 0px; color: #023b6d;">
												<svg class="icon icon-chevron-right" fill="currentColor">
													<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
												</svg>
												Norme {{ norme.code }}
												-
												{{ norme.name }}
										</li>
									{% endfor %}
								</ul>
							</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 changeCommune(val){
    let route =  "{{ path('commune', {id: 'commune_'})|escape('js') }}";
    route = route.replace('commune_', val.value);
    window.location = route;
}
</script>

{% endblock %}