<!DOCTYPE html>
<html class="light" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Arbre de Noël du Ministère</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>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": {
                            DEFAULT: "#B32E37",
                            "light": "#f8f0f0"
                        },
                        "secondary": "#003366",
                        "accent": "#e28989ff",
                        "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="font-display bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark">
<div class="relative flex min-h-screen w-full flex-col">
<header class="fixed top-0 z-50 w-full border-b border-border-light bg-background-light/95 backdrop-blur-sm dark:border-border-dark dark:bg-background-dark/95">
<div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-3">
<div class="flex items-center gap-4">
<img alt="Logo MEN" class="h-14 w-14" 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 font-medium text-text-light/80 dark:text-text-dark/80">République du Sénégal</p>
</div>
</div>
<div class="flex items-center gap-6">
<nav class="hidden items-center gap-6 md:flex">
<a class="text-sm font-medium text-text-light hover:text-primary dark:text-text-dark dark:hover:text-primary" href="/ArbreNoel">Accueil</a>
<a class="text-sm font-medium text-primary dark:text-primary" href="/ArbreNoel/statistique">Statistiques des inscrits</a>
</nav>
<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>
</div>
</header>
<main class="mx-auto w-full max-w-7xl flex-1 px-6 py-8 pt-28">
<div class="flex flex-col gap-8">
<div class="flex flex-wrap items-center justify-between gap-4">
<h2 class="text-4xl font-black tracking-tighter">Tableau de Bord des Inscriptions</h2>
</div>
<div class="flex flex-wrap items-center gap-3">
<p class="text-sm font-medium">Filtrer par :</p>
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-card-light dark:bg-card-dark pl-4 pr-3 border border-border-light dark:border-border-dark hover:border-primary/50 dark:hover:border-primary/50">
<p class="text-sm font-medium">Par service</p>
<span class="material-symbols-outlined text-lg">arrow_drop_down</span>
</button>
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-card-light dark:bg-card-dark pl-4 pr-3 border border-border-light dark:border-border-dark hover:border-primary/50 dark:hover:border-primary/50">
<p class="text-sm font-medium">Par date</p>
<span class="material-symbols-outlined text-lg">arrow_drop_down</span>
</button>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col gap-2 rounded-xl bg-card-light dark:bg-card-dark p-6 border border-border-light dark:border-border-dark shadow-sm">
<div class="flex items-center justify-between">
<p class="text-base font-medium">Enfants Inscrits</p>
<span class="material-symbols-outlined text-accent">child_care</span>
</div>
<p class="text-4xl font-bold tracking-tight"><?= $total_enfants ?></p>
</div>
<div class="flex flex-col gap-2 rounded-xl bg-card-light dark:bg-card-dark p-6 border border-border-light dark:border-border-dark shadow-sm">
<div class="flex items-center justify-between">
<p class="text-base font-medium">Total Filles</p>
<span class="material-symbols-outlined text-accent">groups</span>
</div>
<p class="text-4xl font-bold tracking-tight"><?= $gender['filles'] ?></p>
</div>
<div class="flex flex-col gap-2 rounded-xl bg-card-light dark:bg-card-dark p-6 border border-border-light dark:border-border-dark shadow-sm">
<div class="flex items-center justify-between">
<p class="text-base font-medium">Total Garçons</p>
<span class="material-symbols-outlined text-accent">family_restroom</span>
</div>
<p class="text-4xl font-bold tracking-tight"><?= $gender['garcons'] ?></p>
</div>
<div class="flex flex-col gap-2 rounded-xl bg-card-light dark:bg-card-dark p-6 border border-border-light dark:border-border-dark shadow-sm">
<div class="flex items-center justify-between">
<p class="text-base font-medium">Personnel Inscriptions</p>
<span class="material-symbols-outlined text-accent">task_alt</span>
</div>
<p class="text-4xl font-bold tracking-tight"><?= $total_personnel ?></p>
</div>
</div>
<?php if (session()->getFlashdata('success')): ?>
    <div class="bg-green-100 text-green-800 p-3 rounded mb-4">
        <?= session()->getFlashdata('success') ?>
        </div>
<?php endif;  ?>      
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
<div class="flex flex-col gap-4 rounded-xl border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark p-6 lg:col-span-2 shadow-sm">
<div class="portlet-body">
 <h3 class="portlet-title text-dark text-uppercase">Statistiques Garçons / Filles</h3>
<canvas id="ageSexeChart" height="120"></canvas>

</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark p-6 shadow-sm">
<div class="flex flex-col">
<p class="text-lg font-bold">Répartition par Sexe</p>
<p class="text-sm text-text-light/70 dark:text-text-dark/70">Pourcentage de filles et garçons</p>
</div>
<div class="flex h-full min-h-[240px] items-center justify-center">
<div class="relative flex size-48 items-center justify-center">

<?php if ($pourcentageGarcons > $pourcentageFilles): ?>
<svg class="size-full origin-center -rotate-90" viewBox="0 0 36 36">
<circle class="text-primary/20 dark:text-primary/40" cx="18" cy="18" fill="none" r="16" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-secondary dark:text-secondary/80" cx="18" cy="18" fill="none" r="16" stroke="currentColor" stroke-dasharray="<?= $pourcentageGarcons ?>, 100" stroke-linecap="round" stroke-width="4"></circle>
</svg>
<div class="absolute flex flex-col items-center">
    <span class="text-3xl font-bold"><?= $pourcentageGarcons ?> %</span>
    <span class="text-sm">Garçons</span>

<?php elseif ($pourcentageFilles > $pourcentageGarcons): ?>
<svg class="size-full origin-center -rotate-90" viewBox="0 0 36 36">
<circle class="text-primary/20 dark:text-primary/40" cx="18" cy="18" fill="none" r="16" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-secondary dark:text-secondary/80" cx="18" cy="18" fill="none" r="16" stroke="currentColor" stroke-dasharray="<?= $pourcentageFilles ?>, 100" stroke-linecap="round" stroke-width="4"></circle>
</svg>
<div class="absolute flex flex-col items-center">
    <span class="text-3xl font-bold"><?= $pourcentageFilles ?> %</span>
    <span class="text-sm">Filles</span>

<?php else: ?>
<svg class="size-full origin-center -rotate-90" viewBox="0 0 36 36">
<circle class="text-primary/20 dark:text-primary/40" cx="18" cy="18" fill="none" r="16" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-secondary dark:text-secondary/80" cx="18" cy="18" fill="none" r="16" stroke="currentColor" stroke-dasharray="<?= $pourcentageGarcons ?>, 100" stroke-linecap="round" stroke-width="4"></circle>
</svg>
<div class="absolute flex flex-col items-center">
    <span class="text-3xl font-bold"><?= $pourcentageGarcons ?> %</span>
    <span class="text-sm">Garçons & Filles</span>
<?php endif; ?>

</div>
</div>
</div>
<div class="flex items-center justify-center gap-6 text-sm">
<div class="flex items-center gap-2">
<div class="size-3 rounded-full bg-secondary"></div><span>Garçons (<?= $pourcentageGarcons ?> %)</span>
</div>
<div class="flex items-center gap-2">
<div class="size-3 rounded-full bg-primary/20 dark:bg-primary/40"></div><span>Filles (<?= $pourcentageFilles ?> %)</span>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark p-6 shadow-sm">
<div class="flex flex-col">
<p class="text-lg font-bold">Les Agents Inscrits</p>
<p class="text-sm text-text-light/70 dark:text-text-dark/70">Dernières inscriptions enregistrées par département</p>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm">
<thead class="border-b border-border-light dark:border-border-dark">
<tr>
<th class="p-3 font-medium">Service / Département</th>
<th class="p-3 font-medium">Agent</th>
<th class="p-3 text-center font-medium">Téléphone</th>
<th class="p-3 text-right font-medium">Date d'inscription</th>
</tr>
</thead>
<tbody>
<?php foreach ($agents as $row): ?>
<tr class="border-b border-border-light dark:border-border-dark">
    <td class="p-3"><?= esc($row['NOM_STRUCTURE']); ?></td>
    <td class="p-3"><?= esc($row['prenom']); ?> <?= esc($row['nom']); ?></td>
    <td class="p-3 text-center"><?= esc($row['telephone']); ?></td>
    <td class="p-3 text-right"><?= esc($row['created_at']); ?></td>
    <td class="p-3 text-center space-x-2">
        <a href="<?= base_url('ArbreNoel/modificationEnfant/' . $row['id']) ?>" class="px-3 py-1 text-white rounded text-sm" style="background-color: #18184eff; hover:background-color: #141416ff;">Modifier</a>
        <form action="<?= base_url('ArbreNoel/supprimer/' . $row['id']) ?>" method="post" class="inline" onsubmit="return confirm('Voulez-vous vraiment supprimer cet agent ?');"> <?= csrf_field() ?>
        <button type="submit" class="px-3 py-1 text-white rounded text-sm" style="background-color: #d66f6fff; hover:background-color: #141416ff;">Supprimer</button>
        </form>
    </td>
</tr>
<?php endforeach; ?>

</tbody>
</table>
</div>
</div>
</div>
</main>
<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>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('ageSexeChart').getContext('2d');

new Chart(ctx, {
    type: 'line',
    data: {
        labels: <?= json_encode($ageNorm) ?>, // 1 à 18
        datasets: [
            {
                label: 'Garçons',
                data: <?= json_encode($garcons) ?>,
                borderColor: '#18184eff',
                backgroundColor: 'rgba(44,62,80,0.35)',
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointBackgroundColor: '#2c3e50'
            },
            {
                label: 'Filles',
                data: <?= json_encode($filles) ?>,
                borderColor: '#e7c2d1ff',
                backgroundColor: 'rgba(223, 174, 186, 0.35)',
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointBackgroundColor: '#e7c2d1ff'
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top'
            },
            tooltip: {
                mode: 'index',
                intersect: false
            }
        },
        interaction: {
            mode: 'nearest',
            intersect: false
        },
        scales: {
            x: {
                grid: {
                display: false   // ❌ enlève les carrés en bas
            },
                title: {
                    display: true,
                    text: 'Âge des enfants (1 à 18)'
                }
            },
            y: {
                grid: {
                display: false   // ❌ enlève les carrés en bas
            },
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Nombre d’enfants'
                }
            }
        }
    }
});
</script>


</body></html>