<!DOCTYPE html>
<html lang="fr">

	<? include('blocks/d.head.html'); ?>

	<body>

		<? include('blocks/d.nav.html'); ?>

		<div id="mapid"></div>

		<div id="sticky">
			<section>
				<i id="slide-icon" class="fas fa-chevron-up"></i>
				<? if(isset($new) AND $new==1) { ?>
					<form class="form" action="<?=$config['rel_root_folder']?>poi/new" method="post">
				<? } 
				else { ?>
					<form class="form" action="<?=$config['rel_root_folder']?>poi/<?=$poi->permalink?>/edit" method="post">
				<? } ?>
					<h1 class="flex_line">
						<input type="text" value="<?=$poi->name?>" name="name" id="name" placeholder="Nom de l'hébergement" required>
						<select name="locale" id="locale">
							<? foreach($locales->objs as $locale) { ?>
								<option <?=$poi->locale==$locale->name?'selected':''?> value="<?=$locale->name?>"><?=$locale->display_name?></option>
							<? } ?>
						</select>
					</h1>

					<div class="flex_line">
						<input type="number" class="noarrow" step="any" value="<?=$poi->lat?>" name="lat" id="lat" placeholder="Latitude" required>
						<input type="number" class="noarrow" step="any" value="<?=$poi->lon?>" name="lon" id="lon" placeholder="Longitude" required>
						<input type="number" class="noarrow last-child" step="any" value="<?=$poi->ele?>" name="ele" id="ele" placeholder="Altitude">
						<div id="elevation_icon" style="display:none;" title="Calculer l'altitude"><i class="fas fa-search-location"></i></div>
					</div>

					<div class="flex_line" id="type_selector">
						<? foreach($poi_types as $type) { ?>
							<input type="radio" name="poi_type" value="<?=$type[3]?>" id="<?=$type[3]?>" required>
							<label for="<?=$type[3]?>"><img src="<?=$config['views_url']?>img/<?=$type[3]?>.svg"><br><?=$type[0]?></label>
						<? } ?>
					</div>

					<script type="text/javascript">
						var unsaved = false;

						// Used to store all the forms skeleton and abstracts
						<? foreach($poi_types as $type) { ?>
							<?=$type[3]?>_abstract="<?=$type[4]?>";
							<?=$type[3]?>_jsonform=<?=json_encode($type[5])?>;
						<? } ?>

						// Manages the three state checkbox feature
						function update3State(id) {
							var input=$("input[name="+id+"]");
							var label=$("label[for="+id+"]");
							switch(+input.val()) {
								case 0:
									input.val(1);
									label.toggleClass('uncheck intermediate')
									break;
								case 1:
									input.val(2);
									label.toggleClass('intermediate check')
									break;
								default:
									input.val(0);
									label.toggleClass('check uncheck')

							}
							unsaved = true; // The form values changed
						}

						// Updates the specific form section when changing poi type
						function updateForm(type) {
							$("#abstract").html(this[type+'_abstract']); // Changes the abstract legend
							var html_form="";
							// Generates HTML for the sub-form
							$.each(this[type+'_jsonform'],function(index, value){
									switch(index.charAt(0)) {
										case 'b':
											html_form+='<label class="threecb intermediate" for="'+index+'" onclick="update3State(\''+index+'\')">'+value+'</label><input value="1" type="hidden" name="'+index+'" id="'+index+'"><br>'
											break;
										case 'n':
											html_form+='<div class="flex_line"><label for="'+index+'">'+value+'</label><input min="0" type="number" name="'+index+'" id="'+index+'"></div>'
											break;
										case 't':
											html_form+='<textarea name="'+index+'"  id="'+index+'" placeholder="'+value+'"></textarea>'
											break;
										case 'l':
											html_form+='<div class="flex_line"><label for="'+index+'">'+value+'</label><input placeholder="https://" type="url" name="'+index+'" id="'+index+'"></div>'
											break;
										default:
											console.log("ERROR: "+index+"'s type is not known");
									}
							});
							$("#specific_form").html(html_form); // Updates HTML

							// Display an alert if the poi type is changed before reseting the form
							unsaved = false;
							$("#specific_form :input").change(function(){
								unsaved = true;
							});
						}

						// Handle click on type selector
						$(document).ready(function(){
							// First check if there is changes in the sub-form and if the user is OK to reset the form
							$('#type_selector label').click(function(){
								if(unsaved == true) {
									if(confirm("Des changements ont été apportés et vont être supprimés, voulez-vous continuer ?")) {}
									else {
										return false; // Cancel radio switch action
									}
								}

								// Updates the sub-form
								updateForm($(this).prev().val());
							});
						});
					</script>

					<p id="abstract"></p>
					<div id="specific_form"></div>

					<? if(isset($new) AND $new==1) { ?>
					<div id="permalink_container">
						<label id="permalink_label" for="permalink"><?=$config['web_root_folder']?>poi/</label>
						<input type="text" name="permalink" id="permalink" placeholder="URL">
					</div>
					<? } ?>

					<script type="text/javascript">
$( "#name" ).keyup(function() {
  permalink = $( "#name" ).val();
  permalink = permalink.replace(/ /g,'_');
  permalink = permalink.toLowerCase();
  permalink = permalink.replace(/[^a-z0-9_]/g,'-');
  permalink = permalink.replace(/[_-]+$/g,'');
  $( "#permalink" ).val(permalink);
});
$( "#name" ).change(function() {
  permalink = $( "#name" ).val();
  permalink = permalink.replace(/ /g,'_');
  permalink = permalink.toLowerCase();
  permalink = permalink.replace(/[^a-z0-9_]/g,'-');
  permalink = permalink.replace(/[_-]+$/g,'');
  $( "#permalink" ).val(permalink);
});
					</script>

					<input name="submit" id="submit" type="submit" value="Ajouter l'hébergement">
				</form>
			</section>

		<script type="text/javascript">
$( "#slide-icon" ).click(function() {
  $( "html, body" ).animate({scrollTop: "300px"});
});
		</script>

			<? include('blocks/d.footer.html'); ?>
		</div>
	</body>
</html>