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

{% block title %}Votre panier — Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Consultez et gérez votre panier d'achat Vulcan' Affûtage. Paiement sécurisé et livraison.{% endblock %}
{% block canonical %}panier{% endblock %}

{% block seoIndex %}<meta name="robots" content="noindex, follow">{% 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 %}
<main class="nhp-main">

    {# ============================ HERO ============================ #}
    <section class="v2-phero" data-v2-hero>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">Votre panier</span>
            <h1 class="v2-phero-title">Panier</h1>
            {% set nbLignes = products|length + (cart.resa ? 1 : 0) + cart.bons|length %}
            <p class="v2-phero-sub">
                {% if nbLignes == 0 %}Il est encore vide.
                {% elseif nbLignes == 1 %}1 article prêt à partir.
                {% else %}{{ nbLignes }} articles prêts à partir.{% endif %}
            </p>
        </div>
    </section>

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

            {% if products is empty and cart.resa is null and cart.bons is empty %}
                {# ---- Panier vide ---- #}
                <div class="pnr-empty nhp-reveal">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>
                    <h2 class="nhp-h2">Votre panier est vide.</h2>
                    <p class="nhp-lead" style="margin:12px auto 26px;max-width:44ch;">Parcourez l'atelier et laissez-vous tenter par une pièce unique.</p>
                    <a href="{{ path('app_produits') }}" class="nhp-btn nhp-btn--primary">Visiter la boutique</a>
                </div>
            {% else %}
                {% set t = total|number_format(2, ',', ' ')|split(',') %}
                <div class="pnr-grid">

                    {# ---- Lignes ---- #}
                    <div class="pnr-lines nhp-reveal" id="pnr-lines">
                        {% for ligne in products %}
                            {% set product = ligne.produit %}
                            {% set p = ligne.sousTotal|number_format(2, ',', ' ')|split(',') %}
                            <div class="pnr-line" data-cart-line="{{ product.id }}" data-price="{{ ligne.sousTotal }}">
                                <a href="{{ path('app_produit', { id: product.id }) }}" class="pnr-line-img">
                                    <img src="/assets/product/{{ product.id }}-1.jpg" alt="{{ product.libelle }}"
                                         onerror="this.onerror=null;this.src='/assets/knife-illustration.webp';">
                                </a>
                                <div class="pnr-line-info">
                                    <a href="{{ path('app_produit', { id: product.id }) }}" class="pnr-line-title">{{ product.libelle }}</a>
                                    {% if product.model %}
                                        <span class="pnr-line-meta">
                                            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m11.735,19.057c-2.182,2.191-5.677,3.795-9.178,3.934-.097.004-.686.007-1.29.008-.818.002-1.429-.769-1.229-1.562.28-1.108.854-2.131,1.674-2.954l7.297-7.196,5.233,5.247-2.507,2.523M22.941,2.065c-.688-.69-1.532-1.056-2.443-1.056h0c-.742,0-1.881.256-3.089,1.468l-6.61,6.528c-.393.388-.397,1.021-.009,1.414.041.042,6.108,5.928,6.108,5.928.278.279.646.423,1.02.423.258,0,.519-.069.753-.21.573-.346.826-1.004.628-1.638-.655-2.114-.746-3.265.889-4.9l2.754-2.827c1.409-1.415,1.409-3.716,0-5.13Z"/></svg>
                                            {{ product.model.getLibelle }}
                                        </span>
                                    {% endif %}
                                    <span class="pnr-line-meta">Pièce unique · faite main</span>
                                    {# Options payantes (gravure…) : détaillées sous la pièce,
                                       leur montant est déjà compris dans le prix de la ligne. #}
                                    {% for option in ligne.options %}
                                        <span class="pnr-line-option">
                                            <b>{{ option.label }}</b> « {{ option.valeur }} »
                                            <span class="pnr-line-option-prix">+&nbsp;{{ option.prix|number_format(2, ',', ' ') }}&nbsp;€</span>
                                        </span>
                                    {% endfor %}
                                </div>
                                <div class="pnr-line-right">
                                    <span class="pnr-line-price">{{ p[0] }}<span style="font-size:0.7em;">,{{ p[1] }}</span><span class="cur">&nbsp;€</span></span>
                                    <button type="button" class="pnr-remove" onclick="deleteProductV2({{ product.id }})">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
                                        Retirer
                                    </button>
                                </div>
                            </div>
                        {% endfor %}

                        {# ---- Réservation d'atelier ---- #}
                        {% if cart.resa %}
                            {% set r = cart.resa %}
                            {% set rp = r.sousTotal|number_format(2, ',', ' ')|split(',') %}
                            <div class="pnr-line pnr-line--resa" data-price="{{ r.sousTotal }}" data-resa-line>
                                <span class="pnr-line-img pnr-line-img--resa" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
                                </span>
                                <div class="pnr-line-info">
                                    <span class="pnr-line-title">{{ r.creneau.atelier.titre }}</span>
                                    <span class="pnr-line-meta">Réservation d'atelier · {{ r.dateLongue }}</span>
                                    <span class="pnr-line-meta">{{ r.places }} place{{ r.places > 1 ? 's' }} · {{ r.telephone }}</span>
                                </div>
                                <div class="pnr-line-right">
                                    <span class="pnr-line-price">{{ rp[0] }}<span style="font-size:0.7em;">,{{ rp[1] }}</span><span class="cur">&nbsp;€</span></span>
                                    <form method="post" action="{{ path('app_panier_remove_atelier') }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('resa') }}">
                                        <input type="hidden" name="creneau" value="{{ r.creneau.id }}">
                                        <button type="submit" class="pnr-remove">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
                                            Retirer
                                        </button>
                                    </form>
                                </div>
                            </div>
                        {% endif %}

                        {# ---- Bons cadeaux ---- #}
                        {% for bon in cart.bons %}
                            {% set bp = bon.sousTotal|number_format(2, ',', ' ')|split(',') %}
                            <div class="pnr-line pnr-line--bon" data-price="{{ bon.sousTotal }}" data-bon-line>
                                <span class="pnr-line-img pnr-line-img--bon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4"/><path d="M5 12v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8M12 8v13M12 8s-2.5-5-5.5-5A2.5 2.5 0 0 0 6 8m6 0s2.5-5 5.5-5A2.5 2.5 0 0 1 18 8"/></svg>
                                </span>
                                <div class="pnr-line-info">
                                    <span class="pnr-line-title">{{ bon.label }}</span>
                                    <span class="pnr-line-meta">{{ bon.pourNom ? 'Pour ' ~ bon.pourNom : 'Pour vous' }}{{ bon.dateLongue ? ' · ' ~ bon.dateLongue : ' · valable 12 mois' }}</span>
                                    <button type="button" class="pnr-bon-more" data-bon-details-toggle aria-expanded="false">
                                        <svg class="pnr-bon-more-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
                                        Détails &amp; options
                                    </button>
                                </div>
                                <div class="pnr-line-right">
                                    <span class="pnr-line-price">{{ bp[0] }}<span style="font-size:0.7em;">,{{ bp[1] }}</span><span class="cur">&nbsp;€</span></span>
                                    <form method="post" action="{{ path('app_panier_remove_bon') }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('bon') }}">
                                        <input type="hidden" name="uid" value="{{ bon.uid }}">
                                        <button type="submit" class="pnr-remove">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
                                            Retirer
                                        </button>
                                    </form>
                                </div>

                                {# Panneau replié : détails d'envoi + options du bon #}
                                <div class="pnr-bon-details" data-bon-details hidden>
                                    <div class="pnr-bon-det">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 8 12 13 2 8"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
                                        <span>
                                            {%- if bon.pourEmail -%}
                                                La carte cadeau est envoyée par email à <b>{{ bon.pourEmail }}</b>
                                            {%- else -%}
                                                Vous recevez le code par email — aucune notification n'est envoyée au bénéficiaire
                                            {%- endif -%}
                                        </span>
                                    </div>
                                    {% if bon.dateLongue %}
                                        <div class="pnr-bon-det">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
                                            <span>Place réservée : <b>{{ bon.dateLongue }}</b></span>
                                        </div>
                                    {% endif %}
                                    {% if bon.offertPar %}
                                        <div class="pnr-bon-det">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.59 13.41 12 22l-8.59-8.59A2 2 0 0 1 3 12V4a1 1 0 0 1 1-1h8a2 2 0 0 1 1.41.59l8.18 8.18a2 2 0 0 1 0 2.83z"/><circle cx="7.5" cy="7.5" r="1"/></svg>
                                            <span>Mention «&nbsp;Offert par <b>{{ bon.offertPar }}</b>&nbsp;» sur la carte</span>
                                        </div>
                                    {% endif %}
                                    {% if bon.papier %}
                                        <div class="pnr-bon-det pnr-bon-det--option">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
                                            <span>Carte reçue en version papier <b>(+5&nbsp;€)</b></span>
                                            <button type="button" class="pnr-bon-opt-remove" data-bon-papier-remove data-bon-uid="{{ bon.uid }}">Retirer</button>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>

                    {# ---- Récapitulatif ---- #}
                    <aside class="pnr-summary nhp-reveal d1">
                        <h2>Récapitulatif</h2>
                        <div class="pnr-sum-row"><span>Sous-total ({{ nbLignes }})</span><span id="pnr-subtotal">{{ total|number_format(2, ',', ' ') }} €</span></div>
                        <div class="pnr-sum-row"><span>Livraison</span><span>
                            {%- if cart.hasPhysical %}Calculée à l'étape suivante
                            {%- elseif cart.hasPapier %}Incluse (envoi papier)
                            {%- elseif cart.resa %}Sans objet — sur place
                            {%- else %}Par email — incluse{% endif -%}
                        </span></div>
                        <div class="pnr-sum-total"><span>Total</span><b id="pnr-total">{{ t[0] }}<span style="font-size:0.6em;">,{{ t[1] }}</span><span class="cur">&nbsp;€</span></b></div>

                        {% if app.session.get('client_id') is not null %}
                            <a href="{{ path('app_paiement') }}" class="nhp-btn nhp-btn--primary nhp-btn--block">
                                Passer au paiement
                                <svg class="nhp-btn-arrow" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </a>
                            <p class="pnr-note">Connecté en tant que <b>{{ app.session.get('client_prenom') }} {{ app.session.get('client_nom') }}</b></p>
                        {% else %}
                            <p class="pnr-note" style="margin-top:0;margin-bottom:12px;">Connectez-vous pour finaliser votre commande.</p>
                            <a href="{{ path('app_client_login', {'route': 'panier'}) }}" class="nhp-btn nhp-btn--primary nhp-btn--block">Se connecter</a>
                            <a href="{{ path('app_inscription') }}" class="nhp-btn nhp-btn--ghost nhp-btn--block" style="margin-top:10px;">Créer un compte</a>
                        {% endif %}
                        <a href="{{ path('app_produits') }}" class="pnr-note" style="display:block;margin-top:16px;text-decoration:underline;">← Continuer mes achats</a>
                    </aside>

                </div>

                {# ---- Suggestions ---- #}
                {% if otherProduct is not empty %}
                    <div style="margin-top:clamp(48px,7vw,88px);">
                        <div class="nhp-section-head nhp-reveal" style="margin-bottom:clamp(20px,3vw,32px);">
                            <span class="nhp-eyebrow">Un coup de cœur ?</span>
                            <h2 class="nhp-h2">Vous pourriez aimer.</h2>
                        </div>
                        <div class="prd-grid nhp-reveal">
                            {% for product in otherProduct %}
                                {{ include('accueil/_product_card_v2.html.twig', { product: product, slide: false, detailRoute: 'app_produit' }) }}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            {% endif %}

        </div>
    </section>

    {# ==================== Modal retrait version papier ==================== #}
    <div class="gcc-modal-backdrop" data-papier-modal hidden>
        <div class="gcc-modal" role="dialog" aria-modal="true" aria-labelledby="papier-modal-title">
            <button type="button" class="gcc-modal-x" data-papier-modal-close aria-label="Fermer">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
            <span class="gcc-modal-ico" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" 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>
            </span>
            <h2 id="papier-modal-title">Retirer la version papier&nbsp;?</h2>
            <p>La carte ne partira plus par courrier — le code reste envoyé par email. <b>−5&nbsp;€</b> sur le total.</p>
            <div class="gcc-modal-actions">
                <button type="button" class="nhp-btn nhp-btn--primary" data-papier-modal-confirm>Oui, retirer</button>
                <button type="button" class="nhp-btn nhp-btn--ghost" data-papier-modal-cancel>Garder la version papier</button>
            </div>
        </div>
    </div>
    <form method="post" action="{{ path('app_panier_bon_papier') }}" data-papier-form hidden>
        <input type="hidden" name="_token" value="{{ csrf_token('bon') }}">
        <input type="hidden" name="uid" value="">
        <input type="hidden" name="papier" value="0">
    </form>

</main>
{% endblock %}

{% block other_javascripts %}
    <script src="{{ asset('scripts/ds-v2-app.js') }}" defer></script>
    <script>
    // Bons cadeaux : panneau « Détails & options » + retrait papier (modal).
    (function () {
        document.addEventListener("click", function (e) {
            var toggle = e.target.closest("[data-bon-details-toggle]");
            if (toggle) {
                var details = toggle.closest("[data-bon-line]").querySelector("[data-bon-details]");
                var open = details.hidden;
                details.hidden = !open;
                toggle.classList.toggle("is-open", open);
                toggle.setAttribute("aria-expanded", open ? "true" : "false");
            }
        });

        var modal = document.querySelector("[data-papier-modal]");
        var form = document.querySelector("[data-papier-form]");
        if (!modal || !form) return;
        function close() { modal.hidden = true; document.body.style.overflow = ""; }

        document.addEventListener("click", function (e) {
            if (e.target.closest("[data-bon-papier-remove]")) {
                form.querySelector('[name="uid"]').value = e.target.closest("[data-bon-papier-remove]").getAttribute("data-bon-uid");
                modal.hidden = false;
                document.body.style.overflow = "hidden";
            } else if (e.target.closest("[data-papier-modal-confirm]")) {
                close(); form.submit();
            } else if (e.target.closest("[data-papier-modal-cancel]") || e.target.closest("[data-papier-modal-close]") || e.target === modal) {
                close();
            }
        });
        document.addEventListener("keydown", function (e) { if (e.key === "Escape" && !modal.hidden) close(); });
    })();
    </script>
    <script>
    function deleteProductV2(productId) {
        var csrf = (document.querySelector('meta[name="app-csrf"]') || {}).content || "";
        fetch("/api/cli/delProductCart/" + productId, {
            method: "DELETE",
            headers: { "X-Requested-With": "XMLHttpRequest", "X-CSRF-Token": csrf }
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (!data.success) {
                if (window.showNotification) showNotification({ success: false, title: "Erreur", message: data.message || "Impossible de retirer ce produit." });
                return;
            }
            var row = document.querySelector('[data-cart-line="' + productId + '"]');
            if (row) row.remove();

            // pastilles panier : celle du header et celle du tiroir mobile
            if (typeof data.cartCount !== "undefined") {
                document.querySelectorAll(".cart-badge-count").forEach(function (badge) {
                    badge.textContent = data.cartCount;
                    badge.style.display = data.cartCount > 0 ? "flex" : "none";
                });
            }

            // recalcul total + sous-total
            var lines = document.querySelectorAll("#pnr-lines .pnr-line");
            if (!lines.length) { window.location.reload(); return; }
            var sum = 0;
            lines.forEach(function (l) { sum += parseFloat(l.dataset.price || 0); });
            var euros = sum.toFixed(2).replace(".", ",").split(",");
            var subtotal = document.getElementById("pnr-subtotal");
            var total = document.getElementById("pnr-total");
            if (subtotal) subtotal.textContent = sum.toFixed(2).replace(".", ",") + " €";
            if (total) total.innerHTML = euros[0] + '<span style="font-size:0.6em;">,' + euros[1] + '</span><span class="cur">&nbsp;€</span>';

            if (window.showNotification) showNotification({ success: true, title: "Article retiré", message: data.message || "Produit retiré du panier." });
        })
        .catch(function (e) {
            console.error(e);
            if (window.showNotification) showNotification({ success: false, title: "Erreur", message: "Une erreur est survenue." });
        });
    }
    </script>
{% endblock %}