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

{% block title %}Gestion des utilisateurs{% endblock %}

{% block body %}
    <div class="container mx-auto">
        <h1 class="text-center text-5xl lg:text-3xl font-bold my-5">Liste des utilisateurs</h1>
        
        <div class="max-w-xl mx-auto">
            <input id="searchUser" type="text" placeholder="Rechercher un utilisateur..." class="border text-3xl lg:text-base p-2 w-full mb-4">
        </div>

        <div class="overflow-x-auto" id="userTableContainer">
            <table id="userTable" class="table border-2 border-gray-200 text-center px-10 w-1/2 lg:mx-auto lg:w-5/6">
                <thead class="bg-slate-950 text-white">
                    <tr class="border justify-center">
                        <th class="border text-4xl lg:text-base py-6">Prénom</th>
                        <th class="border text-4xl lg:text-base py-6">Nom</th>
                        <th class="border text-4xl lg:text-base py-6">Email</th>
                        <th class="border text-4xl lg:text-base py-6">Rôles</th>
                        <th class="border text-4xl lg:text-base py-6">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white" id="userTableBody">
                    {% for user in users %}
                        <tr class="userRow">
                            <td class="firstNameColumn border text-4xl lg:text-base py-6">{{ user.firstName }}</td>
                            <td class="lastNameColumn border text-4xl lg:text-base py-6">{{ user.lastName }}</td>
                            <td class="emailColumn border text-4xl lg:text-base py-6">{{ user.email }}</td>
                            <td class="rolesColumn border text-4xl lg:text-base py-6">{{ user.roles[0] }}</td>
                            <td class="actionsColumn border text-4xl lg:text-base p-4  text-center">
                                <div class="flex lg:flex-row justify-center flex-col">
                                    <form action="{{ path('app_user_show', {'id': user.id}) }}" method="get">
                                        <button type="submit" class="font-semibold text-3xl lg:text-lg btn bg-blue-300 py-2 lg:py-4 px-4 m-2 rounded shadow-sm">Voir</button>
                                    </form>
                                    {# Replace this with your actual delete form include or link #}
                                    <form action="{{ path("app_appointment_show", { user: user.id }) }}" method="get">
                                        <button type="submit" class="font-semibold text-3xl lg:text-lg btn bg-orange-300 py-2 lg:py-4 px-4 m-2 rounded shadow-sm">Ses rendez-vous</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div id="searchResults" class="overflow-x-auto"></div>

        <nav class="my-4">
            <div class="container mx-auto flex justify-center">
                <ul class="flex text-2xl font-bold">
                    {{ knp_pagination_render(users, '@KnpPaginator/Pagination/sliding.html.twig', {
                        'prev_label': 'Précédent',
                        'next_label': 'Suivant'
                    }) }}
                </ul>
            </div>
        </nav>

        
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#searchUser').on('input', function() {
                const query = $(this).val().trim().toLowerCase();

                if (query === '') {
                    // Afficher le tableau principal et masquer les résultats de recherche
                    $('#userTableContainer').show();
                    $('#searchResults').empty().hide();
                } else {
                    // Masquer le tableau principal et afficher le conteneur de résultats de recherche
                    $('#userTableContainer').hide();
                    $('#searchResults').empty().show();

                    // Effectuer la recherche via AJAX
                    $.ajax({
                        url: '{{ path("api_users_search", {"query": "__query__"}) }}'.replace('__query__', query),
                        method: 'GET',
                        success: function(data) {
                            $('#searchResults').empty();

                            if (data.totalItems > 0) {
                                const table = $('<table>').addClass('table border-2 border-gray-200 text-center px-10 w-1/2 lg:mx-auto lg:w-5/6');
                                const thead = $('<thead>').addClass('bg-slate-950 text-white').append(
                                    $('<tr>').addClass('border justify-center').append(
                                        $('<th>').addClass('border text-4xl lg:text-base py-6').text('Prénom'),
                                        $('<th>').addClass('border text-4xl lg:text-base py-6').text('Nom'),
                                        $('<th>').addClass('border text-4xl lg:text-base py-6').text('Email'),
                                        $('<th>').addClass('border text-4xl lg:text-base py-6').text('Rôles'),
                                        $('<th>').addClass('border text-4xl lg:text-base py-6').text('Actions')
                                    )
                                );
                                const tbody = $('<tbody>').addClass('bg-white');

                                data.items.forEach(function(user) {
                                    if (user.roles.includes('ROLE_PATIENT')){
                                    const row = $('<tr>').addClass('userRow border justify-center').append(
                                        $('<td>').addClass('firstNameColumn border text-4xl lg:text-base py-6').text(user.firstName),
                                        $('<td>').addClass('lastNameColumn border text-4xl lg:text-base py-6').text(user.lastName),
                                        $('<td>').addClass('emailColumn border text-4xl lg:text-base py-6').text(user.email),
                                        $('<td>').addClass('rolesColumn border text-4xl lg:text-base py-6').text(user.roles[0]),
                                        $('<td>').addClass('actionsColumn border text-4xl lg:text-base py-6').append(
                                            $('<div>').addClass('flex flex-col lg:flex-row justify-center').append(
                                                $('<form>').attr('action', '{{ path('app_user_show', {'id': '__user_id__'}) }}'.replace('__user_id__', user.id)).attr('method', 'get').append(
                                                    $('<button>').attr('type', 'submit').addClass('font-semibold text-3xl lg:text-lg btn bg-blue-300 py-2 lg:py-4 px-4 m-2 rounded shadow-sm').text('Voir')
                                                ),
                                                $('<form>').attr('action', '{{ path('app_appointment_show', {'user': '__user_id__'}) }}'.replace('__user_id__', user.id)).attr('method', 'get').append(
                                                    $('<button>').attr('href', '{{ path('app_appointment_show', {'user': '__user_id__'}) }}'.replace('__user_id__', user.id)).addClass('font-semibold text-3xl lg:text-lg btn bg-orange-300 py-2 lg:py-4 px-4 m-2 rounded shadow-sm').text('Ses rendez-vous')
                                                )
                                            )
                                        )
                                    );
                                    tbody.append(row);
                                }
                                });

                                table.append(thead).append(tbody);
                                $('#searchResults').append(table);
                            } else {
                                $('#searchResults').append('<p class="text-center text-red-500">Aucun utilisateur trouvé.</p>');
                            }
                        },
                        error: function(error) {
                            console.error('Erreur lors de la récupération des utilisateurs :', error);
                        }
                    });
                }
            });
        });
    </script>

{% endblock %}