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

{% block body %}
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <h1 class="h1">Les éducateurs</h1>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header">
            <h2 class="h4">
                Liste des éducateurs
            </h2>
        </div>
        <div class="card-body p0">
            <div class="p-2">
                <form id="form-export" class="form-export" action="{{ path('admin_educators_index') }}">
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                        <div class="form-group flex flex-col gap-1">
                            <label for="name">Nom ou prénom</label>
                            <input type="text" name="name" id="name" value="{{ formSearch.get('name') }}" class="input input-bordered" />
                        </div>
                        <div class="form-group flex flex-col gap-1">
                            <label for="email">Email</label>
                            <input type="text" name="email" id="email" value="{{ formSearch.get('email') }}" class="input input-bordered" />
                        </div>
                        <div class="form-group flex flex-col gap-1">
                            <label for="type">Type d'éducateur</label>
                            <select name="type" id="type" class="input input-bordered">
                                <option value="">Tous</option>
                                <option value="majeur" {% if formSearch.get('type') == 'majeur' %}selected{% endif %}>Éducateur majeur</option>
                                <option value="mineur" {% if formSearch.get('type') == 'mineur' %}selected{% endif %}>Éducateur mineur</option>
                                <option value="dirigeant" {% if formSearch.get('type') == 'dirigeant' %}selected{% endif %}>Dirigeant</option>
                                <option value="enfant_benevole" {% if formSearch.get('type') == 'enfant_benevole' %}selected{% endif %}>Enfant de bénévole</option>
                            </select>
                        </div>
                        <div class="form-group flex flex-col gap-1">
                            <label for="status">Statut</label>
                            <select name="status" id="status" class="input input-bordered">
                                <option value="">Tous</option>
                                <option value="validated" {% if formSearch.get('status') == 'validated' %}selected{% endif %}>Validés</option>
                                <option value="pending" {% if formSearch.get('status') == 'pending' %}selected{% endif %}>En attente</option>
                            </select>
                        </div>
                        <div class="form-group flex flex-col gap-1">
                            <label for="documentCheck">Vérification des documents</label>
                            <select name="documentCheck" id="documentCheck" class="input input-bordered">
                                <option value="">Tous</option>
                                <option value="checked" {% if formSearch.get('documentCheck') == 'checked' %}selected{% endif %}>Documents fournis</option>
                                <option value="unchecked" {% if formSearch.get('documentCheck') == 'unchecked' %}selected{% endif %}>Documents manquants</option>
                            </select>
                        </div>
                    </div>
                    <div class="flex flex-col sm:flex-row justify-end mt-4 gap-2">
                        <button type="submit" class="btn btn-primary btn-small w-full sm:w-auto">Rechercher</button>
                        {% if formSearch.searching %}
                            <a href="{{ path('admin_educators_index', {'reset-filters' : 1}) }}" class="btn-secondary btn-small w-full sm:w-auto">Réinitialiser</a>
                        {% endif %}
                    </div>
                </form>
                <div class="flex justify-between items-center mt-2">
                    <p>
                        {% if count == 0 %}
                            <small>Aucun résultat.</small>
                        {% elseif count == 1 %}
                            <small>{{ count }} résultat.</small>
                        {% else %}
                            <small>{{ count }} résultats.</small>
                        {% endif %}
                    </p>
                    <div class="actions-btn__secondary flex">
                        <button class="btn-icon-secondary export-educators" title="Exporter les éducateurs">
                            {{ icon('file-export', true) }}
                        </button>
                        <button class="btn-icon-secondary btn-customize-table" title="Configurer le tableau">
                            {{ icon('cog', true) }}
                        </button>
                    </div>
                </div>
            </div>
            <customize-table hidden-target="{{ currentPreference }}" settings="{{ customizedColumns }}"
                             preference-key="{{ customizedColumnsPreferenceKey }}">
                <div class="overflow-x-auto">
                    <table class="table whitespace-nowrap">
                        <thead>
                        <tr>
                            <th class="td-id">{{ sort_render('Id', formSearch, 'e.id')|raw }}</th>
                            <th class="td-lastname">{{ sort_render('Nom', formSearch, 'u.lastname')|raw }}</th>
                            <th class="td-firstname">{{ sort_render('Prénom', formSearch, 'u.firstname')|raw }}</th>
                            <th class="td-email">{{ sort_render('Email', formSearch, 'u.email')|raw }}</th>
                            <th class="td-type">Type</th>
                            <th class="td-documentCheck">Documents</th>
                            <th class="td-status">Statut</th>
                            <th class="td-createdAt">{{ sort_render('Inscrit le', formSearch, 'e.faitLe')|raw }}</th>
                            <th class="td-phone">Téléphone</th>
                            <th class="td-birthdate">Date de naissance</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for educator in educators %}
                            <tr class="{% if educator.isIsValidated() %}bg-green-100 text-green-700{% endif %}">
                                <td class="td-id">{{ educator.id }}</td>
                                <td class="td-lastname">{{ educator.user.lastname|upper }}</td>
                                <td class="td-firstname">{{ educator.user.firstname|lower|capitalize }}</td>
                                <td class="td-email">{{ educator.user.email }}</td>
                                <td class="td-type">
                                    {% set typeLabels = {
                                        'Educateur': 'Éducateur majeur',
                                        'Educateur Mineur': 'Éducateur mineur',
                                        'Dirigeant': 'Dirigeant',
                                        'Enfant': 'Enfant de bénévole'
                                    } %}
                                    {% set typeColors = {
                                        'Educateur': 'badge-primary',
                                        'Educateur Mineur': 'badge-info',
                                        'Dirigeant': 'badge-success',
                                        'Enfant': 'badge-warning'
                                    } %}
                                    <span class="badge {{ typeColors[educator.type] ?? 'badge-secondary' }}">{{ typeLabels[educator.type] ?? educator.type }}</span>
                                </td>
                                <td class="td-documentCheck">
                                    {% set hasDocuments = (educator.photoIdendite and educator.photoIdendite != '') or 
                                                         (educator.carteIdentite and educator.carteIdentite != '') or 
                                                         (educator.casierJudiciaire and educator.casierJudiciaire != '') %}
                                    {% if hasDocuments %}
                                        <span class="badge badge-success">Fournis</span>
                                    {% else %}
                                        <span class="badge badge-warning">Manquants</span>
                                    {% endif %}
                                </td>
                                <td class="td-status">
                                    {% if educator.isIsValidated() %}
                                        <span class="badge badge-success">Validé</span>
                                    {% else %}
                                        <span class="badge badge-warning">En attente</span>
                                    {% endif %}
                                </td>
                                <td class="td-createdAt">{{ educator.faitLe|date('d/m/Y H:i') }}</td>
                                <td class="td-phone">{{ educator.parentPhone ?? 'Non renseigné' }}</td>
                                <td class="td-birthdate">{{ educator.dateOfBirth ? educator.dateOfBirth|date('d/m/Y') : 'Non renseignée' }}</td>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <confirm-delete data-action="{{ path('admin_educators_delete', { id : educator.id, referer: app.request.uri }) }}"></confirm-delete>
                                        <a href="{{ path('admin_educators_show', {id: educator.id}) }}"
                                           class="btn-icon-secondary" title="Voir">
                                            {{ icon('eye') }}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="11">Aucun résultat</td>
                            </tr>
                        {% endfor %}
                        </tbody>

                        <tfoot>
                        <tr>
                            <td colspan="11">
                                {{ knp_pagination_render(educators) }}
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </customize-table>
        </div>
    </div>

    <modal-box title="Exporter les éducateurs" trigger=".export-educators">
        <div class="grid grid-cols-1 gap-2">
            <export-data title="Fichier Excel des éducateurs" data-route="{{ path('admin_educators_export_index') }}"></export-data>
        </div>
    </modal-box>
{% endblock %}