{% extends 'base.html.twig' %}

{% block title %}NOS DESTINATIONS
{% endblock %}

{% block body %}
	 
		<script>
			var url = window.location.href;

			var adresseDecodee = decodeURIComponent(url);
			var adressePropre = adresseDecodee.replace(/\s/g, ' ');
			console.log(adressePropre);
			var segments = adressePropre.split('/');

			// Récupérer les variables "Tunis" et "Nabeul"
			var startPoint = segments[segments.length - 3];
			var endPoint = segments[segments.length - 2];
			var distance = segments[segments.length - 1]
			function initMap() {
				var directionsService = new google.maps.DirectionsService();
				var directionsRenderer = new google.maps.DirectionsRenderer();
				var map = new google.maps.Map(document.getElementById('map'), {
					zoom: 7,
					center: {lat: 48.8566, lng: 2.3522} // Centre de la carte (Paris, France)
				});
				directionsRenderer.setMap(map);
	
				
	
				var request = {
					origin: startPoint,
					destination: endPoint,
					travelMode: 'DRIVING'
				};
	
				directionsService.route(request, function(result, status) {
					if (status == 'OK') {

						directionsRenderer.setDirections(result);
						document.getElementById('ptDep').value = startPoint;
			document.getElementById('ptDes').value = endPoint;
			
			document.getElementById('distance').value = distance;

					} else {
						console.error('Erreur de calcul d\'itinéraire: ' + status);
					}
				});
			}
	
			google.maps.event.addDomListener(window, 'load', initMap);
			


		</script>
	
		<main
		id="content">
		<!-- =========={ HERO }==========  -->
		<div id="hero" class="section py-5 jarallax">
			<!-- background parallax -->

			<!-- background overlay --><div class="overlay bg-primary opacity-90 z-index-n1"> </div>

			<div class="container">
				<div
					class="row align-items-center justify-content-center">
					<!-- content -->

					<div class="col-lg-7">
						<div
							class="mt-0 py-4 text-center">
							{# <br><br><br><br> #}
							<h1 class="h2 text-white text-shadow">NOS DESTINATIONS</h1>
							<hr class="divider mt-4 mx-auto bg-warning border-warning">
							<h1 class="h2 text-white text-shadow">Remplir Offre</h1>



						</div>
					</div>
					<!-- end content -->
				</div>
			</div>
			{# <div id="jarallax-container-0" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: -100;"><img class="jarallax-img" src="../src/img-min/bg/bg-planet.jpg" alt="title" style="object-fit: cover; object-position: 50% 50%; max-width: none; position: absolute; top: 0px; left: 0px; width: 1519.2px; height: 399.44px; overflow: hidden; pointer-events: none; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; margin-top: 15.28px; transform: translate3d(0px, 194.48px, 0px);"></div> #}

		</div>
		<!-- End hero -->
		<div
			class="section py-6 py-md-7 bg-light-dark">
			{# <h1>Transferts, trajets et livraisons dans tous les pays</h1>	 #}
			<h1 class="fw-bold mb-3" style="text-align: center;">Transferts, trajets et livraisons dans tous les pays</h1>
		</div>


		<!-- =========={ ABOUT }==========  -->
		<div id="block-one" class="section py-6 py-md-7 bg-light-dark">
			<div
				class="container">
				<!-- nav tabs -->

				<div class="col-lg-12">
					<div id="map"></div>
				</div>
<br><br>
				<div class="col-lg-12 ps-lg-0 mt-5 mt-lg-0 aos-init aos-animate" data-aos="fade-left">
				<div class="w-100 p-5 border rounded-3 bg-light-dark">
				  <!-- contact form -->
				  <div class="contact-form">
					<div class="row">
					  <div class="col-md-4 mb-4">
						<label class="form-label" for="name">Point de départ:</label>
						<input type="text" name="ptDep" class="form-control" id="ptDep" readonly>
						<div class="validate"></div>
					  </div>
					  <div class="col-md-4 mb-4">
						<label class="form-label" for="email">Destination:</label>
						<input type="email" class="form-control" name="ptDes" id="ptDes" readonly>
						<div class="validate"></div>
					  </div>
					  <div class="col-md-4 mb-4">
						<label class="form-label" for="email">Distance :</label>
						<input type="email" class="form-control" name="distance" id="distance" readonly>
						<div class="validate"></div>
					  </div>
					</div>
					{{ form_start(form) }}
					<div class="col-md-12 mb-4">
						<label class="form-label" for="email">Type de transport :</label>
						{{form_widget(form.type, {'attr': {'class': 'form-control'}})}}
						<div class="validate"></div>
					</div>
					<div class="col-md-12 mb-4">
						<label class="form-label" for="email">Proposer un prix :</label>
						{{form_widget(form.prixOffre, {'attr': {'class': 'form-control'}})}}
						<div class="validate"></div>
					</div>
					<div class="col-md-12 mb-4">
						<label class="form-label" for="email">Numéro Vol :</label>
						{{form_widget(form.numVol, {'attr': {'class': 'form-control'}})}}
						<div class="validate"></div>
					</div>
					<div class="col-md-12 mb-4">
						<label class="form-label" for="email">Date :</label>
						{{form_widget(form.dateTrans, {'attr': {'class': 'form-control'}})}}
						<div class="validate"></div>
					</div>
					<div class="col-md-12 mb-4">
						<label class="form-label" for="email">Nombre places :</label>
						{{form_widget(form.nbPlace, {'attr': {'class': 'form-control'}})}}
						<div class="validate"></div>
					</div>
					<div class="col-md-12 mb-4">
						{{form_widget(form.siegeBb)}}
						<label class="form-label" for="email">Est ce que vous avez besoins d'un siege bébé ?</label>
						<div class="validate"></div>
					</div>
					<div class="col-md-12 mb-4">
						<label class="form-label" for="email">Vos commentaires & besoins :</label>
						{{form_widget(form.cmntr, {'attr': {'class': 'form-control'}})}}
						<div class="validate"></div>
					</div>

					<div class="text-center mb-4">
					  <button class="btn btn-primary" type="submit">
						<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="me-2 rtl-270" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></line></svg>
						Envoyer Proposition
					  </button>
					</div>
					{{ form_rest(form) }}
					{{ form_end(form) }}
				</div><!-- end contact form -->
				</div>
			  </div>


		</div>
	</div>
	<!-- end About -->

</main>{% endblock %}