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

{% block title %}Pay{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/stripe.css">
{% endblock %}

{% block body %}


<div class="my-3 p-3 bg-white rounded box-shadow">
  <div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">


    
     
      
    <h6 class="mb-4">Renseignez vos coordonnées bancaires :</h6>
      <div class="text-center">
        <!-- Display a payment form -->
        <form id="payment-form">
        
          
            <!--
            <span class="text-start">Code parrainage pour bénéficier de <b>-50%</b> :</span>
            <input class="form-control mb-2" id="codePatronage" placeholder="XXXXXXXX" type="text" name="codeParrainage" value="{{ codeParrainage }}">
            <div class="valid-feedback mb-2">
              Bénéficier de -30%
            </div>
            <div class="invalid-feedback mb-2">
            Code parrainage invalide
          </div>

          <hr />
          -->

          <div id="payment-element">
            <!--Stripe.js injects the Payment Element-->
          </div>

          <div class="spinner" id="spinnerAll"></div>
   

        
  

          <button id="submit" class="btn btn-primary">
            <div class="spinner hidden" id="spinner"></div>
            <span id="button-text">Payer <b>{{ currentPrice.price|number_format(2, ',', ' ') }}</b>€</span>
          </button>


          <div id="payment-message" class="hidden"></div>
        </form>

        <p><small style='font-size:11px;'>La confirmation de la commande implique que vous avez lu et accepté les <a target="_BLANK"  href="{{ path('app_cgv') }}">Conditions générales de vente</a></small></p>

      </div>
    </div>
  </div>
</div>

</div>

<script>
    var items = [{ 
        id: "xl-tshirt",
        codeReduction: "{{ codeReduction }}",
        codeParrainage: "{{ codeParrainage }}"
     }];

</script>
    
{% endblock body %}

{% block javascripts %}
<script src="https://js.stripe.com/v3/"></script>
<script>
    // A reference to Stripe.js initialized with a fake API key.
    const stripe = Stripe("{{ stripe_public_key }}");

    //console.log("{{ app.request.getSchemeAndHttpHost() ~ path('app_setting_success') }}");

    // The items the customer wants to buy


    let elements;

    initialize();
    checkStatus();

    document
    .querySelector("#payment-form")
    .addEventListener("submit", handleSubmit);

    // Fetches a payment intent and captures the client secret
    async function initialize() {
        const { clientSecret } = await fetch("{{ path('app_pay_create', {'formule': formule }) }}", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ items }),
        })
        .then((r) => r.json())
        //.then(function(result) {
        //    console.log(result);
        //})
        ;

        elements = stripe.elements({ clientSecret });

        
        const paymentElement = elements.create("payment");
        paymentElement.mount("#payment-element");

        document.querySelector("#spinnerAll").classList.add("hidden");
    }

    async function handleSubmit(e) {
        e.preventDefault();
        setLoading(true);

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
            // Make sure to change this to your payment completion page
            return_url: "{{ app.request.getSchemeAndHttpHost() ~ path('app_setting_success') }}",
            },
        });

        // This point will only be reached if there is an immediate error when
        // confirming the payment. Otherwise, your customer will be redirected to
        // your `return_url`. For some payment methods like iDEAL, your customer will
        // be redirected to an intermediate site first to authorize the payment, then
        // redirected to the `return_url`.
        if (error.type === "card_error" || error.type === "validation_error") {
            showMessage(error.message);
        } else {
            showMessage("An unexpected error occured.");
        }

        setLoading(false);
    }

    // Fetches the payment intent status after payment submission
    async function checkStatus() {
        const clientSecret = new URLSearchParams(window.location.search).get(
            "payment_intent_client_secret"
        );

        if (!clientSecret) {
            return;
        }

        const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);

        switch (paymentIntent.status) {
            case "succeeded":
            showMessage("Payment succeeded!");
            break;
            case "processing":
            showMessage("Your payment is processing.");
            break;
            case "requires_payment_method":
            showMessage("Your payment was not successful, please try again.");
            break;
            default:
            showMessage("Something went wrong.");
            break;
        }
    }

    // ------- UI helpers -------

    function showMessage(messageText) {
        const messageContainer = document.querySelector("#payment-message");

        messageContainer.classList.remove("hidden");
        messageContainer.textContent = messageText;

        setTimeout(function () {
            messageContainer.classList.add("hidden");
            messageText.textContent = "";
        }, 4000);
        }

        // Show a spinner on payment submission
        function setLoading(isLoading) {
        if (isLoading) {
            // Disable the button and show a spinner
            document.querySelector("#submit").disabled = true;
            document.querySelector("#spinner").classList.remove("hidden");
            document.querySelector("#button-text").classList.add("hidden");
        } else {
            document.querySelector("#submit").disabled = false;
            document.querySelector("#spinner").classList.add("hidden");
            document.querySelector("#button-text").classList.remove("hidden");
        }
    }
</script>
{% endblock %}