<?php
require __DIR__ . '/../Login/config.php'; // koneksi pakai $pdo
if (session_status() === PHP_SESSION_NONE) {
  session_start();
}

// Hitung ringkasan
$jumlahBuku = $pdo->query("SELECT COUNT(*) FROM books")->fetchColumn();
$jumlahPeminjaman = $pdo->query("SELECT COUNT(*) FROM borrowings WHERE status = 'dipinjam'")->fetchColumn();
$jumlahTerlambat = (int)$pdo->query("
  SELECT COUNT(*)
  FROM borrowings
  WHERE status = 'dipinjam'
    AND tgl_jatuh_tempo IS NOT NULL
    AND tgl_jatuh_tempo < CURDATE()
")->fetchColumn();
$jumlahAnggota = $pdo->query("SELECT COUNT(*) FROM users")->fetchColumn();

// Ambil 10 buku terbaru
$stmt = $pdo->query("SELECT judul, penulis, penerbit, tahun_terbit, isbn 
                     FROM books ORDER BY created_at DESC LIMIT 10");
$books = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Ambil data user dengan role admin
$stmtAdmin = $pdo->query("SELECT email, fullname, phone, role
                          FROM users 
                          WHERE role = 'admin' 
                          ORDER BY created_at DESC");
$admins = $stmtAdmin->fetchAll(PDO::FETCH_ASSOC);


?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Admin - Pustakaia</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      margin: 0;
      font-family: "Poppins", Arial, sans-serif;
      line-height: 1.6;
      background: #f4f7f9;
      color: #222;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    a { text-decoration: none; }

    /* Layout */
    .container {
      display: flex;
      flex: 1;
    }
    main {
      flex: 1;
      padding: 20px;
      margin-left: 250px;
    }

    /* Sidebar */
    .sidebar {
      width: 250px;
      height: 100vh;
      background: #fff;
      border-right: 1px solid #ddd;
      padding: 10px 0;
      position: fixed;
      top: 0;
      left: 0;
      overflow-y: auto;
    }
    .sidebar-header {
      padding: 15px 20px;
      border-bottom: 1px solid #ddd;
    }
    .sidebar-header h2 {
      margin: 0; font-size: 18px; color: #069797;
    }
    .sidebar-header p {
      margin: 0; font-size: 12px; color: #777;
    }
    .sidebar-menu {
      list-style: none; padding: 0; margin: 0;
    }
    .sidebar-menu li {
      padding: 12px 20px; font-size: 14px; color: #444;
      display: flex; align-items: center; cursor: pointer;
      transition: background 0.2s;
    }
    .sidebar-menu li i { margin-right: 10px; font-size: 16px; color: #666; }
    .sidebar-menu li:hover { background: #f5f5f5; }
    .sidebar-menu li.active { background: #e0ebff; color: #069797; }
    .sidebar-menu li.active i { color: #069797; }

    /* Submenu */
    .submenu {
      list-style: none;
      padding-left: 30px;
      margin: 0;
      display: none;
    }
    .submenu li {
      padding: 0;
    }
    .submenu li a {
      display: flex;
      align-items: center;
      padding: 8px 20px;
      font-size: 13px;
      color: #444;
      width: 100%;
    }
    .submenu li a i {
      margin-right: 8px;
      font-size: 14px;
      color: #666;
    }
    .submenu li a:hover { background: #f5f5f5; }
    .has-submenu {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .has-submenu .arrow {
      margin-left: auto;
      font-size: 12px;
      color: #666;
    }

    /* Cards */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    .card {
      padding: 20px;
      border-radius: 8px;
      color: #fff;
      text-align: center;
      position: relative;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .card h3 {
      font-size: 28px;
      margin: 0;
      font-weight: bold;
    }
    .card p {
      margin: 5px 0 10px;
      font-size: 16px;
    }
    .card a {
      display: block;
      font-size: 13px;
      color: #fff;
      text-decoration: none;
      margin-top: 10px;
      opacity: 0.9;
    }
    .card a:hover { text-decoration: underline; }

    /* Warna khusus */
    .card-blue { background:#069797; }   
    .card-orange { background: #069797; } 
    .card-green { background: #069797; }  
    .card-red { background: #069797; }    

    /* Table */
    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    table th, table td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
      font-size: 14px;
    }
    table th {
      background: #069797;
      color: #fff;
    }
    table tr:hover { background: #f9f9f9; }

    /* Footer */
    footer {
      background: #fff;
      border-top: 1px solid #ddd;
      padding: 15px 30px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      margin-left: 250px;
      color: #555;
    }
    .footer-left { color:#555; }
    .footer-right a {
      margin-left: 15px;
      color:#555;
      font-weight:500;
    }
    .footer-right a:hover { text-decoration: underline; }
    
  </style>
</head>
<body>
  <div class="container">
    <!-- Sidebar -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <h2>📚 Pustakaia</h2>
        <p>Admin Panel</p>
      </div>
      <!-- Sidebar (ganti bagian Kelola Buku / tambahkan Kelola Anggota) -->
<ul class="sidebar-menu">
  <li class="active"><i class="fa fa-tachometer-alt"></i> Dashboard</li>

  <!-- Kelola Buku (tetap seperti sebelumnya) -->
  <li class="has-submenu" id="kelola-buku">
    <i class="fa fa-book"></i> Kelola Buku <span class="arrow"></span>
  </li>
  <ul class="submenu" id="submenu-buku" >
    <li><a href="daftarbuku.php"><i class="fa fa-list"></i> Daftar Buku</a></li>
    <li><a href="add_book.php"><i class="fa fa-plus"></i> Tambahkan Buku</a></li>
  </ul>

  <!-- Kelola Anggota (baru) -->
  <li class="has-submenu" id="kelola-anggota">
    <i class="fa fa-users"></i> Kelola Anggota <span class="arrow"></span>
  </li>
  <ul class="submenu" id="submenu-anggota" style="display:none;">
    <li><a href="daftaranggota.php"><i class="fa fa-list"></i> Daftar Anggota</a></li>
    <li><a href="add_anggota.php"><i class="fa fa-plus"></i> Tambah Anggota</a></li>
  </ul>

  <li><a href="borrow_requests.php"><i class="fa fa-exchange-alt"></i> Kelola Peminjaman</a></li>

</ul>
      <hr>
      <ul class="sidebar-menu">
        <li><i class="fa fa-cog"></i> Pengaturan</li>
        <li><a href="../index2.php"><i class="fa fa-sign-out-alt"></i> Keluar</a></li>
      </ul>
    </aside>

    <!-- Main Content -->
    <main>
      <h1>Dashboard Admin</h1>

      <!-- Cards Ringkasan -->
      <div class="cards">
        <div class="card card-blue">
          <h3><?= $jumlahBuku ?></h3>
          <p>Buku</p>
          <a href="daftarbuku.php"><i class="fa fa-arrow-circle-right"></i> More Info</a>
        </div>
        <div class="card card-orange">
          <h3><?= $jumlahAnggota ?></h3>
          <p>Anggota</p>
          <a href="daftaranggota.php"><i class="fa fa-arrow-circle-right"></i> More Info</a>
        </div>
        <div class="card card-green">
          <h3><?= $jumlahPeminjaman ?></h3>
          <p>Buku yang dipinjam</p>
          <a href="borrow_requests.php"><i class="fa fa-arrow-circle-right"></i> More Info</a>
        </div>
        <div class="card card-red">
          <h3><?= $jumlahTerlambat ?></h3>
          <p>Buku Jatuh Tempo</p>
          <a href="#"><i class="fa fa-arrow-circle-right"></i> More Info</a>
        </div>
      </div>

      <!-- Tabel Buku -->
      <h2>Daftar 10 Buku Terbaru</h2>
      <table>
        <thead>
          <tr>
            <th>Judul</th>
            <th>Penulis</th>
            <th>Penerbit</th>
            <th>Tahun Terbit</th>
            <th>ISBN</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($books as $book): ?>
            <tr>
              <td><?= htmlspecialchars($book['judul']) ?></td>
              <td><?= htmlspecialchars($book['penulis']) ?></td>
              <td><?= htmlspecialchars($book['penerbit']) ?></td>
              <td><?= htmlspecialchars($book['tahun_terbit']) ?></td>
              <td><?= htmlspecialchars($book['isbn']) ?></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
      <!-- Tabel Admin -->
<h2>Daftar Admin</h2>
<table>
  <thead>
    <tr>
      <th>Email</th>
      <th>Nama Lengkap</th>
      <th>No. Telp</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <?php if ($admins): ?>
      <?php foreach ($admins as $admin): ?>
        <tr>
          <td><?= htmlspecialchars($admin['email']) ?></td>
          <td><?= htmlspecialchars($admin['fullname']) ?></td>
          <td><?= htmlspecialchars($admin['phone']) ?></td>
          <td><?= htmlspecialchars($admin['role']) ?></td>
        </tr>
      <?php endforeach; ?>
    <?php else: ?>
      <tr><td colspan="4">Belum ada admin</td></tr>
    <?php endif; ?>
  </tbody>
</table>
    </main>
  </div>

 



  <!-- Footer -->
  <footer>
    <div class="footer-left">
      © <?= date('Y') ?>, Pustakaia | Website developed by Grup 3
    </div>
    <div class="footer-right">
      <a href="#">Terms of Use</a>
      <a href="#">Privacy Policy</a>
    </div>
  </footer>

  <script>
  // Toggle semua submenu (Kelola Buku, Kelola Anggota, dst)
  document.querySelectorAll('.has-submenu').forEach(menu => {
    menu.addEventListener('click', e => {
      // cari elemen <ul class="submenu"> berikutnya
      const submenu = menu.nextElementSibling;
      if (!submenu) return;
      submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
    });
  });
</script>
</body>
</html>
