[(#REM)

/*******************************************************************************\
 * BIODIV, plugin et squelette pour SPIP - https://www.spip.net/               *
 *         dédié à la gestion d'observations naturalistes                      *
 *                                                                             *
 *         Copyright (C) 2008-2024 Renaud LAURETTE                             *
 *                                                                             *
 * BIODIV a été développé initialement pour le projet Biodiv.Balma de l'APCVEB *
 * (Association de Protection du Cadre de Vie et de l'Environnement balmanais) * 
 *     voir Biodiv.Balma : https://balma.biodiv.fr/                            *
 *     voir APCVEB : https://apcveb.fr/                                        *
 *                                                                             *
 *  Ce programme est un logiciel libre distribué sous licence GNU/GPL.         *
 *  Pour plus de détails voir les fichiers COPYING.txt et LICENCE-BIODIV.md    *
\*******************************************************************************/

	Fichier HTML du formulaire CVT : editer_observation. 			
]

[(#REM)
	On force les coordonnées sur le lieu central par défaut
	et on indique les latitudes/longitudes min/max de la commune
]
[(#SET{lat,[(#ENV**{lat,[(#CONFIG{feuillet/lat})]})]})]
[(#SET{lng,[(#ENV**{lng,[(#CONFIG{feuillet/lng})]})]})]
[(#SET{zoom,[(#ENV**{zoom,[(#CONFIG{feuillet/zoom})]})]})]


 <div class="wrapper">
	<!-- <br class='bugajaxie' /> -->
	[<p class="bg-sucess">(#ENV*{message_ok})</p>]
	[<p class="bg-danger">(#ENV*{message_erreur})</p>]
	[(#ENV{editable})

	<form method='post' action='#ENV{action}' class="form-horizontal" enctype='multipart/form-data' name='obseditfrm'>
	[(#REM) declarer les hidden qui declencheront le service du formulaire parametre : url d'action ]
		#ACTION_FORMULAIRE{#ENV{action}}
		<input type='hidden' name='id_observation' value='#ENV{id_observation}' />
		<input type="hidden" id="lat"   name="lat"   value="" />
		<input type="hidden" id="lng"   name="lng"   value="" />
		
        <div class="grids">
          <div class="grid-8 grid"> 
          
          <div class="wrapper obsform">
          
           [(#REM) 'Titre' est un champ commun - et obligatoire - Pour la version mobile, on l'astreint à être le nom de l'espèce ]
            <div class="grids">
              <div class="grid-6 grid form-label">
                <label for="titre"><:observation:champ_titre_label:></label>
              </div>
              <div class="grid-10 grid">
                <input style="width:100%" type='text' id='titre' name='titre' value='[(#ENV**{titre})]' />
                [<p class='help-block'>(#ENV**{erreurs}|table_valeur{titre})</p>]
              </div>
            </div>

	    	 [(#REM) 'type_obs' est un champ specifique obligatoire]
	    	 [(#AUTORISER{typer,observation}|oui)
	    	 <div class="grids apart">
	    	   <div class="grid-6 grid form-label">
	    	  	<label for="type_obs"><:observation:champ_type_obs_label:></label>
	    	  </div>
	    	  <div class="grid-10 grid">
			    <select name="type_obs" id="type_obs">
					<option value="espece" [(#ENV**{type_obs}|=={espece}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_type_obs_espece}|_T)]</option>
					<option value="autre" [(#ENV**{type_obs}|=={autre}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_type_obs_autre}|_T)]</option>
			   </select>
			   [<p class='help-block'>(#ENV**{erreurs}|table_valeur{type_obs})</p>]
			  </div>
	    	 </div>	]		
            
            [(#REM) 'espece' est un champ obligatoire quand type_obs=espece]
	    	<div class="grids apart">
	    	  <div class="grid-6 grid form-label">
	    	  	<label for="espece"><:observation:champ_espece_label:></label>
	    	  </div>
	    	  <div class="grid-10 grid">
	    	  	<input type='text' style="width:100%" class='form-control' name='espece' id='espece' value="[(#ENV**{espece})]"/>
	    	  	[<p class='help-block'>(#ENV**{erreurs}|table_valeur{espece})</p>]
	    	  </div>
	    	 </div>

	    	[(#REM) 'Quantite' est un champ obligatoire]
	 	  	<div class="grids apart">
	    	  <div class="grid-6 grid form-label">
	    	  	<label for="quantite"><:observation:champ_quantite_label:></label>
	    	  </div>
	    	  <div class="grid-10 grid">
	    	  	<input type='text' style="width:50px;" class='form-control' name='quantite' id='quantite' value="[(#ENV**{quantite, 1})]" />
	    	  	<select name="denombrement">
					<option value="Co" [(#ENV**{denombrement}|=={Co}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_denombrement_co}|_T)]</option>
					<option value="Es" [(#ENV**{denombrement}|=={Es}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_denombrement_es}|_T)]</option>
					<option value="Ca" [(#ENV**{denombrement}|=={Ca}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_denombrement_ca}|_T)]</option>
					<option value="NSP" [(#ENV**{denombrement}|=={NSP}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_denombrement_nsp}|_T)]</option>
				</select>	    	  	
	    	  	[<p class='help-block'>(#ENV**{erreurs}|table_valeur{quantite})</p>]
	    	  </div>
	    	 </div>
		
	    	 [(#REM) 'Date_obs' et 'pjour' sont des champs specifiques obligatoires]
	    	 <div class="grids apart">
	    	   <div class="grid-6 grid form-label">
	    	  	<label for="date_obs"><:observation:champ_date_obs_label:></label>
	    	  </div>
	    	  <div class="grid-10 grid">
	    	    <input name="date_obs" type="date" value="[(#ENV{date_obs,[(#ENV{date}|affdate{'Y-m-d'})]})]" id="date_obs" />	
			    <!--<button id="now" type="button">Aujourd'hui</button>-->
			    <select name="pjour" id="pjour">
					<option value="lever du soleil" [(#ENV**{pjour}|=={lever du soleil}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_pjour_lever_du_soleil}|_T)]</option>
					<option value="matin" [(#ENV**{pjour}|=={matin}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_pjour_matin}|_T)]</option>
					<option value="apres-midi" [(#ENV**{pjour}|=={apres-midi}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_pjour_apres_midi}|_T)]</option>
					<option value="coucher du soleil" [(#ENV**{pjour}|=={coucher du soleil}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_pjour_coucher_du_soleil}|_T)]</option>
					<option value="nuit" [(#ENV**{pjour}|=={nuit}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_pjour_nuit}|_T)]</option>
			   </select>
			   [<p class='help-block'>(#ENV**{erreurs}|table_valeur{date_obs})</p>]
			   [<p class='help-block'>(#ENV**{erreurs}|table_valeur{pjour})</p>]
			  </div>
	    	 </div>

	    	 [(#REM) 'Descriptif' est un champ optionnel]
	    	 <div class="grids apart">
	    	   <div class="grid-6 grid form-label">
	    	   	<label for="descriptif"><:observation:champ_descriptif_label:></label>
	    	  </div>
	    	  <div class="grid-10 grid">
	    	  	<textarea style="width:100%" name='descriptif' id='descriptif' class='form-control' rows='4'>[(#ENV**{descriptif})]</textarea>
	    	  	[<p class='help-box'>(#ENV**{erreurs}|table_valeur{descriptif})</p>]
	    	  </div>
	    	 </div>
	    	 
	    	 [(#REM) 'adresse' est un champ obligatoire]
	    	 <div class="grids apart">
	    	   <div class="grid-6 grid form-label">
	    	     <label for="adresse"><:observation:champ_adresse_label:></label>
	    	  </div>
	    	  <div class="grid-10 grid">
	    	  <button id="localiser" type="button">Géolocalisez-vous</button>
	    	  <span style="font-style:italic;">ou cliquez sur la carte.</span>           
	    	  <p style="font-style:italic; margin:0; padding:0;" id="follow"></p>
	    	  <input type='text' style="width:100%" name='adresse' id='adresse' value="[(#ENV**{adresse})]" />	  	
	    	  	[<p class='help-box'>(#ENV**{erreurs}|table_valeur{adresse})</p>]
	    	  </div>                     
	    	 </div>

	    	 [(#REM) Nom de la 'commune' est un champ obligatoire]
	    	 <div class="grids apart">
	    	   <div class="grid-6 grid form-label">
	    	     <label for="commune"><:observation:champ_commune_label:></label>
	    	  </div>
	    	  <div class="grid-10 grid">
	    	  <input type='text' style="width:100%" name='commune' id='commune' value="[(#ENV**{commune})]" />	  	
	    	  	[<p class='help-box'>(#ENV**{erreurs}|table_valeur{commune})</p>]
	    	  </div>                     
	    	 </div>
 
	    	 [(#REM) Code 'insee' de la commune est un champ obligatoire]
	    	 <div class="grids apart">
	    	   <div class="grid-6 grid form-label">
	    	     <label for="insee"><:observation:champ_insee_label:></label>
	    	  </div>
	    	  <div class="grid-10 grid">
	    	  <input type='text' style="width:100%" name='insee' id='insee' value="[(#ENV**{insee})]" />	  	
	    	  	[<p class='help-box'>(#ENV**{erreurs}|table_valeur{insee})</p>]
	    	  </div>                     
	    	 </div>
	    	 
	    	 <div class="grids apart">
	    	   <div class="grid-6 grid form-label">
	    	     <label for="discret"><:observation:champ_discret_label:></label>
	    	  </div>
	    	  <div class="grid-10 grid">	    	     
	    	  	<select name="discret" class="form-control">
					<option value="non" [(#ENV**{discret}|=={non}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_discret_non}|_T)]</option>
					<option value="oui" [(#ENV**{discret}|=={oui}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_discret_oui}|_T)]</option>
					<option value="inconnu" [(#ENV**{discret}|=={inconnu}|?{' selected="selected"'})]>[(#REM|concat{observation:enum_discret_inconnu}|_T)]</option>
				</select>
				[<p class='help-box'>(#ENV**{erreurs}|table_valeur{adresse})</p>]
	    	  </div>
	    	 </div>
	    	 
	  </div>
    </div> <!-- grid-8 -->
    
	<div class="grid-8 grid"> 	
	  <div id="map_obs" style="width: 100%; height: 400px"></div>
	  <br/>
      <p><button type="submit"><:bouton_enregistrer:></button>&nbsp;&nbsp;<button type="button" id="btnAnnuler">Annuler</button></p>
	</div><!-- grid-8 -->
	
	</div><!-- grids -->
	    
	</form>
	]
</div>
<script type="text/javascript">
<!--

  var carte = new Feuillet('map_obs',#GET{lat},#GET{lng},#GET{zoom},'#CONFIG{feuillet/tuiles}');
  carte.setPointColorSelector(biodiv_marker);
  var form_map = carte.getMap();
  /*
	$("#now").click(function() {
      	var d = new Date();
      	var m = d.getMonth()+1;
       	document.getElementById("date_obs").value= d.getFullYear()+"-"+m+"-"+d.getDate();
       	});
  */
  	var marker = null;
  	var lastPosition = {
  		"latitude": #GET{lat},
  		"longitude": #GET{lng},
  		"calcul": false
  		};
  
  	function onMapClick(e) {
  		document.getElementById("follow").innerHTML="Localisation manuelle";
  	  	laPosition(e.latlng.lat, e.latlng.lng);
   	}
   	
   	form_map.on('click', onMapClick);  
   	carte.setLayers(true);
   
   
    function laPosition(latitude, longitude) {
    	if(marker) {
    		form_map.removeLayer(marker);
    	}    	
    	marker = new L.marker([latitude, longitude]);
    	marker.addTo(form_map);
    	form_map.panTo([latitude, longitude]);
    	$('#lat').val(latitude);
	    $('#lng').val(longitude);
    	gouvAddress(latitude, longitude);
    }
    	
    function geoPosition(position) {
    	document.getElementById("follow").innerHTML="Localisation automatique";
    	lastPosition = { 
    		"latitude": position.coords.latitude,
    		"longitude":  position.coords.longitude,
    		"calcul": true
    		};
    	laPosition(position.coords.latitude, position.coords.longitude);
    }
    	
    function positionner() {
    	if( true  ) { // lastPosition.calcul 
    		document.getElementById("follow").innerHTML="Localisation automatique précédente";
    		laPosition(lastPosition.latitude, lastPosition.longitude);
    		} else {
    		document.getElementById("follow").innerHTML="Pas de localisation automatique précédente";
    		}
    }
    
    // Reverse geocoding mondial OpenStreetMap
    // eg. http://nominatim.openstreetmap.org/reverse?lat=43.6&lon=1.5&zoom=18&addressdetails=1&format=json
    function osmAddress(lat, lon) {
    	$.getJSON("http://nominatim.openstreetmap.org/reverse?lat="+lat
    		+"&lon="+lon
    		+"&addressdetails=1&zoom=18&format=json", function(data) {
    			if(data && data.address && data.address.road) {
    				document.getElementById("adresse").value=data.address.road;
    				// Extension 1.02				
    				var commune = data.address.town.toUpperCase();
    				document.getElementById("commune").value = commune; 				
    				var codePostal = data.address.postcode;
    				// document.getElementById("codePostal").value = codePostal;
    				// Recherche du code INSEE
    				$.getJSON("https://public.opendatasoft.com/api/records/1.0/search/?dataset=correspondance-code-insee-code-postal"
    					+"&refine.nom_comm=" + commune // Nom de la commune en majuscules
    					+"&refine.postal_code=" + codePostal, function(data) {
    						document.getElementById("insee").value = data.records[0].fields.insee_com;
    					});
    			}
    		});
    }
    
    // Reverse geocoding officiel en France
    // https://adresse.data.gouv.fr/api/
    // eg. https://api-adresse.data.gouv.fr/reverse/?lat=43.6182314&lon=1.4922805
    function gouvAddress(lat, lon) {
    	$.getJSON("https://api-adresse.data.gouv.fr/reverse/?lat="+lat
    		+"&lon="+lon, function(data) {
    			if(typeof data.features[0].properties !== 'undefined') {
    				var props = data.features[0].properties;
    				document.getElementById("adresse").value=props.street;
    				// Extension 1.02
    				document.getElementById("commune").value=props.city;
    				// document.getElementById("codePostal").value=props.postcode;
    				document.getElementById("insee").value=props.citycode;
    			}
    		});
    }

    function erreurPosition(error) {
    	var info = "Erreur lors de la géolocalisation : ";
    	switch(error.code) {
    		case error.TIMEOUT:
    			info += "Timeout !";
    			break;
    		case error.PERMISSION_DENIED:
    			info += "Vous n'avez pas donné la permission";
    			break;
    		case error.POSITION_UNAVAILABLE:
    			info += "La position n'a pu être déterminée";
    			break;
    		case error.UNKNOWN_ERROR:
    			info += "Erreur inconnue";
    			break;
    		}
    	document.getElementById("follow").innerHTML = info;
   	}    
    
    function localiser() {	
      	navigator.geolocation.getCurrentPosition(
       		geoPosition,
       		erreurPosition,
       		{maximumAge:300000, enableHighAccuracy:true}
       		);
       	document.getElementById("follow").innerHTML="Localisation en cours";
    }
       	
    if(navigator.geolocation) {
    	$("#localiser").click(function() {
       		localiser();
       		});
       	// localiser();	
     } else {
       	erreurAdresse("Pas de fonction de geolocalisation");
       	$("#localiser").hide();
     }  
     
     laPosition(lastPosition.latitude, lastPosition.longitude);
     $("#btnAnnuler").click(function() {
     		 window.location='#URL_OBSERVATION{#ENV{id_observation}}';
  			}); 
-->
</script>