<?php require_once 'fungsi/fungsi.php'; ?>
<?php foreach (summon_admin() as $key): ?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php echo $judul; ?> — Toko Mastor</title>
  <link rel="icon" type="image/png" href="<?= url()?>img/logo_kasir_kita.png">
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- AdminLTE base (for modals/widgets JS compat) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <!-- Premium Design System -->
  <link rel="stylesheet" href="<?= url() ?>custom_modern.css?v=<?= time() ?>">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- Mobile Sidebar Overlay -->
  <div class="sidebar-overlay" id="sidebarOverlay"></div>

  <!-- ============================================================
       TOPBAR
  ============================================================= -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#" id="sidebarToggle" role="button" style="display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--surface-2);color:var(--text-secondary);transition:all 0.2s;">
          <i class="fas fa-bars" style="font-size:14px;"></i>
        </a>
      </li>
    </ul>

    <!-- Topbar right: user info + logout -->
    <div class="topbar-user" style="margin-left:auto;display:flex;align-items:center;gap:12px;">
      <div style="display:flex;align-items:center;gap:8px;cursor:pointer;" onclick="document.getElementById('inputFotoAdminDash').click();">
        <?php if(!empty($key['foto'])): ?>
          <img src="img/<?= $key['foto'] ?>" alt="Foto" style="width:32px;height:32px;border-radius:8px;object-fit:cover;border:2px solid var(--border);" id="topbarFotoAdminDash">
        <?php else: ?>
          <div style="width:32px;height:32px;border-radius:8px;background:var(--success-bg);display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;color:var(--success-text);" id="topbarFotoAdminDash">
            <?= strtoupper(substr($key['nama'], 0, 2)); ?>
          </div>
        <?php endif; ?>
        <div>
          <div style="font-size:0.82rem;font-weight:700;color:var(--text-main);line-height:1.2;"><?= $key['nama']; ?></div>
          <div style="font-size:0.7rem;color:var(--text-muted);text-transform:capitalize;line-height:1.2;"><?= $key['level']; ?></div>
        </div>
      </div>
      <input type="file" id="inputFotoAdminDash" accept="image/*" style="display:none;" onchange="uploadFotoAdminDash(this)">
    </div>
  </nav>
  <!-- /.topbar -->

  <!-- ============================================================
       SIDEBAR
  ============================================================= -->
  <aside class="main-sidebar">

    <!-- Brand -->
    <a href="index.php" class="brand-link">
      <img src="<?= url()?>img/logo_kasir_kita.png" alt="Toko Mastor" class="brand-image">
      <span class="brand-text">Toko Mastor</span>
    </a>

    <div class="sidebar">

      <!-- Flat Sidebar Navigation -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" role="menu">

          <li class="nav-item">
            <a href="index.php" class="nav-link" data-page="">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>Dashboard</p>
            </a>
          </li>

          <li class="nav-item">
            <a href="index.php?m=barang&s=title" class="nav-link" data-page="barang">
              <i class="nav-icon fas fa-box-open"></i>
              <p>Barang</p>
            </a>
          </li>

          <li class="nav-item">
            <a href="index.php?m=kategori&s=title" class="nav-link" data-page="kategori">
              <i class="nav-icon fas fa-tags"></i>
              <p>Kategori Barang</p>
            </a>
          </li>

          <li class="nav-item">
            <a href="index.php?m=barangmasuk&s=title" class="nav-link" data-page="barangmasuk">
              <i class="nav-icon fas fa-dolly-flatbed"></i>
              <p>Barang Masuk</p>
            </a>
          </li>

          <li class="nav-item">
            <a href="index.php?m=retur&s=title" class="nav-link" data-page="retur">
              <i class="nav-icon fas fa-undo-alt"></i>
              <p>Retur Barang</p>
            </a>
          </li>

          <li class="nav-item">
            <a href="index.php?m=laporan&s=title" class="nav-link" data-page="laporan">
              <i class="nav-icon fas fa-chart-bar"></i>
              <p>Laporan Penjualan</p>
            </a>
          </li>

          <li class="nav-item">
            <a href="index.php?m=admin&s=title" class="nav-link" data-page="admin">
              <i class="nav-icon fas fa-users"></i>
              <p>Pengguna</p>
            </a>
          </li>

          <li class="nav-item">
            <a href="index.php?m=aktivitas&s=title" class="nav-link" data-page="aktivitas">
              <i class="nav-icon fas fa-history"></i>
              <p>Aktivitas</p>
            </a>
          </li>

        </ul>
      </nav>

    </div><!-- /.sidebar -->

    <!-- Sidebar Footer — Logout -->
    <div class="sidebar-footer">
      <a href="logout.php" class="sidebar-logout">
        <i class="fas fa-sign-out-alt" style="font-size:13px;"></i>
        Keluar dari Akun
      </a>
    </div>

  </aside>
  <!-- /.sidebar -->

<?php endforeach; ?>
<script>
(function() {
  var params = new URLSearchParams(window.location.search);
  var m = params.get('m') || '';
  document.querySelectorAll('.nav-sidebar .nav-link').forEach(function(link) {
    if ((link.getAttribute('data-page') || '') === m) {
      link.classList.add('active');
    }
  });
  var toggle  = document.getElementById('sidebarToggle');
  var sidebar = document.querySelector('.main-sidebar');
  var overlay = document.getElementById('sidebarOverlay');
  function openSidebar()  { sidebar.classList.add('sidebar-open');    overlay.classList.add('active');    document.body.style.overflow = 'hidden'; }
  function closeSidebar() { sidebar.classList.remove('sidebar-open'); overlay.classList.remove('active'); document.body.style.overflow = ''; }
  if (toggle)  toggle.addEventListener('click',  function(e){ e.preventDefault(); sidebar.classList.contains('sidebar-open') ? closeSidebar() : openSidebar(); });
  if (overlay) overlay.addEventListener('click', closeSidebar);
})();

function uploadFotoAdminDash(input) {
  if (!input.files || !input.files[0]) return;
  var fd = new FormData();
  fd.append('foto', input.files[0]);
  fetch('fungsi/upload_photo.php', { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(d) {
      if (d.success) {
        var el = document.getElementById('topbarFotoAdminDash');
        if (el.tagName === 'IMG') {
          el.src = d.path;
        } else {
          var img = document.createElement('img');
          img.src = d.path;
          img.alt = 'Foto';
          img.id = 'topbarFotoAdminDash';
          img.style.cssText = 'width:32px;height:32px;border-radius:8px;object-fit:cover;border:2px solid var(--border);';
          el.parentNode.replaceChild(img, el);
        }
      } else {
        alert(d.message);
      }
    });
  input.value = '';
}
</script>


