{% set idmap = id|default('mapid') %}
{% set prestataires = getAllPrestataires() %}
<script>
	var mymap = null;
	var mapFilters = [];

	$(function () {
		$('[data-toggle="tooltip"]').tooltip();

		function drawMap() {
			if ($('#{{idmap}}').length) {
				mymap = L.map('{{idmap}}').setView({{KOH_MAP_CENTER}}, {{KOH_MAP_ZOOM}});
				L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {maxZoom: 18, attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(mymap);

				{# AJOUT DES MARQUEURS SUR LA CARTE #}
				{% set count = 1 %}
				{% for presta in prestataires %}
					{% if presta.geolocs|length > 0 %}
						{% for geolocp in presta.geolocs %}
							{% if geolocp.enabled and geolocp.geoloc.lat != null and geolocp.geoloc.lon != null %}
								// get presta rubriques
								var prestaRubriquesSlug = [];
								{% for rubrique in presta.rubriques %}
									prestaRubriquesSlug.push('{{ rubrique.slug }}')
								{% endfor %}

								// add presta to map if there's no filter or if one of its rubriques match any active filter
								if (
									mapFilters.length === 0
									|| mapFilters.length > 0
									&& mapFilters.some(el => prestaRubriquesSlug.includes(el))
								) {									
									{% if presta.rubriques|length > 0 and presta.rubriques.first.media is not null %}
										var iconClassName = 'kohinos-map-icon';
										{% if date(presta.getCreatedAt()) > date('-2months') %}
											iconClassName = 'kohinos-map-icon new-presta-icon';
										{% endif %}
										var icon = L.icon({ 
												iconSize: [50, 50],
												iconAnchor: [25,50],
												className: iconClassName,
												iconUrl : '{% path presta.rubriques.first.media, "preview" %}'
											});
										var marker_{{count}} = L.marker([{{geolocp.geoloc.lat}}, {{geolocp.geoloc.lon}}], {icon: icon}).addTo(mymap);
									{% else %}
										var marker_{{count}} = L.marker([{{geolocp.geoloc.lat}}, {{geolocp.geoloc.lon}}]).addTo(mymap);
									{% endif %}
									marker_{{count}}.bindPopup("{% spaceless %}{% if presta.media != null %}{% set media %}{% thumbnail presta.media, 'small' %}{% endset %} {{ media|raw|replace({'"' : "'"})|raw }}<br/><br/>{% endif %}
										{% if date(presta.getCreatedAt()) > date('-2months') %}
											<strong style='font-size:16px;'>[Nouveau] </strong>
										{% endif %}
										<a href='{{ path('show_prestataire', {'slug': presta.slug}) }}'>
											<strong style='font-size:16px;'>{{presta.__toString()}}</strong>
										</a>
										<br/>
										{% if presta.horaires is not null %}
											<p>{{presta.horaires}}</p>
										{% endif %}
										{% for rubrique in presta.rubriques %}
											<a class='maprubrique' href='{{ path('show_rubrique', {'slug': rubrique.slug}) }}'>{{rubrique.name|replace({"\n": '<br/>'})}}</a>{% if not loop.last %} - {% endif %}
										{% endfor %}
										{% endspaceless %}");
									{% set count = count+1 %}
								}
							{% endif %}
						{% endfor %}
					{% endif %}
				{% endfor %}
			}
		}

		drawMap();

		// Listeners for map filters buttons
		$('.presta-map-filter').each(function() {
			$(this).click(() => {
				let slug = $(this).data('rubriqueSlug');

				let activeFilterIndex = mapFilters.indexOf(slug);
				if (activeFilterIndex === -1) {
					// add rubrique slug to fiters array if it doesn't exist...
					mapFilters.push(slug);
					$(this).removeClass('btn-primary').addClass('btn-success');
				} else {
					// ... else, add it
					mapFilters.splice(activeFilterIndex, 1); 
					$(this).addClass('btn-primary').removeClass('btn-success');
				}

				// Redraw map
				mymap.remove();
				drawMap();
			});
		});

	});
</script>
