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

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

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

        <div class="col-lg-4 entries" style="height:540px;overflow-y: scroll;">
            <br>
            <div class="template-details">
                <h2>Indicateurs renseignables par les communes</h2>
                <ul style="list-style-type: none;">
					{% for indicateur in indicators %}
						<li style="padding: 3px 0 2px 0;">
                            <font size="-1">
							<a href="" style="pointer-events: none; cursor: default;">
								<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-3">
			<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 %}
						<a onclick="chargerCommune2({{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:#dff1fd;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-5">
            <div class="download-template">

				<div class="licenses">
					<div class="title" style="height: auto;">
						Pour voir les cibles spatialisées par une commune ainsi que ces indicateurs, veuillez sélectionner un département puis la commune
					</div>
				</div>
			</div>

            <div id="communes">
                
            </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('indicateur', {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 chargerCommune2(departement){
        let route =  "{{ path('chargerCommunes2', {id: 'departement_'})|escape('js') }}";
        route = route.replace('departement_', departement);

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