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

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

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

{% block content %}
    <h2>Mon récapitulatif</h2>
    <p>Vérifier 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">
                {{ carrier.name }}<br>
                {{ carrier.description }}<br>
                {{ (carrier.price / 100) |number_format(2, ',', '.') }} €
            </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 }}
                            </small>
                        </div>
                        <div class="col-2 my-auto">
                            {{ ((product.product.price * product.quantity) / 100) |number_format(2, ',', '.') }} €
                        </div>    
                    </div>
                    {% set total = total + (product.product.price * product.quantity) %} 
                {% endfor %}
            </div>

            <hr>    
            <strong>Sous-Total : </strong>{{ (total / 100) |number_format(2, ',', '.') }} €<br>
            <strong>Livraison : </strong>{{ (carrier.price / 100) |number_format(2, ',', '.') }} €
            <hr>
            <strong>Total : {{ ((total / 100) + (carrier.price / 100)) |number_format(2, ',', '.') }} €</strong>

            <a class="btn btn-success w-100 mt-3" id="checkout-button">Payer | {{ ((total / 100) + (carrier.price / 100)) |number_format(2, ',', '.') }} €</a>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        var stripe = Stripe("pk_test_51OcOmlLKx8pli4fkTehw8zD6WI5p7yEn6JeEbeJmMGNBvn3eGJoIvpQWfi35jrkNUouw0oQTsBzKUNkX9M7he83K001EvEZTQd");
        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) {
                    if (session.error == 'order') {
                        window.location.replace('{{ path('app_order') }}');
                    } else {
                        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 %}