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

{% block body %}
    <h1>{{ title }}</h1>

    <div class="card">
        <div class="card-body">
            {{ form_start(form) }}

            <!-- Recherche Utilisateur -->
            <div class="form-group">
                <label for="user-search">Rechercher un utilisateur</label>
                <input type="text" id="user-search" class="form-control" placeholder="Rechercher par nom ou email...">
                <div id="user-results" class="autocomplete-results"></div>
            </div>

            <!-- Champ caché pour stocker l'ID utilisateur sélectionné -->
            {{ form_widget(form.user, {'attr': {'id': 'user-id'}}) }}

            <!-- Email (pré-rempli mais modifiable) -->
            <div class="form-group">
                <label for="email">Email</label>
                {{ form_widget(form.email, {'attr': {'id': 'email-field'}}) }}
            </div>

            <!-- Raison -->
            <div class="form-group">
                <label for="reason">Raison</label>
                {{ form_widget(form.reason) }}
            </div>

            <!-- Licence et Manifestation -->
            <div class="form-check">
                {{ form_widget(form.licence) }}
                <label for="{{ form.licence.vars.id }}">Licence</label>
            </div>

            <div class="form-check">
                {{ form_widget(form.manifestation) }}
                <label for="{{ form.manifestation.vars.id }}">Manifestation</label>
            </div>

            <!-- Bouton de soumission -->
            <button type="submit" class="btn btn-primary mt-2">Enregistrer</button>

            {{ form_end(form) }}
        </div>
    </div>

    <script>
        // TODO : AMELIORER CE CODE
        document.addEventListener("DOMContentLoaded", function () {
            const searchInput = document.getElementById("user-search");
            const resultsContainer = document.getElementById("user-results");
            const userIdField = document.querySelector("[name='{{ form.user.vars.full_name }}']"); // Champ caché user

            searchInput.addEventListener("input", async function () {
                const query = searchInput.value.trim();
                if (query.length < 2) {
                    resultsContainer.innerHTML = "";
                    return;
                }

                const response = await fetch(`/admin/api/users/search?query=${encodeURIComponent(query)}`);
                const users = await response.json();

                resultsContainer.innerHTML = "";
                resultsContainer.style.display = "block";

                if (users.length === 0) {
                    resultsContainer.innerHTML = "<div class='autocomplete-item no-result'>Aucun utilisateur trouvé</div>";
                    return;
                }

                users.forEach(user => {
                    const div = document.createElement("div");
                    div.textContent = `${user.username} (${user.email})`;
                    div.classList.add("autocomplete-item");
                    div.onclick = () => {
                        searchInput.value = user.username;
                        userIdField.value = user.id;  // Stocke bien l'ID de l'utilisateur dans le champ form.user
                        resultsContainer.innerHTML = "";
                        resultsContainer.style.display = "none"; // Ferme la liste après sélection
                    };
                    resultsContainer.appendChild(div);
                });
            });

            // Cacher la liste des résultats si on clique ailleurs
            document.addEventListener("click", (event) => {
                if (!searchInput.contains(event.target) && !resultsContainer.contains(event.target)) {
                    resultsContainer.style.display = "none";
                }
            });
        });
    </script>


    <style>
        .autocomplete-results {
            position: absolute;
            background: white;
            border: 1px solid #ccc;
            max-height: 200px;
            overflow-y: auto;
            width: 100%;
            z-index: 1000;
            display: none;
            border-radius: 4px;
        }
        .autocomplete-item {
            padding: 8px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
        }
        .autocomplete-item:hover {
            background: #f8f8f8;
        }
        .no-result {
            color: red;
            font-style: italic;
            padding: 8px;
        }
    </style>
{% endblock %}