<?php
session_start();
if (empty($_SESSION['id'])) {
    header('Location: menuprofEn.php');
    exit;
}
include("_serveur.php");
$id = $_SESSION['id'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teachers Menu — Collège Saint Joseph</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); text-decoration: none;
}
.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;
  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; }

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

aside ul { list-style: none; }
aside > ul > li { position: relative; }

/* LEVEL 0 */
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);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
aside > ul > li > a:hover { background: #162e72; color: #fff; }

/* LEVEL 1 */
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 */
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 */
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; }

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

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

.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; }

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; }

.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 {
  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 — Teachers' Portal</small>
    </div>
  </div>
  <div class="h-right">
    <button class="h-btn" onclick="toggleTheme()" title="Toggle Theme">🌙</button>
    <a class="h-btn" href="menuprofEn.php" title="Sign Out">🚪</a>
  </div>
</header>

<div class="wrapper">

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

<!-- ── GENERAL ── -->
<li><div class="nav-section">General</div></li>

<!-- TEACHERS' SUBJECTS -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📚</span>Teachers' Subjects<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('teacherreserve.php?cycle=5')"><span class="nav-icon">🏫</span>Reserve Preschool (Agenda)</a></li>
    <li>
      <a onclick="toggleSub(this)"><span class="nav-icon">1️⃣</span>Cycle 1<span class="arrow">▶</span></a>
      <ul>
        <li><a onclick="loadPage('teacherreservesub.php?cycle=1')"><span class="nav-icon">📊</span>Reserve (Report Card)</a></li>
        <li><a onclick="loadPage('teacherreserve.php?cycle=1')"><span class="nav-icon">📅</span>Reserve (Agenda)</a></li>
      </ul>
    </li>
    <li>
      <a onclick="toggleSub(this)"><span class="nav-icon">2️⃣</span>Cycle 2<span class="arrow">▶</span></a>
      <ul>
        <li><a onclick="loadPage('teacherreservesub.php?cycle=2')"><span class="nav-icon">📊</span>Reserve (Report Card)</a></li>
        <li><a onclick="loadPage('teacherreserve.php?cycle=2')"><span class="nav-icon">📅</span>Reserve (Agenda)</a></li>
      </ul>
    </li>
    <li>
      <a onclick="toggleSub(this)"><span class="nav-icon">3️⃣</span>Comp. Cycle<span class="arrow">▶</span></a>
      <ul>
        <li><a onclick="loadPage('teacherreservesub.php?cycle=3')"><span class="nav-icon">📊</span>Reserve (Report Card)</a></li>
        <li><a onclick="loadPage('teacherreserve.php?cycle=3')"><span class="nav-icon">📅</span>Reserve (Agenda)</a></li>
      </ul>
    </li>
    <li>
      <a onclick="toggleSub(this)"><span class="nav-icon">4️⃣</span>Sec. Cycle<span class="arrow">▶</span></a>
      <ul>
        <li><a onclick="loadPage('teacherreservesub.php?cycle=4')"><span class="nav-icon">📊</span>Reserve (Report Card)</a></li>
        <li><a onclick="loadPage('teacherreserve.php?cycle=4')"><span class="nav-icon">📅</span>Reserve (Agenda)</a></li>
      </ul>
    </li>
    <li><a onclick="loadPage('teacherreservetsublist.php')"><span class="nav-icon">📋</span>Subject List (Report Card)</a></li>
    <li><a onclick="loadPage('teacherreservetlist.php')"><span class="nav-icon">📋</span>Subject List (Agenda)</a></li>
  </ul>
</li>

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

<!-- ── ACADEMICS ── -->
<li><div class="nav-section">Academics</div></li>

<!-- AGENDA -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📅</span>Agenda<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('_ecrireagendaprof.php')"><span class="nav-icon">✏️</span>Write</a></li>
    <li><a onclick="loadPage('_modifieragendap.php')"><span class="nav-icon">🖊️</span>Edit</a></li>
    <li><a onclick="loadPage('_afficheagendap.php')"><span class="nav-icon">👁️</span>View</a></li>
    <li><a onclick="loadPage('_effaceragendaprof.php')"><span class="nav-icon">🗑️</span>Delete</a></li>
  </ul>
</li>

<!-- REPORT CARD -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📊</span>Report Card<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('_ecrirenoteparmatiereprof.php')"><span class="nav-icon">📝</span>Enter Grades</a></li>
    <li><a onclick="loadPage('_listenoteparmatiereprof.php')"><span class="nav-icon">📋</span>Grade List</a></li>
    <li><a onclick="loadPage('_ecrirenoterecitprof.php')"><span class="nav-icon">🗣️</span>Enter Recitations</a></li>
  </ul>
</li>

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

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

<!-- CIRCULAR -->
<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">📨</span>Circular<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('_downloadcirculaire.php')"><span class="nav-icon">🏫</span>Preschool</a></li>
    <li><a onclick="loadPage('_downloadcirculaire.php')"><span class="nav-icon">1️⃣</span>Primary I</a></li>
    <li><a onclick="loadPage('_downloadcirculaire.php')"><span class="nav-icon">2️⃣</span>Primary II</a></li>
    <li><a onclick="loadPage('_downloadcirculaire.php')"><span class="nav-icon">3️⃣</span>Complementary</a></li>
    <li><a onclick="loadPage('_downloadcirculaire.php')"><span class="nav-icon">4️⃣</span>Secondary</a></li>
  </ul>
</li>

<!-- MESSAGE -->
<li><a onclick="loadPage('agenda/message/_affichemessage.php')"><span class="nav-icon">✉️</span>Messages</a></li>

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

<!-- ── PLATFORM ── -->
<li><div class="nav-section">Platform</div></li>

<li>
  <a onclick="toggleSub(this)">
    <span class="nav-icon">🗂️</span>Platform<span class="arrow">▶</span>
  </a>
  <ul>
    <li><a onclick="loadPage('_uploadfichep.php')"><span class="nav-icon">📤</span>Upload a File</a></li>
    <li><a onclick="loadPage('_affichefichep.php')"><span class="nav-icon">⬇️</span>View My Documents</a></li>
    <li><a onclick="loadPage('_deldocument.php?id=<?php echo $_SESSION['id']; ?>')"><span class="nav-icon">🗑️</span>Delete Documents</a></li>
  </ul>
</li>

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

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

    <div class="icon-grid">
      <div class="icon-card" onclick="loadPage('_ecrireagendaprof.php')">
        <span class="ic-emoji">📅</span>
        <span class="ic-label">Agenda</span>
      </div>
      <div class="icon-card" onclick="loadPage('_ecrirenoteparmatiereprof.php')">
        <span class="ic-emoji">📝</span>
        <span class="ic-label">Grades</span>
      </div>
      <div class="icon-card" onclick="loadPage('agenda/message/_affichemessage.php')">
        <span class="ic-emoji">✉️</span>
        <span class="ic-label">Messages</span>
      </div>
      <div class="icon-card" onclick="loadPage('_downloadcirculaire.php')">
        <span class="ic-emoji">📨</span>
        <span class="ic-label">Circular</span>
      </div>
      <div class="icon-card" onclick="loadPage('_uploadfichep.php')">
        <span class="ic-emoji">📤</span>
        <span class="ic-label">Documents</span>
      </div>
      <div class="icon-card" onclick="loadPage('quiz/quiz.php')">
        <span class="ic-emoji">🧪</span>
        <span class="ic-label">Online Tests</span>
      </div>
    </div>
  </div>

  <iframe id="content-frame" name="fr1"></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');
  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>
