<?php
// Included at the top of every protected page, right after requireLogin().
// Expects $pageTitle to be set by the including page before this include.
$pageTitle = $pageTitle ?? 'CWSN Portal';
$role = currentRole();
$clrccode = currentClrcCode();
$displayName = $_SESSION['display_name'] ?? '';

$clrcName = '';
if ($role === 'clrc' && $clrccode) {
    $stmt = getPDO()->prepare('SELECT clrcname FROM clrc WHERE clrccode = ?');
    $stmt->execute([$clrccode]);
    $row = $stmt->fetch();
    $clrcName = $row['clrcname'] ?? $clrccode;
}

function navLink(string $href, string $label, string $icon): void {
    $current = basename($_SERVER['PHP_SELF']);
    $active = ($current === $href);
    $cls = $active
        ? 'bg-white/10 text-white border-l-[3px] border-blue-400 pl-[13px] pr-4'
        : 'border-l-[3px] border-transparent pl-[13px] pr-4 text-slate-300 hover:bg-white/5 hover:text-white';
    echo '<a href="' . htmlspecialchars($href) . '" class="flex items-center gap-3 rounded-lg py-2.5 text-sm font-medium transition-all ' . $cls . '">'
        . '<span class="w-[18px] text-center">' . $icon . '</span> ' . htmlspecialchars($label) . '</a>';
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= htmlspecialchars($pageTitle) ?> — <?= htmlspecialchars(SITE_NAME) ?></title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    body{font-family:'Inter',system-ui,sans-serif}
    .card{background:#fff;border:1px solid #e2e8f0;border-radius:0.75rem;box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px -2px rgba(15,23,42,.06)}
    .btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600}
    .btn-primary{background:#2563eb;color:#fff}
    .btn-primary:hover{background:#1d4ed8}
    .btn-secondary{background:#fff;border:1px solid #cbd5e1;color:#334155}
    .btn-secondary:hover{background:#f8fafc}
    .field-input{width:100%;border:1px solid #cbd5e1;border-radius:.5rem;padding:.55rem .75rem;font-size:.875rem}
    .field-select{width:100%;border:1px solid #cbd5e1;border-radius:.5rem;padding:.55rem .75rem;font-size:.875rem;background:#fff}
    .field-label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#64748b;margin-bottom:.3rem}
  </style>
</head>
<body class="bg-slate-50">
<div class="flex h-screen overflow-hidden">
  <!-- Sidebar -->
  <aside id="sidebar" class="hidden lg:flex lg:flex-col w-64 shrink-0 bg-gradient-to-b from-[#0d1938] via-[#0d1938] to-slate-950">
    <div class="flex items-center gap-2.5 px-4 py-5 border-b border-white/10">
      <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-500 text-white">♿</div>
      <div>
        <div class="text-sm font-bold text-white leading-tight">CWSN Portal</div>
        <div class="text-[11px] text-slate-400 leading-tight">SSM Purba Bardhaman</div>
      </div>
    </div>
    <nav class="flex-1 space-y-0.5 px-3 py-4 overflow-y-auto">
      <?php
        navLink('dashboard.php', 'Dashboard', '&#9635;');
        navLink('cwsn_list.php', 'CWSN Records', '&#128203;');
        navLink('reports.php', 'Reports', '&#128202;');
        if ($role === 'admin') {
          echo '<div class="pt-5 pb-1.5 px-4 text-[10px] font-bold uppercase tracking-wider text-slate-500">Administration</div>';
          navLink('masters.php', 'Master Data', '&#128451;');
          navLink('users.php', 'CLRC Logins', '&#128100;');
        }
      ?>
    </nav>
    <div class="border-t border-white/10 p-3 text-[11px] text-slate-500">v1.0 (PHP) · Samagra Shiksha Mission</div>
  </aside>

  <!-- Main column -->
  <div class="flex flex-1 flex-col overflow-hidden">
    <header class="flex h-16 shrink-0 items-center justify-between border-b border-slate-200 bg-white px-4 lg:px-6">
      <div class="flex items-center gap-3 min-w-0">
        <button onclick="document.getElementById('sidebar').classList.toggle('hidden')" class="lg:hidden p-2 -ml-1 text-slate-600 hover:bg-slate-100 rounded-lg">☰</button>
        <div class="min-w-0">
          <div class="text-sm font-bold text-slate-800 truncate">
            <?= $role === 'admin' ? 'Administrator Console' : 'CLRC: ' . htmlspecialchars($clrcName ?: $clrccode) ?>
          </div>
          <div class="hidden sm:block text-xs text-slate-400">Children With Special Needs — Data Management</div>
        </div>
      </div>
      <div class="relative">
        <details class="relative">
          <summary class="list-none cursor-pointer flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-slate-100">
            <div class="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-blue-700 font-bold text-sm">
              <?= htmlspecialchars(strtoupper(substr($displayName ?: 'U', 0, 1))) ?>
            </div>
            <span class="hidden sm:block text-sm font-medium text-slate-700"><?= htmlspecialchars($displayName) ?></span>
          </summary>
          <div class="absolute right-0 z-20 mt-2 w-52 rounded-xl border border-slate-200 bg-white py-1.5 shadow-lg">
            <div class="px-3.5 py-2 text-xs text-slate-400 border-b border-slate-100">Signed in as <span class="font-semibold text-slate-600 capitalize"><?= htmlspecialchars($role) ?></span></div>
            <a href="change_password.php" class="flex items-center gap-2.5 px-3.5 py-2.5 text-sm text-slate-700 hover:bg-slate-50">Change password</a>
            <a href="logout.php" class="flex items-center gap-2.5 px-3.5 py-2.5 text-sm text-rose-600 hover:bg-rose-50">Sign out</a>
          </div>
        </details>
      </div>
    </header>
    <main class="flex-1 overflow-y-auto p-4 lg:p-6">
