<?php

	include("../M0/session_start.php") ;

	if ( $_SESSION['level'] < 90 ) {
		header('Location: ' . $root_dir . '/M1/index_2.php');
		exit();
	}

	include("../M0/communs_en_tete_HTML_with_maps.html") ;
	
	$back_link = "../M3/gestion_sites.php";
	include('../M0/communs_en_tete_home_back.html');

	$return_path = "/M3/gestion_sites.php" ;
	include('../M0/display_user_only.php'); 

	$maps_latitude	= json_encode("46.691653") ;
	$maps_longitude	= json_encode("1.977539") ;

?>

<form name="form2" method="post" action="./create_one_site_target_execute.php">

<table align="center" width="<?php echo $tables_width ; ?>"  border="2" cellspacing="2" cellpadding="2" bordercolor="#ffffff" bgcolor="#000033">	

	<tr align="center">
		<td>
		
			<table width="98%">
			
				<tr align="center">
					<td>
						<div style="margin-top:10px;margin-bottom:10px;">
						<label 
							class="label_titres_menus" 
							style="font-size:21px;"
						/>
							<u>- création d'un nouveau site AQCM05 -</u>
						</label>
						</div>
					</td>
				</tr>
			</table>

			<table width="100%" align="center">
			
				<tr>
				
					<td width="35%" align="right">
						<label>
							nom :&nbsp;
						</label>
					</td>
					
					<td align="left">
						<input id="NEW_SITE_NAME" name="NEW_SITE_NAME" type="text" value="" maxlength="64" size="25" class="txtField_A" required >
					</td>
					
				</tr>
				
				<tr>
				
					<td align="right">
						<label>
							identifiant :&nbsp;
						</label>
					</td>
					
					<td align="left">
						<input id="NEW_SITE_ID" name="NEW_SITE_ID" type="text" pattern="[0-9]{5}[_][0-9]{3}" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57) || (event.charCode == 95) )"  title="format imposé : ccccc_nnn" value="" style="width:125;" maxlength="9" size="10" class="txtField_A" required >
						&nbsp;←&nbsp;( ccccc_nnn )
					</td>
					
				</tr>
			</table>
				
			<table width="100%" align="center">
				<tr>
					<td width="35%" align="right">
						<label>
							latitude | longitude :&nbsp;
						</label>
					</td>
					<td align="left" >
						<input id="NEW_SITE_LAT" name="NEW_SITE_LAT" type="text"  title="latitude avec 6 décimales" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( (event.charCode >= 48 && event.charCode <= 57) || (event.charCode == 45) || (event.charCode == 46) ) )" pattern="([-]?)([0-9]{1,2})([.])([0-9]{6})" value="<?php echo($_SESSION['SITE_LAT']); ?>" maxlength="10" class="txtField_A"  style="width:125px;" required >
						<input id="NEW_SITE_LON" name="NEW_SITE_LON" type="text"  title="longitude avec 6 décimales" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( (event.charCode >= 48 && event.charCode <= 57) || (event.charCode == 45) || (event.charCode == 46) ) )" pattern="([-]?)([0-9]{1,3})([.])([0-9]{6})" value="<?php echo($_SESSION['SITE_LON']); ?>" maxlength="10" class="txtField_A"  style="width:125;" required >
					</td>
				</tr>
			</table>
							
			<table width="100%" align="center">

				<tr>
					<td align="center" colspan="2">
						<p>
						</p>
					</td>
				</tr>
				
				<tr>
					<td align="center" colspan="2">
						<div id="carte" align="center" >
							<!-- Ici s'affichera la carte -->
						</div>
					</td>
				</tr>
				
				<tr>
					<td align="center" colspan="2">
						<p>
						</p>
					</td>
				</tr>
			
			</table>

			<input type="submit" value="créer le site" class="button_A" >


		</td>
	</tr>
			
</table>
			
</form>

    </body>
</html>

<script>

	var lat =  <?php echo $maps_latitude; ?>;	
	var lon =  <?php echo $maps_longitude; ?>;	
	let my_zoom		= 5 ;
	let my_maxZoom	= 20 ;

	var macarte = null;
	var macarte = new L.map('carte', {center: [lat, lon],zoom: my_zoom,maxZoom: my_maxZoom,zoomControl:false });
	L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
		attribution: 'OpenStreetMap',
		maxZoom: my_maxZoom
	}).addTo(macarte);
	var scale = L.control.scale(); 
	scale.addTo(macarte); 
	
	var marker_site = new L.Marker([lat, lon]).addTo(macarte);
	
	function onMapClick(e) {

		// la variable e contient les informations sur l'événement
		let koko 			= e.latlng.toString() ;
		let jojo 			= koko.substring(koko.indexOf("(") + 1, koko.lastIndexOf(")") );
		let hoho 			= jojo.split(',');
		let lati_string 	= parseFloat(hoho[0].trim()).toFixed(6)
		let longi_string 	= parseFloat(hoho[1].trim()).toFixed(6)
		document.getElementById("NEW_SITE_LAT").value  = lati_string;
		document.getElementById("NEW_SITE_LON").value  = longi_string;

		marker_site.remove();
		marker_site = L.marker([lati_string, longi_string]).addTo(macarte);

	}

	// faire exécuter la fonction lors du clic sur la carte
	macarte.on('click', onMapClick);

</script>

