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

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

{% block title %}Paiement de ma commande{% endblock %}

{% block content %}
    
    <h2>Mon récapitulatif dans add/html.twig</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">
                {{ carrier }}<br/>
               {#
                {{ carrier.description }}<br/>
                {{ (carrier.price / 100)|number_format(2, ',', '.') }} €
                #}
            </div>
            
        </div>

        <div class="col-md-6">
            <div class="text-center">
                <b>probleme Ma commande :</b><br/>
            </div>
            <div class="order-summary">
                {% set total = null %}
                {% for key,producta in carta %}
                    <div class="row {% if key > 0 %}mt-2{% endif %}">
                        <div class="col-2">
                                                       
                            <img src="{{ asset("uploads/") ~ producta.producta.illustration  }} " alt="titi" height="75px" />
                        </div>
                        <div class="col-8 my-auto">
                            {{ producta.producta.name }}<br/>
                            <small>
                                {{ producta.producta.subtitle }}
                                <br/>
                                x {{ producta.quantity }}
                            </small>
                        </div>
                        <div class="col-2 my-auto">
                            {{ ((producta.producta.price * producta.quantity ) )|number_format(2, ',', '.') }} €
                        </div>
                    </div>
                    {% set total = total + (producta.producta.price * producta.quantity) %}
                {% endfor %}
            </div>
            
            <strong>Sous-Total : </strong> {{ (total )|number_format(2, ',', '.') }} €<br/>
           {#} <strong>Livraison : </strong> {{ (carrier.price / 100)|number_format(2, ',', '.') }} € #}
            
            <strong>Total : </strong> {{ ((total ) )|number_format(2, ',', '.') }} €
            {# + (carrier.price ) #}
            <p>reference : {{reference}}</p>
            <a class="btn btn-success btn-block mt-3" id="checkout-button">Payer | {{ ((total ) )|number_format(2, ',', '.') }} €</a>
        </div>
    </div>
 
{% endblock %}

        {#var stripe = Stripe("pk_test_51HWz8KGVnm98Up5GSk7E17U0T8CkgdGhfLXRCHPk5TVd17Osiws7rQWwvHqXOvzb7pcvqxtwGp7RZD0KHfvlTLSO00ija4VIMh"); #}
        
       {# var stripe = Stripe('pk_test_51IMAY1Adb8cBkdh8LLuzTYy9aki7oguyvgBCiQ7eKyjiGP7Nnb2Zoct4V7AD4YCmscvlT1KSDmf19Uq5hK3nJaaZ00gdWXLw3O');
              {# probleme fetch a regarder :   fetch("http://localhost:3000/api/products/order", requestOptions) 
        fetch("/commande/create-session/{{ reference }}", {
        
        #}
{% block javascripts %}
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
        // Create an instance of the Stripe object with your publishable API key
       
        //var stripe = Stripe("pk_test_51HkPZdCc8KoQEaMIDql30GSBanEj8aJDGTNpJIotdao7SMlshLBjXON95ms5igDRNeYiVa9NnlDoLIIScoN5s1MH00PB5BDRsh");
        var stripe = Stripe('pk_test_51IMAY1Adb8cBkdh8LLuzTYy9aki7oguyvgBCiQ7eKyjiGP7Nnb2Zoct4V7AD4YCmscvlT1KSDmf19Uq5hK3nJaaZ00gdWXLw3O');
        
        var checkoutButton = document.getElementById("checkout-button");
        checkoutButton.addEventListener("click", function () {
            fetch("{{ path('stripechargo') }}", {
                method: "POST",
            })
                .then(function (response) {
                    return response.json();
                })
                .then(function (session) {
                    return stripe.redirectToCheckout({ sessionId: session.id });
                })
                .then(function (result) {
                    // If redirectToCheckout fails due to a browser or network
                    // error, you should display the localized error message to your
                    // customer using error.message.
                    if (result.error) {
                        alert(result.error.message);
                    }
                })
                .catch(function (error) {
                    console.error("Error:", error);
                });
        });
    </script>
{% endblock %}




   
    </script>
    {% endblock %}