{% extends '@EasyAdmin/page/content.html.twig' %}

{% block page_title %}{{ produit.name }}{% endblock %}

{% block main %}
    {% import '_graphiques.html.twig' as graph %}
    {% set niveau = ea_niveau_alerte(produit.stock, produit.association) %}

    <form method="get" class="stats-filtres">
        <div class="row g-2 align-items-end">
            <div class="col-auto">
                <label class="form-label" for="periode">Période</label>
                <select name="periode" id="periode" class="form-select">
                    <option value="semaine" {{ periode.type == 'semaine' ? 'selected' : '' }}>Cette semaine</option>
                    <option value="mois" {{ periode.type == 'mois' ? 'selected' : '' }}>Ce mois-ci</option>
                    <option value="personnalise" {{ periode.type == 'personnalise' ? 'selected' : '' }}>Plage personnalisée</option>
                </select>
            </div>
            <div class="col-auto">
                <label class="form-label" for="du">Du</label>
                <input type="date" name="du" id="du" class="form-control" value="{{ periode.debut|date('Y-m-d') }}">
            </div>
            <div class="col-auto">
                <label class="form-label" for="au">Au</label>
                <input type="date" name="au" id="au" class="form-control" value="{{ periode.fin|date('Y-m-d') }}">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">Afficher</button>
            </div>
            <div class="col-auto">
                <a href="{{ urlExport }}" class="btn btn-secondary">Exporter en PDF</a>
            </div>
        </div>
    </form>

    <div class="stats-bloc">
        <div class="stats-bloc-entete">
            <h2>{{ produit.name }}</h2>
            <span class="mention">
                {% if produit.rayon %}{{ produit.rayon.label }} · {% endif %}
                {{ produit.sellingPrice|number_format(2, ',', ' ') }}&nbsp;&euro;
                {%- if suitLaMarge and produit.purchasePrice %} · achat {{ produit.purchasePrice|number_format(2, ',', ' ') }}&nbsp;&euro;{% endif %}
            </span>
        </div>
        <div class="tdb-chiffres">
            <div class="tdb-chiffre">
                <span class="etiquette">Stock actuel</span>
                <span class="valeur">
                    {% if niveau %}
                        <span class="pastille {{ niveau.classeCss }}">{{ produit.stock }}</span>
                    {% else %}{{ produit.stock }}{% endif %}
                </span>
            </div>
            <div class="tdb-chiffre">
                <span class="etiquette">CA cette semaine</span>
                <span class="valeur">{{ dossier.semaine.chiffreAffaires|number_format(2, ',', ' ') }}&nbsp;&euro;</span>
            </div>
            <div class="tdb-chiffre">
                <span class="etiquette">Vendus — {{ periode.libelle|lower }}</span>
                <span class="valeur">{{ dossier.quantite }}</span>
            </div>
            <div class="tdb-chiffre">
                <span class="etiquette">CA — {{ periode.libelle|lower }}</span>
                <span class="valeur">{{ dossier.chiffreAffaires|number_format(2, ',', ' ') }}&nbsp;&euro;</span>
            </div>
        </div>
    </div>

    <div class="stats-paire">
        <div class="stats-bloc">
            <div class="stats-bloc-entete">
                <h2>Évolution sur deux semaines</h2>
            </div>
            <div class="stats-evolution">
                <div class="stats-evol-bloc">
                    <span class="cle">Cette semaine</span>
                    <span class="val">{{ dossier.evolution.actuel|number_format(2, ',', ' ') }}&nbsp;&euro;</span>
                </div>
                <div class="stats-evol-bloc">
                    <span class="cle">{{ dossier.evolution.libellePrecedent }}</span>
                    <span class="val val-pale">{{ dossier.evolution.precedent|number_format(2, ',', ' ') }}&nbsp;&euro;</span>
                </div>
                <div class="stats-evol-bloc">
                    <span class="cle">Variation</span>
                    {% if dossier.evolution.variation is null %}
                        <span class="val val-pale">—</span>
                    {% else %}
                        <span class="val {{ dossier.evolution.variation < 0 ? 'val-baisse' : (dossier.evolution.variation > 0 ? 'val-hausse' : '') }}">
                            {{ dossier.evolution.variation > 0 ? '+' : '' }}{{ dossier.evolution.variation|number_format(1, ',', ' ') }}&nbsp;%
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="stats-bloc">
            <div class="stats-bloc-entete">
                <h2>Ruptures — {{ periode.libelle|lower }}</h2>
            </div>
            <div class="stats-evolution">
                <div class="stats-evol-bloc">
                    <span class="cle">Jours à zéro</span>
                    <span class="val">{{ dossier.ruptures.rupture }}</span>
                </div>
                <div class="stats-evol-bloc">
                    <span class="cle">Jours en négatif</span>
                    <span class="val {{ dossier.ruptures.decrochage > 0 ? 'val-baisse' : 'val-pale' }}">{{ dossier.ruptures.decrochage }}</span>
                </div>
                <div class="stats-evol-bloc">
                    <span class="cle">Ventes perdues<span class="estim">estimation</span></span>
                    <span class="val">{{ dossier.perdues.quantite }}</span>
                </div>
            </div>
            {% if dossier.perdues.quantite > 0 %}
                <p class="stats-note">
                    Estimation, pas mesure&nbsp;: {{ dossier.perdues.joursSansStock }} jour{{ dossier.perdues.joursSansStock > 1 ? 's' : '' }}
                    sans stock × {{ dossier.perdues.moyenneParJour|number_format(2, ',', ' ') }} vendus un jour ordinaire.
                </p>
            {% endif %}
        </div>
    </div>

    {# ===== Son année ====================================================
       Indépendante du filtre de période de l'écran : une saisonnalité ne se
       voit que sur douze mois, et on ne va pas demander à l'utilisateur de
       changer de filtre pour la trouver. #}
    <div class="stats-bloc">
        <div class="stats-bloc-entete">
            <h2>Son année</h2>
            <span class="mention">{{ dossier.annee.libelle }} · quantités vendues</span>
        </div>
        {{ graph.batons(dossier.annee.parMois) }}
        <p class="stats-note">
            Douze mois, même ceux sans vente&nbsp;: c'est ce qui rend un creux visible. Les mois
            à venir portent un tiret.
        </p>
    </div>

    <div class="stats-deux-colonnes">
        {% if dossier.annee.parJourDOuverture|length > 1 %}
            <div class="stats-bloc">
                <div class="stats-bloc-entete">
                    <h2>Ses jours</h2>
                    <span class="mention">quantités</span>
                </div>
                {{ graph.batons(dossier.annee.parJourDOuverture) }}
                <p class="stats-note">
                    Sur quelle récré ce produit-là se vend. Un jour faible n'appelle pas la même
                    décision qu'un produit faible&nbsp;: c'est peut-être l'assortiment de ce
                    jour-là qu'il faut revoir.
                </p>
            </div>
        {% endif %}

        <div class="stats-bloc">
            <div class="stats-bloc-entete">
                <h2>Ce qu'il pèse</h2>
                <span class="mention">part du chiffre de l'année</span>
            </div>
            <div class="part-bloc">
                <div class="camembert camembert-petit"
                     style="background: conic-gradient(var(--accent-fonce) 0deg {{ (dossier.annee.part * 3.6)|round(2) }}deg, var(--trait-net) {{ (dossier.annee.part * 3.6)|round(2) }}deg 360deg)"
                     role="img" aria-label="{{ dossier.annee.part|number_format(1, ',', ' ') }} % du chiffre d'affaires de l'année">
                    <div class="camembert-trou">
                        <span class="nombre-petit">{{ dossier.annee.part|number_format(dossier.annee.part < 10 ? 1 : 0, ',', ' ') }}&nbsp;%</span>
                    </div>
                </div>
                <p class="stats-note" style="margin: 0">
                    Ce que ce produit représente dans la recette de l'association sur l'année.
                    C'est cette part qui dit si une rupture se verrait&nbsp;— ou passerait inaperçue.
                </p>
            </div>
        </div>
    </div>

    {# L'historique du stock jour par jour : c'est lui qui montre *quand* le
       produit a manqué, ce qu'un stock actuel ne dira jamais. #}
    {% if dossier.parJour|length > 1 %}
        <div class="stats-bloc">
            <div class="stats-bloc-entete"><h2>Le stock jour par jour</h2></div>
            <div class="histo">
                {% set maxi = max(dossier.parJour|map(v => v > 0 ? v : 0)) %}
                {% for jour, stock in dossier.parJour %}
                    <div class="histo-jour" title="{{ jour|date('d/m/Y') }} : {{ stock }}">
                        <div class="histo-barre {{ stock < 0 ? 'histo-negatif' : (stock == 0 ? 'histo-zero' : '') }}"
                             style="height: {{ maxi > 0 and stock > 0 ? (stock / maxi * 100)|round : 2 }}%"></div>
                    </div>
                {% endfor %}
            </div>
            <p class="stats-note">
                Une barre rouge signale un jour à zéro ou en négatif. Le stock est reconstruit
                depuis le journal des mouvements&nbsp;; il ne remonte pas avant la première
                écriture du produit, parce qu'avant elle on ne sait rien.
            </p>
        </div>
    {% endif %}

    <div class="stats-bloc">
        <div class="stats-bloc-entete">
            <h2>Mouvements de stock</h2>
            <span class="mention">{{ mouvements|length }} sur la période</span>
        </div>
        <table>
            <thead>
                <tr><th>Date</th><th>Type</th><th class="num">Quantité</th><th>Motif</th><th>Par</th></tr>
            </thead>
            <tbody>
                {% for mouvement in mouvements|reverse %}
                    <tr>
                        <td class="vide">{{ mouvement.createdAt|date('d/m/Y H:i') }}</td>
                        <td class="fw-semibold">{{ mouvement.type.label }}</td>
                        <td class="num">{{ mouvement.quantity > 0 ? '+' : '' }}{{ mouvement.quantity }}</td>
                        <td>{{ mouvement.reason ?: '—' }}</td>
                        <td>{% if mouvement.createdBy %}{{ mouvement.createdBy.firstName }} {{ mouvement.createdBy.lastName }}{% else %}<span class="vide">—</span>{% endif %}</td>
                    </tr>
                {% else %}
                    <tr><td colspan="5" class="vide">Aucun mouvement sur la période.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <p style="margin-top: 16px;"><a href="{{ urlListe }}">Retour à la liste</a></p>
{% endblock %}