<?php
// Layout header untuk semua dashboard
function dashHeader($title, $role, $user) {
    $roleLabel = ['admin'=>'Admin LPPM','dpl'=>'Dosen Pembimbing','mahasiswa'=>'Mahasiswa'][$role] ?? $role;
    $roleColor = ['admin'=>'#C8922A','dpl'=>'#1A56A4','mahasiswa'=>'#276749'][$role] ?? '#666';
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="<?= BASE_URL ?>/kkn-system/assets/logo-smart-kkn.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($title) ?> — Sistem KKN UMUS 2026</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.content,.content p,.content div,.content span,.content label,
.content input,.content select,.content textarea,.content button,
.card-body,.card-header,.form-group,.form-row,.alert{font-size:.75rem;}
.card-header h3{font-size:.85rem !important;}
.card-body h3,.card-body h4{font-size:.82rem;}
body{font-family:'Inter',sans-serif;background:#F5F7FA;min-height:100vh;}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:linear-gradient(180deg,#0A2347 0%,#0D2E5C 100%);color:#fff;display:flex;flex-direction:column;z-index:100;box-shadow:4px 0 20px rgba(0,0,0,.18);}
.sidebar-brand{padding:.875rem 1rem .75rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:9px;}
.sidebar-brand img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;flex-shrink:0;}
.sidebar-brand-text .name{font-size:.82rem;font-weight:700;color:#fff;line-height:1.2;}
.sidebar-brand-text .sub{font-size:.6rem;color:rgba(255,255,255,.4);letter-spacing:.04em;}
.sidebar-user{margin:.5rem .7rem .2rem;padding:.6rem .8rem;background:rgba(255,255,255,.06);border-radius:8px;border:1px solid rgba(255,255,255,.06);}
.sidebar-user .uname{font-size:.72rem;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user .urole{font-size:.62rem;color:rgba(255,255,255,.45);margin-top:2px;}
.sidebar-nav{flex:1;padding:.2rem .55rem;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.sidebar-nav::-webkit-scrollbar{display:none;}
.sidebar-nav .nav-section{font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:7px 8px 3px;margin-top:2px;}
.sidebar-nav a{display:flex;align-items:center;gap:8px;padding:6px 9px;color:rgba(255,255,255,.6);text-decoration:none;border-radius:7px;font-size:.72rem;font-weight:500;margin-bottom:1px;transition:background .15s,color .15s;border-left:3px solid transparent;}
.sidebar-nav a:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9);}
.sidebar-nav a.active{background:rgba(200,146,42,.15);color:#FFE566;border-left-color:#C8922A;}
.sidebar-nav a i{font-size:.8rem;width:14px;text-align:center;flex-shrink:0;}
.sidebar-footer{padding:.4rem .6rem .6rem;border-top:1px solid rgba(255,255,255,.07);}
.sidebar-footer a{display:flex;align-items:center;gap:7px;padding:5px 9px;color:rgba(255,255,255,.4);text-decoration:none;border-radius:6px;font-size:.72rem;transition:background .15s,color .15s;}
.sidebar-footer a:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);}
.sidebar-footer a i{font-size:.88rem;width:14px;text-align:center;}
.main{margin-left:224px;min-height:100vh;display:flex;flex-direction:column;}
.topbar{background:#fff;border-bottom:1px solid #E2E8F0;padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.topbar-title{font-family:'Playfair Display',serif;font-size:.9rem;color:#0D2E5C;font-weight:700;}
.topbar-right{font-size:.75rem;color:#8A96A8;}
.content{flex:1;padding:1.5rem;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.875rem;margin-bottom:1.5rem;}
.stat-card{background:#fff;border-radius:12px;padding:1rem 1.25rem;border:1px solid #E2E8F0;}
.stat-card .num{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;color:#0D2E5C;line-height:1;}
.stat-card .lbl{font-size:.68rem;color:#8A96A8;margin-top:.25rem;}
.card{background:#fff;border-radius:12px;border:1px solid #E2E8F0;overflow:hidden;margin-bottom:1.25rem;}
.card-header{padding:.875rem 1.25rem;border-bottom:1px solid #F0F4F8;display:flex;justify-content:space-between;align-items:center;}
.card-header h3{font-family:'Playfair Display',serif;font-size:.88rem;color:#0D2E5C;font-weight:700;}
.card-body{padding:0;}
table{width:100%;border-collapse:collapse;font-size:.75rem;}
table th{background:#F8FAFF;padding:6px 10px;text-align:left;font-size:.65rem;font-weight:700;color:#8A96A8;letter-spacing:.05em;text-transform:uppercase;}
table td{padding:7px 10px;border-top:1px solid #F5F7FA;color:#2C3545;vertical-align:middle;}
table tr:hover td{background:#FAFBFF;}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.68rem;font-weight:700;}
.badge-active{background:#C6F6D5;color:#276749;}
.badge-pending{background:#FEFCBF;color:#744210;}
.badge-nonactive{background:#FEE2E2;color:#991B1B;}
.badge-dpl{background:#E8F0FB;color:#1A56A4;}
.badge-mhs{background:#F0FFF4;color:#276749;}
.form-group{margin-bottom:.875rem;}
.form-group label{display:block;font-size:.75rem;font-weight:600;color:#2C3545;margin-bottom:.3rem;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 10px;border:1.5px solid #E2E8F0;border-radius:7px;font-size:.8rem;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#1A56A4;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.btn{padding:7px 16px;border:none;border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;}
.btn-primary{background:#0D2E5C;color:#fff;}.btn-primary:hover{background:#1A56A4;color:#fff;}
.btn-gold{background:#C8922A;color:#fff;}.btn-gold:hover{background:#b07d22;color:#fff;}
.btn-sm{padding:4px 10px;font-size:.72rem;}
.btn-danger{background:#FFF5F5;color:#C53030;border:1px solid #FED7D7;}
.alert{padding:9px 12px;border-radius:8px;font-size:.78rem;margin-bottom:.875rem;}
.alert-success{background:#F0FFF4;border:1px solid #C6F6D5;color:#276749;}
.alert-error{background:#FFF5F5;border:1px solid #FED7D7;color:#C53030;}
.score-input{width:70px;padding:5px 8px;border:1.5px solid #E2E8F0;border-radius:6px;text-align:center;font-size:.82rem;}
.score-input:focus{border-color:#1A56A4;outline:none;}
.sb-toggle{display:none;}
@media(max-width:768px){
  .sidebar{width:100%;position:sticky;top:0;z-index:200;flex-direction:column;max-height:none;box-shadow:0 2px 8px rgba(0,0,0,.2);}
  .sidebar-brand{padding:8px 10px;}
  .sidebar-brand img{width:32px;height:32px;}
  .sidebar-brand-text .sub{display:none;}
  .sb-toggle{display:flex !important;align-items:center;}
  .sidebar-user{margin:0 6px 3px !important;padding:6px 8px !important;display:flex !important;align-items:center;justify-content:space-between;}
  .sidebar-nav{display:none;padding:4px;border-top:1px solid rgba(255,255,255,.08);}
  .sidebar-nav.open{display:block;}
  .sidebar-nav a{padding:8px 10px;font-size:.82rem;}
  .sidebar-footer{display:none;padding:4px 6px;}
  .sidebar-footer.open{display:block !important;}
  .main{margin-left:0;}
  .topbar{padding:8px 12px;position:static;}
  .topbar-right{display:none;}
  .content{padding:10px;}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:6px;}
  .card{overflow-x:auto;}
  table{min-width:500px;}
  .form-row{grid-template-columns:1fr;}
}
@media(min-width:769px){
  .sb-toggle{display:none !important;}
  .sidebar-nav{display:block !important;}
  .sidebar-footer{display:block !important;}
}
</style>
</head>
<body>
<div class="sidebar">
  <div class="sidebar-brand">
    <img src="<?= BASE_URL ?>/kkn-system/assets/logo-smart-kkn.png" alt="SMART-KKN">
    <div class="sidebar-brand-text">
      <div class="name">SMART-KKN</div>
      <div class="sub">UMUS 2026</div>
    </div>
  </div>
  <div class="sidebar-user" style="display:flex;align-items:center;justify-content:space-between;">
    <div style="min-width:0;flex:1;">
      <div class="uname"><?= htmlspecialchars($user['nama'] ?? $user['username'] ?? '') ?></div>
      <div class="urole">
        <?php if($role==='mahasiswa'): ?>NIM. <?= $user['nim'] ?? '-' ?>
        <?php elseif($role==='dpl'): ?>NIDN. <?= $user['nidn'] ?? '-' ?>
        <?php else: ?>Admin LPPM<?php endif; ?>
      </div>
    </div>
    <button class="sb-toggle" onclick="toggleSidebar()" aria-label="Toggle menu" id="sb-toggle-btn" style="padding:0;background:none;border:none;cursor:pointer;flex-shrink:0;margin-left:6px;">
      <i class="ti ti-menu-2" id="sb-toggle-icon" style="font-size:1.1rem;color:rgba(255,255,255,.6);" aria-hidden="true"></i>
    </button>
  </div>
  <nav class="sidebar-nav" id="main-nav-sidebar">
<?php } ?>

<?php function dashNav($items) {
    foreach ($items as $item) {
        if (isset($item['section'])) {
            echo '<div class="nav-section">' . $item['section'] . '</div>';
        } else {
            $href   = BASE_URL . '/kkn-dashboard?page=' . $item['page'];
            $active = (($_GET['page'] ?? 'home') === $item['page']) ? ' active' : '';
            echo '<a href="' . $href . '" class="' . trim($active) . '">';
            echo $item['icon'] . ' ' . $item['label'];
            echo '</a>';
        }
    }
} ?>

<?php function dashFooter() { ?>
  </nav>
  <div class="sidebar-footer">
    <a href="<?= BASE_URL ?>"><i aria-hidden="true" class="ti ti-home"></i> Kembali ke Website</a>
    <a href="<?= BASE_URL ?>/kkn-dashboard?action=logout"><i aria-hidden="true" class="ti ti-logout"></i> Logout</a>
  </div>
</div>
<div class="main">
<?php } ?>

<?php function dashTopbar($title) { ?>
  <div class="topbar">
    <div class="topbar-title"><?= htmlspecialchars($title) ?></div>
    <div class="topbar-right">
      <?php
      $kkn_start = strtotime('2026-06-30');
      $kkn_end   = strtotime('2026-08-08');
      $today     = strtotime(date('Y-m-d'));
      if ($today < $kkn_start) {
          $sisa = (int)ceil(($kkn_start - $today) / 86400);
          $kkn_day = '<span style="color:#C8922A;font-weight:600;">KKN dimulai ' . $sisa . ' hari lagi</span>';
      } elseif ($today > $kkn_end) {
          $kkn_day = '<span style="color:#276749;font-weight:600;">KKN selesai</span>';
      } else {
          $day_num = (int)floor(($today - $kkn_start) / 86400) + 1;
          $total   = (int)floor(($kkn_end - $kkn_start) / 86400) + 1;
          $kkn_day = 'Hari ke-<strong>' . $day_num . '</strong> dari ' . $total . ' hari';
      }
      ?>
      <i aria-hidden="true" class="ti ti-calendar"></i> <?= date('d F Y') ?> · KKN UMUS 2026 · <?= $kkn_day ?>
    </div>
  </div>
  <div class="content">
<?php } ?>

<?php function dashClose() { ?>
  </div>
</div>
<script>
function toggleSidebar(){
  var nav=document.getElementById('main-nav-sidebar');
  var foot=document.querySelector('.sidebar-footer');
  var icon=document.getElementById('sb-toggle-icon');
  if(!nav)return;
  nav.classList.toggle('open');
  if(foot)foot.classList.toggle('open');
  if(icon)icon.className=nav.classList.contains('open')?'ti ti-x':'ti ti-menu-2';
}
document.querySelectorAll('.sidebar-nav a').forEach(function(a){
  a.addEventListener('click',function(){
    if(window.innerWidth<=768){
      var nav=document.getElementById('main-nav-sidebar');
      if(nav)nav.classList.remove('open');
      var foot=document.querySelector('.sidebar-footer');
      if(foot)foot.classList.remove('open');
      var icon=document.getElementById('sb-toggle-icon');
      if(icon)icon.className='ti ti-menu-2';
    }
  });
});
</script>
</body>
</html>
<?php } ?>