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

{% block title %}Personnes autorisées - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block page_title %}Personnes autorisées - {{ 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>Personnes déclarées</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if personnesAutorisees is empty %}
                <div class="text-muted">Aucune personne autorisée déclarée.</div>
            {% else %}
                <div class="d-flex flex-column gap-2">
                    {% for personne in personnesAutorisees %}
                        {% set couleur = personne.statut.value == 'validee' ? 'success' : (personne.statut.value in ['refusee', 'revoquee'] ? 'secondary' : 'warning') %}
                        <div class="d-flex align-items-center justify-content-between border border-{{ couleur }} border-2 rounded p-3 {{ personne.statut.value in ['refusee', 'revoquee'] ? '' : 'bg-light-' ~ couleur }}">
                            <div>
                                {{ personne.prenom }} {{ personne.nom }} - {{ personne.type.label }} - {{ personne.statut.label }}
                                {% if personne.type.value == 'ponctuelle' and personne.dateHeureFinValidite %}
                                    <span class="text-muted">(jusqu'au {{ personne.dateHeureFinValidite|date('d/m/Y H:i') }})</span>
                                {% endif %}
                            </div>
                            {% if personne.statut.value in ['en_attente', 'validee'] %}
                                <form method="post" action="{{ path('parents_espace_revoquer_autorisation', {enfantId: enfant.id, id: personne.id}) }}" onsubmit="return confirm('Retirer cette autorisation ?');">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('parents_autorisation_revoquer_' ~ personne.id) }}">
                                    <button type="submit" class="btn btn-light-danger btn-sm">Retirer</button>
                                </form>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>

    <div class="row g-5">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Proposer une personne autorisée permanente</h3></div>
                </div>
                <div class="card-body pt-0">
                    <p class="text-muted fst-italic">Activée après validation par la crèche.</p>
                    <form method="post" action="{{ path('parents_espace_proposer_permanente', {enfantId: enfant.id}) }}">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('parents_autorisation_permanente_' ~ enfant.id) }}">
                        <div class="mb-3">
                            <label class="form-label">Nom *</label>
                            <input type="text" name="nom" required class="form-control">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Prénom *</label>
                            <input type="text" name="prenom" required class="form-control">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Téléphone *</label>
                            <input type="text" name="telephone" required class="form-control">
                        </div>
                        <button type="submit" class="btn btn-primary">Proposer</button>
                    </form>
                </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>Déclarer une autorisation ponctuelle (aujourd'hui uniquement)</h3></div>
                </div>
                <div class="card-body pt-0">
                    <p class="text-muted fst-italic">Confirmez votre mot de passe pour valider cette action sensible.</p>
                    <form method="post" action="{{ path('parents_espace_declarer_ponctuelle', {enfantId: enfant.id}) }}">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('parents_autorisation_ponctuelle_' ~ enfant.id) }}">
                        <div class="row g-3 mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Nom *</label>
                                <input type="text" name="nom" required class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Prénom *</label>
                                <input type="text" name="prenom" required class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Téléphone *</label>
                                <input type="text" name="telephone" required class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Début *</label>
                                <input type="datetime-local" name="debut" required class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Fin *</label>
                                <input type="datetime-local" name="fin" required class="form-control">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Votre mot de passe *</label>
                            <input type="password" name="mot_de_passe" required class="form-control">
                        </div>
                        <button type="submit" class="btn btn-primary">Déclarer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}