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

{% block title %}Présences & absences - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block page_title %}Présences & absences - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block body %}
    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Planning prévu au contrat</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if contratActif is null %}
                <div class="text-muted">Aucun contrat actif enregistré.</div>
            {% else %}
                <p class="mb-0">
                    Jours : {{ contratActif.joursSemaine|map(j => j.label)|join(', ') }}<br>
                    Horaires prévus : {{ contratActif.heureArriveePrevue ?: '-' }} – {{ contratActif.heureDepartPrevue ?: '-' }}
                </p>
            {% endif %}
        </div>
    </div>

    <div class="row g-5 mb-5">
        <div class="col-md-5">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Déclarer une absence</h3></div>
                </div>
                <div class="card-body pt-0">
                    <form method="post" action="{{ path('parents_espace_declarer_absence', {enfantId: enfant.id}) }}">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('parents_absence_' ~ enfant.id) }}">
                        <div class="mb-4">
                            <label class="form-label">Date *</label>
                            <input type="date" name="date" required class="form-control">
                        </div>
                        <div class="mb-4">
                            <label class="form-label">Motif (facultatif)</label>
                            <input type="text" name="motif" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-primary">Déclarer</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Absences déclarées</h3></div>
                </div>
                <div class="card-body pt-0">
                    {% if absences is empty %}
                        <div class="text-muted">Aucune absence déclarée.</div>
                    {% else %}
                        <div class="d-flex flex-column gap-2">
                            {% for absence in absences %}
                                <div class="d-flex align-items-center justify-content-between border rounded p-3">
                                    <div>{{ absence.date|date('d/m/Y') }}{% if absence.motif %} - {{ absence.motif }}{% endif %}</div>
                                    {% if absence.annulee %}
                                        <span class="badge badge-light">Annulée</span>
                                    {% else %}
                                        <form method="post" action="{{ path('parents_espace_annuler_absence', {enfantId: enfant.id, absenceId: absence.id}) }}">
                                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('parents_absence_annuler_' ~ absence.id) }}">
                                            <button type="submit" class="btn btn-light-danger btn-sm">Annuler</button>
                                        </form>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Historique des présences (30 derniers jours)</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if presences is empty %}
                <div class="text-muted">Aucune présence enregistrée récemment.</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>Date</th>
                                <th>Statut</th>
                                <th>Arrivée</th>
                                <th>Départ</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            {% for presence in presences %}
                                <tr>
                                    <td>{{ presence.date|date('d/m/Y') }}</td>
                                    <td>{{ presence.statut.label }}</td>
                                    <td>{{ presence.heureArriveeReelle ? presence.heureArriveeReelle|date('H:i') : '-' }}</td>
                                    <td>{{ presence.heureDepartReelle ? presence.heureDepartReelle|date('H:i') : '-' }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}