<!DOCTYPE html>
<html class="light" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Inscription des Enfants à l'Arbre de Noël 2025</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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=Public+Sans:wght@400;500;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>

<script id="tailwind-config">
         tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": {
                            DEFAULT: "#B32E37",
                            "light": "#f8f0f0"
                        },
                        "secondary": "#003366",
                        "accent": "#D4AF37",
                        "background-light": "#F8F8F8",
                        "background-dark": "#1a1a2e",
                        "text-light": "#003366",
                        "text-dark": "#F8F8F8",
                        "text-muted-light": "#A9A9A9",
                        "text-muted-dark": "#A9A9A9",
                        "border-light": "#e0e0e0",
                        "border-dark": "#4a4a6a"
                    },
                    fontFamily: {
                        display: ["Public Sans", "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 font-display text-text-light dark:text-text-dark">
<div class="relative flex min-h-screen w-full flex-col bg-cover bg-center bg-no-repeat" data-alt="Soft-focus background of Christmas lights and ornaments creating a festive bokeh effect." style='background-image: linear-gradient(rgba(248, 248, 248, 0.8) 0%, rgba(248, 248, 248, 0.95) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuBvghBniI6158YXRXWGvjsWDd2mQWtxD81tuvZxtTqjBIY8Al8GK2zCWi1TaP9s8BKKBDXHCC5OuI7wY_0tJ5qaiwI-ireBYfB62xqSXl4mXrjiEntsAly4ujeN6CNVnbzXM8yMrbJwkU9t7FOe3b6Vc7TnpAA_cbrn9_4xxQUV4tqPO9BIX9Q3dO53dqFODPwewW2P3X3l_krw0VpaU1Lc_XcHWxrubFZrWQf9lvGadKDCUq16tpY_US0YqnlyIEPZS2odkCPhd-o");'>
<div class="layout-container flex h-full grow flex-col">
<div class="flex flex-1 justify-center py-5 md:px-10 lg:px-40">
<div class="layout-content-container flex flex-col max-w-[960px] flex-1">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-primary/20 dark:border-primary/30 px-4 md:px-10 py-3">
<div class="flex items-center gap-4 text-slate-800 dark:text-slate-200">
<img alt="Logo MEN" class="h-12 w-12" src="<?=base_url()?>assets/img/MEN.jpg"/>
<div>
<h1 class="text-sm font-bold text-slate-800 dark:text-slate-200">Ministère de l'Éducation Nationale</h1>
<p class="text-xs text-slate-500 dark:text-slate-400">République du Sénégal</p>
</div>
</div>
<div class="hidden md:flex items-center gap-6">
<nav class="flex items-center gap-6 text-sm font-medium">
<a class="text-slate-700 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors" href="/ArbreNoel">Accueil</a></nav>
<?php if (isset($user) && $user['status'] === 'admin'): ?>
    <a class="text-slate-700 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors" href="/ArbreNoel/statistique">Statistiques des inscrits</a>
    <?php endif; ?>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" data-alt="Avatar of the user" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAZyy5bIwnEq5mNqTw4xOsprMPznBbmlZIO4O73gBUuGaPBobpJaxV8MP5cnYl592KTEhyxjBJeCOk7vRqJlhh1yyv3VDr8UQySTSHUhbnaFHXuyc76-XGl4rxwLrxnBx49iLhqsAS9Qg7CrNjiYp4EVebpCSclbRkoor1FERcgQjFnzdgCc4AaZiDN4LdDn5Ri1wevXMJSPa-4ikJeq1XMje89DD2IEFgp3en8SNVRmxe9OMQvT9dydf5wDXRrat_5n1AIqHNejvU");'></div>
</div>
<button class="md:hidden text-slate-800 dark:text-slate-200">
<span class="material-symbols-outlined">menu</span>
</button>
</header>
<main class="flex flex-col gap-8 p-4 md:p-8">
<div class="flex flex-wrap justify-between gap-3">
<div class="flex w-full flex-col gap-3">
<p class="text-slate-900 dark:text-white text-4xl font-black leading-tight tracking-[-0.033em]">Inscription des Enfants à l'Arbre de Noël 2025</p>
<p class="text-slate-500 dark:text-slate-400 text-base font-normal leading-normal">Veuillez remplir les informations ci-dessous pour inscrire votre enfant.</p>
</div>
</div>
<?php $u = $user; ?>
<form class="flex flex-col gap-8" action="<?= base_url('ArbreNoel/inscription') ?>" method="post">
<div class="flex flex-col gap-6 rounded-xl border border-primary/20 dark:border-primary/30 bg-white/50 dark:bg-background-dark/50 p-6 md:p-8">
<h2 class="text-slate-900 dark:text-white text-[22px] font-bold leading-tight tracking-[-0.015em] flex items-center gap-3">
<span class="material-symbols-outlined text-primary">person</span>
                                    Informations de l'Agent
                                </h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2" name="Enf_prenom">Prénom</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-slate-100 dark:bg-slate-800 h-14 placeholder:text-slate-400 dark:placeholder:text-slate-500 p-[15px] text-base font-normal leading-normal cursor-not-allowed" disabled=""  value="<?= esc($u['prenom']) ?>" name="prenom" readonly/>
</label>
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Nom</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-slate-100 dark:bg-slate-800 h-14 placeholder:text-slate-400 dark:placeholder:text-slate-500 p-[15px] text-base font-normal leading-normal cursor-not-allowed" disabled="" value="<?= esc($u['nom']) ?>" name="nom" readonly/>
</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Matricule</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-slate-100 dark:bg-slate-800 h-14 placeholder:text-slate-400 dark:placeholder:text-slate-500 p-[15px] text-base font-normal leading-normal cursor-not-allowed" disabled="" value="<?= esc($u['matricule']) ?>" name="matricule" readonly/>
</label>
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Direction / Service</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-slate-100 dark:bg-slate-800 h-14 placeholder:text-slate-400 dark:placeholder:text-slate-500 p-[15px] text-base font-normal leading-normal cursor-not-allowed" disabled="" value="<?= esc($u['NOM_STRUCTURE']) ?>" name="NOM_STRUCTURE" readonly/>

</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Téléphone</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-slate-100 dark:bg-slate-800 h-14 placeholder:text-slate-400 dark:placeholder:text-slate-500 p-[15px] text-base font-normal leading-normal cursor-not-allowed" disabled="" value="<?= esc($u['telephone']) ?>" name="telephone" readonly/>
</label>
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Adresse e-mail professionnelle</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-slate-100 dark:bg-slate-800 h-14 placeholder:text-slate-400 dark:placeholder:text-slate-500 p-[15px] text-base font-normal leading-normal cursor-not-allowed" disabled="" type="email" value="<?= esc($u['email']) ?>" name="email" readonly/>
</label>
</div>
</div>
<div class="flex flex-col gap-6 rounded-xl border border-primary/20 dark:border-primary/30 bg-white/50 dark:bg-background-dark/50 p-6 md:p-8">
<h2 class="text-slate-900 dark:text-white text-[22px] font-bold leading-tight tracking-[-0.015em] flex items-center gap-3">
<span class="material-symbols-outlined text-primary">child_care</span>
                                    Informations de l'Enfant
                                </h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Prénom</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-background-light dark:bg-background-dark focus:border-primary h-14 placeholder:text-slate-400 dark:placeholder:text-slate-500 p-[15px] text-base font-normal leading-normal" placeholder="Entrez le prénom de l'enfant"  type="text" value="<?= esc($u['enf_prenom']) ?>" name="Enf_prenom" required=""/>
</label>
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Nom</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-background-light dark:bg-background-dark focus:border-primary h-14 placeholder:text-slate-400 dark:placeholder:text-slate-500 p-[15px] text-base font-normal leading-normal" placeholder="Entrez le nom de l'enfant" value="<?= esc($u['enf_nom']) ?>" name="Enf_nom" type="text" required=""/>
</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Âge</p>
<select class="form-select flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-background-light dark:bg-background-dark focus:border-primary h-14 p-[15px] text-base font-normal leading-normal" value="<?= esc($u['age']) ?>" required name="Enf_age">
<option value="<?= esc($u['age']) ?>">Choisir...</option>
<option value=1>1 an</option>
<option value=2>2 ans</option>
<option value=3>3 ans</option>
<option value=4>4 ans</option>
<option value=5>5 ans</option>
<option value=6>6 ans</option>
<option value=7>7 ans</option>
<option value=8>8 ans</option>
<option value=9>9 ans</option>
<option value=10>10 ans</option>
<option value=11>11 ans</option>
<option value=12>12 ans</option>
<option value=13>13 ans</option>
<option value=14>14 ans</option>
<option value=15>15 ans</option>
<option value=16>16 ans</option>
</select>
</label>
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Sexe</p>
<select class="form-select flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-background-light dark:bg-background-dark focus:border-primary h-14 p-[15px] text-base font-normal leading-normal" value="<?= esc($u['sexe']) ?>" required="" name="Enf_sexe">
<option value="<?= esc($u['sexe']) ?>">Choisir...</option>
<option value='f'>Féminin</option>
<option value='h'>Masculin</option>
</select>
</label>
</div>
<div class="grid grid-cols-1">
<label class="flex flex-col col-span-1">
<p class="text-slate-800 dark:text-slate-200 text-base font-medium leading-normal pb-2">Type de parent</p>
<select class="form-select flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-800 dark:text-slate-200 focus:outline-0 focus:ring-0 border border-primary/20 dark:border-primary/30 bg-background-light dark:bg-background-dark focus:border-primary h-14 p-[15px] text-base font-normal leading-normal" required="" value="<?= esc($u['type_parent']) ?>" name="Enf_tparent">
<option >Choisir...</option>
<option value='père'>Père</option>
<option value='mère'>Mère</option>
<option value='tuteur'>Tuteur</option>
</select>
</label>
</div>
</div>
<div class="flex flex-col gap-6 rounded-xl border border-primary/20 dark:border-primary/30 bg-white/50 dark:bg-background-dark/50 p-6 md:p-8">
<h2 class="text-slate-900 dark:text-white text-[22px] font-bold leading-tight tracking-[-0.015em] flex items-center gap-3">
<span class="material-symbols-outlined text-primary">verified</span>
                                    Conditions d'Éligibilité
                                </h2>
<div class="flex flex-col gap-4">
<label class="flex items-start gap-3">
<input class="form-checkbox mt-1 h-5 w-5 rounded border-primary/30 text-primary focus:ring-primary focus:ring-offset-background-light dark:focus:ring-offset-background-dark" type="checkbox" required="Vous devez certifier ne pas être admis(e) à la retraite."/>
<span class="text-slate-700 dark:text-slate-300">Je certifie ne pas être admis(e) à la retraite *</span>
</label>
<label class="flex items-start gap-3">
<input class="form-checkbox mt-1 h-5 w-5 rounded border-primary/30 text-primary focus:ring-primary focus:ring-offset-background-light dark:focus:ring-offset-background-dark" type="checkbox" required="Vous devez certifier ne pas être admis(e) à la retraite."/>
<span class="text-slate-700 dark:text-slate-300">Je certifie être actuellement affecté(e) au Ministère de l'Éducation Nationale *</span>
</label>
<label class="flex items-start gap-3">
<input class="form-checkbox mt-1 h-5 w-5 rounded border-primary/30 text-primary focus:ring-primary focus:ring-offset-background-light dark:focus:ring-offset-background-dark" type="checkbox" required="Vous devez certifier ne pas être admis(e) à la retraite."/>
<span class="text-slate-700 dark:text-slate-300">Je certifie ne pas être stagiaire *</span>
</label>
<label class="flex items-start gap-3">
<input class="form-checkbox mt-1 h-5 w-5 rounded border-primary/30 text-primary focus:ring-primary focus:ring-offset-background-light dark:focus:ring-offset-background-dark" type="checkbox" required="Vous devez certifier ne pas être admis(e) à la retraite."/>
<span class="text-slate-700 dark:text-slate-300">Je certifie l'exactitude des informations fournies *</span>
</label>
</div>
</div>
<div class="flex flex-col md:flex-row items-center justify-end gap-4">
<button class="flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-4 text-center text-base font-bold text-white shadow-sm transition-all hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background-light dark:focus:ring-offset-background-dark w-full md:w-auto">
Valider l'Inscription
<span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</form>
</main>
</div>
</div>
<footer class="w-full bg-red-200 mt-auto">
  <div class="w-full px-4 sm:px-6 md:px-8 lg:px-12 py-8">
    <div class="flex flex-col items-center justify-center gap-4 text-center">
      <p class="text-sm text-red-900">Ministère de l'Éducation Nationale - République du Sénégal</p>
      <p class="text-sm text-red-900">AFMEN - Association des Femmes du Ministère de l'Éducation Nationale</p>
      <p class="text-xs text-red-800">© 2025 - Tous droits réservés</p>
    </div>
  </div>
</footer>
</div>
</div></body></html>