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

{% block title %}Paiement | {{ app.session.get("setting").websiteName }}


{% endblock %}

{% block body %}
<script src="https://js.stripe.com/v3/"></script>


<section class="ftco-section" data-cart="{{cart_json}}" data-public_key="{{public_key}}" data-orderid="{{orderId}}">
	<div class="container">
		<div
			class="row justify-content-center">
			<!-- Colonne pour les détails de l'adresse -->
			<div class="col-xl-7 col-md-6 mb-4 ftco-animate">
				<h3 class="mb-4 billing-heading">Détails de l'adresse</h3>
				<!-- Vos champs de formulaire pour les détails de facturation -->

				<div class="cart-detail cart-total p-3 p-md-4">
					<h3 class="billing-heading mb-4">Adresse de Facturation</h3>
					<select name="billing_address" class="form-control mb-4">
						<option value="">Choisir une adresse</option>

						{% for address in addresses %}
							<option>{{ address.clientName }}
								|
								{{ address.street }}
								{{ address.codePostal }}
								{{ address.city }}
								{{ address.state }}</option>
						{% endfor %}
					</select>

					<h3 class="billing-heading mb-4">Type de Livraison</h3>
					<select name="shipping_address" class="form-control">
						<option value="Drive">Drive</option>
					</select>
					<br>
					<br>
					<h3 class="billing-heading mb-4">Information du magasin</h3>
					<p class="mb-4">Adresse : 49 Boulevard d'aunou</p>
					<p class="mb-4">Ville : Boulogne-sur-mer</p>
					<p class="mb-4">Code Postal : 62200</p>


					<br>
					<h3 class="billing-heading mb-4">Détails supplémentaires</h3>
					<textarea name="additional_details" class="form-control" 
					rows="5" placeholder="Ajoutez des informations supplémentaires ici..."></textarea>
				</div>
			</div>
			<!-- Colonne pour le récapitulatif de la commande -->
			<div class="col-xl-5 col-md-6 ftco-animate">
				<div class="row pt-3">
					<div class="col-md-12 d-flex mb-5">
						<div class="cart-detail cart-total p-3 p-md-4">
							<h3 class="billing-heading mb-4">Récapitulatif de la commande</h3>
							<hr>
							{% for item in cart.items %}
								<p class="d-flex">
									<span class="mr-3">x{{ item.quantity }}{{ item.product.name }}</span>
									{% if item.product.soldePrice and item.product.soldePrice > 0 %}
										<span class="priceA">{{ (item.product.soldePrice / 100) | format_currency('EUR') }}
										{{ item.product.component }}
										</span>
										<span class="price-total">Total:
										{{ (item.quantity * item.product.soldePrice / 100) | format_currency('EUR') }}
										</span>
									{% else %}
										<span>{{ (item.product.price / 100) | format_currency('EUR') }}
											{{ item.product.component }}
										</span>
										<span class="price-total">
											Total:
											{{ (item.quantity * item.product.price / 100) | format_currency('EUR') }}
										</span>
									{% endif %}
								</p>
							{% endfor %} 
							<hr>
							<p class="d-flex total-price"><span>Sous-Total</span>
								<span>{{ (cart.sub_total / 100) | format_currency('EUR') }}</span>
							</p>
							<p class="d-flex total-price"><span>Livraison</span>
								<span>{{ (cart.carrier.price / 100) | format_currency('EUR') }}</span>
							</p>
							<p class="d-flex total-price"><span>Total</span>
								<span>{{ (cart.sub_total_with_carrier / 100) | format_currency('EUR') }}</span>
							</p>
						</div>
					</div>
					<a href="{{asset("/cart")}}" class="ml-5">Il vous manque quelque chose ?
					</a>
					<br>
				</div>
				<a href="#paymentModal" class="btn btn-primary py-3 px-4 mt-5" >
							Payer Maintenant
							{{ (cart.sub_total_with_carrier / 100) | format_currency('EUR') }}
						</a>
			</div>
			<div class="col-md-12 payment d-none ftco-animate">
				<div class="cart-detail p-3 p-md-4">
					<p>
						
					</p>
				</div>
			</div>
		</div>
		<!-- .col-md-8 -->
	</div>
</div></section><div id="paymentModal" class="modal">
<div class="modal-content">
	<span class="close">&times;</span>
	<br>
	<form id="payment-form">
		<div id="payment-element"></div>
		<br>
		<button id="submit">
			<div class="spinner hidden" id="spinner"></div>
			<span id="button-text">Payer</span>
		</button>
		<div id="payment-message" class="hidden"></div>
	</form>

</div></div><!-- Ancre pour fermer le modale --><a id="close"></a>



	{% endblock %}

	{% block javascripts %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Variables pour stocker les adresses de facturation et de livraison ainsi que les détails supplémentaires
    let billing_address = "";
    let shipping_address = "";
    let details = "";
    // Variable pour contrôler l'affichage du bouton de paiement
    let displayBtn = false;
    // Sélection des éléments DOM nécessaires
    const billing_address_select = document.querySelector('select[name="billing_address"]');
    const shipping_address_select = document.querySelector('select[name="shipping_address"]');
    const additional_details = document.querySelector('textarea');
    const paymentDiv = document.querySelector('.payment');
    // Vérification de la présence des éléments requis dans le DOM
    if (billing_address_select && shipping_address_select && paymentDiv) {
      // Fonction pour mettre à jour l'affichage du bouton de paiement en fonction des choix d'adresses et de détails
      const updateButton = () => {
        displayBtn = (!!billing_address); // Vérifie si une adresse de facturation est sélectionnée
        if (displayBtn) {
          paymentDiv.classList.remove('d-none'); // Affiche le div de paiement s'il y a une adresse de facturation sélectionnée

          // Effet de transition pour l'affichage du div de paiement
          paymentDiv.style.opacity = "0";
          paymentDiv.style.transition = "opacity 0.5s";
          setTimeout(() => {
            paymentDiv.style.opacity = "1";
          }, 10);

          // Ajout d'un écouteur sur le lien de paiement une fois qu'il est rendu visible
          paymentDiv.querySelector('a').addEventListener('click', async (event) => {
            event.preventDefault(); // Empêche la navigation par défaut

            // Envoi des données de commande au backend via une requête POST
            const response = await fetch('/api/order', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                billing_address,
                shipping_address,
                details
              })
            });

            const result = await response.json(); // Attend la réponse JSON du backend
            console.log(result); // Affiche la réponse JSON dans la console (pour le débogage)
          });
        } else {
          paymentDiv.classList.add('d-none'); // Masque le div de paiement s'il n'y a pas d'adresse de facturation sélectionnée
        }
      };
      // Écouteurs d'événements pour les changements dans les sélecteurs d'adresses et le champ de détails supplémentaires
      billing_address_select.onchange = (event) => {
        billing_address = event.target.value; // Met à jour l'adresse de facturation sélectionnée
        updateButton(); // Met à jour l'affichage du bouton de paiement
      };
      shipping_address_select.onchange = (event) => {
        shipping_address = event.target.value; // Met à jour l'adresse de livraison sélectionnée
        updateButton(); // Met à jour l'affichage du bouton de paiement
      };
      additional_details.onchange = (event) => {
        details = event.target.value; // Met à jour les détails supplémentaires saisis
        updateButton(); // Met à jour l'affichage du bouton de paiement
      };
    } else {
      console.error('Les éléments requis n\'ont pas été trouvés dans le DOM.');
    }
    // Partie du script Stripe pour gérer le paiement

    // Récupération des données nécessaires depuis l'élément .ftco-section
    const section = document.querySelector('.ftco-section');
    const public_key = section?.dataset?.public_key || "";
    const orderId = section?.dataset?.orderid || "";

    // Vérification de la présence des clés publiques et de l'ID de commande
    if (public_key && orderId) {
      const stripe = Stripe(public_key); // Initialisation de Stripe avec la clé publique
      let elements;

      async function initialize() {
        try {
          console.log(`/api/stripe/payment-intent/${orderId}`); // Affiche l'URL de l'API pour vérification

          // Envoi d'une requête POST pour obtenir le clientSecret nécessaire pour la confirmation de paiement
          const response = await fetch(`/api/stripe/payment-intent/${orderId}`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify({})
          });

          // Récupération de la réponse JSON
          const result = await response.json();
          console.log("API response:", result); // Affiche la réponse JSON reçue du backend (pour le débogage)

          // Vérification de l'existence du clientSecret dans la réponse
          if (!result.clientSecret) {
            throw new Error("clientSecret is not defined in the response");
          }

          const clientSecret = result.clientSecret;
          console.log("clientSecret:", clientSecret); // Affiche le clientSecret obtenu

          elements = stripe.elements({ clientSecret }); // Création des éléments Stripe avec le clientSecret

          const paymentElementOptions = {
            layout: "tabs" // Options de mise en page pour les éléments de paiement Stripe
          };

          const paymentElement = elements.create("payment", paymentElementOptions); // Création de l'élément de paiement
          paymentElement.mount("#payment-element"); // Montage de l'élément de paiement sur le DOM
        } catch (error) {
          console.error("Erreur lors de l'initialisation de Stripe:", error); // Affiche une erreur en cas d'échec de l'initialisation de Stripe
        }
      }

      initialize(); // Appel de la fonction d'initialisation de Stripe

      // Écouteur d'événement pour soumettre le formulaire de paiement
      document.querySelector("#payment-form").addEventListener("submit", async (e) => {
        e.preventDefault(); // Empêche la soumission par défaut du formulaire

        setLoading(true); // Affiche le chargement pendant la confirmation du paiement

        const { error } = await stripe.confirmPayment({
          elements,
          confirmParams: {
            return_url: window.location.origin + "/stripe/payment/success" // URL de retour après le paiement réussi
          }
        });

        // Gestion de la réponse de confirmation de paiement
        if (error) {
          showMessage(error.message); // Affiche un message d'erreur en cas d'échec du paiement
        } else {
          showMessage("Payment succeeded!"); // Affiche un message de succès après un paiement réussi
          window.location.href = "http://localhost:4242/success.html"; // Redirige vers une page de succès après un paiement réussi
        }

        setLoading(false); // Cache l'indicateur de chargement après la confirmation du paiement
      });

      // Fonction utilitaire pour afficher un message à l'utilisateur
      function showMessage(messageText) {
        const messageContainer = document.querySelector("#payment-message"); // Sélectionne le conteneur de message
        messageContainer.classList.remove("hidden"); // Affiche le conteneur de message
        messageContainer.textContent = messageText; // Définit le texte du message

        setTimeout(() => {
          messageContainer.classList.add("hidden"); // Masque le conteneur de message après quelques secondes
          messageContainer.textContent = ""; // Réinitialise le texte du message
        }, 4000);
      }

      // Fonction utilitaire pour afficher l'indicateur de chargement
      function setLoading(isLoading) {
        const spinner = document.querySelector("#spinner"); // Sélectionne l'élément de spinner
        const button = document.querySelector("#submit"); // Sélectionne le bouton de soumission

        if (isLoading) {
          button.disabled = true; // Désactive le bouton pendant le chargement
          spinner.classList.remove("hidden"); // Affiche l'indicateur de chargement
        } else {
          button.disabled = false; // Réactive le bouton après le chargement
          spinner.classList.add("hidden"); // Cache l'indicateur de chargement
        }
      }
    } else {
      console.error('Les données Stripe (public_key ou orderId) ne sont pas définies.');
    }
    // Gestion du modal de paiement
    const modal = document.getElementById("paymentModal"); // Sélectionne le modal de paiement
    const btn = document.querySelector('a[href="#paymentModal"]'); // Sélectionne le bouton qui ouvre le modal
    const span = document.querySelector(".close"); // Sélectionne l'élément qui ferme le modal

    if (modal && btn && span) {
      // Écouteur d'événement pour ouvrir le modal lors du clic sur le bouton
      btn.onclick = (event) => {
        event.preventDefault();
        modal.style.display = "block"; // Affiche le modal
        modal.style.opacity = "1"; // Rétablit l'opacité à 1 pour l'animation
      };

      // Écouteur d'événement pour fermer le modal lors du clic sur l'élément de fermeture
      span.onclick = () => {
        modal.style.opacity = "0"; // Réduit l'opacité à 0 pour l'animation de fermeture
        setTimeout(() => {
          modal.style.display = "none"; // Masque le modal après l'animation de fermeture
        }, 300);
      };

      // Écouteur d'événement pour fermer le modal lors du clic en dehors du contenu du modal
      window.onclick = (event) => {
        if (event.target == modal) {
          modal.style.opacity = "0"; // Réduit l'opacité à 0 pour l'animation de fermeture
          setTimeout(() => {
            modal.style.display = "none"; // Masque le modal après l'animation de fermeture
          }, 300);
        }
      };
    } else {
      console.error('Le modal ou ses éléments de contrôle ne sont pas trouvés dans le DOM.');
    }
  });
</script>


	{% endblock %}