<!DOCTYPE html>

<html class="light" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Public Event Listing</title>
<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" 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"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
<style>
        body {
            font-family: 'Inter', sans-serif;
        }
.marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;      /* centre verticalement */
    justify-content: center;  /* centre le track */
}


.marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 0 auto;
    animation: marquee-pro 30s linear infinite;
}


.marquee__item {
    display: inline-flex;
    align-items: center;
    padding: 0 3rem;
    white-space: nowrap;
    font-weight: 600;
}

/* Animation infinie */
@keyframes marquee-pro {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}


/* Pause au survol */
.marquee:hover .marquee__track {
    animation-play-state: paused;
}

    </style>
</head>
<body class="bg-background-light dark:bg-background-dark">
    <div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden font-display text-[#111418]">
    <!-- Navbar -->
        <header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f0f2f4] bg-white px-4 py-3 lg:px-10">
            <div class="flex items-center gap-4 lg:gap-8">
                <div class="flex items-center gap-2 text-[#111418]">
                    <div class="size-8 text-primary">
                        <img src="<?= base_url('assets/img/MEN.jpg') ?>" alt="Mon logo" class="h-8 w-30 object-contain">
                    </div>
                    <h2 class="text-lg font-bold leading-tight tracking-[-0.015em] hidden sm:block">Evenement MEN</h2>
                   
                </div>
            </div>
            <div class="flex flex-1 justify-end gap-4 lg:gap-8 items-center">
                <div class="hidden md:flex items-center gap-6">
                    <a class="text-sm font-medium leading-normal hover:text-primary transition-colors" href="/">Acceuil</a>
                    <a class="text-primary transition-colors text-sm font-medium border-b-2 border-primary" href="totalEvenement">All Events</a>
                </div>
            </div>
             
        </header>
        <!-- Main Content -->
        <main class="flex-1 flex flex-col items-center py-5 px-4 md:px-10 lg:px-20 xl:px-40 w-full">
            <div class="layout-content-container flex flex-col w-full max-w-[1200px] flex-1">
                <!-- Hero Section -->
                <div class="@container mb-8">
                    
                        <!-- SECTION RECHERCHE (remplace l'image) -->
                        <div class="flex min-h-[200px] w-full flex-col items-center justify-center rounded-xl p-8 text-center relative bg-gray-75">

                            <!-- TITRE -->
                            <div class="mb-6 max-w-3xl">
                                <h1 class="text-gray-800 text-2xl md:text-4xl font-black leading-tight"> Rechercher un événement </h1>
                                <p class="text-gray-600 mt-2 text-lg">
                                    Trouvez rapidement les événements du Ministère de l’Éducation Nationale
                                </p>
                            </div>
                            
                    <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">
                            <form action="<?= base_url('recherche') ?>" method="post">
                            <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 type="text" name="recherche" placeholder="Nom, description, mot-clé..."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" />
                            </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>
                            <button type="submit" class="px-8 bg-gray-400 hover:bg-gray-700 text-white font-semibold text-lg transition">
                                    🔍 Rechercher
                                </button>
                        </div>
                    </div>
                                <input type="text" name="recherche" placeholder="Nom, description, mot-clé..." class="flex-1 px-6 py-4 text-lg text-gray-700 outline-none">
                                
                            </form>
                        </div>                    

                    <!-- Filters & Headline -->
                    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 pb-6 border-b border-[#f0f2f4] mb-8">
                        <div>
                            <h1 class="text-[#111418] tracking-tight text-[32px] font-bold leading-tight">Les Evenements du Ministère</h1>
                            <p class="text-[#617589] text-base mt-1">Found 24 events in your area</p>
                        </div>
                        <div class="flex gap-2 overflow-x-auto pb-2 lg:pb-0 scrollbar-hide">
                            <button class="flex h-10 shrink-0 items-center justify-center gap-x-2 rounded-full bg-[#111418] text-white pl-5 pr-4 transition-colors">
                              <p class="text-sm font-medium leading-normal">All</p>
                            </button>
                            <button class="flex h-10 shrink-0 items-center justify-center gap-x-2 rounded-full bg-white border border-[#e5e7eb] pl-5 pr-4 hover:bg-[#f9fafb] transition-colors group">
                                <p class="text-[#111418] text-sm font-medium leading-normal">Today</p>
                                <span class="material-symbols-outlined text-[#617589] text-[20px] group-hover:text-[#111418]">expand_more</span>
                            </button>
                            <button class="flex h-10 shrink-0 items-center justify-center gap-x-2 rounded-full bg-white border border-[#e5e7eb] pl-5 pr-4 hover:bg-[#f9fafb] transition-colors group">
                                <p class="text-[#111418] text-sm font-medium leading-normal">Price</p>
                                <span class="material-symbols-outlined text-[#617589] text-[20px] group-hover:text-[#111418]">expand_more</span>
                            </button>
                        </div>
                    </div>
                    <!-- Event Grid -->
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        <?php if (!empty($evenements)) : ?>
                            <?php foreach ($evenements as $event) : ?>
                               <!-- Card 1 -->
                                <div class="flex flex-col overflow-hidden rounded-xl bg-white shadow-sm hover:shadow-md transition-shadow border border-[#f0f2f4]">
                                    
                                    <div class="relative w-full aspect-video bg-gray-100">
                                        <div class="absolute inset-0 bg-cover bg-center" data-alt="People collaborating at a tech conference table" style="background-image: url('<?= base_url('uploads/evenements/' . $event['image']) ?>');">
                                        </div>
                                        <div class="absolute top-3 left-3 bg-white/90 backdrop-blur-sm px-2 py-1 rounded text-xs font-bold text-[#111418] shadow-sm uppercase tracking-wide">
                                            <?php
                                               $dateFin = new DateTime($event['date_fin']);
                                               $today   = new DateTime();

                                               if ($dateFin >= $today) {
                                                   $statut = "En cours";
                                                   $class  = "bg-green-600 text-white";
                                                } else {
                                                    $statut = "Terminé";
                                                    $class  = "bg-red-600 text-white";
                                                }
                                            ?>
                                            <div class="absolute top-3 left-3">
                                                <span class="<?= $class ?> px-3 py-1 rounded-full text-xs font-bold shadow-md uppercase tracking-wide whitespace-nowrap">
                                                     <?= $statut ?>
                                                </span>
                                            </div>                                                                                
                                        </div>
                                    </div>
                                    <div class="flex flex-col p-4 gap-3 flex-1">
                                        <div class="flex justify-between items-start">
                                            <p class="text-primary text-sm font-bold uppercase tracking-wide"><?= esc($event['libelle']) ?></p>
                                        </div>
                                        <h3 class="text-[#111418] text-lg font-bold leading-tight line-clamp-2 hover:text-primary cursor-pointer transition-colors">
                                            <?= esc($event['description']) ?>
                                        </h3>
                                        <div class="flex flex-col gap-1 mt-auto">
                                            <div class="flex items-center gap-2 text-[#617589]">
                                                <span class="material-symbols-outlined text-[18px]">location_on</span>
                                                <p class="text-sm font-normal truncate">San Francisco Convention Center</p>
                                            </div>
                                            <div class="flex items-center gap-2 text-[#617589]">
                                                <span class="material-symbols-outlined text-[18px]">event</span>
                                                <p class="text-sm font-normal"><?= esc($event['date_debut']) ?> → <?= esc($event['date_fin']) ?></p>
                                            </div>

                                        </div>
                                    
                                        <form action=<?= esc($event['libelle']) ?>>
                                            <button class="mt-2 w-full flex items-center justify-center rounded-lg h-9 bg-[#f0f2f4] text-[#111418] text-sm font-medium hover:bg-[#e5e7eb] transition-colors" type="submit">
                                            Voir Evenement</button>
                                        </form>
                                    </div>

                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </main>
    <!-- Footer -->
        <footer class="bg-white dark:bg-zinc-950 border-t border-[#e7f3e7] dark:border-white/10 pt-16 pb-12 px-4 md:px-40">
        <div class="max-w-[1200px] mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
                <div class="space-y-4">
                    <div class="flex items-center gap-3">
                        <div class="bg-primary/10 p-2 rounded-lg text-primary">
                            <span class="material-symbols-outlined">account_balance</span>
                        </div>
                        <h3 class="font-bold text-lg">Sphère Ministère de l'Éducation nationale</h3>
                    </div>
                    <p class="text-sm text-zinc-500 leading-relaxed">
                        Sphère ministérielle de Diamniadio<br />
                        Dakar, Sénégal<br />
                        Tel: (+221) 33 849 54 54
                    </p>
                </div>
                <div>
                    <h3 class="font-bold text-lg mb-4">Liens Utiles</h3>
                    <ul class="space-y-2 text-sm text-zinc-500 font-medium">
                        <li><a class="hover:text-primary transition-colors" href="#">Programme des Assises</a></li>
                        <li><a class="hover:text-primary transition-colors" href="#">Documentation technique</a></li>
                        <li><a class="hover:text-primary transition-colors" href="#">FAQ</a></li>

                    </ul>
                </div>
                <div>
                    <h3 class="font-bold text-lg mb-4">Nous suivre</h3>
                    <div class="flex gap-4">
                        <!-- Facebook -->
                        <a href="https://www.facebook.com" target="_blank" rel="noopener"
                            class="w-10 h-10 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition-all">
                            <!-- Logo SVG Facebook -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                class="w-5 h-5">
                                <path
                                    d="M22 12c0-5.522-4.477-10-10-10S2 6.478 2 12c0 5 3.657 9.128 8.438 9.879v-6.987H7.898v-2.892h2.54V9.845c0-2.507 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562v1.875h2.773l-.443 2.892h-2.33v6.987C18.343 21.128 22 17 22 12z" />
                            </svg>
                        </a>

                        <!-- Twitter -->
                        <a href="https://www.twitter.com" target="_blank" rel="noopener"
                            class="w-10 h-10 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center text-sky-500 hover:bg-sky-500 hover:text-white transition-all">
                            <!-- Logo SVG Twitter -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                class="w-5 h-5">
                                <path
                                    d="M24 4.557a9.83 9.83 0 0 1-2.828.775 4.932 4.932 0 0 0 2.165-2.724 9.864 9.864 0 0 1-3.127 1.195 4.918 4.918 0 0 0-8.384 4.482A13.944 13.944 0 0 1 1.671 3.149 4.917 4.917 0 0 0 3.195 9.72a4.903 4.903 0 0 1-2.229-.616v.062a4.918 4.918 0 0 0 3.946 4.827 4.902 4.902 0 0 1-2.224.085 4.919 4.919 0 0 0 4.593 3.417 9.867 9.867 0 0 1-6.102 2.104c-.396 0-.788-.023-1.175-.069a13.945 13.945 0 0 0 7.548 2.212c9.057 0 14.01-7.512 14.01-14.01 0-.213-.004-.425-.014-.636A10.025 10.025 0 0 0 24 4.557z" />
                            </svg>
                        </a>

                        <!-- YouTube -->
                        <a href="https://www.youtube.com" target="_blank" rel="noopener"
                            class="w-10 h-10 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center text-red-600 hover:bg-red-600 hover:text-white transition-all">
                            <!-- Logo SVG YouTube -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                class="w-5 h-5">
                                <path
                                    d="M23.498 6.186a2.965 2.965 0 0 0-2.088-2.096C19.57 3.5 12 3.5 12 3.5s-7.57 0-9.41.59a2.965 2.965 0 0 0-2.088 2.096A30.05 30.05 0 0 0 0 12a30.05 30.05 0 0 0 .502 5.814 2.965 2.965 0 0 0 2.088 2.096c1.84.59 9.41.59 9.41.59s7.57 0 9.41-.59a2.965 2.965 0 0 0 2.088-2.096A30.05 30.05 0 0 0 24 12a30.05 30.05 0 0 0-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                            </svg>
                        </a>
                    </div>


                </div>
            </div>
            <div
                class="border-t border-zinc-100 dark:border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="flex items-center gap-4">
                    <div class="bg-primary/10 p-2 rounded-lg text-primary">
                        <span class="material-symbols-outlined text-sm">shield</span>
                    </div>
                    <p class="text-xs text-zinc-400 font-medium">© 2024 République du Sénégal - Ministère de l'Éducation
                        nationale</p>
                </div>
                <p class="text-[10px] uppercase tracking-[0.2em] font-bold text-zinc-300">Un Peuple • Un But • Une Foi
                </p>
            </div>
        </div>
    </footer>
</div>
</body>
</html>