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

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

{% block body %}
	 <script>
			let map;
			let directionsService;
			let directionsDisplay;
			
			function initMap() {
			  map = new google.maps.Map(document.getElementById('map'), {
				center: {lat: 36.4043536, lng: 10.6124345},
				zoom: 13
			  });
			
			  directionsService = new google.maps.DirectionsService();
			  directionsDisplay = new google.maps.DirectionsRenderer();
			  directionsDisplay.setMap(map);
			}
			
			function calculateRoute() {
			  const startAddress = document.getElementById('startAddress').value;
			  const endAddress = document.getElementById('endAddress').value;
			
			  const request = {
				origin: startAddress,
				destination: endAddress,
				travelMode: 'DRIVING'
			  };
			
			  directionsService.route(request, function(result, status) {
				if (status === 'OK') {
				  directionsDisplay.setDirections(result);
				  // Afficher la distance
				  const distance = result.routes[0].legs[0].distance.text;
				  let dst = parseFloat(distance);
				  
				  window.location.href = "/remplirOffre/" + startAddress + "/" + endAddress+"/"+dst;
				  } else {
				  alert('Impossible de calculer l\'itinéraire. Vérifiez les adresses.');
				}
			  });
			}
			
		</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">


						</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="position-absolute top-0 start-50 mt-nav-section ms-n7 z-index-10">
					<ul class="nav nav-tabs card-header-tabs tabs-light-color bg-light mt-1" id="tabs-nav1" role="tablist">
						<li class="nav-item rounded-top-start" role="presentation">
							<a class="nav-link rounded-0 active" id="onenav-1" href="#onecontent-1" data-bs-toggle="tab" role="tab" aria-controls="onecontent-1" aria-selected="true">
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-car-front" viewbox="0 0 16 16">
									<path d="M4 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0m10 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M6 8a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2zM4.862 4.276 3.906 6.19a.51.51 0 0 0 .497.731c.91-.073 2.35-.17 3.597-.17 1.247 0 2.688.097 3.597.17a.51.51 0 0 0 .497-.731l-.956-1.913A.5.5 0 0 0 10.691 4H5.309a.5.5 0 0 0-.447.276"/>
									<path d="M2.52 3.515A2.5 2.5 0 0 1 4.82 2h6.362c1 0 1.904.596 2.298 1.515l.792 1.848c.075.175.21.319.38.404.5.25.855.715.965 1.262l.335 1.679c.033.161.049.325.049.49v.413c0 .814-.39 1.543-1 1.997V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.338c-1.292.048-2.745.088-4 .088s-2.708-.04-4-.088V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.892c-.61-.454-1-1.183-1-1.997v-.413a2.5 2.5 0 0 1 .049-.49l.335-1.68c.11-.546.465-1.012.964-1.261a.807.807 0 0 0 .381-.404l.792-1.848ZM4.82 3a1.5 1.5 0 0 0-1.379.91l-.792 1.847a1.8 1.8 0 0 1-.853.904.807.807 0 0 0-.43.564L1.03 8.904a1.5 1.5 0 0 0-.03.294v.413c0 .796.62 1.448 1.408 1.484 1.555.07 3.786.155 5.592.155 1.806 0 4.037-.084 5.592-.155A1.479 1.479 0 0 0 15 9.611v-.413c0-.099-.01-.197-.03-.294l-.335-1.68a.807.807 0 0 0-.43-.563 1.807 1.807 0 0 1-.853-.904l-.792-1.848A1.5 1.5 0 0 0 11.18 3z"/>
								</svg>
								Transfert</a>
						</li>
						<li class="nav-item rounded-top-end" role="presentation">
							<a class="nav-link rounded-0" id="onenav-2" href="#onecontent-2" data-bs-toggle="tab" role="tab" aria-controls="onecontent-2" aria-selected="false" tabindex="-1">
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-taxi-front" viewbox="0 0 16 16">
									<path d="M4.862 5.276 3.906 7.19a.51.51 0 0 0 .497.731c.91-.073 2.35-.17 3.597-.17 1.247 0 2.688.097 3.597.17a.51.51 0 0 0 .497-.731l-.956-1.913A.5.5 0 0 0 10.691 5H5.309a.5.5 0 0 0-.447.276M4 10a1 1 0 1 1-2 0 1 1 0 0 1 2 0m10 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-9 0a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1"/>
									<path d="M6 1a1 1 0 0 0-1 1v1h-.181A2.5 2.5 0 0 0 2.52 4.515l-.792 1.848a.807.807 0 0 1-.38.404c-.5.25-.855.715-.965 1.262L.05 9.708a2.5 2.5 0 0 0-.049.49v.413c0 .814.39 1.543 1 1.997V14.5a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-1.338c1.292.048 2.745.088 4 .088s2.708-.04 4-.088V14.5a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-1.892c.61-.454 1-1.183 1-1.997v-.413c0-.165-.016-.329-.049-.49l-.335-1.68a1.807 1.807 0 0 0-.964-1.261.807.807 0 0 1-.381-.404l-.792-1.848A2.5 2.5 0 0 0 11.181 3H11V2a1 1 0 0 0-1-1zM4.819 4h6.362a1.5 1.5 0 0 1 1.379.91l.792 1.847a1.8 1.8 0 0 0 .853.904c.222.112.381.32.43.564l.336 1.679c.02.097.029.195.029.294v.413a1.48 1.48 0 0 1-1.408 1.484c-1.555.07-3.786.155-5.592.155-1.806 0-4.037-.084-5.592-.155A1.479 1.479 0 0 1 1 10.611v-.413c0-.099.01-.197.03-.294l.335-1.68a.807.807 0 0 1 .43-.563c.383-.19.685-.511.853-.904l.792-1.848A1.5 1.5 0 0 1 4.82 4Z"/>
								</svg>
								Taxi</a>
						</li>
					</ul>
				</div>

				<!-- tab content -->
				<div class="tab-content" id="tabs-content1">
					<div class="tab-pane fade show active" id="onecontent-1" role="tabpanel" aria-labelledby="onenav-1">
						<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">
								<div class="row">
									<div class="col-lg-5">
										<div id="map"></div>
									</div>
									
									<div class="col-md-7 mb-4">
										<label class="form-label" for="name">Point de départ:</label>
										<input type="text" name="startAddress" class="form-control" id="startAddress">
										<div class="validate"></div>
									<br><br>
										<label class="form-label" for="email">Destination:</label>
										<input type="email" class="form-control" name="endAddress" id="endAddress">
										<div class="validate"></div>
									<br><br>
								

								
									<button class="btn btn-primary" type="button" onclick="calculateRoute()">
										<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>
										Voir offres
									</button>
								</div>
							</div>
							</div>
						</div>
					</div>

					<div class="tab-pane fade light-style" id="onecontent-2" role="tabpanel" aria-labelledby="onenav-2">
						<div class="code-toolbar">
						<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">
							<div class="row">
								<div class="col-lg-5">
									<div id="map2"></div>
								</div>
								
								<div class="col-md-7 mb-4">
									<label class="form-label" for="name">Point de départ:</label>
									<input type="text" name="startAddress" class="form-control" id="startAddress">
									<div class="validate"></div>
								<br><br>
									<label class="form-label" for="email">Destination:</label>
									<input type="email" class="form-control" name="endAddress" id="endAddress">
									<div class="validate"></div>
								<br><br>
							

							
								<button class="btn btn-primary" type="button" onclick="calculateRoute2()">
									<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>
									Voir offres
								</button>
							</div>
						</div>
						</div>
					</div>
						</div>
					</div>
					<!-- end tabs content -->
				</div>
			</div>
			<!-- End about -->


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

</main>{% endblock %}