<!DOCTYPE html>

<html class="light" lang="fr">
    <head>
        <meta charset="utf-8"/>
        <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
        <title>Admin Event List</title>
        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com" rel="preconnect"/>
        <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&amp;display=swap" rel="stylesheet"/>
        <!-- Material Symbols -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
        <!-- Tailwind CSS -->
        <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
        <!-- Tailwind Theme Config -->
        <script id="tailwind-config">
            tailwind.config = {
                darkMode: "class",
                theme: {
                    extend: {
                        colors: {
                            "primary": "#2b8cee",
                            "background-light": "#f6f7f8",
                            "background-dark": "#101922",
                        },
                        fontFamily: {
                            "display": ["Inter", "sans-serif"]
                        },
                        borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
                    },
                },
            }
        </script>
    </head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white font-display overflow-hidden">
    <div class="flex h-screen w-full">
        <!-- Sidebar -->
        <aside class="w-64 flex-shrink-0 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col transition-colors duration-200">
            <div class="p-6 flex items-center gap-3">
                <div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" data-alt="Abstract gradient logo in blue and purple" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCV6amsmvFU7Dgzyug-OUNzXeqQPIyWo4RJpJvmoTsx-X1EDR4iqv1cfkCU4axSFVUwZgpPe5a0O7K6pilbwYF4FdKy9Dc4WsAOQsoBaEe7mZMU5LhzjxWbEmk0SyNzM536lWqvilT4C8yg6jWvW2CJAt-9X9S2D6emkbi-alOB6u8JNrJ6ked9DEALGqySMT9WLRyfmSZVJnHRShlMgNq9zaMdyTpGXlUntVcc3_8_yithpfhT-dCBgaUNc-wkDDiRDCalLX9LK0NP");'></div>
                <div class="flex flex-col">
                    <h1 class="text-slate-900 dark:text-white text-base font-bold leading-normal">Administrateur</h1>
                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal leading-normal">Maintenancier</p>
                </div>
            </div>
            <nav class="flex-1 px-3 py-4 flex flex-col gap-1 overflow-y-auto">
                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors group" href="/">
                    <span class="material-symbols-outlined text-slate-500 group-hover:text-primary">home</span>
                    <span class="text-sm font-medium">Accueil</span>
                </a>
                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/10 text-primary dark:bg-primary/20 dark:text-blue-300 transition-colors" href="/admin">
                    <span class="material-symbols-outlined fill-1">calendar_month</span>
                    <span class="text-sm font-medium">Evenements</span>
                </a>
                <!-- STATISTIQUES -->
                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors group" href="/statistique">
                    <span class="material-symbols-outlined text-slate-500 group-hover:text-primary">bar_chart</span>
                    <span class="text-sm font-medium">Statistiques</span>
                </a>

                <!-- PARAMÈTRES -->
                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors group" href="#">
                    <span class="material-symbols-outlined text-slate-500 group-hover:text-primary">settings</span>
                    <span class="text-sm font-medium">Paramètres</span>
                </a>

            </nav>
            <div class="p-4 border-t border-slate-200 dark:border-slate-700">
                <div class="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
                    <div class="bg-center bg-no-repeat bg-cover rounded-full size-8" data-alt="User profile picture of a smiling man" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDWX0k33qCV1hFITekMrLJYxnuU76P0ek-k_eB9q2ti0SS6Y3JEHTufiWXmgosSGB6_UaA85sHppUQ-PToRWhqIpysHsfhrYOJnBkCAYbHN7VXv6VQickaJzhn9RsXPpFTl-96J3cvIOwA-XGcPETisJaRpSiEr1qOTTC3STXu7cRtZyRjX0WCKjpE8Tk-WvF1btgKPEs32rZzV9ESdaz2XAONpsWS8u8YK3Jta0YLXYSj5xfTJaz-H4tru5UCrnoeWwO98pZPfECgr");'></div>
                    <div class="flex flex-col">
                        <p class="text-slate-900 dark:text-white text-sm font-medium">Tom Cook</p>
                        <p class="text-slate-500 dark:text-slate-400 text-xs">Admin</p>
                    </div>
                </div>
            </div>
        </aside>
        <!-- Main Content -->
        <main class="flex-1 flex flex-col h-full overflow-hidden relative">
            <!-- Scrollable Content Area -->
            <div class="flex-1 overflow-y-auto p-4 md:p-8">
                <div class="max-w-7xl mx-auto flex flex-col gap-6">

                    <!-- Page Header -->
                    <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4">
                        <div class="flex flex-col gap-1">
                            <h2 class="text-slate-900 dark:text-white text-3xl font-bold tracking-tight">Listes des événements</h2>
                            <p class="text-slate-500 dark:text-slate-400 text-base">Suivez et gerez l'ensemble de nos événements, passés et à venir.</p>
                        </div>
                        <button onclick="openEventModal()" class="px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700">
                            <span class="material-symbols-outlined text-[20px]">add</span>
                            <span>Ajout Evenement</span>
                        </button>
                    </div>
                    <!-- Filters -->
                   <div class="bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm flex flex-col md:flex-row gap-4 items-end">
                        <div class="flex-1 w-full">
                            <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1.5 uppercase tracking-wider">Search</label>
                            <div class="relative">
                                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
                                <input class="w-full pl-10 pr-4 py-2.5 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder:text-slate-400 focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm" placeholder="Search by event name..." type="text"/>
                            </div>
                        </div>
                        <div class="w-full md:w-48">
                            <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1.5 uppercase tracking-wider">Date</label>
                            <select class="w-full px-3 py-2.5 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm appearance-none cursor-pointer">
                                <option value="">All Dates</option>
                                <option value="upcoming">Upcoming</option>
                                <option value="past">Past Month</option>
                                <option value="older">Older</option>
                            </select>
                        </div>
                    </div>
                    <!-- Table -->
                    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden flex flex-col">
                        <div class="overflow-x-auto">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="bg-slate-50 dark:bg-slate-700/50 border-b border-slate-200 dark:border-slate-700">
                                        <th class="px-6 py-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Nom evenement</th>
                                        <th class="px-6 py-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Date debut</th>
                                        <th class="px-6 py-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Date fin</th>
                                        <th class="px-6 py-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider hidden lg:table-cell">Description</th>
                                        <th class="px-6 py-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider text-right">Actions</th>
                                    </tr>
                                </thead>
                            <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                            <!-- Row 1 -->
                            <?php if (!empty($evenements)) : ?>
                                <?php foreach ($evenements as $event) : ?>
                                    <tr class="group hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors">
                                        <td class="px-6 py-4"><div class="flex flex-col"> <span ><?= esc($event['libelle']) ?></span></div></td>
                                        <td class="px-6 py-4"><div class="flex items-center gap-2 text-slate-600 dark:text-slate-300 text-sm"><span ><?= esc($event['date_debut']) ?></span></div></td>
                                        <td class="px-6 py-4"><div class="flex items-center gap-2 text-slate-600 dark:text-slate-300 text-sm"><span><?= esc($event['date_fin']) ?></span></div></td>
                                        <td class="px-6 py-4"><div class="flex items-center gap-2 text-slate-600 dark:text-slate-300 text-sm"><span ><?= esc($event['description']) ?></span></div></td>

                                        <td class="px-6 py-4 text-right">
                                            <div class="flex justify-end items-center gap-2">
                                                <button class="p-1.5 text-slate-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"><span class="material-symbols-outlined text-[20px]">edit</span></button>
                                                <button class="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"><span class="material-symbols-outlined text-[20px]">delete</span></button>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- fin row -->
                                <?php endforeach; ?>
                            <?php endif; ?>
                            <!-- Pagination -->
                            <div class="flex items-center justify-between px-6 py-4 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700">
                                <p class="text-sm text-slate-500 dark:text-slate-400">Showing <span class="font-medium text-slate-900 dark:text-white">1</span> to <span class="font-medium text-slate-900 dark:text-white">5</span> of <span class="font-medium text-slate-900 dark:text-white">12</span> results</p>
                                <div class="flex items-center gap-2">
                                    <button class="p-2 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" disabled=""><span class="material-symbols-outlined text-[20px] block">chevron_left</span></button>
                                    <button class="p-2 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"><span class="material-symbols-outlined text-[20px] block">chevron_right</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
             </div>    
        </main>
    </div>

    <!-- MODAL AJOUT EVENEMENT -->
    <div id="eventModal"
        class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 backdrop-blur-sm">

        <div class="bg-white w-full max-w-2xl rounded-2xl shadow-xl p-6">

            <!-- HEADER -->
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-semibold">Ajouter un événement</h2>
                <button onclick="closeEventModal()"
                    class="text-slate-500 hover:text-red-500 text-2xl">&times;</button>
            </div>

            <!-- FORM -->
            <form action="ajEvenement" method="post" enctype="multipart/form-data" class="space-y-6">

                <!-- Nom -->
                <div>
                    <label class="block text-sm font-medium mb-1">Nom de l’événement</label>
                    <input type="text" name="nom_evenement" placeholder="Ex : Arbre de Noël" class="w-full rounded-xl border px-4 py-3 focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- Dates -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium mb-1">Date de début</label>
                        <input type="date" name="date_debut" class="w-full rounded-xl border px-4 py-3">
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1">Date de fin</label>
                        <input type="date" name="date_fin" class="w-full rounded-xl border px-4 py-3">
                    </div>
                </div>

                <!-- Description -->
                <div>
                    <label class="block text-sm font-medium mb-1">Description</label>
                    <textarea name="description" rows="4" placeholder="Décrivez l’événement..." class="w-full rounded-xl border px-4 py-3"></textarea>
                </div>

                <!-- Image -->
                <div>
                    <label class="block text-sm font-medium mb-2">Image</label>
                    <label class="flex flex-col items-center justify-center gap-2 p-6 border-2 border-dashed rounded-xl cursor-pointer hover:border-blue-500 transition">
                        <span class="material-symbols-outlined text-blue-600 text-3xl">upload</span>
                        <span class="text-sm text-slate-600 text-center"> Cliquez pour choisir une image<br>
                        <span class="text-xs">PNG, JPG — max 5MB</span>
                        </span>
                        <input type="file" name="image" accept="image/*" class="hidden">
                    </label>
                </div>

                <!-- FOOTER -->
                <div class="flex justify-end gap-4 pt-6 border-t"> 
                    <button type="button" onclick="closeEventModal()" class="px-6 py-3 rounded-xl border">Annuler</button>

                    <button type="submit" class="px-6 py-3 rounded-xl bg-blue-600 text-white font-medium hover:bg-blue-700"> Enregistrer</button>
                </div>

            </form>
        </div>
    </div>

    <script>
        function openEventModal() {
            document.getElementById('eventModal').classList.remove('hidden');
            document.getElementById('eventModal').classList.add('flex');
        }

        function closeEventModal() {
            document.getElementById('eventModal').classList.add('hidden');
            document.getElementById('eventModal').classList.remove('flex');
        }
    </script>


</body>
</html>