<!DOCTYPE html>
<html lang="id" data-bs-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $__env->yieldContent('title', 'SIA SD Cerdas'); ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<style>
:root{
  --brand:#1d7a6e;
  --brand-light:#28a08f;
  --brand-dark:#145e54;
  --accent:#f2a341;
  --radius:14px;
  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;

  --bg:#f3f5f4;
  --surface:#ffffff;
  --surface-2:#fafbfb;
  --text:#1c2624;
  --text-muted:#677a76;
  --border:#e3e8e6;
  --sidebar-bg:#102420;
  --sidebar-text:#a9c2bc;
  --sidebar-active:#1d7a6e;
  --shadow:0 1px 2px rgba(16,36,32,.04), 0 8px 24px rgba(16,36,32,.05);
}

[data-bs-theme="dark"]{
  --bg:#0e1513;
  --surface:#151f1c;
  --surface-2:#101816;
  --text:#e7f0ed;
  --text-muted:#8aa19b;
  --border:#22302c;
  --sidebar-bg:#0a1311;
  --sidebar-text:#8aa19b;
  --sidebar-active:#1d7a6e;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  transition:background .25s ease, color .25s ease;
}
.app{ display:flex; height:100vh; }

/* ===== Sidebar ===== */
.sidebar{
  width:264px;
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex-shrink:0;
  height:100vh;
  overflow:hidden;
  transition:transform .25s ease, background .25s ease;
}
.sidebar-top{ display:flex; flex-direction:column; min-height:0; flex:1; }
.sidebar-brand{
  padding:22px 20px; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, var(--brand-light), var(--brand));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:.95rem;
  flex-shrink:0;
}
.sidebar-brand h1{ font-family:var(--font-display); font-size:.95rem; font-weight:700; color:#fff; margin:0; line-height:1.15; }
.sidebar-brand span{ font-size:.72rem; color:#7e978f; }

.nav-scroll{
  padding:18px 14px; overflow-y:auto; flex:1; min-height:0;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
}
.nav-scroll::-webkit-scrollbar{ width:6px; }
.nav-scroll::-webkit-scrollbar-track{ background:transparent; }
.nav-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:99px; }
.nav-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.3); }
.nav-eyebrow{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#5e7a72; padding:0 10px; margin:18px 0 8px;
}
.nav-eyebrow:first-child{ margin-top:2px; }
.nav-link-custom{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  color:var(--sidebar-text); text-decoration:none; font-size:.875rem; font-weight:500;
  margin-bottom:2px; transition:background .15s ease, color .15s ease; position:relative;
}
.nav-link-custom i{ width:18px; text-align:center; font-size:.9rem; opacity:.85; }
.nav-link-custom:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-link-custom.active{ background:var(--sidebar-active); color:#fff; }
.nav-link-custom.active i{ opacity:1; }
.nav-badge{ margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:1px 7px; border-radius:99px; font-weight:600; }

.sidebar-foot{ padding:14px; border-top:1px solid rgba(255,255,255,.06); }
.user-chip{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; }
.user-avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), #d9821f);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.8rem; flex-shrink:0;
}
.user-chip h4{ font-size:.82rem; font-weight:600; color:#fff; margin:0; line-height:1.2; }
.user-chip small{ color:#7e978f; font-size:.72rem; text-transform:capitalize; }
.logout-btn{
  width:32px; height:32px; border-radius:8px; border:none;
  background:rgba(255,255,255,.06); color:#a9c2bc;
  display:flex; align-items:center; justify-content:center;
  margin-left:auto; transition:background .15s ease, color .15s ease;
}
.logout-btn:hover{ background:#b3413c; color:#fff; }

/* ===== Main ===== */
.main{ flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.topbar{
  height:68px; flex-shrink:0; background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
}
.topbar-title h2{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; margin:0; }
.topbar-title small{ color:var(--text-muted); font-size:.78rem; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text);
  display:flex; align-items:center; justify-content:center; position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.icon-btn:hover{ background:var(--bg); }
.theme-toggle{ overflow:hidden; }
.theme-toggle .fa-sun{ display:none; }
[data-bs-theme="dark"] .theme-toggle .fa-sun{ display:inline-block; }
[data-bs-theme="dark"] .theme-toggle .fa-moon{ display:none; }
.notif-dot{ position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:#e25c4f; border:1.5px solid var(--surface); }
.menu-btn{ display:none; }

.content{ flex:1; overflow-y:auto; padding:24px; }

.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.panel-head{
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; background:var(--surface-2);
}
.panel-head h3{ font-family:var(--font-display); font-size:.95rem; font-weight:700; margin:0; }
.panel-head .link-action{ font-size:.8rem; font-weight:600; color:var(--brand); text-decoration:none; }
.panel-head .link-action:hover{ color:var(--brand-dark); }
.panel-body{ padding:20px; }

.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; height:100%;
}
.stat-card .label{ font-size:.78rem; color:var(--text-muted); font-weight:500; }
.stat-card .value{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; margin-top:2px; }
.stat-card .delta{ font-size:.72rem; font-weight:600; margin-top:4px; }
.stat-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}

.role-pill{
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; letter-spacing:.03em;
}
.role-guru{ background:#dcf3ec; color:#0d6e57; }
.role-kepsek{ background:#ece2f9; color:#6b3fb0; }
.role-operator{ background:#fdebd2; color:#a85f12; }
[data-bs-theme="dark"] .role-guru{ background:#10342c; color:#5bd6ae; }
[data-bs-theme="dark"] .role-kepsek{ background:#2a1f3d; color:#bb9bef; }
[data-bs-theme="dark"] .role-operator{ background:#3a2b12; color:#f0b35e; }

.avatar-sm{
  width:30px; height:30px; border-radius:50%;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; flex-shrink:0;
}
.who{ display:flex; align-items:center; gap:10px; }
.time-muted{ color:var(--text-muted); font-size:.78rem; }

/* Pagination */
.pagination{ gap:4px; flex-wrap:wrap; margin-bottom:0; }
.page-item .page-link{ border-radius:8px!important; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:.8rem; font-weight:600; padding:5px 12px; min-width:34px; text-align:center; transition:background .15s,color .15s; box-shadow:none; }
.page-item .page-link:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.page-item.active .page-link{ background:var(--brand); border-color:var(--brand); color:#fff; }
.page-item.disabled .page-link{ opacity:.4; pointer-events:none; }
.page-link svg{ display:none!important; }

.quick-card{
  border:1px solid var(--border); border-radius:12px; padding:16px;
  text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  background:var(--surface);
}
.quick-card:hover{ transform:translateY(-2px); border-color:var(--brand-light); box-shadow:var(--shadow); color:var(--text); }
.quick-card i{ font-size:1.1rem; color:var(--brand); }
.quick-card .qtitle{ font-weight:600; font-size:.85rem; }
.quick-card .qsub{ font-size:.74rem; color:var(--text-muted); }

.table-modern{ width:100%; margin:0; }
.table-modern thead th{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); font-weight:700; border-bottom:1px solid var(--border);
  padding:11px 20px; background:var(--surface-2);
}
.table-modern tbody td{ padding:13px 20px; font-size:.85rem; vertical-align:middle; border-bottom:1px solid var(--border); color:var(--text); }
.table-modern tbody tr:last-child td{ border-bottom:none; }
.table-modern tbody tr:hover{ background:var(--surface-2); }

.form-control, .form-select{
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:10px; font-size:.85rem; padding:9px 12px;
}
.form-control:focus, .form-select:focus{
  background:var(--surface); color:var(--text);
  border-color:var(--brand-light); box-shadow:0 0 0 .2rem rgba(29,122,110,.15);
}
.form-label{ font-size:.78rem; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; font-size:.85rem; border-radius:10px; padding:9px 18px; }
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-soft-danger{ background:#fbe9e7; color:#b3413c; border:none; border-radius:8px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; }
.btn-soft-danger:hover{ background:#f3d3cf; color:#922f29; }
.btn-soft-secondary{ background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); border-radius:8px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.btn-soft-secondary:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* Badge absen */
.badge-hadir { background:#d4edda; color:#155724; font-size:.72rem; padding:3px 8px; border-radius:99px; font-weight:600; }
.badge-sakit { background:#fff3cd; color:#856404; font-size:.72rem; padding:3px 8px; border-radius:99px; font-weight:600; }
.badge-izin  { background:#d1ecf1; color:#0c5460; font-size:.72rem; padding:3px 8px; border-radius:99px; font-weight:600; }
.badge-alfa  { background:#f8d7da; color:#721c24; font-size:.72rem; padding:3px 8px; border-radius:99px; font-weight:600; }
.badge-belum { background:#e2e3e5; color:#383d41; font-size:.72rem; padding:3px 8px; border-radius:99px; font-weight:600; }

/* Checkbox mapel */
.subject-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.subject-check-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); font-size:.8rem; cursor:pointer; transition:border-color .15s,background .15s; }
.subject-check-item:has(input:checked){ border-color:var(--brand); background:#e8f4f2; color:var(--brand); font-weight:600; }
[data-bs-theme="dark"] .subject-check-item:has(input:checked){ background:#0f2e29; }
.subject-check-item input[type=checkbox]{ accent-color:var(--brand); width:15px; height:15px; flex-shrink:0; }

@media (max-width: 991px){
  .sidebar{ position:fixed; inset:0 auto 0 0; z-index:1040; transform:translateX(-100%); }
  .sidebar.show{ transform:translateX(0); }
  .menu-btn{ display:flex; }
  .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1030; display:none; }
  .backdrop.show{ display:block; }
}

<?php echo $__env->yieldContent('extra-style'); ?>
</style>
</head>
<body>

<div class="app">
  <div class="backdrop" id="backdrop"></div>

  <aside class="sidebar" id="sidebar">
    <div class="sidebar-top">
      <div class="sidebar-brand">
        <div class="brand-mark">SD</div>
        <div>
          <h1>SIA SD Cerdas</h1>
          <span>Panel Administrator</span>
        </div>
      </div>

      <nav class="nav-scroll">
        <div class="nav-eyebrow">Utama</div>
        <a href="<?php echo e(route('admin.dashboard')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.dashboard') ? 'active' : ''); ?>">
          <i class="fa-solid fa-grip"></i> Dashboard
        </a>

        <div class="nav-eyebrow">Data Master</div>
        <a href="<?php echo e(route('admin.students.index')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.students.*') ? 'active' : ''); ?>">
          <i class="fa-solid fa-user-graduate"></i> Data Siswa
        </a>
        <a href="<?php echo e(route('admin.teachers.index')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.teachers.*') ? 'active' : ''); ?>">
          <i class="fa-solid fa-chalkboard-user"></i> Data Guru
        </a>
        <a href="<?php echo e(route('admin.subjects.index')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.subjects.*') ? 'active' : ''); ?>">
          <i class="fa-solid fa-book"></i> Mata Pelajaran
        </a>
        <a href="<?php echo e(route('admin.classrooms.index')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.classrooms.*') ? 'active' : ''); ?>">
          <i class="fa-solid fa-door-open"></i> Ruang Kelas
        </a>
        <a href="<?php echo e(route('admin.classes.index')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.classes.*') ? 'active' : ''); ?>">
          <i class="fa-solid fa-school"></i> Data Kelas
        </a>

        <div class="nav-eyebrow">Akademik</div>
        <a href="<?php echo e(route('admin.timeslots.index')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.timeslots.*') ? 'active' : ''); ?>">
          <i class="fa-solid fa-clock"></i> Jam Belajar
        </a>
        <a href="<?php echo e(route('admin.schedules.index')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.schedules.*') ? 'active' : ''); ?>">
          <i class="fa-solid fa-calendar-days"></i> Jadwal Pelajaran
        </a>

        <div class="nav-eyebrow">Presensi</div>
        <a href="<?php echo e(route('admin.absen.siswa')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.absen.siswa*') ? 'active' : ''); ?>">
          <i class="fa-solid fa-clipboard-check"></i> Absensi Siswa
        </a>
        <a href="<?php echo e(route('admin.absen.guru')); ?>" class="nav-link-custom <?php echo e(request()->routeIs('admin.absen.guru*') ? 'active' : ''); ?>">
          <i class="fa-solid fa-user-clock"></i> Absensi Guru
        </a>
      </nav>
    </div>

    <div class="sidebar-foot">
      <div class="user-chip">
        <div class="user-avatar"><?php echo e(strtoupper(substr(auth()->user()->name ?? 'A', 0, 1))); ?></div>
        <div>
          <h4><?php echo e(auth()->user()->name ?? 'Admin Sekolah'); ?></h4>
          <small><?php echo e(auth()->user()->role ?? 'administrator'); ?></small>
        </div>
        <form action="<?php echo e(route('logout')); ?>" method="POST" class="d-inline">
          <?php echo csrf_field(); ?>
          <button type="submit" class="logout-btn" title="Keluar">
            <i class="fa-solid fa-arrow-right-from-bracket"></i>
          </button>
        </form>
      </div>
    </div>
  </aside>

  <div class="main">
    <header class="topbar">
      <div class="d-flex align-items-center gap-3">
        <button class="icon-btn menu-btn" id="menuBtn"><i class="fa-solid fa-bars"></i></button>
        <div class="topbar-title">
          <h2><?php echo $__env->yieldContent('title', 'Dashboard'); ?></h2>
          <small><?php echo $__env->yieldContent('subtitle', 'Selamat datang kembali'); ?></small>
        </div>
      </div>
      <div class="topbar-actions">
        <button class="icon-btn theme-toggle" id="themeToggle" title="Ganti tampilan">
          <i class="fa-solid fa-moon"></i>
          <i class="fa-solid fa-sun"></i>
        </button>
      </div>
    </header>

    <div class="content">
      <?php if(session('success')): ?>
        <div class="alert alert-success"><?php echo e(session('success')); ?></div>
      <?php endif; ?>

      <?php echo $__env->yieldContent('content'); ?>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script>
(function(){
  const root = document.documentElement;
  const toggle = document.getElementById('themeToggle');
  const saved = localStorage.getItem('sia-theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  root.setAttribute('data-bs-theme', saved || (prefersDark ? 'dark' : 'light'));

  toggle.addEventListener('click', () => {
    const current = root.getAttribute('data-bs-theme');
    const next = current === 'dark' ? 'light' : 'dark';
    root.setAttribute('data-bs-theme', next);
    localStorage.setItem('sia-theme', next);
  });

  const sidebar = document.getElementById('sidebar');
  const backdrop = document.getElementById('backdrop');
  const menuBtn = document.getElementById('menuBtn');
  function closeSidebar(){ sidebar.classList.remove('show'); backdrop.classList.remove('show'); }
  if (menuBtn) {
    menuBtn.addEventListener('click', () => {
      sidebar.classList.toggle('show');
      backdrop.classList.toggle('show');
    });
  }
  if (backdrop) backdrop.addEventListener('click', closeSidebar);
})();
</script>
<?php echo $__env->yieldContent('scripts'); ?>
</body>
</html><?php /**PATH C:\Users\ASUS\sia-sd\resources\views/layouts/admin.blade.php ENDPATH**/ ?>