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

{% block title %}Paiement — Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Finalisez votre commande Vulcan' Affûtage : adresse, livraison et paiement sécurisé.{% endblock %}
{% block canonical %}paiement{% endblock %}

{% block seoIndex %}<meta name="robots" content="noindex, nofollow">{% endblock %}
{% block headerPanier %}gColor{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/ds-v2.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/ds-v2-pages.css') }}">
{% endblock %}

{% block body %}
{% set t = total|number_format(2, ',', ' ')|split(',') %}
<main class="nhp-main">

    {# ============================ HERO ============================ #}
    <section class="v2-phero" data-v2-hero>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">Commande</span>
            <h1 class="v2-phero-title">Paiement</h1>
            <div class="chk-steps" style="margin-top:22px;margin-bottom:0;">
                <span class="chk-step is-done"><span class="chk-step-dot">✓</span> Panier</span>
                <span class="chk-step-line"></span>
                <span class="chk-step is-active"><span class="chk-step-dot">2</span> Adresse & livraison</span>
                <span class="chk-step-line"></span>
                <span class="chk-step"><span class="chk-step-dot">3</span> Paiement</span>
            </div>
        </div>
    </section>

    <section class="nhp-section nhp-section--light">
        <div class="nhp-wrap">

            {% if app.session.get('client_id') is null %}
                {# ---- Non connecté ---- #}
                <div class="acc-guest nhp-reveal">
                    <h2>Connectez-vous pour payer</h2>
                    <p>Pour finaliser votre commande, vous devez être connecté à votre compte.</p>
                    <div class="acc-guest-actions">
                        <a href="{{ path('app_client_login', {'route': 'panier'}) }}" class="nhp-btn nhp-btn--primary">Se connecter</a>
                        <a href="{{ path('app_inscription') }}" class="nhp-btn nhp-btn--ghost">Créer un compte</a>
                    </div>
                </div>
            {% else %}
                <form action="{{ path('initier_paiement') }}" method="POST" id="chk-form">
                    <input type="hidden" name="_token" value="{{ csrf_token('checkout') }}">
                    <input type="hidden" name="cart_hash" value="{{ cartHash }}">
                    <div class="chk-grid">

                        {# ---------------- Colonne formulaire ---------------- #}
                        <div>
                            {% if cart.hasPhysical and modeLivraison is empty %}
                                <div class="chk-card nhp-reveal">
                                    <p class="pdet-desc">Aucun mode de livraison n'est disponible pour le moment. Contactez-nous pour finaliser votre commande.</p>
                                    <a href="{{ path('app_contact') }}" class="nhp-btn nhp-btn--primary" style="margin-top:14px;">Nous contacter</a>
                                    <input type="hidden" id="livraisonAvailable" value="no"/>
                                </div>
                            {% else %}
                                <input type="hidden" id="livraisonAvailable" value="yes"/>

                                {% set bonsPapier = cart.bons|filter(b => b.papier) %}
                                <div class="chk-card nhp-reveal">
                                    <h2>Vos coordonnées{% if bonsPapier|length > 0 %} <span class="chk-count">({{ products|length + bonsPapier|length }} article{{ (products|length + bonsPapier|length) > 1 ? 's' }})</span>{% endif %}</h2>
                                    <div class="chk-fields">
                                        <div class="chk-field">
                                            <input id="prenom" name="prenom" type="text" autocomplete="off" placeholder=" " required value="{{ app.session.get('client_prenom') ?: '' }}"/>
                                            <label for="prenom">Prénom *</label>
                                        </div>
                                        <div class="chk-field">
                                            <input id="nom" name="nom" type="text" autocomplete="off" placeholder=" " required value="{{ app.session.get('client_nom') ?: '' }}"/>
                                            <label for="nom">Nom *</label>
                                        </div>
                                        <div class="chk-field">
                                            <input id="num_tel" name="num_tel" type="tel" autocomplete="off" placeholder=" " required value="{{ cart.resa ? cart.resa.telephone : '' }}"/>
                                            <label for="num_tel">Téléphone *</label>
                                        </div>
                                    </div>
                                    {% if cart.hasPhysical or cart.hasPapier %}
                                    <div class="chk-field col-full onlyIfLivraison" id="address-search-container" style="margin-top:16px;">
                                        <input id="searchAddress" type="text" autocomplete="off" placeholder=" "/>
                                        <label for="searchAddress">Rechercher une adresse</label>
                                        <div id="address-results"></div>
                                    </div>
                                    <div class="chk-fields onlyIfLivraison" style="margin-top:16px;">
                                        <div class="chk-field col-full">
                                            <input id="address" name="adresse" type="text" autocomplete="off" placeholder=" " required/>
                                            <label for="address">Adresse *</label>
                                        </div>
                                        <div class="chk-field">
                                            <input id="codePostal" name="cp" type="text" autocomplete="off" placeholder=" " required/>
                                            <label for="codePostal">Code postal *</label>
                                        </div>
                                        <div class="chk-field">
                                            <input id="ville" name="ville" type="text" autocomplete="off" placeholder=" " required/>
                                            <label for="ville">Ville *</label>
                                        </div>
                                    </div>
                                    {% endif %}
                                    <div class="chk-field col-full" style="margin-top:16px;">
                                        <textarea id="info_supp" name="info_supp" class="notRequired" placeholder=" "></textarea>
                                        <label for="info_supp">Infos supplémentaires</label>
                                    </div>

                                    {# ---- Adresse d'envoi de chaque carte papier ---- #}
                                    {% for bon in bonsPapier %}
                                        <div class="chk-bon-adr" data-bon-adr>
                                            <label class="chk-check">
                                                <input type="checkbox" name="bon_adr_same[{{ bon.uid }}]" value="1" checked data-bon-adr-same>
                                                <span>L'adresse de destination de la carte cadeau{{ bon.pourNom ? ' pour ' ~ bon.pourNom }} est la même</span>
                                            </label>
                                            <div class="chk-fields" data-bon-adr-fields hidden>
                                                <div class="chk-field">
                                                    <input id="ba-prenom-{{ bon.uid }}" name="bon_adr[{{ bon.uid }}][prenom]" type="text" autocomplete="off" placeholder=" " value="{{ bon.pourNom ? bon.pourNom|split(' ')|first }}"/>
                                                    <label for="ba-prenom-{{ bon.uid }}">Prénom *</label>
                                                </div>
                                                <div class="chk-field">
                                                    <input id="ba-nom-{{ bon.uid }}" name="bon_adr[{{ bon.uid }}][nom]" type="text" autocomplete="off" placeholder=" " value="{{ bon.pourNom ? bon.pourNom|split(' ')|slice(1)|join(' ') }}"/>
                                                    <label for="ba-nom-{{ bon.uid }}">Nom *</label>
                                                </div>
                                                <div class="chk-field col-full">
                                                    <input id="ba-adresse-{{ bon.uid }}" name="bon_adr[{{ bon.uid }}][adresse]" type="text" autocomplete="off" placeholder=" "/>
                                                    <label for="ba-adresse-{{ bon.uid }}">Adresse *</label>
                                                </div>
                                                <div class="chk-field">
                                                    <input id="ba-cp-{{ bon.uid }}" name="bon_adr[{{ bon.uid }}][cp]" type="text" autocomplete="off" placeholder=" "/>
                                                    <label for="ba-cp-{{ bon.uid }}">Code postal *</label>
                                                </div>
                                                <div class="chk-field">
                                                    <input id="ba-ville-{{ bon.uid }}" name="bon_adr[{{ bon.uid }}][ville]" type="text" autocomplete="off" placeholder=" "/>
                                                    <label for="ba-ville-{{ bon.uid }}">Ville *</label>
                                                </div>
                                                <div class="chk-field col-full">
                                                    <textarea id="ba-info-{{ bon.uid }}" name="bon_adr[{{ bon.uid }}][info]" class="notRequired" placeholder=" "></textarea>
                                                    <label for="ba-info-{{ bon.uid }}">Infos supplémentaires</label>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>

                                {% if cart.hasPhysical %}
                                <div class="chk-card nhp-reveal d1">
                                    <h2>Mode de livraison</h2>
                                    <div class="chk-livraison">
                                        {% for livraison in modeLivraison %}
                                            {% set imagePath = null %}
                                            {% for extension in ['.png', '.jpg', '.svg', '.jpeg'] %}
                                                {% if imagePath is null and file_exists('/assets/livraison-ico/' ~ livraison.getId ~ extension) %}
                                                    {% set imagePath = '/assets/livraison-ico/' ~ livraison.getId ~ extension %}
                                                {% endif %}
                                            {% endfor %}
                                            <label class="chk-ship" for="livraison-{{ livraison.getId }}">
                                                {% if imagePath %}<img src="{{ asset(imagePath) }}" alt="{{ livraison.getLibelle }}">{% endif %}
                                                <div class="chk-ship-body">
                                                    <div class="chk-ship-head">
                                                        <span class="chk-ship-name">{{ livraison.getLibelle }}</span>
                                                        {% if livraison.getPrix < 0.1 %}
                                                            <span class="chk-ship-price free">Gratuit</span>
                                                        {% else %}
                                                            {% set lp = livraison.getPrix|number_format(2, ',', ' ')|split(',') %}
                                                            <span class="chk-ship-price">{{ lp[0] }}<span style="font-size:0.75em;">,{{ lp[1] }}</span>&nbsp;€</span>
                                                        {% endif %}
                                                    </div>
                                                    {% if livraison.getDescription %}<div class="chk-ship-desc">{{ livraison.getDescription }}</div>{% endif %}
                                                    {% if livraison.getDelai %}
                                                        <div class="chk-ship-delai">
                                                            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                                                            {{ livraison.getDelai }}
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                <input type="radio" name="livraison" id="livraison-{{ livraison.getId }}"
                                                       value="{{ livraison.getId }}"
                                                       data-type="{{ livraison.getTypeLivraison.value }}"
                                                       data-price="{{ livraison.getPrix }}"
                                                       {% if loop.first %}checked{% endif %}/>
                                            </label>
                                        {% endfor %}
                                    </div>
                                </div>
                                {% endif %}
                            {% endif %}
                        </div>

                        {# ---------------- Récapitulatif ---------------- #}
                        <aside class="chk-summary nhp-reveal d1">
                            <h2>Votre commande</h2>
                            {# Deux familles : ce qui part en colis, et le dématérialisé. #}
                            {% if products is not empty %}
                                <p class="chk-sum-cat">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
                                    Ce qui sera envoyé
                                </p>
                                {% for ligne in products %}
                                    <div class="chk-sum-row">
                                        <span>{{ ligne.produit.getLibelle }}
                                            {% for option in ligne.options %}
                                                <br><small style="opacity:.75;">{{ option.label }} « {{ option.valeur }} » · +{{ option.prix|number_format(2, ',', ' ') }} €</small>
                                            {% endfor %}
                                        </span>
                                        <span>{{ ligne.sousTotal|number_format(2, ',', ' ') }} €</span>
                                    </div>
                                {% endfor %}
                            {% endif %}

                            {% if cart.resa or cart.bons is not empty %}
                                <p class="chk-sum-cat">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 8 12 13 2 8"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
                                    Dématérialisé
                                </p>
                                {% if cart.resa %}
                                    <div class="chk-sum-row" data-chk-resa>
                                        <span>{{ cart.resa.creneau.atelier.titre }}<br>
                                            <small style="opacity:.75;">{{ cart.resa.dateLongue }} · {{ cart.resa.places }} place{{ cart.resa.places > 1 ? 's' }}</small>
                                        </span>
                                        <span>{{ cart.resa.sousTotal|number_format(2, ',', ' ') }} €</span>
                                    </div>
                                {% endif %}
                                {% for bon in cart.bons %}
                                    <div class="chk-sum-row" data-chk-bon>
                                        <span>{{ bon.label }}<br>
                                            {% if bon.pourNom or bon.dateLongue %}
                                                <small style="opacity:.75;">{{ bon.pourNom ? 'Pour ' ~ bon.pourNom }}{% if bon.dateLongue %}{{ bon.pourNom ? ' · ' }}{{ bon.dateLongue }}{% endif %}</small>
                                            {% endif %}
                                            {% if bon.papier %}
                                                <br><small class="chk-tag chk-tag--vert">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 12H16c-.7 2-2 3-4 3s-3.3-1-4-3H2.5"/><path d="M5.5 5.1 2.5 12v6a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2v-6l-3-6.9A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.8 1.1z"/></svg>
                                                    Carte cadeau envoyée par courrier
                                                </small>
                                            {% endif %}
                                        </span>
                                        <span>{{ bon.sousTotal|number_format(2, ',', ' ') }} €</span>
                                    </div>
                                {% endfor %}
                            {% endif %}
                            <div class="chk-sum-row" style="border-top:1px solid var(--v2-iron);margin-top:6px;padding-top:12px;"><span>Sous-total</span><span>{{ total|number_format(2, ',', ' ') }} €</span></div>
                            <div class="chk-sum-row"><span>Livraison</span><span id="chk-ship-amount">
                                {%- if cart.hasPhysical %}—
                                {%- elseif cart.hasPapier %}Incluse
                                {%- elseif cart.resa %}Sur place
                                {%- else %}Par email{% endif -%}
                            </span></div>
                            <div class="chk-sum-total"><span>Total</span><b id="prixAvecLivraison">{{ t[0] }}<span style="font-size:0.6em;">,{{ t[1] }}</span><span class="cur">&nbsp;€</span></b></div>

                            {% if not cart.hasPhysical or modeLivraison is not empty %}
                                <div class="chk-consent">
                                    <label class="chk-check"><input type="checkbox" id="18yo"/> <span>Je certifie être majeur (+ 18 ans).</span></label>
                                    <label class="chk-check"><input type="checkbox" id="legal"/> <span>J'ai lu et j'accepte les <a href="{{ path('app_cgu') }}" target="_blank">CGU</a> et les <a href="{{ path('app_cgv') }}" target="_blank">CGV</a>.</span></label>
                                </div>
                                <div class="chk-pay">
                                    <button type="button" id="paypalButton" class="nhp-btn nhp-btn--primary nhp-btn--block">Continuer vers le paiement</button>
                                </div>
                                <div class="chk-trust">
                                    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
                                    Paiement 100% sécurisé · CB ou PayPal · 4× sans frais
                                </div>
                            {% endif %}
                            <a href="{{ path('app_panier') }}" class="pnr-note" style="display:block;margin-top:16px;color:rgba(237,235,229,0.7);text-decoration:underline;">← Retour au panier</a>
                        </aside>

                    </div>
                </form>
            {% endif %}

        </div>
    </section>

</main>
{% endblock %}

{% block other_javascripts %}
    <script src="{{ asset('scripts/ds-v2-app.js') }}" defer></script>
    {% if app.session.get('client_id') %}
    <script src="{{ asset('js/addressSearch.js') }}"></script>
    <script>
    (function () {
        var form = document.getElementById("chk-form");
        if (!form) return;
        var totalBase = {{ total|default(0) }};
        var totalEl = document.getElementById("prixAvecLivraison");
        var shipEl = document.getElementById("chk-ship-amount");

        function fmt(n) { return n.toFixed(2).replace(".", ","); }

        function updateTotal() {
            var checked = form.querySelector('input[name="livraison"]:checked');
            if (!checked) { return; } // panier 100 % atelier : total serveur déjà complet
            var type = checked.dataset.type;
            var prix = parseFloat(checked ? checked.dataset.price : 0) || 0;

            // Champs d'adresse masqués pour le retrait (click & collect / no_livraison)
            form.querySelectorAll(".onlyIfLivraison").forEach(function (el) {
                var show = (type !== "no_livraison");
                el.style.display = show ? "" : "none";
                el.querySelectorAll("input, textarea").forEach(function (inp) {
                    if (!inp.classList.contains("notRequired")) inp.required = show;
                });
            });

            if (shipEl) shipEl.textContent = prix < 0.1 ? "Gratuit" : fmt(prix) + " €";
            var total = totalBase + prix;
            var parts = fmt(total).split(",");
            if (totalEl) totalEl.innerHTML = parts[0] + '<span style="font-size:0.6em;">,' + parts[1] + '</span><span class="cur">&nbsp;€</span>';
        }

        form.querySelectorAll('input[name="livraison"]').forEach(function (r) {
            r.addEventListener("change", updateTotal);
        });
        updateTotal();

        // ------- Adresse dédiée par carte papier -------
        form.querySelectorAll("[data-bon-adr-same]").forEach(function (cb) {
            var fields = cb.closest("[data-bon-adr]").querySelector("[data-bon-adr-fields]");
            function applyBonAdr() {
                fields.hidden = cb.checked;
                fields.querySelectorAll("input, textarea").forEach(function (inp) {
                    if (!inp.classList.contains("notRequired")) inp.required = !cb.checked;
                });
                if (!cb.checked) {
                    fields.classList.remove("gcc-zone-in");
                    void fields.offsetWidth; // reflow → rejoue l'animation
                    fields.classList.add("gcc-zone-in");
                }
            }
            cb.addEventListener("change", applyBonAdr);
            applyBonAdr();
        });

        // ------- Bouton paiement (validation + init PayPal) -------
        var payBtn = document.getElementById("paypalButton");
        if (!payBtn) return;
        payBtn.addEventListener("click", function () {
            var requiredInputs = form.querySelectorAll("input[required], textarea[required]");
            var isValid = true, firstInvalid = null, missing = [];

            function visible(el) {
                while (el) {
                    var s = window.getComputedStyle(el);
                    if (s.display === "none" || s.visibility === "hidden") return false;
                    el = el.parentElement;
                }
                return true;
            }

            requiredInputs.forEach(function (input) {
                if (!visible(input)) return;
                if (input.type !== "checkbox" && !input.value.trim()) {
                    isValid = false; input.classList.add("invalid");
                    var lab = form.querySelector('label[for="' + input.id + '"]');
                    missing.push(lab ? lab.textContent.replace("*", "").trim() : (input.name || "Champ"));
                    if (!firstInvalid) firstInvalid = input;
                } else {
                    input.classList.remove("invalid");
                }
            });

            var eighteen = document.getElementById("18yo");
            var legal = document.getElementById("legal");
            if (eighteen && !eighteen.checked) { isValid = false; eighteen.classList.add("invalid"); missing.push("Certifier être majeur (+ 18 ans)"); if (!firstInvalid) firstInvalid = eighteen; }
            else if (eighteen) eighteen.classList.remove("invalid");
            if (legal && !legal.checked) { isValid = false; legal.classList.add("invalid"); missing.push("Accepter les CGU / CGV"); if (!firstInvalid) firstInvalid = legal; }
            else if (legal) legal.classList.remove("invalid");

            if (!isValid) {
                if (window.showNotification) showNotification({ success: false, title: "Formulaire incomplet", message: "Veuillez remplir :<br><b>- " + missing.join("<br>- ") + "</b>" });
                if (firstInvalid) firstInvalid.focus();
                return;
            }

            payBtn.disabled = true;
            payBtn.textContent = "Redirection en cours…";

            fetch("{{ path('initier_paiement') }}", { method: "POST", body: new FormData(form) })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (data.paypal_url) { window.location.href = data.paypal_url; }
                    else if (data.reload) {
                        // Panier modifié dans un autre onglet : on resynchronise.
                        if (window.showNotification) showNotification({ success: false, title: "Panier modifié", message: data.error });
                        setTimeout(function () { window.location.reload(); }, 1800);
                    }
                    else { throw new Error(data.error || "Erreur d'initialisation du paiement"); }
                })
                .catch(function (e) {
                    console.error(e);
                    payBtn.disabled = false;
                    payBtn.textContent = "Réessayer le paiement";
                    if (window.showNotification) showNotification({ success: false, title: "Erreur de paiement", message: "Une erreur est survenue. Vérifiez vos informations et réessayez." });
                });
        });
    })();
    </script>
    {% endif %}
{% endblock %}