{% extends "baseMap.html.twig" %}

{% block title %}Map:edit{% endblock %}

{% block body %}

	<div id="mapid" style="width: 100%; height: 1770px;"></div>
	<!-- Button trigger modal -->
	<div class="standsList" data-stands = "{{ exhibitionStandList }}" >
	</div>

{% endblock %}
{% block javascripts %}
	{{ parent() }}
	<script>

		$(document).ready(function() {
			$collectionStandHolder = $('div.standsList');
			console.log('stands');

			console.log($collectionStandHolder.data('stands'));
			$collectionStandHolder.data('stands').forEach(stand => {
				console.log('position map'+stand.vchAreaposition);
				var poi = JSON.parse(stand.vchAreaposition );
				console.log(poi);

				var dataPolygon = [];

				poi[0].forEach(element=>{

					dataPolygon.push([element.lat, element.lng]);
				});
				var path_delete = "{{ path('map_delete') }}";
				var path_edit = "{{ path('edit_map') }}";
			 /*<a href='"+path_edit+'?id='+stand.id+"&poi='"+JSON.stringify(poi)+"' onclick='showEditStandModal(this.href); return false;'  >Edit <a/>*/
				L.polygon(dataPolygon, {
					color: '#0a4400',
					fillColor: '#08ff00',
					fillOpacity: 0.5
				}).addTo(map).bindPopup("<b>"+stand.vchCode+"</b><br />"+stand.vchName+".<br /><br />"+
						"<a href='"+path_delete+'?stand_id='+stand.id+"'   > DELETE <a/>"
				);

			});



		});

		// Using leaflet.js to pan and zoom a big image.
		// See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
		// create the slippy map
		var map = L.map('mapid', {
			minZoom: 1,
			maxZoom: 6,
			center: [-55, 32],
			zoom: 2.5,
			crs: L.CRS.Simple
		});
		// dimensions of the image
		var w = 6150,
		//h = 1746.7,
            h= 6140,

		// url = 'http://blackicemedia.com/presentations/2013-02-hires/img/awesome_tiger.svg';//'fond_old1.jpg';
		url = '/images/plan-map.svg';//'fond_old1.jpg'viva19_01.svg;
		// calculate the edges of the image, in coordinate space
		var southWest = map.unproject([0, h], map.getMaxZoom()-1);
		var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
		var bounds = new L.LatLngBounds(southWest, northEast);
		// add the image overlay,
		// so that it covers the entire map
		L.imageOverlay(url, bounds).addTo(map);
		// tell leaflet that the map is exactly as big as the image
		map.setMaxBounds(bounds);







		// Initialise the FeatureGroup to store editable layers
		var editableLayers = new L.FeatureGroup();
		map.addLayer(editableLayers);

		var drawPluginOptions = {
			position: 'topright',
			draw: {
				polygon: true,
				// disable toolbar item by setting it to false
				polyline: false,
				circle: false, // Turns off this drawing tool
				rectangle: false,
				marker: false,
			},
			edit: {
				featureGroup: editableLayers, //REQUIRED!!
				remove: false
			}
		};

		// Initialise the draw control and pass it the FeatureGroup of editable layers
		var drawControl = new L.Control.Draw(drawPluginOptions);
		map.addControl(drawControl);

		var editableLayers = new L.FeatureGroup();
		map.addLayer(editableLayers);

		var ligneCoordonnes = [];
		map.on('click', function(e){
			var coord = e.latlng;
			var lat = coord.lat;
			var lng = coord.lng;
			data= {
				"log":lng,
				"lat"  : lat
			};
			ligneCoordonnes.push(data);
			console.log(ligneCoordonnes);
		});
		map.on('draw:created', function(e) {
			var type = e.layerType,

					layer = e.layer;
			console.log(type);
			console.log(layer);
			//	console.log(layer.getLatLngs());
			if (type === 'marker') {
				layer.bindPopup('A popup!');
			}
			console.log('type')

			if(type=='polygon'){
				//window.location.replace("/map/edit?id=&poi="+JSON.stringify(layer.getLatLngs()));
				// console.log(JSON.stringify(layer.getLatLngs()));
				//$('#stand_vchAreaposition').val(JSON.stringify(layer.getLatLngs()));
				$('#stand_model').modal({
					backdrop: 'static',
					keyboard: false
				});

				let LatLngs;
				let LatLgnsSansDoublons = [];

				if (layer.getLatLngs().length > 0 ) {
					LatLngs = layer.getLatLngs()[0];
			
					jsonObject = LatLngs.map(JSON.stringify);
    
            		unique = new Set(jsonObject);

            		LatLgnsSansDoublons[0] = Array.from(unique).map(JSON.parse);
             
					//console.log(LatLgnsSansDoublons);
				}
				else {
					LatLgnsSansDoublons = layer.getLatLngs();
					}

			//	console.log("web/map/edit?id=&poi="+JSON.stringify(LatLgnsSansDoublons)+'&ligne='+JSON.stringify(ligneCoordonnes));
				$( "#stand_model .modal-content" ).load( "/map/edit?id=&poi="+JSON.stringify(LatLgnsSansDoublons)+'&ligne='+JSON.stringify(ligneCoordonnes), function() {
				//$( "#stand_model .modal-content" ).load( "edit?id=&poi="+JSON.stringify(layer.getLatLngs())+'&ligne='+JSON.stringify(ligneCoordonnes), function() {
					//alert( "Load was performed." );
				});
			}

			editableLayers.addLayer(layer); 


		});


		function showEditStandModal(url){
			$('#stand_model').modal({
				backdrop: 'static',
				keyboard: false
			});
			$( "#stand_model .modal-content" ).load(url, function() {
				// alert( "Load was performed. EDIT" );
			});
		}
	</script>
{% endblock %}