{% extends 'main/base.html.twig' %}

{% block title %}📣 Sortie.com Admin User 🔊{% endblock %}

{% block content %}
    <div class="flex">
        {% include 'admin/sidebar.html.twig' %}

        <!-- Main Content -->
        <div class="ml-64 p-8 w-full">
            <h1 class="text-2xl font-semibold mb-4">Gestion des utilisateurs</h1>

            <!-- Actions: Import/Export -->
            <div class="flex flex-row mb-4 justify-between">
                <button
                        id="openModal"
                        class="btnPrimary">
                        Ajouter un utilisateur
                </button>
            </div>

            <!-- Participants Table -->
            <form method="POST" action="{{ path('participant_export') }}">
                <div class="flex flex-row">
                    <button
                            id="openModalCsv" type="button"
                            class="btnSecondary">
                        Importer CSV
                    </button>
                    <button type="submit" class="btnThird">
                        <a href="{{ path('participant_export') }}">Exporter CSV</a>
                    </button>
                </div>
                <div class="overflow-x-auto bg-white rounded shadow">
                    <table class="min-w-full bg-white divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><input type="checkbox" id="selectAll" /></th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prénom</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pseudo</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Site</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Téléphone</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Administrateur</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actif</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rôles</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                        {% for participant in participants %}
                            {% if not participant.pending %}
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span><input type="checkbox" value="{{ participant.idParticipant }}" name="userList[]"></span></td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.nom }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.prenom }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.pseudo }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.site ? participant.site.nom : "N/A" }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.telephone }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.email }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ participant.administrateur ? 'Oui' : 'Non' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ participant.actif ? '❌' : '✔️' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ participant.roles|join(', ') }}
                                    </td>
                                    <td class="flex flex-row px-6 py-4 whitespace-nowrap items-center font-medium">
                                        <a href="{{ path('app_adminUserDisable', {'id': participant.idParticipant}) }}" class="items-centerp pr-4">
                                            <img src="{{ participant.actif ? asset('img/user-able.svg') : asset('img/user-disable.svg') }}" alt="Logo" height="32px" width="32px">
                                        </a>
                                        <a href="{{ path('app_adminUserDelete', {'id': participant.idParticipant}) }}" class="items-center">
                                            <img src="{{ asset('img/user-delete.svg') }}" alt="Logo" height="32px" width="32px">
                                        </a>
                                    </td>
                                </tr>
                            {% endif %}
                        {% else %}
                            <tr>
                                <td colspan="8" class="px-6 py-4 text-center text-gray-500">Aucun participant trouvé</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </form>

            {#        Tableau user en attente #}
            <div class="overflow-x-auto bg-white rounded shadow mt-16">
                <table class="min-w-full bg-white divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prénom</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pseudo</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Téléphone</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Site</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                    {% for participant in participants %}
                        {% if participant.pending %}
                            <tr>
                                <form method="POST" action="{{ path('app_acceptUser') }}">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.nom }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.prenom }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.pseudo }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.telephone }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.email }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        <label>
                                            <select name="site" class="form-select bg-white border border-gray-300 rounded-md text-sm">
                                                <option value="0">Sélectionner un site</option>
                                                {% for site in sites %}
                                                    <option value="{{ site.idSite }}">{{ site.nom }}</option>
                                                {% endfor %}
                                            </select>
                                        </label>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <label>
                                            <input type="hidden" name="id" value="{{ participant.idParticipant }}" />
                                        </label>
                                        <button type="submit" class="px-4">
                                            <img src="{{ asset('img/accept-user.svg') }}" alt="Logo" height="32px" width="32px">
                                        </button>
                                        <button type="button">
                                            <a href="{{ path('app_denyUser', {'id': participant.idParticipant}) }}">
                                                <img src="{{ asset('img/deny-user.svg') }}" alt="Logo" height="32px" width="32px">
                                            </a>
                                        </button>
                                    </td>
                                </form>
                            </tr>
                        {% endif %}
                        {% else %}
                        <tr>
                            <td colspan="8" class="px-6 py-4 text-center text-gray-500">Aucun participant en attente</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modale pour ajouter un user -->
    <div id="userModal" class="fixed inset-0 z-50 hidden bg-gray-900 bg-opacity-50">
        <div class="flex justify-center items-center min-h-screen">
            <div class="bg-white p-6 rounded shadow-md w-1/3">
                <h2 class="text-xl font-semibold mb-4">Ajouter un utilisateur</h2>
                <form id="addUserForm" method="POST" action="{{ path('app_adminUserAdd') }}">
                    <div class="mb-4">
                        <label for="nom" class="block text-sm font-medium text-gray-700">Nom</label>
                        <input id="nom" name="nom" type="text" class="mt-1 block w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-4">
                        <label for="prenom" class="block text-sm font-medium text-gray-700">Prénom</label>
                        <input id="prenom" name="prenom" type="text" class="mt-1 block w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-4">
                        <label for="pseudo" class="block text-sm font-medium text-gray-700">Pseudo *</label>
                        <input id="pseudo" name="pseudo" type="text" class="mt-1 block w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                    </div>
                    <div class="mb-4">
                        <label for="phone" class="block text-sm font-medium text-gray-700">téléphone</label>
                        <input id="phone" name="phone" type="text" class="mt-1 block w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-4">
                        <label for="mail" class="block text-sm font-medium text-gray-700">Email *</label>
                        <input id="mail" name="mail" type="text" class="mt-1 block w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                    </div>
                    <p>* Champ obligatoire</p>
                    <div class="flex justify-end">
                        <button type="submit" class="btnPrimary">Ajouter</button>
                        <button type="button" id="closeModal" class="ml-2 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700">Annuler</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="modalCsv" class="fixed inset-0 z-50 hidden bg-gray-900 bg-opacity-50">
        <div class="flex justify-center items-center min-h-screen">
            <div class="bg-white p-6 rounded shadow-md w-1/3">
                <h2 class="text-xl font-semibold mb-4">Importer un CSV</h2>
                <form id="addCSVForm" method="post" enctype="multipart/form-data" class="flex flex-col items-center" action="{{ path('participant_import') }}">
                    <div class="mb-4">
                        <input
                                type="file"
                                name="csv_file"
                                accept=".csv"
                                class="block w-full text-sm text-gray-500
                           file:mr-4 file:py-2 file:px-4
                           file:rounded file:border-0
                           file:text-sm file:font-semibold
                           file:bg-gray-800 file:text-white
                           hover:file:bg-gray-700" />
                    </div>
                    <div class="flex flex-row">
                        <button
                                type="submit"
                                class="btnSecondary">
                            Importer CSV
                        </button>
                        <button type="button" id="closeModalCsv" class="ml-2 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700">Annuler</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{#    Modale import CSV#}

    <script>
        // Ouvrir la modale manuellement
        document.getElementById('openModal').addEventListener('click', function() {
            document.getElementById('userModal').classList.remove('hidden');
        });

        // Fermer la modale
        document.getElementById('closeModal').addEventListener('click', function() {
            document.getElementById('userModal').classList.add('hidden');
        });
    </script>

    <script>
        document.getElementById('openModalCsv').addEventListener('click', function() {
            document.getElementById('modalCsv').classList.remove('hidden')
        })

        document.getElementById('closeModalCsv').addEventListener('click', function() {
            document.getElementById('modalCsv').classList.add('hidden')
        })
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const selectAllCheckbox = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('input[type="checkbox"][name="userList[]"]');

            // Ajouter un event listener à la checkbox globale
            selectAllCheckbox.addEventListener('change', function () {
                const isChecked = selectAllCheckbox.checked;
                checkboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
            });

            // Mettre à jour la checkbox globale si l'une des checkboxes change
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
                    selectAllCheckbox.checked = allChecked;
                });
            });
        });
    </script>
{% endblock %}