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

{% block title %}Cantine - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block page_title %}Cantine - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block body %}
    <div class="card mb-5">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Abonnement en cours</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if abonnementActif is null %}
                <div class="text-muted mb-4">Aucun abonnement cantine actif pour {{ enfant.prenom }}.</div>
            {% else %}
                <p>
                    Actif du <strong>{{ abonnementActif.dateDebut|date('d/m/Y') }}</strong> au
                    <strong>{{ abonnementActif.dateFin|date('d/m/Y') }}</strong> -
                    <strong>{{ abonnementActif.montant|montant }} FCFA</strong>
                </p>
                <p class="text-muted">Une fois payé, {{ enfant.prenom }} a accès à la cantine sans limite sur cette période.</p>
                <form method="post" action="{{ path('parents_espace_cantine_resilier', {enfantId: enfant.id, abonnementId: abonnementActif.id}) }}">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('parents_cantine_resilier_' ~ abonnementActif.id) }}">
                    <button type="submit" class="btn btn-light-danger btn-sm">Résilier à partir d'aujourd'hui</button>
                </form>
            {% endif %}
        </div>
    </div>

    {% if abonnementActif is null %}
        <div class="card mb-5">
            <div class="card-header border-0 pt-6">
                <div class="card-title"><h3>Souscrire à la cantine</h3></div>
            </div>
            <div class="card-body pt-0">
                <p class="text-muted">Le montant est calculé automatiquement (tarif cantine × nombre de jours couverts) et facturé immédiatement.</p>
                <form method="post" action="{{ path('parents_espace_cantine_souscrire', {enfantId: enfant.id}) }}" class="row g-3 align-items-end">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('parents_cantine_souscrire_' ~ enfant.id) }}">
                    <div class="col-md-5">
                        <label class="form-label">Du *</label>
                        <input type="date" name="date_debut" required class="form-control">
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">Au *</label>
                        <input type="date" name="date_fin" required class="form-control">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary">Souscrire</button>
                    </div>
                </form>
            </div>
        </div>
    {% endif %}

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Historique</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if historique is empty %}
                <div class="text-muted">Aucun abonnement cantine.</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>Période</th>
                                <th>Montant</th>
                                <th>Statut</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            {% for abonnement in historique %}
                                <tr>
                                    <td>{{ abonnement.dateDebut|date('d/m/Y') }} au {{ abonnement.dateFin|date('d/m/Y') }}</td>
                                    <td>{{ abonnement.montant|montant }} FCFA</td>
                                    <td>
                                        {% if abonnement.actif %}
                                            <span class="badge badge-light-success">Actif</span>
                                        {% else %}
                                            <span class="badge badge-light">Résilié</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}