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

{% block title %}📣 Sortie.com Admin City 🔊{% 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 villes</h1>

            <!-- Actions: Ajouter -->
            <div class="mb-4">
                <!-- Bouton pour ouvrir la modale -->
                <button id="openModal" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
                    Ajouter une ville
                </button>
            </div>

            <!-- Participants Table -->
            <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">Nom</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Code postal</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 city in citys %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ city.nom }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ city.codePostal }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="{{ path('app_adminCityDelete', {'id': city.idVille}) }}" class="text-red-600 hover:text-red-900 ml-4">Supprimer</a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="8" class="px-6 py-4 text-center text-gray-500">Aucune ville trouvée</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Modale pour ajouter une ville -->
        <div id="cityModal" 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 une ville</h2>
                    <form id="addCityForm" method="POST" action="{{ path('app_adminCityAdd') }}">
                        <div class="mb-4">
                            <label for="postalCode" class="block text-sm font-medium text-gray-700">Code postal</label>
                            <input id="postalCode" name="postalCode" 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="citySelect" class="block text-sm font-medium text-gray-700">Sélectionner une ville</label>
                            <select id="citySelect" name="citySelect" 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>
                                <!-- Options will be populated dynamically based on postal code -->
                            </select>
                        </div>

                        <div class="flex justify-end">
                            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">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>

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

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

            // Fonction pour charger les villes en fonction du code postal en utilisant l'API Carto
            document.getElementById('postalCode').addEventListener('input', function() {
                const postalCode = this.value;
                const citySelect = document.getElementById('citySelect');

                if (postalCode.length >= 3) {
                    // URL de l'API Carto pour récupérer les villes en fonction du code postal
                    const apiUrl = `https://api-adresse.data.gouv.fr/search/?q=${postalCode}&type=municipality&limit=10`;

                    fetch(apiUrl)
                        .then(response => response.json())
                        .then(data => {
                            // Clear previous options
                            citySelect.innerHTML = '';

                            // Ajouter des nouvelles options de villes dans la liste déroulante
                            data.features.forEach(feature => {
                                const option = document.createElement('option');
                                option.value = feature.properties.label;
                                option.textContent = feature.properties.label; // Nom de la ville
                                citySelect.appendChild(option);
                            });
                        })
                        .catch(error => console.error('Erreur:', error));
                } else {
                    // Clear options si le code postal est trop court
                    citySelect.innerHTML = '';
                }
            });
        </script>
    </div>
{% endblock %}