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

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

{% block title %}Valider ma commande - La Boutique Française{% endblock %}

{% block content %}
    <h2>Mon récapitulatif</h2>
    <p>Vérifiez vos informations avant de payer votre commande</p>
    <hr>
    <div class="row">
        <div class="col-md-6">
            <strong>Mon adresse de livraison</strong><br>
            <div class="form-check mt-4">
                {{ delivery|raw }}

            </div>
           

        <hr>
            <strong>Mon transporteur</strong><br>
                <div class="form-check mt-4">
                    {{ carrier.name }}<br>
                    {{ carrier.description }}<br>
                    {{ (carrier.price / 100) |number_format(2, ',', '')|default('0.00') }}€
                </div>
            
        </div>
        <div class="col-md-6">
            <div class="text-center">
                <b>Ma commande</b><br>
    
            </div>
                
            <div class="order-summary">
            {% set total = null %}
            {% for key,product in cart %}

            <div class="row {% if key > 0 %}mt-2{% endif %}">
                <div class="col-2"><img src="/uploads/{{ product.product.illustration }}" alt="{{ product.product.name }}" height="75px"></div>
                <div class="col-8 my-auto">
                    {{ product.product.name }}<br>
                    <small>{{ product.product.subtitle }}<br>
                     x {{ product.quantity }}<br>

                      </small>
                </div>
                   
               
                <div class="col-2 my-auto">
               {{ ((product.product.price * product.quantity) / 100)|number_format(2, ',', '')|default('0.00') }} €
            </div>
             </div>
            
            {% set total = total + (product.product.price * product.quantity) %}
            {% endfor %}
            </div>
            
            <hr>
            <strong>Sous-Total : </strong>{{ (total / 100)|number_format(2, ',', '')|default('0.00') }} €
            <br>
            <strong>Livraison : </strong>{{ (carrier.price / 100)|number_format(2, ',', '')|default('0.00') }} €

            <hr>

            <strong>Total : {{ ((total / 100) + (carrier.price / 100))|number_format(2, ',', '')|default('0.00') }} € </strong>
                
            <a class="btn btn-success w-100 mt-4" id="checkout-button">Payer {{ ((total / 100) + (carrier.price / 100))|number_format(2, ',', '')|default('0.00') }} €  </a>
            
        </div>
    </div>

{% endblock %}

{% block script %}

    <script type="text/javascript">
        
        var stripe = Stripe("pk_test_51OcP7LArxMno9hPm5BAoKhQR9fvkvW5hWbDDslXolqjnojOGHsua3RidQA89IpgZ24WDXfYbcQ4KdmkfOllOdStm007uNnLrtb");
        
        var checkoutButton = document.getElementById("checkout-button");
        checkoutButton.addEventListener("click", function () {
            fetch("/commande/create-session/{{ reference }}", {
                method: "POST",
            })
                .then(function (response) {
                    return response.json();
                })
                .then(function (session) {
                    return stripe.redirectToCheckout({ sessionId: session.id });
                })
                .then(function (result) {
                    if(result.error) {
                        alert(result.error.message);
                    }
                })
                .catch(function (error) {
                    console.error("Error:", error);
                });
        });
    </script>

{% endblock %}