{% if region is defined %}
{% else %}
    {% set region = '' %}
{% endif %}
{% extends "::layout"~region~".html.twig" %}

{% block container %}
    <div class="row">
        <div class="col-md-12">
            <div id="panierProgressBar">
                <a href="{{ path('you_panier_list') }}" class="panier ok">Mon panier <span></span></a>
                <a href="#" onclick="return false;" class="paiement nok">Paiement <span></span></a>
                <a href="#" onclick="return false;" class="recap ok">Récapitulatif <span></span></a>
                <a href="{{ path('you_panier_commander_address') }}" class="adresse {% if adresse == 0 %}n{% endif %}ok">Mon adresse <span></span></a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div id="pagePanierRecap">
                <h2>Récapitulatif de votre commande :</h2>
                <div class="container-recap clearfix">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="leftAdresse">
                                <div class="adresseLivraison">
                                    <h3>Adresse de livraison</h3>
                                    {% if livraison > 0 %}
                                        <div id="livraisonID">{% if livraisonAdresse %}{{ livraisonAdresse|raw }}{% endif %}</div>
                                        <a href="#" onclick="openAdresseLivraison();
                                                return false;">Modifier</a>
                                    {% else %}
                                        <div id="livraisonID"><p>Vous n’avez pas d’articles à faire livrer sur cette commande.</p></div>
                                    {% endif %}
                                </div>
                                <div class="adresseFacturation">
                                    <h3>Adresse de facturation</h3>
                                    <div id="facturationID">{% if facturationAdresse %}{{ facturationAdresse|raw }}{% endif %}</div>
                                    <a href="#" onclick="openAdresseFacturation();
                                            return false;">Modifier</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <div class="rightRecap">
                                {% for boutique in boutiques %}
                                    {% set acompteAff = false %}
                                    <h3>Vendeur : {{ boutique.boutique.nom }}</h3>
                                    <table>
                                        <tr>
                                            <th class="large">Désignation article</th>
                                            <th>Quantité</th>
                                            <th class="prix">Prix</th>
                                        </tr>
                                        {% for item in boutique.produits %}
                                            {% include 'YOUPanierBundle:Default:recapItemDetails.html.twig' %}
                                        {% endfor %}
                                        {% for item in boutique.retraits %}
                                            {% include 'YOUPanierBundle:Default:recapItemDetails.html.twig' %}
                                        {% endfor %}
                                        {% for item in boutique.services %}
                                            <tr>
                                                <td>{{ item.product.titre }}</td>
                                                <td>{{ item.count }}</td>
                                                <td>{{ item.totalPrice|toeuro }}{% if item.product.service.paiement == 1 %}{% set acompteAff = true %}<span style="color:red;">*</span>{% endif %}</td>
                                            </tr>
                                        {% endfor %}
                                        {% if boutique.frais > 0 %}
                                            <tr class="frais">
                                                <td>Frais de port</td>
                                                <td></td>
                                                <td>{{ boutique.frais|toeuro }}</td>
                                            </tr>
                                        {% endif %}
                                        {% if panier.codePromo and (boutique.reduction.freeShipping or boutique.reduction.value > 0)  %}
                                            <tr>
                                                <td>Vous bénéficez actuellement de : {% if boutique.reduction.value > 0 %}{{boutique.reduction.value|toeuro}} de réduction. {% endif %}{% if boutique.reduction.freeShipping %}Du port offert : {{boutique.reduction.valueShipping|toeuro}}.{% endif %}</td>
                                                <td></td>
                                                <td>{% if boutique.reduction.value > 0 %}-{{boutique.reduction.value|toeuro}}{% endif %}</td>
                                            </tr>
                                        {% endif %}
                                        <tr class="total">
                                            <td>Total {{ boutique.boutique.nom }}</td>
                                            <td></td>
                                            <td>{{ boutique.tarif|toeuro }} TTC</td>
                                        </tr>
                                        {% if acompteAff %}
                                            <tr>
                                                <td colspan="3" style="color:red;">* Un acompte de 5€ est à régler de suite. Le vendeur vous facturera le montant restant le jour du RDV.</td>
                                            </tr>
                                        {% endif %}
                                    </table>
                                {% endfor %}
                                <p>Dont paiement sur place et/ou à livraison : {{ totalOffline|toeuro }}</p>
                                <p class="totalPrice">TOTAL TTC : {{ totalOnline|toeuro }}</p>
                                {# Ajout Olivier PERRIER 05 07 2020 #}
                                <input type="hidden" id="totalttc" name="totalttc" value="{{ totalOnline }}">
                                {# Fin ajout Olivier PERRIER #}

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        {% if link %}
                            <a id="linkCommande" target="_blank" class="ready" href="{{ link }}" >Valider et payer <i class="icon icon-chevron-right icon-white"></i></a>
                        {% else %}
                            <a id="linkCommande" class="ready" href="{{path("you_panier_commander_validofflinepaymentcart")}}" >Valider la commande <i class="icon icon-chevron-right icon-white"></i></a>
                        {% endif %}
                    </div>
                </div>
                {# Ajout Olivier PERRIER 05 07 2020 #}
                <br>
                <div class="row">
                    <div class="col-md-12">
                        {# Ajout du script paypal #}
                        <script src="https://www.paypal.com/sdk/js?client-id=ARbpLUwNiv_gq7E5TdrVrIAneTDGYR4r9xTSg6_vhmPwMiAeSdmboF3tImn7ScMTLL_d1y5Cl6A6hapE"> </script>
                        {# Ajout du bouton Paypal #}
                        <span>L'achat via Paypal sera bientôt disponible. Merci d'utiliser le système classique pour l'instant pour que votre transaction aboutisse.</span>
                        <div id="paypal-button-container"></div>

                        {# Ajout du script de rendu du bouton Paypal #}
                        <script>

                            var valuettc = document.getElementById("totalttc").value.replace('€', '').replace(',','.');
                            console.log(valuettc);

                            // This function displays Smart Payment Buttons on your web page.
                            paypal.Buttons({
                                createOrder: function(data, actions) {
                                // This function sets up the details of the transaction, including the amount and line item details.
                                    return actions.order.create({
                                        purchase_units: [{
                                            amount: {
                                                "currency_code": "USD",
                                                value: valuettc
                                            }
                                        }]
                                    });
                                },
                                onApprove: function(data, actions) {
                                    // This function captures the funds from the transaction.
                                    return actions.order.capture().then(function(details) {
                                        // This function shows a transaction success message to your buyer.
                                        window.location.replace("/paiment/ok");
                                    });
                                }
                            }).render('#paypal-button-container');
                        
                        </script>

                    </div>
                </div>
                {# Fin ajout Olivier PERRIER #}
            </div>
        </div>
    </div>
{% endblock %}

{% block append_javascript %}

    {{ parent() }}

    <script>

        var urlSetAdresse = "{{ path('you_panier_commander_set_address',{type:'__type__',value:'__val__'}) }}";
        function setLivraisonAdresse() {
            nino_Popup.close();
            id = nino_Popup.getValue().id;
            $('#livraisonID').load(urlSetAdresse.replace(/__type__/g, "livraison").replace(/__val__/g, id), function () {
                verifyContinu();
            });

            if ($('#useForFacturation').is(':checked')) {
                $('#facturationID').load(urlSetAdresse.replace(/__type__/g, "facturation").replace(/__val__/g, id), function () {
                    verifyContinu();
                });
                billingAddress = true;
            }
            deliveryAddress = true;
        }

        function verifyContinu() {
            if ($('#livraisonID').html() != '' && $('#facturationID').html() != '') {
                $('#linkCommande.notready').addClass('ready').removeClass('notready').attr('onclick', '').html('Continuer <i class="icon icon-chevron-right icon-white"></i>');
            }
        }
        function setFacturationAdresse() {
            nino_Popup.close();
            id = nino_Popup.getValue().id;
            //$('#facturationID').html('&nbsp;');
            $('#facturationID').load(urlSetAdresse.replace(/__type__/g, "facturation").replace(/__val__/g, id), function () {
                verifyContinu();
            });
        }
        function openAdresseLivraison() {
            nino_OverlayShow(
                    '{{ path('you_popup_adresse') }}',
                    [
                        {checkbox: 'utiliser comme adresse de facturation', class: '', action: '', id: 'useForFacturation'},
                        {text: 'Utiliser cette adresse', class: 'btn-default', action: 'setLivraisonAdresse()'},
                        {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'},
                    ]
                    );
        }
        function openAdresseFacturation() {
            nino_OverlayShow(
                    '{{ path('you_popup_adresse') }}',
                    [
                        {text: 'Utiliser cette adresse', class: 'btn-default', action: 'setFacturationAdresse()'},
                        {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'},
                    ]
                    );
        }

    </script>

{% endblock %}