{% extends "base_admin.html.twig" %}

{% block title %}Documents manquants{% endblock %}

{% block body %}
    <div class="flex mb1">
        <h1 class="h3">Relance documents manquants</h1>
    </div>

    {# Formulaire de recherche #}
    <form method="GET" action="{{ path('admin_reminder_index') }}">
        <alert-message id="alert-relance-success" type="success" class="hidden">
            Les relances ont bien été envoyées
        </alert-message>

        <div class="card mb-2 js-card-filter">
            <div class="card__body">
                <div class="grid3">
                    <div class="form-group">
                        <label for="lastName">Nom</label>
                        <input type="text" name="lastName" id="lastName" value="{{ formSearch.get('lastName') }}">
                    </div>
                    <div class="form-group">
                        <label for="firstName">Prénom</label>
                        <input type="text" name="firstName" id="firstName" value="{{ formSearch.get('firstName') }}">
                    </div>

                    {# Exemple si tu veux gérer un "État de relance" (optionnel) #}
                    <div class="form-group">
                        <label for="relanceState">État des relances</label>
                        <select name="relanceState" id="relanceState">
                            <option value="all" {% if formSearch.get('relanceState') == 'all' %}selected{% endif %}>Tous</option>
                            <option value="with" {% if formSearch.get('relanceState') == 'with' %}selected{% endif %}>Avec relance</option>
                            <option value="without" {% if formSearch.get('relanceState') == 'without' %}selected{% endif %}>Sans relance</option>
                        </select>
                    </div>

                    {# Exemple : relances datant de plus de N jours. À implémenter ou non dans le Repo #}
                    <div class="form-group">
                        <label for="lastReminderBefore">Relances datant de plus de (jours)</label>
                        <input type="number" name="lastReminderBefore" id="lastReminderBefore" value="{{ formSearch.get('lastReminderBefore') }}">
                    </div>
                </div>

                <div class="flex flex-start mt-1 gap-2">
                    <a href="{{ path('admin_reminder_index') }}" class="btn-secondary">
                        {{ icon('times') }} Annuler
                    </a>
                    <button type="submit" class="btn-primary-outline">
                        {{ icon('search') }} Rechercher
                    </button>
                    <button
                            type="button"
                            id="relance-selected"
                            class="btn-danger-outline"
                            disabled
                    >
                        {{ icon('mail') }} Relancer les membres sélectionnés
                    </button>
                </div>
            </div>
        </div>
    </form>

    {# Tableau des documents manquants #}
    <div class="card">
        <div class="card__body">
            <table class="table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check-all">
                    </th>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Documents manquants</th>
                    <th>Dernière relance</th>
                    <th>Statut</th>
                </tr>
                </thead>

                <tbody>
                {% for profil in documents %}
                    <tr data-profil-id="{{ profil.id }}">
                        <td>
                            <label>
                                <input
                                        type="checkbox"
                                        class="row-checkbox"
                                        data-profil-id="{{ profil.id }}"
                                >
                            </label>
                        </td>
                        <td>{{ profil.lastname }}</td>
                        <td>{{ profil.firstname }}</td>
                        <td>
                            {% set missingList = [] %}

                            {% if profil.identityCard is null or not profil.validIdentity %}
                                {% set missingList = missingList|merge(['Carte d\'identité']) %}
                            {% endif %}

                            {% if profil.picture is null or not profil.validPicture %}
                                {% set missingList = missingList|merge(['Photo']) %}
                            {% endif %}

                            {% if profil.medicalCertificate is null or not profil.validCertificat %}
                                {% set missingList = missingList|merge(['Certificat médical']) %}
                            {% endif %}

                            {% if missingList|length > 0 %}
                                {% for doc in missingList %}
                                    <span class="pill-red">{{ doc }}</span>
                                {% endfor %}
                            {% else %}
                                <span class="text-gray-500">Aucun</span>
                            {% endif %}
                        </td>
                        <td>
                            {# Dans l'exemple d’origine, on avait item.lastReminderDate.
                               Si tu ne l'as pas pour l'instant, laisse "-" #}
                            -
                        </td>
                        <td class="status-cell table__actions">-</td>
                    </tr>
                {% else %}
                    <tr>
                        <td class="italic text-gray-500 text-center py-4" colspan="7">
                            Aucun document manquant trouvé.
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            {{ knp_pagination_render(documents) }}
        </div>
    </div>
{% endblock %}

{# Script JS pour gérer le check all et la relance #}
{% block javascripts_end %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const checkAll = document.getElementById('check-all');
            const rowCheckboxes = document.querySelectorAll('.row-checkbox');
            const relanceSelectedButton = document.getElementById('relance-selected');
            const alertRelanceSuccess = document.getElementById('alert-relance-success');

            function updateRelanceButtonState() {
                const selectedCount = document.querySelectorAll('.row-checkbox:checked').length;
                relanceSelectedButton.disabled = (selectedCount === 0);
            }

            checkAll.addEventListener('change', () => {
                const checked = checkAll.checked;
                rowCheckboxes.forEach(cb => {
                    cb.checked = checked;
                });
                updateRelanceButtonState();
            });

            rowCheckboxes.forEach(cb => {
                cb.addEventListener('change', () => {
                    if (!cb.checked && checkAll.checked) {
                        checkAll.checked = false;
                    }
                    updateRelanceButtonState();
                });
            });

            // Bouton "Relancer" sélection
            relanceSelectedButton.addEventListener('click', async (event) => {
                event.preventDefault();

                const confirmation = window.confirm("Envoyer la relance à tous les membres sélectionnés ?");
                if (!confirmation) {
                    return;
                }

                const selectedCheckboxes = [...document.querySelectorAll('.row-checkbox:checked')];

                for (const checkbox of selectedCheckboxes) {
                    const profilId = checkbox.dataset.profilId;
                    const row = checkbox.closest('tr');
                    const statusCell = row.querySelector('.status-cell');

                    statusCell.innerHTML = '<div class="loading"></div>';

                    try {
                        // Appel AJAX vers ton endpoint "/admin/api/reminder/{profilId}"
                        // Tu dois créer ce endpoint équivalent à l'ancien code
                        const response = await fetch(`/admin/api/reminder/${profilId}`, {
                            method: 'POST'
                        });

                        if (response.ok) {
                            statusCell.innerHTML = '✔';
                        } else {
                            statusCell.innerHTML = '❌';
                        }
                    } catch (error) {
                        statusCell.innerHTML = '❌';
                    }
                }
                alertRelanceSuccess.classList.remove('hidden');
            });

            updateRelanceButtonState();
        });
    </script>
{% endblock %}