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

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

            <!-- Actions: Ajouter -->
            <div class="mb-4">
                <!-- Bouton pour ouvrir la modale -->
                <button id="openModal" class="btnPrimary">
                    Ajouter un site
                </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">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 site in sites %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ site.nom }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="{{ path('app_adminSiteDelete', {'id': site.idSite}) }}" 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">Aucun site trouvée</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Modale pour ajouter une ville -->
        <div id="siteModal" 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 site</h2>
                    <form id="addSiteForm" method="POST" action="{{ path('app_adminSiteAdd') }}">
                        <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" required>
                        </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('siteModal').classList.remove('hidden');
            });

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

        </script>
    </div>
{% endblock %}