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

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

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

<div  style="z-index:1000;top:70px;left:350px;position:absolute;" data-toggle="modal" data-target="#exampleModal1">
  <img src="../images/pav1.png"/>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
     
      <div class="modal-body">
	    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;right: 40px;top: 40px;">
       <img src="../images/bt_close.png" /> 
        </button>
        <img src="../images/focus1.png" width="2234" />
      </div>
     
    </div>
  </div>
</div>

<div  style="z-index:1000;top:70px;left:550px;position:absolute;" data-toggle="modal" data-target="#exampleModal2">
  <img src="../images/pav2.png"/>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
     
      <div class="modal-body">
	   <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;right: 40px;top: 40px;">
       <img src="../images/bt_close.png" /> 
        </button>
        <img src="../images/focus2.png" width="2234" />
      </div>
     
    </div>
  </div>
</div>

<div  style="z-index:1000;top:70px;left:750px;position:absolute;" data-toggle="modal" data-target="#exampleModal3">
  <img src="../images/pav3.png"/>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    
      <div class="modal-body" style=" text-align: center;    padding: 0; background-color: transparent; ">
	    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;right: 40px;top: 40px;">
       <img src="../images/bt_close.png" /> 
        </button>
        <img src="../images/focus3.png" width="2234" />
      </div>
     
    </div>
  </div>
</div>

<div id="mapid"
	style="width: 2292px;
	
    left: -50px; height: 1300px; background-color: transparent !important; position: absolute; top: -90px;"></div>
<!-- Button trigger modal -->

<div class="standsList" data-stands="{{ exhibitionStandList }}"></div>
 <div class="search">
		<div class="searchbox"><input type="text" name="exhibitors" id="autocomplete" placeholder="Saisir votre recherche"></div>
		<div id="virtual_Keyboard"></div>
		<div style="float: left; width: 100%; padding-top: 10px;" id="virtualKeyboard_"></div>
		</div>
<div id="ListExhibitors-box"
	style="    display: block;
    position: absolute;
    top: 1227px;
    z-index: 1000;
    width: 1110px;
    left: 54px;
    height: 640px;
    overflow-x:hidden;
    overflow-y:auto;
    font-family: 'akkuratregular';">
	<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;width:100%;" onclick="showExposant('{{ exhibitor.tExhibitionStandI.iId  }}')"
			class="exhibitorItem  Village3"><div class="stand_name"
			style="color: #000; padding-right: 10px;text-align:right;font-size: 26px; width: 80%;float: left;font-family: 'akkuratregular';"> {{ exhibitor.vchName|e }}</div>
			<div class="stand_label"
			style="color: #000;padding-left: 10px; font-size: 26px; width: 19%;float: left;font-family: 'akkuratregular';">{{ exhibitor.vchStand|e }}</div>
		</li>
		
	{% endif %}
	
    {% endfor %}
    
	
	</ul>
</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>

{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
function showExposant(stand){
	controlSearch.searchText(stand);
	setTimeout(() => {
	  if(document.getElementsByClassName("search-tip") && 
	  document.getElementsByClassName("search-tip")[0]){
	    let element  = document.getElementsByClassName("search-tip")[0] 
	    element.click();

	    let elementInput  = document.getElementsByClassName("search-input")[1] 

	    elementInput.blur();
	  }
	}, 700); 
}

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());
 	});


  // Manage mouse up events
 	$(document).click(function(e) {
 		console.log("sss");
 		var suggestions = $("#suggestions");
 		var mark = $("#divMark");
 		var searchInput = $("#autocomplete");
 		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(!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]
			]
			]
		]
	}
	$('#autocomplete').initKeypad({'keyboardLayout': keyboard});


	$collectionStandHolder.data('stands').forEach(stand => {
		var exposantsHtml = "";
		var exposants = stand.exposants
		console.log(exposants.length);
		var exposantTitleWidth = '100%';
			if(exposants.length > 14){
				exposantTitleWidth = '46%'
				}
			exposantsHtml = "<table><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+'"><div class="title" >'+element+'</div></td>';   
			
		}
		exposantsHtml += "</tr></table>";
	  var poi = JSON.parse(stand.vchAreaposition );
 	
		
	var dataPolygon = [];
	
 	  poi[0].forEach(element=>{

 		 dataPolygon.push([element.lat, element.lng]);
     	  });
		  console.log(stand.iId);
 	  	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 + 
 	     		 "</div><br class='clear: both;'/></div>");
 		
	});

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

        // 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 = 2292,
        h = 1500,
		// url = 'http://blackicemedia.com/presentations/2013-02-hires/img/awesome_tiger.svg';//'fond_old1.jpg';
        url = '../images/{{ imgPlan }}';//'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 showEditStandModal(url){
		$('#stand_model').modal({
		    backdrop: 'static',
		    keyboard: false
		});
		  $( "#stand_model .modal-content" ).load(url, function() {
	       	 // alert( "Load was performed. EDIT" );
	       	});
		}
    </script>
{% endblock %}