<?php
session_start();
include("_serveur.php");
$_SESSION['admin'] = true;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Administration — Notre Dame de la Paix</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
<style>
/* ═══════════════════════════════════════════ TOKENS */
:root {
  --navy:      #0d2158;
  --navy2:     #1a4aad;
  --blue:      #2a6dd9;
  --accent:    #93c5fd;
  --gold:      #f0b429;
  --sidebar-w: 270px;
  --header-h:  58px;
  --bg:        #f1f5fb;
  --panel:     #ffffff;
  --text:      #0f172a;
  --muted:     #64748b;
  --border:    rgba(0,0,0,.07);
  --radius:    10px;
  --trans:     .22s ease;
}
body.dark {
  --bg:     #0c1a3a;
  --panel:  #122044;
  --text:   #e2eaf8;
  --muted:  #7a95b8;
  --border: rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════ RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}

/* ═══════════════════════════════════════════ HEADER */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: #0d2158;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  z-index: 200;
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.h-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.burger {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: background var(--trans);
}
.burger:hover { background: rgba(255,255,255,.16); }
.burger span {
  display: block;
  width: 18px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--trans);
}
.school-logo {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.2);
}
.school-name {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  color: #fff;
  letter-spacing: .02em;
  line-height: 1.2;
}
.school-name small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: .7rem;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.h-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.h-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--trans);
}
.h-btn:hover { background: rgba(255,255,255,.18); }

/* ═══════════════════════════════════════════ LAYOUT */
.wrapper {
  display: flex;
  height: 100vh;
  padding-top: var(--header-h);
}

/* ═══════════════════════════════════════════ SIDEBAR */
aside {
  width: var(--sidebar-w);
  background: #0d2158;          /* deep dark blue — level 0 base */
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: transform var(--trans);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
  border-right: 1px solid rgba(255,255,255,.06);
}
aside::-webkit-scrollbar { width: 4px; }
aside::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 2px; }

/* ── section label ── */
.nav-section {
  padding: 20px 16px 6px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
}

/* ── nav items ── */
aside ul { list-style: none; }
aside > ul > li { position: relative; }

/* ══ LEVEL 0 — top-level links (dark blue base) ══ */
aside > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #0d2158;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--trans), background var(--trans), filter var(--trans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
aside > ul > li > a:hover {
  background: #162e72;
  color: #fff;
}

/* ══ LEVEL 1 — first submenu (medium blue) ══ */
aside li > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 42px;
  background: #1a4aad;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: .79rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--trans), background var(--trans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
aside li > ul > li > a:hover {
  background: #1f56c8;
  color: #fff;
}

/* ══ LEVEL 2 — second submenu (lighter blue) ══ */
aside li > ul > li > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 58px;
  background: #2f6fe0;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: .76rem;
  font-weight: 400;
  cursor: pointer;
  transition: color var(--trans), background var(--trans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
aside li > ul > li > ul > li > a:hover {
  background: #3a7af0;
  color: #fff;
}

/* ══ LEVEL 3 — third submenu (faded / pale blue) ══ */
aside li > ul > li > ul > li > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 72px;
  background: #5b9af5;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .73rem;
  font-weight: 400;
  cursor: pointer;
  transition: color var(--trans), background var(--trans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
aside li > ul > li > ul > li > ul > li > a:hover {
  background: #6faafb;
  color: #fff;
}

/* ── shared icon style ── */
.nav-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* ── active state ── */
aside li.active > a {
  background: #0b47c9 !important;
  color: #fff !important;
  border-left: 3px solid #93c5fd;
}

/* ── collapse arrow ── */
.arrow {
  margin-left: auto;
  font-size: .65rem;
  opacity: .5;
  transition: transform var(--trans);
  flex-shrink: 0;
}
li.open > a .arrow { transform: rotate(90deg); opacity: .9; }

/* ── submenu animation ── */
aside li > ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
  opacity: 0;
}
aside li.open > ul { max-height: 2000px; opacity: 1; }

/* ── divider ── */
.nav-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 4px 16px;
}

/* ═══════════════════════════════════════════ MAIN */
main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#content-frame {
  width: 100%;
  flex: 1;
  border: none;
  display: none;
}

/* ═══════════════════════════════════════════ DASHBOARD */
#dashboard {
  flex: 1;
  padding: 32px 28px;
  overflow: auto;
  background: var(--bg);
}
.dash-greeting {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: 6px;
}
.dash-sub {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 36px;
}

/* ── icon grid ── */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  max-width: 720px;
}
.icon-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  text-align: center;
}
.icon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  border-color: var(--accent);
}
.icon-card .ic-emoji {
  font-size: 2rem;
  line-height: 1;
}
.icon-card .ic-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
}
body.dark .icon-card { box-shadow: 0 4px 18px rgba(0,0,0,.4); }

/* ═══════════════════════════════════════════ MOBILE */
@media (max-width: 768px) {
  aside {
    position: fixed;
    height: 100%;
    top: var(--header-h);
    z-index: 150;
    transform: translateX(-100%);
    box-shadow: 6px 0 24px rgba(0,0,0,.4);
  }
  aside.open { transform: translateX(0); }
}
</style>
</head>
<body>

<!-- ══════════════════════════════ HEADER -->
<header>
  <div class="h-left">
    <button class="burger" onclick="toggleMenu()" aria-label="Menu">
      <span></span><span></span><span></span>
    </button>
    <img src="Logo.jpg" class="school-logo" alt="Logo">
    <div class="school-name">
      Collège Saint Joseph
      <small>Miniara — Administration</small>
    </div>
  </div>
  <div class="h-right">
    <button class="h-btn" onclick="toggleTheme()" title="Thème">🌙</button>
  </div>
</header>

<div class="wrapper">

<!-- ══════════════════════════════ SIDEBAR -->
<aside id="sidebar">
<ul>

<!-- ── GÉNÉRAL ── -->
<li><div class="nav-section">Général</div></li>
<li><a onclick="loadPage('_familylist.php')"><span class="nav-icon">👨‍👩‍👧</span>Liste Famille</a></li>

<li><div class="nav-divider"></div></li>

<!-- ── INSCRIPTION ── -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📋</span>Inscription<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('inscriptione.php')"><span class="nav-icon">🔄</span>Ancienne Famille</a></li>
    <li><a onclick="loadPage('inscription_Fam.php')"><span class="nav-icon">➕</span>Nouvelle Famille</a></li>
  </ul>
</li>

<!-- ── PHOTOS ── -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">🖼️</span>Photos<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('imageupload.php')"><span class="nav-icon">⬆️</span>Ajouter</a></li>
  </ul>
</li>

<!-- ── AUTH ── -->
<li><a onclick="loadPage('listeelevepass.php')"><span class="nav-icon">🔐</span>Authentication</a></li>

<li><div class="nav-divider"></div></li>

<!-- ── AGENDA ── -->
<li><div class="nav-section">Pédagogie</div></li>
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📅</span>Agenda<span class="arrow">▶</span>
  </a>
  <ul>
    <?php
    $agendaActions = [
      'Écrire'   => ['_ecrireagenda.php',   '✏️'],
      'Modifier' => ['_modifieragenda.php',  '🖊️'],
      'Afficher' => ['_afficheagenda.php',   '👁️'],
      'Effacer'  => ['_effaceragenda.php',   '🗑️'],
    ];
    $cycles = mysqli_query($link,"SELECT id,name FROM cycles ORDER BY id");
    while($c = mysqli_fetch_assoc($cycles)){
      echo "<li>
              <a onclick=\"toggleSub(this)\"><span class='nav-icon'>🏫</span>".htmlspecialchars($c['name'])."<span class='arrow'>▶</span></a>
              <ul>";
      foreach($agendaActions as $label=>$info){
        echo "<li><a onclick=\"loadPage('{$info[0]}?cycle={$c['id']}')\"><span class='nav-icon'>{$info[1]}</span>$label</a></li>";
      }
      echo "  </ul></li>";
    }
    ?>
  </ul>
</li>

<!-- ── BULLETIN ── -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📊</span>Bulletin<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('listeeleve.php')"><span class="nav-icon">👥</span>Liste Élèves</a></li>
    <?php
      $cycles = mysqli_query($link,"SELECT id,name FROM cycles WHERE id IN (1,2,3,4,5)");
      while($cycle = mysqli_fetch_assoc($cycles)){
        $cid = $cycle['id'];
        $cname = htmlspecialchars($cycle['name']);
        echo "<li><a onclick=\"toggleSub(this)\"><span class='nav-icon'>🏫</span>$cname<span class='arrow'>▶</span></a><ul>";

        echo "<li><a onclick=\"toggleSub(this)\"><span class='nav-icon'>📝</span>Contrôles<span class='arrow'>▶</span></a><ul>";
        echo "<li><a onclick=\"loadPage('_ecrirectrl.php?cycle=$cid')\"><span class='nav-icon'>➕</span>Créer</a></li>";
        echo "<li><a onclick=\"loadPage('_activateCtrl.php?cycle=$cid')\"><span class='nav-icon'>✅</span>Activer</a></li>";
        echo "<li><a onclick=\"loadPage('_desactivateCtrl.php?cycle=$cid')\"><span class='nav-icon'>⛔</span>Désactiver</a></li>";
        echo "</ul></li>";

        echo "<li><a onclick=\"loadPage('_ecrirecof.php?cycle=$cid')\"><span class='nav-icon'>⚖️</span>Coefficients</a></li>";

        $classes = mysqli_query($link, "SELECT id,name FROM classes WHERE cycleID=$cid");
        $classList = [];
     while ($cl = mysqli_fetch_assoc($classes)) {
             $classList[] = $cl;
          }

   echo "<li><a onclick=\"toggleSub(this)\"><span class='nav-icon'>📥</span>Remplir Notes<span class='arrow'>▶</span></a><ul>";
              foreach ($classList as $cl) {
                echo "<li><a onclick=\"loadPage('saisir_notes.php?classeid={$cl['id']}')\"><span class='nav-icon'>🔢</span>{$cl['name']}</a></li>";
                  }
             echo "</ul></li>";

              echo "<li><a onclick=\"toggleSub(this)\"><span class='nav-icon'>📥</span>Remplir Absences<span class='arrow'>▶</span></a><ul>";
         foreach ($classList as $cl) {
              echo "<li><a onclick=\"loadPage('_ecrireabsence.php?classeid={$cl['id']}')\"><span class='nav-icon'>🔢</span>{$cl['name']}</a></li>";
                   }
echo "</ul></li>";
 echo "<li><a onclick=\"toggleSub(this)\"><span class='nav-icon'>🗒️</span>Remplir Observations<span class='arrow'>▶</span></a><ul>";
      foreach ($classes as $cl) {
        echo "<li><a onclick=\"loadPage('_ecrireobservations1.php?classeid={$cl['id']}')\"><span class='nav-icon'>🔢</span>{$cl['name']}</a></li>";
      }
      echo "</ul></li>";
        if($cid==1||$cid==2){
          echo "<li><a onclick=\"loadPage('_affichenotespaerclassecn1.php?cycle=$cid')\"><span class='nav-icon'>📋</span>Notes Classe</a></li>";
          echo "<li><a onclick=\"loadPage('_affichenotespareletudiant.php?cycle=$cid')\"><span class='nav-icon'>🎓</span>Notes Élève</a></li>";
        } else {
          echo "<li><a onclick=\"loadPage('_affichenotespaerclassecn1.php?cycle=$cid')\"><span class='nav-icon'>📋</span>Notes Classe</a></li>";
          echo "<li><a onclick=\"loadPage('_affichenotespareletudiant.php?cycle=$cid')\"><span class='nav-icon'>🎓</span>Notes Élève</a></li>";
        }

        echo "<li><a onclick=\"toggleSub(this)\"><span class='nav-icon'>📈</span>Statistiques<span class='arrow'>▶</span></a><ul>";
        echo "<li><a onclick=\"loadPage('_relever1.php?cycle=$cid')\"><span class='nav-icon'>📄</span>Relevé des Notes</a></li>";
        echo "<li><a onclick=\"loadPage('_statmoi.php?cycle=$cid')\"><span class='nav-icon'>📆</span>Stat. par mois</a></li>";
        echo "<li><a onclick=\"loadPage('_statmoiaverage.php?cycle=$cid')\"><span class='nav-icon'>〰️</span>Stat. mois (Moy.)</a></li>";
        echo "<li><a onclick=\"loadPage('_statmoiordre.php?cycle=$cid')\"><span class='nav-icon'>🔢</span>Stat. mois (Ordre)</a></li>";
        echo "<li><a onclick=\"loadPage('_statfinal.php?cycle=$cid')\"><span class='nav-icon'>🏁</span>Stat. Final</a></li>";
        echo "<li><a onclick=\"loadPage('_statfinalmatiere.php?cycle=$cid')\"><span class='nav-icon'>📚</span>Stat. Final (Mat.)</a></li>";
        echo "<li><a onclick=\"loadPage('_statfinal1.php?cycle=$cid')\"><span class='nav-icon'>📉</span>Stat. Final (Line)</a></li>";
        echo "<li><a onclick=\"loadPage('_statfinalordre.php?cycle=$cid')\"><span class='nav-icon'>🏆</span>Stat. Final (Ordre)</a></li>";
        echo "</ul></li>";
        echo "</ul></li>";
      }
    ?>
    <li><a onclick="loadPage('Liste_controls.php')"><span class="nav-icon">📋</span>Liste Classe (Ctrl)</a></li>
    <li><a onclick="loadPage('ActDeacProfPare.php')"><span class="nav-icon">🔧</span>Activer / Désact. Ctrl</a></li>
    <li><a onclick="loadPage('_modobservations1.php')"><span class="nav-icon">💬</span>Modifier Observations</a></li>
    <li><a onclick="loadPage('_statmoyenmat.php')"><span class="nav-icon">📊</span>Relevé Final(Année)</a></li>
	 <li><a onclick="loadPage('releve_matiere.php')"><span class="nav-icon">📊</span>Relevé Matière Final(Année)</a></li>
    <li><a onclick="loadPage('_ecriresubsujects.php')"><span class="nav-icon">➕</span>Ajouter Sous-Matière</a></li>
  </ul>
</li>

<!-- ── ABSENCE ── -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">🚫</span>Absence<span class="arrow">▶</span>
  </a>
  <ul>
   <?php
$cycles = [1=>'Cycle I',2=>'Cycle II',3 => 'Complémentaire', 4 => 'Secondaire',5=>'Préscolaire'];
foreach ($cycles as $id => $name) {
    echo "<li>
            <a onclick=\"toggleSub(this)\"><span class='nav-icon'>🏫</span>{$name}<span class='arrow'>▶</span></a>
            <ul>
              <li><a onclick=\"loadPage('_ecrireabsencec1.php?cycle={$id}')\"><span class='nav-icon'>✏️</span>Saisir Absence</a></li>
              <li><a onclick=\"loadPage('Ajouterabsence.php?cycle={$id}')\"><span class='nav-icon'>🖊️</span>Modifier Absence</a></li>
            </ul>
          </li>";
}
?>
   
    <li><a onclick="loadPage('listeeleveabs.php')"><span class="nav-icon">👤</span>Liste par Élève</a></li>
    <li><a onclick="loadPage('_listeabsenceclassedate.php')"><span class="nav-icon">📋</span>Liste par Classe</a></li>
    <li><a onclick="loadPage('_deleteabsenceclassedate.php')"><span class="nav-icon">🗑️</span>Effacer par Classe</a></li>
  </ul>
</li>

<li><div class="nav-divider"></div></li>

<!-- ── COMMUNICATION ── -->
<li><div class="nav-section">Communication</div></li>

<!-- NOTIFICATIONS -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">🔔</span>Notifications<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('_notificationecole.php')"><span class="nav-icon">🏫</span>Notif. École</a></li>
    <li><a onclick="loadPage('_notifysevcycle.php')"><span class="nav-icon">🔀</span>Plusieurs Cycles</a></li>
    <li><a onclick="loadPage('notifuserorteac.php')"><span class="nav-icon">👔</span>Direction / Profs</a></li>
    <?php
    $cycles = mysqli_query($link, "SELECT id, name FROM cycles WHERE id IN (1,2,3,4,5) ORDER BY id ASC");
    while ($cycle = mysqli_fetch_assoc($cycles)) {
      $cycleID   = $cycle['id'];
      $cycleName = htmlspecialchars($cycle['name']);
      echo "<li>
              <a onclick=\"toggleSub(this)\"><span class='nav-icon'>🏫</span>{$cycleName}<span class='arrow'>▶</span></a>
              <ul>
                <li><a onclick=\"loadPage('_ecrirenotification.php?cycle={$cycleID}')\"><span class='nav-icon'>📣</span>Notifications</a></li>
                <li><a onclick=\"loadPage('_notificationsfam.php?cycle={$cycleID}')\"><span class='nav-icon'>👪</span>Notifications Famille</a></li>
              </ul>
            </li>";
    }
    ?>
    <li><a onclick="loadPage('_deletenotificationsdate.php')"><span class="nav-icon">🗑️</span>Effacer par Date</a></li>
  </ul>
</li>

<!-- CIRCULAIRE -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📨</span>Circulaire<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('_uploadcirculaire.php')"><span class="nav-icon">⬆️</span>Télécharger</a></li>
    <li><a onclick="loadPage('_downloadcirculaire.php')"><span class="nav-icon">👁️</span>Afficher</a></li>
    <li><a onclick="loadPage('_effacercirculaire.php')"><span class="nav-icon">🗑️</span>Effacer</a></li>
    <li><a onclick="loadPage('_uploadcircularstudent.php')"><span class="nav-icon">🎒</span>Télé. Par Élèves</a></li>
    <li><a onclick="loadPage('viewcircular.php')"><span class="nav-icon">📂</span>Afficher / Effacer Élèves</a></li>
  </ul>
</li>

<!-- PLATEFORME -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">🗂️</span>Plateforme<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('_uploadfichedir.php')"><span class="nav-icon">📄</span>Poster une fiche</a></li>
    <li><a onclick="loadPage('listfiches.php')"><span class="nav-icon">🗃️</span>Afficher / Effacer docs</a></li>
  </ul>
</li>

<!-- REVUE -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📰</span>Revue<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('revue/_uploadrevue.php')"><span class="nav-icon">✍️</span>Ajouter Article</a></li>
    <li><a onclick="loadPage('revue/_downloadarticle.php')"><span class="nav-icon">👁️</span>Afficher Article</a></li>
    <li><a onclick="loadPage('revue/_effacerarticle.php')"><span class="nav-icon">🗑️</span>Effacer Article</a></li>
  </ul>
</li>

<li><div class="nav-divider"></div></li>

<!-- ── GESTION ── -->
<li><div class="nav-section">Gestion</div></li>

<!-- PUBLIER -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📤</span>Publier<span class="arrow">▶</span>
  </a>
  <ul>
    <?php
    $cycles = mysqli_query($link,"SELECT id,name FROM cycles WHERE id IN (1,2,3,4,5) ORDER BY id");
    while ($cycle = mysqli_fetch_assoc($cycles)) {
      $cycleID   = $cycle['id'];
      $cycleName = htmlspecialchars($cycle['name']);
      echo "<li>
              <a onclick=\"toggleSub(this)\"><span class='nav-icon'>🏫</span>{$cycleName}<span class='arrow'>▶</span></a>
              <ul>
                <li><a onclick=\"loadPage('_publicate.php?cycle={$cycleID}')\"><span class='nav-icon'>🟢</span>Publier</a></li>
                <li><a onclick=\"loadPage('_dispublicate.php?cycle={$cycleID}')\"><span class='nav-icon'>🔴</span>Enlever</a></li>
                <li><a onclick=\"loadPage('_Deactivatefamille.php?cycle={$cycleID}')\"><span class='nav-icon'>🚫</span>Désactiver Famille</a></li>
              </ul>
            </li>";
    }
    ?>
    <li><a onclick="loadPage('reactivatef.php')"><span class="nav-icon">♻️</span>Réactiver Familles</a></li>
  </ul>
</li>

<!-- RÉSERVER MATIÈRES -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">🔒</span>Réserver Matières<span class="arrow">▶</span>
  </a>
  <ul>
    <?php
    $cycles = mysqli_query($link,"SELECT id,name FROM cycles WHERE id IN (1,2,3,4,5) ORDER BY id");
    while($cycle=mysqli_fetch_assoc($cycles)){
      echo "<li>
              <a onclick=\"toggleSub(this)\"><span class='nav-icon'>🏫</span>".htmlspecialchars($cycle['name'])."<span class='arrow'>▶</span></a>
              <ul>
                <li><a onclick=\"loadPage('teacherreservesubdir.php?cycle={$cycle['id']}')\"><span class='nav-icon'>📊</span>Bulletin</a></li>
                <li><a onclick=\"loadPage('teacherreservedir.php?cycle={$cycle['id']}')\"><span class='nav-icon'>📅</span>Agenda</a></li>
              </ul>
            </li>";
    }
    ?>
  </ul>
</li>

<!-- NON INSCRITS -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">👤</span>Utilisateurs<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('_affichenoninscit.php')"><span class="nav-icon">❌</span>Parents non inscrits</a></li>
    <li><a onclick="loadPage('_afficheinscit.php')"><span class="nav-icon">✅</span>Parents inscrits</a></li>
    <li><a onclick="loadPage('_affichedirins.php')"><span class="nav-icon">🏛️</span>Direction inscrits</a></li>
    <li><a onclick="loadPage('_afficheprofins.php')"><span class="nav-icon">👨‍🏫</span>Profs inscrits</a></li>
    <li><a onclick="loadPage('_modinscitpass.php')"><span class="nav-icon">🔑</span>Modifier user / passe</a></li>
  </ul>
</li>

<li><div class="nav-divider"></div></li>

<!-- ── AUTRES ── -->
<li><div class="nav-section">Autres</div></li>
<li><a onclick="loadPage('listeelevepass.php')"><span class="nav-icon">🔐</span>Authentication</a></li>
<li><a onclick="loadPage('miseaniveau.php')"><span class="nav-icon">📶</span>Mise à Niveaux</a></li>
<li><a onclick="loadPage('agenda/contactndp.php')"><span class="nav-icon">📞</span>Nos Contacts</a></li>
<li><a onclick="loadPage('remplirtableobservations.php')"><span class="nav-icon">🗒️</span>Observations</a></li>
<li><a onclick="loadPage('Bulletinpres.php')"><span class="nav-icon">📗</span>Bulletin Préscolaire</a></li>

<div style="height:24px"></div>
</ul>
</aside>

<!-- ══════════════════════════════ MAIN -->
<main>
  <div id="dashboard">
    <p class="dash-greeting">Menu Administration</p>
    <p class="dash-sub">Collège Saint Joseph — Miniara</p>

    <div class="icon-grid">
      <div class="icon-card" onclick="loadPage('_familylist.php')">
        <span class="ic-emoji">📁</span>
        <span class="ic-label">Dossier Élèves</span>
      </div>
      <div class="icon-card" onclick="loadPage('listeeleve.php')">
        <span class="ic-emoji">📝</span>
        <span class="ic-label">Notes</span>
      </div>
      <div class="icon-card" onclick="loadPage('_notificationecole.php')">
        <span class="ic-emoji">🔔</span>
        <span class="ic-label">Notifications</span>
      </div>
      <div class="icon-card" onclick="loadPage('_afficheagenda.php')">
        <span class="ic-emoji">📅</span>
        <span class="ic-label">Agenda</span>
      </div>
      <div class="icon-card" onclick="loadPage('_uploadfichedir.php')">
        <span class="ic-emoji">📄</span>
        <span class="ic-label">Fiches</span>
      </div>
      <div class="icon-card" onclick="loadPage('quiz/quiz.php')">
        <span class="ic-emoji">✏️</span>
        <span class="ic-label">Devoirs</span>
      </div>
      <div class="icon-card" onclick="loadPage('revue/_downloadarticle.php')">
        <span class="ic-emoji">📰</span>
        <span class="ic-label">Revue</span>
      </div>
    </div>
  </div>

  <iframe id="content-frame" name="content-frame"></iframe>
</main>

</div><!-- .wrapper -->

<script>
function loadPage(url) {
  var frame = document.getElementById('content-frame');
  var dash  = document.getElementById('dashboard');
  frame.src = url;
  frame.style.display = 'block';
  dash.style.display  = 'none';
  document.getElementById('sidebar').classList.remove('open');
  // mark active
  document.querySelectorAll('aside a').forEach(a => a.closest('li').classList.remove('active'));
  event && event.currentTarget && event.currentTarget.closest('li').classList.add('active');
}
function toggleMenu() {
  document.getElementById('sidebar').classList.toggle('open');
}
function toggleSub(a) {
  a.parentElement.classList.toggle('open');
}
function toggleTheme() {
  document.body.classList.toggle('dark');
  localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
}
if (localStorage.getItem('theme') === 'dark') document.body.classList.add('dark');
</script>

</body>
</html>
