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

{% set moisNoms = ['', 'Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] %}
{% set couleurs = ['#4CAF50','#2196F3','#FF9800','#9C27B0','#F44336','#00BCD4','#8BC34A','#607D8B','#E91E63','#795548'] %}

{% block title %}Répartition par Type — {% if mois == 0 %}{{ annee }}{% else %}{{ moisNoms[mois] }} {{ annee }}{% endif %}{% endblock %}

{% block body %}

{# ── En-tête ─────────────────────────────────────────────────────────────────── #}
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div>
        <h1 class="h4 fw-bold page-title mb-0">
            <i class="fas fa-chart-pie me-2"></i>Répartition par Type
        </h1>
        <p class="text-muted small mb-0">
            {% if mois == 0 %}Année complète {{ annee }}{% else %}{{ moisNoms[mois] }} {{ annee }}{% endif %}
        </p>
    </div>
    <div class="d-flex gap-2 flex-wrap d-print-none">
        <a href="{{ path('tenant_syntheses_repartition_types_pdf', {annee: annee, mois: mois}) }}"
           class="btn btn-sm btn-danger" title="Télécharger en PDF">
            <i class="fas fa-file-pdf me-1"></i>PDF
        </a>
        <a href="{{ path('tenant_syntheses_repartition_types_csv', {annee: annee, mois: mois}) }}"
           class="btn btn-sm btn-success" title="Télécharger en CSV (compatible Excel)">
            <i class="fas fa-file-csv me-1"></i>CSV
        </a>
        <a href="{{ path('tenant_syntheses_index', {annee: annee, mois: mois == 0 ? 1 : mois}) }}"
           class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>Retour
        </a>
    </div>
</div>

{# ── Filtre de période ────────────────────────────────────────────────────────── #}
<div class="card shadow-sm mb-4">
    <div class="card-body">
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label small fw-semibold">Période</label>
                <select name="mois" class="form-select form-select-sm">
                    <option value="0" {% if mois == 0 %}selected{% endif %}>Année complète</option>
                    {% for m in 1..12 %}
                        <option value="{{ m }}" {% if m == mois %}selected{% endif %}>{{ moisNoms[m] }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold">Année</label>
                <select name="annee" class="form-select form-select-sm">
                    {% for a in (annee - 2)..(annee + 1) %}
                        <option value="{{ a }}" {% if a == annee %}selected{% endif %}>{{ a }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class="fas fa-search me-1"></i>Afficher
                </button>
            </div>
        </form>
    </div>
</div>

{% if stats is empty %}
<div class="alert alert-info">
    <i class="fas fa-info-circle me-2"></i>
    Aucune vente trouvée pour la période sélectionnée. Vérifiez que les ventes ont bien un type renseigné.
</div>
{% else %}

{# ── Cartes par type ──────────────────────────────────────────────────────────── #}
<div class="row mb-4">
    {% for stat in stats %}
        {% set color = couleurs[loop.index0 % couleurs|length] %}
        <div class="col-xl-3 col-md-4 col-sm-6 mb-3">
            <div class="card shadow-sm h-100" style="border-left: 4px solid {{ color }};">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h6 class="card-subtitle text-muted mb-0">{{ stat.type|capitalize }}</h6>
                        <span class="badge" style="background-color: {{ color }}">{{ stat.pourcentage_montant }}%</span>
                    </div>
                    <h4 class="fw-bold mb-1">{{ stat.total_montant|number_format(2, ',', ' ') }} €</h4>
                    <p class="mb-1 small">{{ stat.nb_ventes|number_format(0, ',', ' ') }} repas</p>
                    <p class="mb-0 small text-muted">Moy. {{ stat.moyenne_par_jour|number_format(1, ',', ' ') }} repas/jour</p>
                </div>
            </div>
        </div>
    {% endfor %}
    {# Carte Total #}
    <div class="col-xl-3 col-md-4 col-sm-6 mb-3">
        <div class="card shadow-sm h-100 bg-primary text-white">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 opacity-75">TOTAL</h6>
                <h4 class="fw-bold mb-1">{{ totalMontant|number_format(2, ',', ' ') }} €</h4>
                <p class="mb-0 small">{{ totalVentes|number_format(0, ',', ' ') }} repas au total</p>
            </div>
        </div>
    </div>
</div>

{# ── Graphiques ───────────────────────────────────────────────────────────────── #}
<div class="row mb-4">
    <div class="col-md-5 mb-3">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-white fw-semibold py-3">
                <i class="fas fa-chart-pie me-2 text-primary"></i>Répartition du Chiffre d'Affaires
            </div>
            <div class="card-body d-flex align-items-center justify-content-center">
                <canvas id="chartMontant" style="max-height:280px;"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-7 mb-3">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-white fw-semibold py-3">
                <i class="fas fa-chart-bar me-2 text-primary"></i>Nombre de Repas par Type
            </div>
            <div class="card-body">
                <canvas id="chartRepas" style="max-height:280px;"></canvas>
            </div>
        </div>
    </div>
</div>

{# ── Tableau détaillé ─────────────────────────────────────────────────────────── #}
<div class="card shadow-sm mb-4">
    <div class="card-header bg-white fw-semibold py-3">
        <i class="fas fa-table me-2 text-primary"></i>Détails par Type
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-striped table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Type</th>
                        <th class="text-end">Nb Repas</th>
                        <th class="text-end">% Repas</th>
                        <th class="text-end">Montant Total</th>
                        <th class="text-end">% Montant</th>
                        <th class="text-end">Prix Moyen</th>
                        <th class="text-end">Moy./Jour</th>
                    </tr>
                </thead>
                <tbody>
                    {% for stat in stats %}
                        {% set color = couleurs[loop.index0 % couleurs|length] %}
                        {% set prixMoyen = stat.nb_ventes > 0 ? stat.total_montant / stat.nb_ventes : 0 %}
                        <tr>
                            <td>
                                <span class="d-inline-block rounded me-2" style="width:12px;height:12px;background:{{ color }};vertical-align:middle;"></span>
                                <strong>{{ stat.type|capitalize }}</strong>
                            </td>
                            <td class="text-end">{{ stat.nb_ventes|number_format(0, ',', ' ') }}</td>
                            <td class="text-end">
                                <span class="badge bg-primary">{{ stat.pourcentage_ventes }}%</span>
                            </td>
                            <td class="text-end fw-semibold">{{ stat.total_montant|number_format(2, ',', ' ') }} €</td>
                            <td class="text-end">
                                <span class="badge bg-success">{{ stat.pourcentage_montant }}%</span>
                            </td>
                            <td class="text-end text-muted">{{ prixMoyen|number_format(2, ',', ' ') }} €</td>
                            <td class="text-end text-muted">{{ stat.moyenne_par_jour|number_format(1, ',', ' ') }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light">
                    <tr class="fw-bold">
                        <td>TOTAL</td>
                        <td class="text-end">{{ totalVentes|number_format(0, ',', ' ') }}</td>
                        <td class="text-end">100%</td>
                        <td class="text-end">{{ totalMontant|number_format(2, ',', ' ') }} €</td>
                        <td class="text-end">100%</td>
                        <td class="text-end">
                            {{ totalVentes > 0 ? (totalMontant / totalVentes)|number_format(2, ',', ' ') : '0,00' }} €
                        </td>
                        <td class="text-end">—</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

{# ── Chart.js ─────────────────────────────────────────────────────────────────── #}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
    const stats    = {{ stats|json_encode|raw }};
    const allColors = {{ couleurs|json_encode|raw }};
    const labels   = stats.map(s => s.type.charAt(0).toUpperCase() + s.type.slice(1));
    const montants = stats.map(s => parseFloat(s.total_montant));
    const repas    = stats.map(s => parseInt(s.nb_ventes));
    const colors   = stats.map((s, i) => allColors[i % allColors.length]);

    new Chart(document.getElementById('chartMontant'), {
        type: 'doughnut',
        data: {
            labels,
            datasets: [{ data: montants, backgroundColor: colors, borderWidth: 2, borderColor: '#fff' }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 12, padding: 10 } },
                tooltip: {
                    callbacks: {
                        label: ctx => {
                            const total = ctx.dataset.data.reduce((a, b) => a + b, 0);
                            const pct   = total > 0 ? ((ctx.parsed / total) * 100).toFixed(1) : 0;
                            return ctx.label + ' : ' + ctx.parsed.toLocaleString('fr-FR', {minimumFractionDigits:2}) + ' € (' + pct + '%)';
                        }
                    }
                }
            }
        }
    });

    new Chart(document.getElementById('chartRepas'), {
        type: 'bar',
        data: {
            labels,
            datasets: [{
                label: 'Nombre de repas',
                data: repas,
                backgroundColor: colors,
                borderWidth: 1,
                borderColor: colors
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: { legend: { display: false } },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 }
                }
            }
        }
    });
})();
</script>

{% endif %}

{% endblock %}