{% extends "::baseTotem.html.twig" %}

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

{% block body %}
<!-- Button trigger modal -->


<div id="mapid"
	style="width: 4770px;
    height: 1770px;
    background-color: transparent !important;
    position: absolute;
    left: 3px;
    top: 193px;"></div>
<!-- Button trigger modal -->
	<!-- 	<img src="/images/vdo.jpg" style="margin-top: 84px;margin-left: 82px;">-->
<div class="standsList" data-stands="{{ exhibitionStandList }}"></div>
	<div style="position: absolute; top: 519px;left: 1449px">
		<ul>
			<li ><img onclick='initFilter();' src="/images/bt_reset3.png" ></li>
		</ul>
	</div>
 <div class="search">
		<div class="searchbox" style="margin-top: 56px">
		<select id="innovationsSel" onchange="showInnovation(this)" style="width: 645px;
    height: 70px;
    font-size: 26pt;"
	-webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
	>
		<option value=""></option> 
		{% for innovation in innovations %}
		{% if innovation.exhibitors|length > 0 %}
			{% if innovation.exhibitors[0].tExhibitionStandI %}
                {% set libelle = innovation.vchLibelle |split(',') %}
			<option value="{{ innovation.exhibitors[0].tExhibitionStandI.iId }}">{{ libelle[0] }}</option>
		{% endif %}
		{% endif %}
	{% endfor %}
	</select>
			</div>	</div>

<div id="ListExhibitors-box"
	style="">
	<div class="exhibitor-list" style="list-style-type: none;">
	{% for exhibitor in exhibitors %}
		{% if exhibitor.tExhibitionStandI %}
			{% set activities = exhibitor.vchZone %}
			{% for activityI in exhibitor.tExhibitionActivityI %}
				{% set activities  = activities ~ ' ' ~ activityI.vchCode %}
				{% endfor %}
				<div  style="list-style-type: none;width:100%;" onclick="showExposant('{{ exhibitor.tExhibitionStandI.iId  }}')" class="row exhibitorItem  {{ activities }} ">
					<div class="col-md-3 stand_label" style="color: red">
						{{ exhibitor.vchStand|e }}
					</div>
					<div class="col-md-9 stand_name">
						{{ exhibitor.vchName|e }}
					</div>

				</div>
		{% endif %}
    {% endfor %}
	</div>
</div>
	<!--
<div id="tour_block">
		<div id="tour_start">
		</div>
		<div id="tour_end">
		</div>
</div>-->
<div id="zone" >
		<ul>
			<li  onclick='showZone("secteur1");'><img src="/images/filtre1.png" ></li>
			<li  onclick='showZone("secteur2");'><img src="/images/filtre2.png" ></li>
			<li  onclick='showZone("secteur3");'><img src="/images/filtre3.png" ></li>
			<li ><img onclick='initFilter();' src="/images/bt_reset2.png" ></li>
		</ul>
	</div>

	<!--
<div id="palmares" >
		<ul>
			<li  onclick='showZone("palmares");'><img src="/images/filtre7.png" ></li>
		</ul>
	</div>

<div id="animation" >
		
			<img src="/images/animation.gif" >
	</div>
<div id="resetPopup" >
		
			<img src="/images/bt_reset4.png" onclick='hideAllPopups();' >
	</div>

<div id="ListExhibitors_filter"
	style="display: block;
    position: absolute;
    top: 808px;
    z-index: 1000;
    width: 792px;
    left: 1395px;
    height: 400px;
    overflow: auto;
    background-color: #fff;
    border: 7px solid #f8a519;">
    <div style="height: 80px;">
    <div style="    float: right;
    background-image: url(../images/bt_close.png);
        padding: 40px;
    background-repeat: no-repeat;
    font-size: 0px;
    width: 50%;"> dsds</div>
    </div>
	<ul class="exhibitor-list" style="list-style-type: none;">
	{#
	{% for exhibitor in exhibitors %}
    {% if exhibitor.tExhibitionStandI %}
    

			<li style="margin-bottom: 20px;  list-style-type: none;" onclick="showExposant('{{ exhibitor.tExhibitionStandI.iId  }}')"
			class="exhibitorItem  Village3"><div class="stand_name"
			style="color: #000; padding-right: 10px;text-align:right;font-size: 22px; width: 85%;float: left;">{{ exhibitor.vchName|e }}</div>
			<div class="stand_label"
			style="color: #000;padding-left: 10px; font-size: 22px; width: 15%;float: left;">{{ exhibitor.vchStand|e }}</div>
		</li>
		
	{% endif %}
    {% endfor %}
     #}
	
	</ul>
</div>
-->
<div id="tourValidationPopup">
		<div id="tourValidationPopupBg"></div>
		<div id="tourValidationPopupForm">
				<div class="tourTitle"><img src="/images/close.png" width="70"  onclick='closeTourPopup();' /><br/>RECEVOIR VOTRE PARCOURS</div>
				<div class="tourDesc"> 
				
				</div>
				<div class="tourForm">
				<form name="sendTourInfo" method="POST">
				<input type="hidden"  name="standsList" id="standsList">
				
				<div class="searchbox">
					<span>Votre téléphone : </span>
					<input type="text" name="phoneForm" id="autocomplete1" placeholder="Saisir votre téléphone">
				</div>
				<button type='submit' value="Confirmer" class="btnTourForm">VALIDEZ </button>
				</form>
				<div id="virtual_Keyboard"></div>
				<div style="float: left;
    padding-top: 10px;
    position: absolute;
    top: 430px;
    left: 140px;
    width: 786px;
    background-color: rgb(0, 0, 0);
    display: none;" id="virtualKeyboard_"></div>
				
				</div>
		</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
var startTourEle = "";
var endTourEle = "";
var exposantsParcoursList = [];
var ReloadPageInterval = 300000;
var time_reload_page = new Date().getTime();
function showExposant(stand){
	
	//map.closePopup();
	if(!enableTour)
		hideAllPopups();
	if(stand!=''){
		showpopup(stand);
		if(enableTour){
			console.log(exposantsList);
			addToCart(stand);
		}
	
	}
}

function initFilter(){
    $(".exhibitorItem").show();
}
function showpopup(id){
    for (var i in exposantsList){
        var standId = exposantsList[i].options.Name;
        if (standId == id){
            exposantsList[i].openPopup();
        };
    }
}

function startTour(){
	exposantsParcoursList = [];
	startTourEle.hide();
	endTourEle.show();
	hideAllPopups();
	enableTour = true;
	
}
function hideAllPopups(){
	$(".leaflet-popup-close-button").each(function() {
  		
				$( this )[0].click();
		});
}
function showFormValidation(){

	$("#tourValidationPopup").show();
	$("#standsList").val(exposantsParcoursList.toString());
	console.log(exposantsParcoursList.toString());

}
function closeTourPopup(){
	
	$("#tourValidationPopup").hide();
	$("#standsList").val("");
}
function endTour(){
	console.log(exposantsParcoursList.toString());
	if(exposantsParcoursList.length>0){
		showFormValidation();
	}
	endTourEle.hide();
	startTourEle.show();
	enableTour = false;
	exposantsParcoursList = [];
	hideAllPopups();
}
function filterExposants(string){
	//string = "G45";
	var regex =new RegExp( string, 'g' ); ;
	$( "#ListExhibitors_filter" ).show();
	$( "#ListExhibitors_filter li" ).hide();
	$( "#ListExhibitors_filter li" )
	  .filter(function( index ) {
		  var stringData = $(this)[0].innerText;
		  var found = stringData.match(regex);
		  if(found)
	    		return true;
  		return false;
	  }).show();
}
 $(document).ready(function() {
    $collectionStandHolder = $('div.standsList');
     console.log($collectionStandHolder.data('stands'));
     
     $("#autocomplete").keyup(function() {
         if($(this).val().length>2)
        	 filterExposants($(this).val());
 	});
	startTourEle = $("#tour_start");
	endTourEle = $("#tour_end");
$(document.body).bind("mousemove keypress", function(e) {
		time_reload_page = new Date().getTime();

		
	});
	setTimeout(refresh_page, 30000);
  // Manage mouse up events
 	$(document).click(function(e) {
		 
 		var suggestions = $("#suggestions");
 		var mark = $("#divMark");
 		var searchInput = $("#autocomplete1");
 		var virtualKeyboard_= $("#virtualKeyboard_");
 		var searchEl = $(".search");

		
 		// Hide exhibitor list when the user clicks outside of the div
 		// if the target of the click isn't the container nor a descendant of the container
 		if ((!suggestions.is(e.target) && suggestions.has(e.target).length === 0) &&
 		    (!mark.is(e.target) && mark.has(e.target).length === 0) && 
 		    (!searchInput.is(e.target) && searchInput.has(e.target).length === 0)) {
 			suggestions.hide();
 			//mark.hide();
 		}
 		if (startTourEle.is(e.target) ){
			 	startTour();

		 }

		 if (endTourEle.is(e.target) ){
			 	endTour();

		 }
 		//if(!isInsideSearchBox(e.target))
 			virtualKeyboard_.hide();
 		// If search input has focus and is empty
 		if (searchInput.is(":focus")) {
 			virtualKeyboard_.show();

 			console.log("keyboard");
 			if (searchInput.val().length === 0) {
 				suggestions.hide();
 			}
 			else {
 				console.log("keyboard 1");
 				if ( (searchInput.val().length >= 2)) {
 				//	filterExposants(searchInput.val().toUpperCase());
 				}
 			}
 		}else
 			$( "#ListExhibitors_filter" ).hide();
 		
 		// Manage keyboard
 		var keyboard = $("#virtualKeyboard");
 		
 		// if input hasn't focus and keyboard is hidden : show it
 		if (searchInput.is(":focus") && keyboard.is(":hidden")) {
 			//keyboard.show();
 		}
 		else {
 			if (!keyboard.is(":hidden")) {
 				// If user click outside of keyboard and search input
 				if ((!keyboard.is(e.target) && keyboard.has(e.target).length === 0) &&
 				    (!searchInput.is(e.target) && searchInput.has(e.target).length === 0)) {
 					//keyboard.hide();
 				}
 			}
 		}

 	});



	keyboard = {
		'layout': [
			// alphanumeric keyboard type
			// text displayed on keyboard button, keyboard value, keycode, column span, new row
			[
				
				[
					['`', '`', 192, 0, true], ['1', '1', 49, 0, false], ['2', '2', 50, 0, false], ['3', '3', 51, 0, false], ['4', '4', 52, 0, false], ['5', '5', 53, 0, false], ['6', '6', 54, 0, false], 
					['7', '7', 55, 0, false], ['8', '8', 56, 0, false], ['9', '9', 57, 0, false], ['0', '0', 48, 0, false], ['-', '-', 189, 0, false], ['=', '=', 187, 0, false],
					['a', 'a', 65, 0, true], ['z', 'z', 90, 0, false], ['e', 'e', 69, 0, false], ['r', 'r', 82, 0, false], ['t', 't', 84, 0, false], ['y', 'y', 89, 0, false], ['u', 'u', 85, 0, false], 
					['i', 'i', 73, 0, false], ['o', 'o', 79, 0, false], ['p', 'p', 80, 0, false], ['[', '[', 219, 0, false], [']', ']', 221, 0, false], ['&#92;', '\\', 220, 0, false],
					['q', 'q', 81, 0, true], ['s', 's', 83, 0, false], ['d', 'd', 68, 0, false], ['f', 'f', 70, 0, false], ['g', 'g', 71, 0, false], ['h', 'h', 72, 0, false], ['j', 'j', 74, 0, false], 
					['k', 'k', 75, 0, false], ['l', 'l', 76, 0, false], ['m', 'm', 77, 0, false], ['&#39;', '\'', 222, 0, false], ['Enter', '13', 13, 3, false],
					['Shift', '16', 16, 2, true], ['w', 'w', 87, 0, false], ['x', 'x', 88, 0, false], ['c', 'c', 67, 0, false], ['v', 'v', 86, 0, false], ['b', 'b', 66, 0, false], ['n', 'n', 78, 0, false], 
					[';', ':', 186, 0, false], ['@', '@', 50, 0, false], ['.', '.', 190, 0, false], ['/', '/', 191, 0, false], ['Shift', '16', 16, 2, false],
					['Supp', '8', 8, 3, true], ['Space', '32', 32, 12, false], ['Clear', '46', 46, 3, false], ['Supp', '8', 8, 3, false]
			],
			[
				['~', '~', 192, 0, true], ['!', '!', 49, 0, false], [',', ',', 188, 0, false], ['#', '#', 51, 0, false], ['$', '$', 52, 0, false], ['%', '%', 53, 0, false], ['^', '^', 54, 0, false], 
				['&', '&', 55, 0, false], ['*', '*', 56, 0, false], ['(', '(', 57, 0, false], [')', ')', 48, 0, false], ['_', '_', 189, 0, false], ['+', '+', 187, 0, false],
				['A', 'A', 65, 0, true],['Z', 'Z', 90, 0, false], ['E', 'E', 69, 0, false], ['R', 'R', 82, 0, false], ['T', 'T', 84, 0, false], ['Y', 'Y', 89, 0, false], ['U', 'U', 85, 0, false], 
				['I', 'I', 73, 0, false], ['O', 'O', 79, 0, false], ['P', 'P', 80, 0, false], ['{', '{', 219, 0, false], ['}', '}', 221, 0, false], ['|', '|', 220, 0, false],
				['Q', 'Q', 81, 0, true], ['S', 'S', 83, 0, false], ['D', 'D', 68, 0, false], ['F', 'F', 70, 0, false], ['G', 'G', 71, 0, false], ['H', 'H', 72, 0, false], ['J', 'J', 74, 0, false], 
				['K', 'K', 75, 0, false], ['L', 'L', 76, 0, false], ['M', 'M', 77, 0, false], ['"', '"', 222, 0, false], ['Search', '13', 13, 3, false],
				['Maj', '16', 16, 2, true], ['W', 'W', 87, 0, false], ['X', 'X', 88, 0, false], ['C', 'C', 67, 0, false], ['V', 'V', 86, 0, false], ['B', 'B', 66, 0, false], ['N', 'N', 78, 0, false], 
				[':', ':', 186, 0, false], ['<', '<', 188, 0, false], ['>', '>', 190, 0, false], ['?', '?', 191, 0, false], ['Maj', '16', 16, 2, false],
				['Supp', '8', 8, 3, true], ['Space', '32', 32, 12, false], ['Supp', '46', 46, 3, false],  ['Supp', '8', 8, 3, false]
			]
			]
		]
	}
	$('#autocomplete1').initKeypad({'keyboardLayout': keyboard});


	$collectionStandHolder.data('stands').forEach(stand => {
		var exposantsHtml = "";
		var innovationHtml = "";
		var exposants = stand.exposants
		
		var innovations = stand.innovations
		console.log(exposants.length);
		var exposantTitleWidth = '100%';
			if(exposants.length > 14){
				exposantTitleWidth = '46%'
				}
			exposantsHtml = "<table class='popup_exposant'><tr>";
		
		for (var k in exposants){
			console.log(k);
			if(exposants.length > 14 &&  k>0  && !(k  % 2) )
				exposantsHtml += "</tr><tr>";
			if(exposants.length <= 14)
				exposantsHtml += "</tr><tr>";	
			element = exposants[k];
			exposantsHtml += '<td style="width:'+exposantTitleWidth+';padding: 25px 0px;"><div class="title" >'+element+'</div></td>';   
			
		}
		exposantsHtml += "</tr></table><br/>";


			innovationHtml = "<table class='popup_innovation'><tr>";
		
		for (var k in innovations){
			console.log(k);
			
			
			element = innovations[k];
			innovationHtml += '<tr><td ><div class="title_innovation" >'+element+'</div></td></tr>';   
			
		}
		innovationHtml += "</tr></table>";

	  var poi = JSON.parse(stand.vchAreaposition );
 	
		
	var dataPolygon = [];
	//Handle click on polygon
var onPolyClick = function(event){
    //callFancyboxIframe('flrs.html')
    var stand = event.target.options.Name;
    console.log(stand);
		console.log(enableTour);
		if(!enableTour){
		//	map.closePopup();
		}else{
			
			addToCart(stand);
		}	
		};
 	  poi[0].forEach(element=>{

 		 dataPolygon.push([element.lat, element.lng]);
     	  });
		  console.log(stand.iId);
 	  	var exp = L.polygon(dataPolygon, {
 	  	 	Name:stand.iId,
 			color: '',
 			fillColor: '',
 			fillOpacity: 0
 		}).addTo(myFeatureGroup).bindPopup(
 	     		'<div class="popupContent"><div class="titleStand" style="clear:both;"> STAND ' + 
 	     		stand.vchName + '</div><div class="detaildata multiItems" style="margin-bottom:20px;">' +
 	     		 exposantsHtml + innovationHtml+
 	     		 "</div><br class='clear: both;'/></div>", {closeOnClick: false, autoClose: false}).on('click', onPolyClick);
			exposantsList.push(exp);			 
 		
	});

	//filterExposants("sss");
	$( "#ListExhibitors_filter" ).hide();
 	
 });

var enableTour = false;
var exposantsList = [];
        // 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: 4,
      center: [0, 0],
      zoom: 3,
      crs: L.CRS.Simple
    });
    // dimensions of the image
    var w = 4770,
        h = 1770,
		// url = 'http://blackicemedia.com/presentations/2013-02-hires/img/awesome_tiger.svg';//'fond_old1.jpg';
        url = '../images/viva19_01.svg';//'fond_old1.jpg';
		//url = '../images/EN18_planV1.svg';//'fond_old1.jpg';
    // 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);

    map.dragging.disable();
    map.touchZoom.disable();
    map.doubleClickZoom.disable();
    map.scrollWheelZoom.disable();
    map.boxZoom.disable();
	
	var myFeatureGroup = new L.LayerGroup();
     map.addLayer(myFeatureGroup);
    var controlSearch = new L.Control.Search({
      position:'topright',		
      layer: this.myFeatureGroup,
      initial: false,
      
      buildTip: this.customTip,
      marker:  {
        icon: true
      }	,
      propertyName: 'Name',
      moveToLocation: function(latlng, title, map) {
    	  //map.setView(new L.LatLng(lat,lon), 9 );   // set the zoom
    	  map.panTo(new L.LatLng(0,0));
    	  $("#autocomplete").val('');
      }
     	
    }).on('search:locationfound', function(e) {
      e.layer.openPopup();
    }).on('search:expanded', function () {
      console.log('search:expanded!')
  }).on('search:collapsed', function(e) {
    console.log('search:collapsed!')
    console.log(e);
     // var marker = e.popup._source.feature.properties.markerid;
  });
    map.addControl( controlSearch );

    

	function addToCart(stand){
		if(exposantsParcoursList.indexOf(stand)<0)
				exposantsParcoursList.push(stand);
	}

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

		function showZone(villageId){
			console.log(villageId);
			$(".exhibitorItem").hide();
			$("."+villageId).show();
			
			}

			function showInnovation(ele){
			 console.log($( "#innovationsSel option:selected" ).val());
				if($( "#innovationsSel option:selected" ).val())
					showExposant($( "#innovationsSel option:selected" ).val());
			}

			function refresh_page() {
				console.log(new Date().getTime() - time_reload_page);
				if (new Date().getTime() - time_reload_page >= ReloadPageInterval){
					hideAllPopups();
					}

					setTimeout(refresh_page, 30000);
			}
    </script>
{% endblock %}