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

{% block title %}Vos commandes — Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Suivez vos commandes de couteaux artisanaux Vulcan' Affûtage.{% endblock %}
{% block canonical %}compte{% endblock %}
{% block seoIndex %}<meta name="robots" content="noindex, follow">{% 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') }}">
{% endblock %}

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

    <section class="v2-phero" data-v2-hero>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">Espace client</span>
            <h1 class="v2-phero-title">Vos commandes</h1>
            {% if app.session.get('client_id') and commandes is not empty %}
                <p class="v2-phero-sub">{{ commandes|length }} commande{{ commandes|length > 1 ? 's' : '' }} passée{{ commandes|length > 1 ? 's' : '' }}.</p>
            {% endif %}
        </div>
    </section>

    <section class="nhp-section nhp-section--light">
        <div class="nhp-wrap">
            {% if app.session.get('client_id') %}
                {% include 'compte/_tabs.html.twig' with { current: 'commandes' } only %}

                {% if commandes is not empty %}
                    <div class="acc-orders nhp-reveal d1">
                        {% for commande in commandes %}
                            <details class="acc-order"{{ loop.first ? ' open' : '' }}>
                                <summary class="acc-order-head">
                                    <div style="display:flex;flex-direction:column;gap:4px;">
                                        <span class="acc-order-ref">Commande <b>n°{{ commande.reference }}</b></span>
                                        <span class="acc-order-date">Passée le {{ commande.getCreatedAt()|date('d/m/Y') }} à {{ commande.getCreatedAt()|date('H:i') }}</span>
                                    </div>
                                    <div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap;">
                                        <span class="acc-order-status">{{ commande.status.label() }}</span>
                                        <span class="acc-order-total">{{ commande.total }} €</span>
                                        <span class="acc-order-toggle">Détails
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                                        </span>
                                    </div>
                                </summary>
                                <div class="acc-order-body">
                                    <div class="acc-order-addr">
                                        {% if commande.livraison.typeLivraison.value is same as('livraison') %}
                                            <b>Livraison — {{ commande.livraison.libelle }}</b><br>
                                            {{ commande.client.nom }} {{ commande.client.prenom }}<br>
                                            {{ commande.adresse.libAdr }}, {{ commande.adresse.cp }} {{ commande.adresse.ville }}<br>
                                            Tél : {{ commande.adresse.numTel }}
                                        {% else %}
                                            <b>Retrait — {{ commande.livraison.libelle }}</b><br>
                                            26 rue Saint-Dominique, 63000 Clermont-Ferrand<br>
                                            Au nom de {{ commande.client.nom }} {{ commande.client.prenom }} · Tél : {{ commande.client.numTel }}
                                        {% endif %}
                                        {% if commande.numSuiviColis %}<br>Suivi : <b>{{ commande.numSuiviColis }}</b>{% endif %}
                                    </div>

                                    {% for product in commande.getProductCommandes() %}
                                        <div class="acc-order-item">
                                            <img src="/assets/product/{{ product.getProduct.id }}-1.jpg" alt="{{ product.getProduct.getLibelle }}"
                                                 onerror="this.onerror=null;this.src='/assets/knife-illustration.webp';">
                                            <div>
                                                <div class="acc-order-item-name">{{ product.getProduct.getLibelle }}</div>
                                                {% if product.getProduct.getModel %}<div style="font-size:0.82rem;color:var(--v2-ink-soft);">Modèle : {{ product.getProduct.getModel.getLibelle }}</div>{% endif %}
                                                {% for option in product.getOptions %}
                                                    <div style="font-size:0.82rem;color:var(--v2-ink-soft);">{{ option.label }} : « {{ option.valeur }} » · +{{ option.prix|number_format(2, ',', ' ') }} €</div>
                                                {% endfor %}
                                            </div>
                                            <span class="acc-order-item-price">{{ product.getTotalPrice|number_format(2, ',', ' ') }} €</span>
                                        </div>
                                    {% else %}
                                        <p style="color:var(--v2-ink-soft);padding:12px 0;">Le contenu de la commande n'a pas pu être récupéré.</p>
                                    {% endfor %}

                                    <div class="acc-order-foot">
                                        <span style="font-size:0.9rem;color:var(--v2-ink-soft);">
                                            Livraison : {% if commande.prixLivraison < 0.1 %}<b style="color:var(--v2-green-deep);">Gratuit</b>{% else %}<b>{{ commande.prixLivraison }} €</b>{% endif %}
                                            · Total : <b>{{ commande.total }} €</b>
                                        </span>
                                        <a href="{{ path('app_facture', { 'reference': commande.reference }) }}" class="nhp-btn nhp-btn--ghost nhp-btn--sm">Voir la facture</a>
                                    </div>
                                </div>
                            </details>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="acc-empty nhp-reveal d1">
                        <p style="margin-bottom:20px;">Vous n'avez pas encore de commande.</p>
                        <a href="{{ path('app_produits') }}" class="nhp-btn nhp-btn--primary">Voir les produits</a>
                    </div>
                {% endif %}
            {% else %}
                <div class="acc-guest nhp-reveal">
                    <h2>Connectez-vous</h2>
                    <p>Accédez à vos commandes et à votre espace client.</p>
                    <div class="acc-guest-actions">
                        <a href="{{ path('app_client_login', {'route': 'commande'}) }}" class="nhp-btn nhp-btn--primary">Connexion</a>
                        <a href="{{ path('app_inscription') }}" class="nhp-btn nhp-btn--ghost">Inscription</a>
                    </div>
                </div>
            {% endif %}
        </div>
    </section>

</main>
{% endblock %}

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