<!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 Login - Event Management</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- 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"/>
<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;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    </style>
</head>
<body class="bg-background-light dark:bg-background-dark min-h-screen flex flex-col font-display text-[#111418] dark:text-white">
<div class="flex min-h-screen w-full flex-1">
    <!-- Left Section: Image (Hidden on mobile, visible on lg screens) -->
    <div class="relative hidden w-0 flex-1 lg:block bg-background-dark">
        <div class="absolute inset-0 h-full w-full bg-cover bg-center" data-alt="Abstract view of stage lights and audience at a large conference event" style="background-image: url('assets/img/IMEN.PNG');">
    </div>
    <div class="absolute inset-0 bg-primary/20 mix-blend-multiply"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-background-dark/90 via-transparent to-transparent"></div>
            <div class="absolute bottom-0 left-0 p-12 text-white max-w-xl">
                <h2 class="text-4xl font-bold tracking-tight mb-4">Evenements du Ministére de L'Education national</h2>
                <p class="text-lg text-white/80 font-medium">Regroupement de tous les événements du Ministére dans un seul dashboard.</p>
            </div>
        </div>
        <!-- Right Section: Login Form -->
        <div class="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24 bg-white dark:bg-background-dark border-l border-[#f0f2f4] dark:border-gray-800">
            <div class="mx-auto w-full max-w-sm lg:w-96">
                <!-- Logo & Header -->
                <div class="flex flex-col gap-2 mb-10">
                    <div class="flex items-center gap-3 text-primary mb-2">
                        <div class="size-8">
                            <svg class="w-full h-full" fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                            <path clip-rule="evenodd" d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor" fill-rule="evenodd"></path>
                            </svg>
                        </div>
                        <h2 class="text-[#111418] dark:text-white text-xl font-bold leading-tight">Evenement</h2>
                    </div>
                    <h1 class="text-[#111418] dark:text-white tracking-tight text-3xl font-black leading-tight">Welcome back</h1>
                    <p class="text-[#617589] dark:text-gray-400 text-sm font-normal">Connectez-vous pour accéder à votre dashboard</p>
                </div>
                <?php if (session()->getFlashdata('error')): ?>
                    <p style="color:red"><?= session()->getFlashdata('error') ?></p>
                <?php endif; ?>
                <!-- Form -->
                 
                <form action="<?= base_url('connection') ?>" class="space-y-6" method="post">
                    <!-- Email Field -->
                    <div>
                        <label class="block text-sm font-medium leading-6 text-[#111418] dark:text-white pb-2" for="email">Addresse Email</label>
                        <div class="relative rounded-lg shadow-sm">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                <span class="material-symbols-outlined text-[#617589] dark:text-gray-500" style="font-size: 20px;">mail</span>
                            </div>
                            <input class="form-input block w-full rounded-lg border-0 py-3 pl-10 text-[#111418] ring-1 ring-inset ring-[#dbe0e6] dark:ring-gray-600 placeholder:text-[#617589] dark:placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary dark:bg-background-dark dark:text-white sm:text-sm sm:leading-6" id="email" name="email" placeholder="admin@eventorg.com" type="email"/>
                        </div>
                    </div>
                    <!-- Password Field -->
                    <div>
                        <label class="block text-sm font-medium leading-6 text-[#111418] dark:text-white pb-2" for="password">Mot de passe</label>
                        <div class="relative rounded-lg shadow-sm">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                <span class="material-symbols-outlined text-[#617589] dark:text-gray-500" style="font-size: 20px;">lock</span>
                            </div>
                            <input id="mot_de_passe" class="form-input block w-full rounded-lg border-0 py-3 pl-10 pr-10 text-[#111418] ring-1 ring-inset ring-[#dbe0e6] dark:ring-gray-600 placeholder:text-[#617589] dark:placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary dark:bg-background-dark dark:text-white sm:text-sm sm:leading-6" id="password" name="mot_de_passe" placeholder="Enter your password" type="password"/>
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer">
                                <button id="togglePassword" aria-label="Afficher le mot de passe" class="flex cursor-pointer items-center justify-center pr-4 text-text-muted-light dark:text-text-muted-dark" type="button">
                                <span  id="iconEye" class="material-symbols-outlined">visibility</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div>
                    <div class="flex gap-4 mt-6">

                        <a href="/" class="flex h-12 flex-1 items-center justify-center rounded-lg bg-[#D4A017] px-5 text-base font-bold text-white transition-transform duration-200 hover:scale-105 active:scale-100">
                            Retour
                        </a>

                        <!-- Bouton Se connecter -->
                        <button type="submit" class="flex h-12 flex-1 items-center justify-center justify-center rounded-lg bg-primary px-5 text-base font-bold text-white transition-transform duration-200 hover:scale-105 active:scale-100 dark:bg-accent dark:text-secondary">
                            Se connecter
                        </button>
                        
                    </div>
                </form>
                
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById("togglePassword").addEventListener("click", function() {
       const passwordField = document.getElementById("mot_de_passe");
       const icon = document.getElementById("iconEye");

       if (passwordField.type === "password") {
           // Afficher le mot de passe
           passwordField.type = "text";
           icon.textContent = "visibility_off"; // Change l'icône
       } else {
           // Masquer le mot de passe
           passwordField.type = "password";
           icon.textContent = "visibility"; // Remet l'icône normale
       }
    });
</script>
</body>
</html>