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

{% set t = facture.totaux %}
{% set p = facture.paiement %}
{% set e = facture.emetteur %}
{% set c = facture.client %}
{% set x = facture.expedition %}

{% block title %}Facture {{ facture.numero }} — Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Facture de votre commande Vulcan' Affûtage.{% endblock %}
{% block canonical %}facture{% endblock %}
{% block seoIndex %}<meta name="robots" content="noindex, nofollow">{% endblock %}
{% block headerCompte %}gColor{% endblock %}

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

{% block body %}
<main class="nhp-main">

    {# ============================== HERO ============================== #}
    <section class="v2-phero" data-v2-hero>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">Espace client</span>
            <h1 class="v2-phero-title">Facture {{ facture.numero }}</h1>
            <p class="v2-phero-sub">
                Commande {{ facture.reference }} du {{ facture.commandeeLe|date('d/m/Y') }} —
                {{ p.acquittee ? 'réglée' : 'en attente de règlement' }}.
            </p>
        </div>
    </section>

    {# ============================ DOCUMENT ============================ #}
    <section class="nhp-section nhp-section--light">
        <div class="nhp-wrap">

            <div class="fct-actions">
                <a class="nhp-btn nhp-btn--primary" href="{{ path('app_dl_facture', {reference: facture.reference}) }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/>
                    </svg>
                    Télécharger le PDF
                </a>
                <button type="button" class="nhp-btn nhp-btn--ghost" onclick="window.print()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 14h12v8H6z"/>
                    </svg>
                    Imprimer
                </button>
                <a class="nhp-btn nhp-btn--ghost" href="{{ path('app_commande') }}">Retour à mes commandes</a>
            </div>

            {# Pas de .nhp-reveal ici : une facture ne doit jamais dépendre du JS
               pour être visible (impression, JS bloqué, lecteur d'écran). #}
            <article class="fct-doc">
                <div class="fct-pad">

                    {# ------------------------- En-tête ------------------------- #}
                    <header class="fct-head">
                        <div>
                            <img class="fct-logo" src="{{ asset('assets/logo-facture.png') }}" alt="{{ e.enseigne }}">
                            <p class="fct-brand-line">{{ e.exploitant }} — {{ e.qualite }}</p>
                        </div>
                        <div class="fct-head-right">
                            <p class="fct-doc-kind">{{ e.enseigne }}</p>
                            <p class="fct-doc-title">Facture</p>
                            <p class="fct-doc-num">{{ facture.numero }}</p>

                            <dl class="fct-meta">
                                <dt>Date d'émission</dt>
                                <dd>{{ facture.emiseLe|date('d/m/Y') }}</dd>
                                <dt>Commande</dt>
                                <dd>{{ facture.reference }}</dd>
                                <dt>Passée le</dt>
                                <dd>{{ facture.commandeeLe|date('d/m/Y') }} à {{ facture.commandeeLe|date('H\\hi') }}</dd>
                                <dt>État</dt>
                                <dd>{{ facture.statutCommande }}</dd>
                            </dl>

                            <span class="fct-chip{{ p.acquittee ? '' : ' fct-chip--due' }}">{{ p.libelle }}</span>
                        </div>
                    </header>

                    {# ------------------------- Parties ------------------------- #}
                    <div class="fct-parties">
                        <div class="fct-party">
                            <p class="fct-party-kind">Émetteur</p>
                            <p class="fct-party-name">{{ e.enseigne }}</p>
                            <p>{{ e.exploitant }} — {{ e.qualite }}</p>
                            <p>{{ e.adresse }}</p>
                            <p>Tél. <b>{{ e.telephone }}</b></p>
                            <p>{{ e.email }}</p>
                            <p class="fct-mono">{{ e.rcs }}</p>
                        </div>
                        <div class="fct-party fct-party--client">
                            <p class="fct-party-kind">Facturé à</p>
                            <p class="fct-party-name">{{ c.nom }}</p>
                            {% if x.estLivre and c.adresse %}
                                <p>{{ c.adresse }}</p>
                                {% if c.complement %}<p>{{ c.complement }}</p>{% endif %}
                                <p>{{ c.cpVille }}</p>
                            {% else %}
                                <p>Retrait à l'atelier</p>
                                <p>{{ x.destination }}</p>
                            {% endif %}
                            {% if c.telephone %}<p>Tél. {{ c.telephone }}</p>{% endif %}
                            {% if c.email %}<p>{{ c.email }}</p>{% endif %}
                        </div>
                    </div>

                    {# --------------------- Logistique / règlement --------------------- #}
                    <div class="fct-band">
                        <div>
                            <p class="fct-band-k">{{ x.estLivre ? 'Livraison' : 'Retrait' }}</p>
                            <p class="fct-band-v">{{ x.libelle }}</p>
                            {% if x.delai %}<p class="fct-band-s">{{ x.delai }}</p>{% endif %}
                        </div>
                        <div>
                            <p class="fct-band-k">Règlement</p>
                            <p class="fct-band-v">{{ p.moyen }}</p>
                            {% if p.date %}<p class="fct-band-s">Le {{ p.date|date('d/m/Y') }} à {{ p.date|date('H\\hi') }}</p>{% endif %}
                        </div>
                        <div>
                            <p class="fct-band-k">{{ x.suivi ? 'Suivi colis' : 'Pièces facturées' }}</p>
                            {% if x.suivi %}
                                <p class="fct-band-v fct-mono">{{ x.suivi }}</p>
                                {% if x.suiviUrl %}
                                    <p class="fct-band-s"><a href="{{ x.suiviUrl }}" target="_blank" rel="noopener">Suivre mon colis</a></p>
                                {% endif %}
                            {% else %}
                                <p class="fct-band-v">{{ t.nbPieces }} pièce{{ t.nbPieces > 1 ? 's' : '' }} d'atelier</p>
                                <p class="fct-band-s">Façonnées à la main à Clermont-Ferrand</p>
                            {% endif %}
                        </div>
                    </div>

                    {# -------------------------- Lignes -------------------------- #}
                    <table class="fct-lines">
                        <thead>
                            <tr>
                                <th>Désignation</th>
                                <th class="fct-num fct-col-qty">Qté</th>
                                <th class="fct-num fct-col-pu">Prix unitaire</th>
                                <th class="fct-num fct-col-amt">Montant</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for ligne in facture.lignes %}
                                <tr class="{{ ligne.type == 'option' ? 'fct-line--option' : 'fct-line--piece' }}">
                                    <td>
                                        {% if ligne.type == 'option' %}
                                            <span class="fct-opt-mark">+</span>{{ ligne.designation }}{% if ligne.precision %} {{ ligne.precision }}{% endif %}
                                        {% else %}
                                            <div class="fct-line-desig">
                                                {% if ligne.produitId %}
                                                    <img class="fct-line-thumb" src="/assets/product/{{ ligne.produitId }}-1.jpg" alt=""
                                                         onerror="this.onerror=null;this.src='/assets/knife-illustration.webp';">
                                                {% endif %}
                                                <div>
                                                    <div class="fct-line-name">{{ ligne.designation }}</div>
                                                    {% if ligne.precision %}<div class="fct-line-precision">{{ ligne.precision }}</div>{% endif %}
                                                </div>
                                            </div>
                                        {% endif %}
                                    </td>
                                    <td class="fct-num fct-num--qty" data-label="Quantité">{{ ligne.quantite }}</td>
                                    <td class="fct-num" data-label="Prix unitaire">{{ ligne.prixUnitaire|number_format(2, ',', ' ') }} €</td>
                                    <td class="fct-num" data-label="Montant">{{ ligne.montant|number_format(2, ',', ' ') }} €</td>
                                </tr>
                            {% else %}
                                <tr><td colspan="4">Le contenu de cette commande n'a pas pu être récupéré.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>

                    {# --------------------- Cachet + totaux --------------------- #}
                    <div class="fct-bottom">
                        <div>
                            <div class="fct-stamp{{ p.acquittee ? '' : ' fct-stamp--due' }}">
                                <p class="fct-stamp-title">{{ p.libelle }}</p>
                                <p>{{ p.moyen }}{% if p.date %} · {{ p.date|date('d/m/Y') }}{% endif %}</p>
                                {% if p.transaction %}<p class="fct-mono">Transaction {{ p.transaction }}</p>{% endif %}
                            </div>
                            <p class="fct-thanks">
                                Merci de votre confiance. Chaque pièce est façonnée puis affûtée à la main à
                                l'atelier de Clermont-Ferrand. Une question sur cette facture ?
                                {{ e.telephone }} — {{ e.email }}
                            </p>
                        </div>
                        <div>
                            <table class="fct-totals">
                                <tr>
                                    <td>Sous-total</td>
                                    <td>{{ t.sousTotal|number_format(2, ',', ' ') }} €</td>
                                </tr>
                                <tr>
                                    <td>{{ x.estLivre ? 'Livraison' : 'Retrait en boutique' }}</td>
                                    <td>{% if t.livraison < 0.005 %}Offert{% else %}{{ t.livraison|number_format(2, ',', ' ') }} €{% endif %}</td>
                                </tr>
                                {% if t.ajustement > 0.005 or t.ajustement < -0.005 %}
                                    <tr>
                                        <td>Ajustement</td>
                                        <td>{{ t.ajustement|number_format(2, ',', ' ') }} €</td>
                                    </tr>
                                {% endif %}
                            </table>
                            <div class="fct-total-box">
                                <span class="fct-total-k">Total net à payer</span>
                                <span class="fct-total-v">{{ t.total|number_format(2, ',', ' ') }}<span class="cur">€</span></span>
                            </div>
                            <p class="fct-total-note">{{ facture.mentions.tva }}</p>
                        </div>
                    </div>

                    {# -------------------------- Mentions -------------------------- #}
                    <div class="fct-mentions">
                        <p>{{ facture.mentions.garantie }}</p>
                        <p>{{ facture.mentions.retard }}</p>
                        <p>{{ facture.mentions.conservation }} — {{ e.enseigne }}, {{ e.adresse }} · {{ e.rcs }}.</p>
                    </div>

                </div>
            </article>

            <p class="fct-doc-foot">{{ facture.numero }} — commande {{ facture.reference }}</p>

        </div>
    </section>

</main>
{% endblock %}

{% block other_javascripts %}
    <script src="{{ asset('scripts/ds-v2-app.js') }}" defer></script>
{% endblock %}