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

{% block title %}Nos chiffres — {{ periode.libelle }}{% endblock %}

{% block body %}
{% import '_graphiques.html.twig' as graph %}
<div class="page-etroite">
    <p class="surtitre">Analyse</p>
    <h1>Nos chiffres</h1>

    <form method="get" class="chiffres-filtres">
        <div class="form-group">
            <label for="periode">Période</label>
            <select name="periode" id="periode" class="form-control" onchange="this.form.submit()">
                <option value="jour" {{ periode.type == 'jour' ? 'selected' : '' }}>Aujourd'hui</option>
                <option value="semaine" {{ periode.type == 'semaine' ? 'selected' : '' }}>Cette semaine</option>
                <option value="mois" {{ periode.type == 'mois' ? 'selected' : '' }}>Ce mois-ci</option>
            </select>
        </div>
        <noscript><button type="submit" class="btn btn-outline btn-bloc">Afficher</button></noscript>
    </form>

    {# Le chiffre de l'association d'abord, la contribution personnelle ensuite.
       Pas de classement des vendeurs : ce serait un palmarès entre camarades,
       et ça n'apprend rien. #}
    <div class="bilan">
        <div class="bilan-entete">
            <h2>{{ periode.libelle }}</h2>
            {% if evolution.variation is not null %}
                <span class="ecart {{ evolution.variation < 0 ? 'ecart-manque' : (evolution.variation > 0 ? 'ecart-surplus' : 'ecart-juste') }}">
                    {{ evolution.variation > 0 ? '+' : '' }}{{ evolution.variation|number_format(1, ',', ' ') }}&nbsp;%
                </span>
            {% endif %}
        </div>
        <div class="ligne ligne-forte">
            <span class="cle">Chiffre d'affaires</span>
            <span class="val">{{ resume.total|number_format(2, ',', ' ') }}&nbsp;&euro;</span>
        </div>
        <div class="ligne"><span class="cle">Ventes</span><span class="val">{{ resume.transactions }}</span></div>
        <div class="ligne"><span class="cle">Espèces</span><span class="val">{{ resume.especes|number_format(2, ',', ' ') }}&nbsp;&euro;</span></div>
        <div class="ligne"><span class="cle">SumUp</span><span class="val">{{ resume.sumup|number_format(2, ',', ' ') }}&nbsp;&euro;</span></div>
        <div class="ligne"><span class="cle">Dont vous</span><span class="val">{{ maContribution.total|number_format(2, ',', ' ') }}&nbsp;&euro;</span></div>
        {% if evolution.variation is null and evolution.precedent + 0 == 0 %}
            <p class="note">
                Rien ne s'est vendu sur {{ evolution.libellePrecedent|lower }}&nbsp;: il n'y a pas
                de comparaison à faire. Un démarrage n'est pas une progression.
            </p>
        {% endif %}
    </div>

    {% if parJour|length > 1 %}
        <div class="bilan">
            <div class="bilan-entete"><h2>Jour par jour</h2></div>
            <div class="histo-jours">
                {% set maxi = max(parJour|map(j => j.total + 0)) %}
                {% for jour, chiffre in parJour %}
                    <div class="histo-col">
                        <span class="histo-val">{{ (chiffre.total + 0)|number_format(0, ',', ' ') }}</span>
                        <div class="histo-b" style="height: {{ maxi > 0 ? ((chiffre.total + 0) / maxi * 100)|round : 2 }}%"></div>
                        <span class="histo-lab">{{ jour|date('d/m') }}</span>
                    </div>
                {% endfor %}
            </div>
            <p class="note">Seuls les jours où quelque chose s'est vendu apparaissent.</p>
        </div>
    {% endif %}

    {# Le 20/80 : la poignée de produits qui fait le chiffre. C'est l'outil
       d'analyse qu'on veut mettre entre leurs mains. #}
    <div class="bilan">
        <div class="bilan-entete">
            <h2>Ce qui fait le chiffre</h2>
            <span class="mention">{{ analyse2080|filter(l => l.dansLe20)|length }} produits font 80&nbsp;%</span>
        </div>
        <div class="fiche">
            {% for ligne in analyse2080 %}
                <div class="fiche-ligne {{ ligne.dansLe20 ? 'ligne-2080' : '' }}">
                    <span class="coupure">{{ ligne.nom }}</span>
                    <span class="quantite">&times;&nbsp;{{ ligne.quantite }}</span>
                    <span class="sous-total">{{ ligne.chiffreAffaires|number_format(2, ',', ' ') }}&nbsp;&euro;</span>
                </div>
            {% else %}
                <p class="note">Aucune vente sur la période.</p>
            {% endfor %}
        </div>
        {% if analyse2080|length > 0 %}
            <p class="note">
                Les lignes marquées cumulent les 80 premiers pour cent du chiffre. Ce sont
                celles-là qu'il ne faut jamais laisser manquer&nbsp;: une rupture y coûte bien plus
                cher qu'ailleurs.
            </p>
        {% endif %}
    </div>

    {# ===== L'année ======================================================
       Ces deux blocs ne suivent pas le filtre de période : les questions
       « qu'est-ce qui fait le chiffre » et « quelle récré marche le mieux »
       ne se posent pas sur une semaine. #}
    {% if analyse2080Annee|length > 1 %}
        <div class="bilan">
            <div class="bilan-entete">
                <h2>Sur l'année</h2>
                <span class="mention">{{ annee.libelle|replace({'Année scolaire ': ''}) }}</span>
            </div>
            {{ graph.camembert(analyse2080Annee, resumeAnnee.total, true) }}
            <p class="note">
                Au-dessus du trait vert, les produits qui font 80&nbsp;% de la recette de l'année.
                Ce sont ceux qu'il ne faut jamais laisser manquer.
            </p>
        </div>
    {% endif %}

    {% if parJourDOuverture|length > 1 %}
        <div class="bilan">
            <div class="bilan-entete">
                <h2>Quelle récré marche le mieux</h2>
                <span class="mention">sur l'année</span>
            </div>
            {{ graph.batons(parJourDOuverture) }}
            <p class="note">
                {% if association and association.declareSesJoursDOuverture %}
                    Le chiffre de chaque jour d'ouverture. C'est le jour le plus fort qu'il faut
                    préparer en premier&nbsp;: c'est là qu'une rupture coûte le plus cher.
                {% else %}
                    Les sept jours sont affichés parce que les jours d'ouverture ne sont pas
                    renseignés. Votre responsable peut les cocher dans la fiche de l'association.
                {% endif %}
            </p>
        </div>
    {% endif %}

    <div class="bilan {{ ruptures|length > 0 ? 'bilan-alerte' : '' }}">
        <div class="bilan-entete">
            <h2>Ce qui a manqué</h2>
            <span class="mention">{{ ruptures|length }} produit{{ ruptures|length > 1 ? 's' : '' }}</span>
        </div>
        <div class="fiche">
            {% for ligne in ruptures %}
                <div class="fiche-ligne">
                    <span class="coupure">{{ ligne.produit.name }}</span>
                    <span class="quantite">{{ ligne.rupture + ligne.decrochage }}&nbsp;j</span>
                    <span class="sous-total">
                        {%- if ligne.perdues -%}~{{ ligne.perdues }} perdues{%- else -%}&mdash;{%- endif -%}
                    </span>
                </div>
            {% else %}
                <p class="note">Rien n'a manqué sur la période. C'est la bonne nouvelle.</p>
            {% endfor %}
        </div>
        {% if ruptures|length > 0 %}
            <p class="note">
                Les ventes perdues sont une <strong>estimation</strong>, pas une mesure&nbsp;: les
                jours sans stock multipliés par ce que le produit part un jour ordinaire. On ne
                saura jamais combien de clients sont repartis les mains vides.
            </p>
        {% endif %}
    </div>

    {# Un produit à la loupe : c'est la question « celui-là, on le garde ? ». #}
    <div class="bilan">
        <div class="bilan-entete"><h2>Un produit de plus près</h2></div>
        <form method="get" class="chiffres-filtres">
            <input type="hidden" name="periode" value="{{ periode.type }}">
            <div class="form-group">
                <label for="produit">Produit</label>
                <select name="produit" id="produit" class="form-control" onchange="this.form.submit()">
                    <option value="">Choisir un produit…</option>
                    {% for p in produits %}
                        <option value="{{ p.id }}" {{ produitSelectionne and produitSelectionne.id == p.id ? 'selected' : '' }}>{{ p.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <noscript><button type="submit" class="btn btn-outline btn-bloc">Voir</button></noscript>
        </form>

        {% if dossier %}
            <div class="ligne"><span class="cle">Stock actuel</span><span class="val">{{ produitSelectionne.stock }}</span></div>
            <div class="ligne"><span class="cle">Vendus</span><span class="val">{{ dossier.quantite }}</span></div>
            <div class="ligne"><span class="cle">Chiffre d'affaires</span><span class="val">{{ dossier.chiffreAffaires|number_format(2, ',', ' ') }}&nbsp;&euro;</span></div>
            <div class="ligne"><span class="cle">Jours sans stock</span><span class="val">{{ dossier.ruptures.rupture + dossier.ruptures.decrochage }}</span></div>
            <div class="ligne"><span class="cle">Ventes perdues (estimation)</span><span class="val">{{ dossier.perdues.quantite }}</span></div>
        {% endif %}
    </div>

    <div class="encart">
        Ces chiffres sont ceux de toute l'association, pas seulement les vôtres. C'est fait exprès&nbsp;:
        ils se regardent et se discutent ensemble.
    </div>

    <p><a href="{{ path('app_cadencier_front') }}" class="btn btn-outline btn-bloc">Voir le cadencier</a></p>

    <p><a href="{{ path('app_sale_index') }}" class="back-link">Retour aux caisses</a></p>
</div>
{% endblock %}