{% extends 'pilotage/_layout.html.twig' %}

{% block title %}Statistiques{% endblock %}

{% block page_title %}Statistiques{% endblock %}

{% block body %}
    <div class="card mb-5 mb-xl-8">
        <div class="card-body">
            <form method="get" action="{{ path('pilotage_statistiques') }}" class="row g-3 align-items-end">
                <div class="col-auto">
                    <label class="form-label">Du (facultatif)</label>
                    <input type="date" name="date_debut" value="{{ debut }}" class="form-control">
                </div>
                <div class="col-auto">
                    <label class="form-label">Au (facultatif)</label>
                    <input type="date" name="date_fin" value="{{ fin }}" class="form-control">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary">Filtrer</button>
                </div>
            </form>
        </div>
    </div>

    <div class="row g-5 mb-5 mb-xl-8">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Inscriptions</h3></div>
                </div>
                <div class="card-body pt-0">
                    <div id="graphe-inscriptions"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Payé / impayé</h3></div>
                </div>
                <div class="card-body pt-0">
                    <div id="graphe-paiements"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Inscriptions (détail)</h3></div>
        </div>
        <div class="card-body pt-0">
            <div class="table-responsive">
                <table class="table align-middle table-row-dashed fs-6 gy-5">
                    <thead>
                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                            <th>En attente</th>
                            <th>Liste d'attente</th>
                            <th>Admise</th>
                            <th>Refusée</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                        <tr>
                            <td>{{ inscriptions.en_attente }}</td>
                            <td>{{ inscriptions.liste_attente }}</td>
                            <td>{{ inscriptions.admise }}</td>
                            <td>{{ inscriptions.refusee }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Chiffre d'affaires</h3></div>
        </div>
        <div class="card-body pt-0">
            <div class="fs-2 fw-bold text-gray-900">{{ chiffreAffaires|montant }}</div>
        </div>
    </div>

    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Impayés</h3></div>
            <div class="card-toolbar">
                <a href="{{ path('pilotage_statistiques_export_impayes') }}" class="btn btn-light-primary btn-sm">Télécharger impayes.csv</a>
            </div>
        </div>
        <div class="card-body pt-0">
            {% if impayes is empty %}
                <div class="text-muted">Aucun impayé.</div>
            {% else %}
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th>Enfant</th>
                                <th>Numéro</th>
                                <th>Montant</th>
                                <th>Statut</th>
                                <th>Restant dû</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            {% for ligne in impayes %}
                                <tr>
                                    <td>{{ ligne.facture.enfant.prenom }} {{ ligne.facture.enfant.nom }}</td>
                                    <td>{{ ligne.facture.numero }}</td>
                                    <td>{{ ligne.facture.montant|montant }}</td>
                                    <td>{{ ligne.statut.label }}</td>
                                    <td>{{ ligne.montantRestant|montant }}</td>
                                    <td class="text-end">
                                        <a href="{{ path('comptabilite_facture', {enfantId: ligne.facture.enfant.id}) }}" class="btn btn-light btn-sm">Voir</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts_bottom %}
    {{ parent() }}
    <script>
        (function () {
            new ApexCharts(document.getElementById('graphe-inscriptions'), {
                chart: { type: 'donut', height: 280 },
                labels: ['En attente', "Liste d'attente", 'Admise', 'Refusée'],
                series: [{{ inscriptions.en_attente }}, {{ inscriptions.liste_attente }}, {{ inscriptions.admise }}, {{ inscriptions.refusee }}],
                legend: { position: 'bottom' }
            }).render();

            new ApexCharts(document.getElementById('graphe-paiements'), {
                chart: { type: 'donut', height: 280 },
                labels: ['Payé', 'Impayé'],
                colors: ['#50cd89', '#f1416c'],
                series: [{{ repartitionPaiements.paye }}, {{ repartitionPaiements.impaye }}],
                legend: { position: 'bottom' }
            }).render();
        })();
    </script>
{% endblock %}