{% extends 'account/base_account.html.twig' %}

{% block page_title %}Mes factures — Espace Vendeur{% endblock %}

{% block content %}
<style>
    .nav-vendeur { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
    .nav-vendeur a { padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; background:#f1f5f9; color:#475569; transition:all .15s; }
    .nav-vendeur a:hover, .nav-vendeur a.active { background:#1B3A6B; color:white; }

    .factures-table { width:100%; border-collapse:collapse; font-size:13px; }
    .factures-table thead tr { background:#f8fafc; }
    .factures-table thead th {
        padding:10px 14px; text-align:left; font-size:11px; font-weight:700;
        color:#94a3b8; text-transform:uppercase; letter-spacing:.05em;
        border-bottom:2px solid #e2e8f0;
    }
    .factures-table thead th.right { text-align:right; }
    .factures-table tbody td {
        padding:14px; border-bottom:1px solid #f1f5f9;
        color:#374151; vertical-align:middle;
    }
    .factures-table tbody tr:last-child td { border-bottom:none; }
    .factures-table tbody tr:hover td { background:#f8fafc; }
    .badge-regle    { background:#dcfce7; color:#15803d; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; }
    .badge-a-regler { background:#fef3c7; color:#92400e; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; }

    .btn-pdf {
        display:inline-flex; align-items:center; gap:5px;
        padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600;
        text-decoration:none; background:#1B3A6B; color:white;
        border:none; cursor:pointer; transition:all .15s; white-space:nowrap;
    }
    .btn-pdf:hover { background:#2B5BA8; color:white; }

    .empty-factures { text-align:center; padding:48px; color:#94a3b8; font-size:14px; }
    .alert-pending {
        background:#fff8e7; border-left:4px solid #f59e0b;
        border-radius:0 8px 8px 0; padding:12px 16px;
        font-size:13px; color:#78350f; margin-bottom:20px;
    }
    .summary-bar { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
    .summary-item {
        background:white; border:1px solid #e2e8f0; border-radius:10px;
        padding:14px 20px; flex:1; min-width:160px; text-align:center;
    }
    .summary-item-value { font-size:22px; font-weight:800; color:#1B3A6B; line-height:1; margin-bottom:4px; }
    .summary-item-value.green { color:#15803d; }
    .summary-item-label { font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.05em; }
</style>

<div class="page-header">
    <h1 class="page-title">🧾 Mes factures de commission</h1>
    <p class="page-subtitle">Factures mensuelles générées par l'équipe NUM-ECARD</p>
</div>

<nav class="nav-vendeur">
    <a href="{{ path('vendeur_dashboard') }}">📊 Tableau de bord</a>
    <a href="{{ path('vendeur_ventes') }}">🛒 Mes ventes</a>
    <a href="{{ path('vendeur_factures') }}" class="active">🧾 Mes factures</a>
</nav>

{# ── Commission en attente non facturée ── #}
{% set nonFacturees = profil.montantCommissionsNonFacturees %}
{% if nonFacturees > 0 %}
<div class="alert-pending">
    ⏳ <strong>{{ nonFacturees|number_format(2, ',', ' ') }} € de commissions</strong> non encore facturés.
    L'équipe NUM-ECARD génère les factures mensuellement.
</div>
{% endif %}

{# ── Résumé ── #}
{% if factures|length > 0 %}
    {% set totalHT  = 0 %}
    {% set totalTTC = 0 %}
    {% set nbRegle  = 0 %}
    {% for f in factures %}
        {% set totalHT  = totalHT  + f.montantTotalHT %}
        {% set totalTTC = totalTTC + (f.montantTotalHT * 1.20) %}
        {% if f.isRegle %}{% set nbRegle = nbRegle + 1 %}{% endif %}
    {% endfor %}
    <div class="summary-bar">
        <div class="summary-item">
            <div class="summary-item-value">{{ factures|length }}</div>
            <div class="summary-item-label">Factures</div>
        </div>
        <div class="summary-item">
            <div class="summary-item-value">{{ totalHT|number_format(2, ',', ' ') }} €</div>
            <div class="summary-item-label">Total HT commissions</div>
        </div>
        <div class="summary-item">
            <div class="summary-item-value green">{{ nbRegle }}</div>
            <div class="summary-item-label">Réglées</div>
        </div>
    </div>
{% endif %}

{# ── Tableau ── #}
<div class="card">
    {% set moisFr = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'] %}

    {% if factures|length > 0 %}
    <table class="factures-table">
        <thead>
            <tr>
                <th>Référence</th>
                <th>Période</th>
                <th>Nb ventes</th>
                <th class="right">Total HT</th>
                <th class="right">TVA (20%)</th>
                <th class="right">Total TTC</th>
                <th>Statut</th>
                <th>Générée le</th>
                <th class="right">PDF</th>
            </tr>
        </thead>
        <tbody>
            {% for facture in factures %}
                {% set ht  = facture.montantTotalHT|number_format(2, '.', '') %}
                {% set tva = (ht * 0.20)|round(2) %}
                {% set ttc = (ht * 1.20)|round(2) %}
            <tr>
                <td style="font-family:monospace;font-weight:700;color:#1e293b;">{{ facture.reference }}</td>
                <td>{{ moisFr[facture.periodeDebut|date('n') - 1] }} {{ facture.periodeDebut|date('Y') }}</td>
                <td>{{ facture.nbVentes }}</td>
                <td style="text-align:right;font-weight:600;">{{ ht|number_format(2, ',', ' ') }} €</td>
                <td style="text-align:right;color:#64748b;">{{ tva|number_format(2, ',', ' ') }} €</td>
                <td style="text-align:right;font-weight:800;color:#1B3A6B;">{{ ttc|number_format(2, ',', ' ') }} €</td>
                <td>
                    {% if facture.isRegle %}
                        <span class="badge-regle">✅ Réglée</span>
                        {% if facture.regléeAt %}
                            <div style="font-size:10px;color:#94a3b8;margin-top:2px;">
                                {{ facture.regléeAt|date('d/m/Y') }}
                            </div>
                        {% endif %}
                    {% else %}
                        <span class="badge-a-regler">⏳ À régler</span>
                    {% endif %}
                </td>
                <td style="font-size:12px;color:#64748b;white-space:nowrap;">
                    {{ facture.genereeAt|date('d/m/Y') }}
                </td>
                <td style="text-align:right;">
                    {# ✅ Bouton téléchargement PDF #}
                    <a href="{{ path('vendeur_facture_pdf', {id: facture.id}) }}"
                       class="btn-pdf"
                       title="Télécharger la facture {{ facture.reference }}">
                        📄 PDF
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
        <div class="empty-factures">
            🧾 Aucune facture de commission pour le moment.<br><br>
            Les factures sont générées mensuellement par l'équipe NUM-ECARD.
        </div>
    {% endif %}
</div>

<div class="card" style="background:#f8fafc; margin-top:16px;">
    <div style="font-size:13px;color:#475569;line-height:1.8;">
        <strong>Comment sont réglées les commissions ?</strong><br>
        Les commissions sont regroupées mensuellement. L'équipe NUM-ECARD génère votre facture
        et effectue le virement dans les 30 jours. En cas de question :
        <a href="mailto:contact@num-ecard.com">contact@num-ecard.com</a>
    </div>
</div>

{% endblock %}