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

{% block title %}SiteEvent
{% endblock %}

{% block body %}
<style>
a{
	color: white;
	text-decoration: none;

}
</style>
	<h2 class="text-center m-4">Site Event</h2>


	<div class="d-flex justify-content-center flex-wrap">
		<div class="MyDiv col-10 col-md-4 col-lg-3">


			<div class="card-body">
				{% set firstPicture = site_event.galeryPictures|first %}
				{% if firstPicture %}
					<img class="card-img-top" src="{{ asset('uploads/pictures/' ~ firstPicture.picture) }}" alt="Image de l'event">
				{% else %}
					<img class="card-img-top" src="{{ asset('uploads/pictures/default.png') }}" alt="Default image">
				{% endif %}
				<h5 class="card-title">{{ site_event.name }}</h5>
				<p class="card-text"><strong>Address :</strong>
					{{site_event.address}}</p>
				<p class="card-text"><strong>Postal Code :</strong>
					{{site_event.postalCode}}</p>
				<p class="card-text"><strong>City :</strong>
					{{site_event.city}}</p>
				<p id="travel-time" style="font-weight: bold; margin-top: 1rem;"></p>

				<p class="card-text"><strong>description: </strong>
				
					{{site_event.description}}</p>
				<div>
					<a class="btn btn-success m-2" href="{{ path('app_site_event_index') }}">Revenir à la liste</a>
					<a class="btn btn-warning m-2" href="{{ path('app_site_event_edit', {'id': site_event.id}) }}">Modifier</a>
				</div>
			</div>
		</div>
{# ------------------------------card contact ----------------------------- #}
		<div class="MyDiv col-10 col-md-3 col-lg-3 " style="justify-content: start;">
			<h3 class="text-center">contact</h3>
			{% for contact in site_event.contact %}
				<div class="card-body">
					{% set firstPicture = contact.galeryPictures %}
					{% if firstPicture %}
						<img class="card-img-top" src="{{ asset('uploads/pictures/' ~ firstPicture.picture) }}" alt="Image de {{ contact.firstName }}">
					{% else %}
						<img class="card-img-top" src="{{ asset('uploads/pictures/homme-67d152475f1fb-67ebf984bbc84.jpg') }}" alt="Default image">
					{% endif %}
					<h5 class="card-title">{{ contact.firstName }}</h5>
					<p class="card-text">telephone :
						{{contact.phoneNumber}}</p>
					<p class="card-text">email :
						{{contact.email}}</p>

				{% endfor %}

			</div>

			{# ------------------------------ event card -------------------------------- #}
			<div class="MyDiv col-10 col-md-3 col-lg-3" style="justify-content: start;">
				<h3 class="text-center">Events lié</h3>
				{% for event in events %}
					<a class="btn bg-primary m-1" href="{{ path('app_event_show', {'id': event.id}) }}">=>{{ event.name }}</a>
				{% endfor %}
			</div>

		</div>


	</div>
	<div
		class="row p-2  ">
		<!-- 🔧 Contrôles utilisateur -->
		<div class=" m-3 col- col-md-5 MyDiv">
			<div class="col-md-5">
				<label for="start-address" class="form-label">Adresse de départ</label>
				<input type="text" id="start-address" class="form-control" value="255 Route des Cistes, Antibes, France">
				<div class="form-check mt-2">
					<input type="checkbox" class="form-check-input" id="use-current-location">
					<label class="form-check-label" for="use-current-location">Utiliser ma position actuelle</label>
				</div>
			</div>

			<div class="col-md-5">
				<label for="end-address" class="form-label">Adresse d’arrivée</label>
				<input type="text" id="end-address" class="form-control" value="{{ address }}">
			</div>

			<div class=" d-flex ">
				<button class="btn btn-primary  " onclick="calculateRoute()">Mettre à jour</button>
				<a id="open-navigation" href="#" target="_blank" class="btn btn-success  ">
		Ouvrir dans Google Maps
	</a>
			</div>
		</div>

		<!-- 🗺️ Carte -->
		<div id="map" style="height: 300px;" class="col-11 col-md-6 m-2 "></div>
	</div>
	<p id="travel-time" class="mt-3 fw-bold"></p>
	

	<!-- 🌍 Google Maps -->
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYRpXbUVb3Iec6j-McWU4B1GmMrVAGYp8&callback=initMap" async defer></script>

	<script>
		let map,
geocoder,
directionsService,
directionsRenderer;

function initMap() {
geocoder = new google.maps.Geocoder();
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer();

map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: {
lat: 43.5528,
lng: 7.0174
} // Cannes
});

directionsRenderer.setMap(map);

// Gestion du switch "utiliser ma position"
document.getElementById('use-current-location').addEventListener('change', function () {
const inputStart = document.getElementById('start-address');

if (this.checked) {
inputStart.disabled = true;
navigator.geolocation.getCurrentPosition((position) => {
const coords = {
lat: position.coords.latitude,
lng: position.coords.longitude
};

geocoder.geocode({
location: coords
}, (results, status) => {
if (status === "OK" && results[0]) {
inputStart.value = results[0].formatted_address;
calculateRoute();
} else {
alert("Impossible d’obtenir votre adresse actuelle.");
}
});
}, () => {
alert("Géolocalisation refusée.");
this.checked = false;
inputStart.disabled = false;
});
} else {
inputStart.disabled = false;
inputStart.value = "255 Route des Cistes, Antibes, France";
calculateRoute();
}
});

// Calcul initial à l’ouverture
setTimeout(() => {
if (document.getElementById('end-address').value) {
calculateRoute();
}
}, 1000);
}

function calculateRoute() {
const start = document.getElementById('start-address').value;
const end = document.getElementById('end-address').value;

if (! start || ! end) {
alert("Merci de remplir les deux adresses.");
return;
}

directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function (response, status) {
if (status === 'OK') {
directionsRenderer.setDirections(response);
const duration = response.routes[0].legs[0].duration.text;
document.getElementById('travel-time').innerText = "Temps estimé : " + duration;

const endLoc = response.routes[0].legs[0].end_location;
document.getElementById('open-navigation').href = `https://www.google.com/maps/dir/?api=1&destination=${
endLoc.lat()
},${
endLoc.lng()
}&travelmode=driving`;
} else {
alert('Erreur de calcul d’itinéraire : ' + status);
}
});
}
	</script>


	{{ include('site_event/_delete_form.html.twig') }}
{% endblock %}