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

{% block title %}Mon Panier |
	{{ app.session.get("setting").websiteName }}
{% endblock %}

{% block body %}

	{{ include('navbar/index.html.twig') }}

	<div class="notification"></div>
	<div class="hero-wrap hero-bread" style="background-image: url('{{asset('images/bg_2.jpg')}}');">
		<div class="container">
			<div class="row no-gutters slider-text align-items-center justify-content-center">
				<div class="col-md-9 ftco-animate text-center">
					<p class="breadcrumbs">
						<span class="mr-2">
							<a href="/">Accueil</a>
						</span>
						<span>Mon Panier</span>
					</p>
					<h1 class="mb-0 bread">Mon Panier</h1>
				</div>
			</div>
		</div>
	</div>

	<section class="ftco-section ftco-cart" data-cart="{{ cart_json }}" data-carriers="{{ carriers_json }}">
		<div class="container">
			<div class="row">
				<div class="col-md-12 ftco-animate">
					<div class="cart-list">
						<table class="table">
							<thead class="thead-primary">
								<tr class="text-center">
									<th>&nbsp;</th>
									<th>Image</th>
									<th>Nom</th>
									<th>Prix</th>
									<th>Quantité</th>
									<th>Taxe</th>
									<th>Total HT</th>
									<th>Total TTC</th>

								</tr>
							</thead>
							<tbody>
								<!-- Contenu du panier à générer dynamiquement -->
							</tbody>
						</table>
					</div>
				</div>
			</div>

			<div class="row justify-content-between">
				<div class="col-lg-4 mt-5 cart-wrap ftco-animate">
					<div class="ftco-cart mb-3">
						<h3>Choix du Transporteur</h3>
						<form action="/cart/carrier" method="POST">
							<div class="form-group">
								<select name="carrierId" id="carrier" class="form-control carrier_form"></select>
							</div</form>
						</div>
					</div>
					<div class="col-lg-4 mt-5 cart-wrap ftco-animate">
						<div class="cart-total mb-3">
							<h3>Total de tous les produits</h3>
							<p class="d-flex">
								<span>Sous Total HT</span>
								<span class="cart_sub_total_ht_amount"></span>
							</p>
							<p class="d-flex">
								<span>Taxe</span>
								<span class="cart_sub_total_taxe_amount"></span>
							</p>
							<p class="d-flex">
								<span>Drive</span>
								<span class="cart_total_delivery"></span>
							</p>
							<hr>
							<p class="d-flex total-price">
								<span>Total TTC</span>
								<span class="cart_total_amount"></span>
							</p>
						</div>
						<p>
							<a href="/checkout" class="btn btn-primary py-3 px-4">Passer à la caisse</a>
						</p>
					</div>
				</div>
			</div>
		</section>


		<footer class="ftco-footer ftco-section">
			<div class="container">
				<div class="row">
					<div class="mouse">
						<a href="#" class="mouse-icon">
							<div class="mouse-wheel">
								<span class="ion-ios-arrow-up"></span>
							</div>
						</a>
					</div>
				</div>

				<div class="row mb-5">
					<div class="col-md">
						<div class="ftco-footer-widget mb-4">
							<h2 class="ftco-heading-2">Nature 4 Saisons
							</h2>
							<p>{{ app.session.get("setting").description }}</p>
							<ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
								<li class="ftco-animate">
									<a href="https://www.facebook.com/p/Nature-4-Saisons-100054212243555/?locale=fr_FR">
										<span class="icon-facebook"></span>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-md">
						<div class="ftco-footer-widget mb-4 ml-md-5">
							<h2 class="ftco-heading-2">Accueil</h2>
							<ul class="list-unstyled">
								<li>
									<a href="/products" class="py-2 d-block">Achat</a>
								</li>
								<li>
									<a href="/about" class="py-2 d-block">À Propos</a>
								</li>
								<li>
									<a href="/blog" class="py-2 d-block">Blog</a>
								</li>

							</ul>
						</div>
					</div>
					<div class="col-md-4">
						<div class="ftco-footer-widget mb-4">
							<h2 class="ftco-heading-2">Aide</h2>
							<div class="d-flex">
								<ul class="list-unstyled mr-l-5 pr-l-3 mr-4">
									<li>
										<a href="/condition" class="py-2 d-block">Termes et conditions</a>
									</li>
									<li>
										<a href="/rgpd" class="py-2 d-block">RGPD</a>
									</li>
									<li>
										<a href="/faq" class="py-2 d-block">FAQs</a>
									</li>
									<li>
										<a href="/contact" class="py-2 d-block">Contact</a>
									</li>
								</ul>

							</div>
						</div>
					</div>
					<div class="col-md">
						<div class="ftco-footer-widget mb-4">
							<h2 class="ftco-heading-2">Pour toute reclamation ?
							</h2>
							<div class="block-23 mb-3">
								<ul>
									<li>
										<span class="icon icon-map-marker"></span>

										<span class="text">49 boulevard d'aunou Boulogne sur mer 62200</span>
									</li>
									<li>
										<a href="#">
											<span class="icon icon-phone"></span>
											<span class="text">03 59 70 11 33</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="icon icon-envelope"></span>
											<span class="text">CONTACT.NATURE4SAISONS@GMAIL.COM</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

			</div>
		</footer>
		<div id="ftco-loader" class="show fullscreen">
			<svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg>
		</div>


	{% endblock %}

	{% block javascripts %}
		<script>
			document.addEventListener('DOMContentLoaded', function () { // Sélection des éléments DOM nécessaires
const form = document.querySelector(".carrier_form").closest('form'); // Sélectionne le formulaire le plus proche contenant l'élément avec la classe .carrier_form
const select = document.querySelector(".carrier_form"); // Sélectionne l'élément select qui contient les options de choix du transporteur
const mainContent = document.querySelector(".ftco-cart");
// Sélectionne l'élément principal où sont stockées les données du panier et des transporteurs

// Vérification de la présence de l'élément select
if (! select) {
console.error('Select element (.carrier_form) not found in the DOM.');
return;
}

// Récupération des données du panier et des transporteurs depuis les attributs data-* des éléments
const cart = mainContent ? JSON.parse(mainContent.dataset.cart) : null; // Parse les données JSON du panier à partir de l'attribut data-cart
const carriers = mainContent ? JSON.parse(mainContent.dataset.carriers) : null;
// Parse les données JSON des transporteurs à partir de l'attribut data-carriers

// Construction des options de transporteur dans le menu déroulant
if (carriers) {
carriers.forEach(carrier => {
const option = document.createElement('option'); // Crée un nouvel élément option
option.value = carrier.id; // Définit la valeur de l'option avec l'ID du transporteur
option.textContent = `${
carrier.name
} - Prix : ${
(carrier.price / 100).toFixed(2)
} €`; // Définit le texte de l'option avec le nom du transporteur et son prix formaté
if (cart && cart.carrier && cart.carrier.id == carrier.id) {
option.selected = true; // Sélectionne cette option si elle correspond au transporteur actuellement sélectionné dans le panier
}select.appendChild(option); // Ajoute l'option au menu déroulant select
});
} else {
console.error('No carriers data found.');
}

// Fonction appelée lors de la soumission du formulaire
const handleSubmit = async (event) => {
event.preventDefault(); // Empêche le comportement par défaut du formulaire
updateCartTotal(); // Met à jour le total du panier avant de soumettre le formulaire
form.submit(); // Soumet le formulaire une fois que les calculs sont effectués
};

// Fonction appelée lors du changement de sélection dans le menu déroulant des transporteurs
const handleSelectChange = async (event) => {
event.preventDefault(); // Empêche le comportement par défaut du changement d'option
const id = event.target.value; // Récupère l'ID du transporteur sélectionné dans le menu déroulant

if (id) {
try {
const response = await fetch('/api/cart/update/carrier/' + id); // Effectue une requête HTTP pour mettre à jour le transporteur dans le panier
const result = await response.json(); // Extrait le résultat JSON de la réponse

if (result.isSuccess) {
const {data} = result;
// Récupère les données mises à jour du panier depuis la réponse
// Met à jour les données du panier avec le nouveau transporteur
cart.sub_total = data.sub_total; // Met à jour le sous-total du panier
cart.coupon_amount = data.coupon_amount; // Met à jour le montant du coupon appliqué
cart.carrier = data.carrier;
// Met à jour les informations sur le transporteur sélectionné

// Met à jour l'affichage du total du panier
updateCartTotal();
} else {
console.error('Error updating carrier:', result.message); // Affiche une erreur si la mise à jour du transporteur échoue
}
} catch (error) {
console.error('Error updating carrier:', error); // Affiche une erreur si la requête HTTP échoue
}
}
};

// Fonction pour mettre à jour l'affichage du total du panier
const updateCartTotal = () => {
const formData = new FormData(form); // Récupère les données du formulaire
const selectedCarrierId = formData.get('carrierId'); // Récupère l'ID du transporteur sélectionné dans le formulaire

const selectedCarrier = carriers.find(carrier => carrier.id == selectedCarrierId); // Trouve l'objet transporteur correspondant à l'ID sélectionné
if (selectedCarrier) {
const deliveryPrice = parseFloat(selectedCarrier.price) / 100; // Calcule le prix de livraison à partir des données du transporteur
const cartTotalAmount = calculateTotal(cart.sub_total, deliveryPrice, cart.coupon_amount);
// Calcule le total du panier avec le sous-total, le prix de livraison et le montant du coupon

// Met à jour les éléments HTML affichant le prix de livraison et le total du panier
document.querySelector('.cart_total_delivery').textContent = deliveryPrice.toFixed(2) + ' €';
document.querySelector('.cart_total_amount').textContent = cartTotalAmount.toFixed(2) + ' €';
} else {
console.error('Selected carrier not found in the carriers data.'); // Affiche une erreur si le transporteur sélectionné n'est pas trouvé dans les données des transporteurs
}
};

// Fonction utilitaire pour calculer le total du panier
const calculateTotal = (subTotal, deliveryPrice, couponAmount = 0) => {
const subtotalAmount = parseFloat(subTotal); // Convertit le sous-total en nombre décimal
const deliveryAmount = parseFloat(deliveryPrice); // Convertit le prix de livraison en nombre décimal
const couponDiscount = parseFloat(couponAmount); // Convertit le montant du coupon en nombre décimal

const subtotalEuro = subtotalAmount / 100; // Convertit le sous-total en euros
const couponEuro = couponDiscount / 100; // Convertit le montant du coupon en euros

const totalEuro = subtotalEuro + deliveryAmount - couponEuro; // Calcule le total en euros en ajoutant le sous-total, le prix de livraison et en soustrayant le montant du coupon

return totalEuro; // Retourne le total calculé
};

// Ajout des écouteurs d'événements sur le formulaire et le menu déroulant
form.addEventListener('submit', handleSubmit); // Écouteur pour gérer la soumission du formulaire
select.addEventListener('change', handleSelectChange); // Écouteur pour gérer le changement de sélection dans le menu déroulant
});
		</script>
	{% endblock %}