<?php
if (strlen($_SESSION['login']) == 0) {
  header('location:index.php');
  exit;
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Library Dashboard</title>
  <link rel="icon" type="image/x-icon" href="<?php echo $_SESSION['logo']; ?>">

  <!-- Bootstrap & Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

  <style>
    :root {
      --theme-color:
        <?php echo $_SESSION['theme_color'] ?? '#3498db'; ?>
      ;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f4f6f9;
      margin: 0;
    }

    /* ===== Navbar ===== */
    .navbar {
      background: linear-gradient(135deg, var(--theme-color), #00000033);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1.5rem;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
    }

    .navbar .brand-section {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .navbar .brand-section img {
      height: 42px;
      width: 42px;
      border-radius: 50%;
      object-fit: cover;
    }

    .navbar .theme-name {
      font-weight: 600;
      font-size: 18px;
    }

    .navbar .middle-title {
      flex: 1;
      text-align: center;
      font-weight: 600;
      font-size: 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .navbar .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
    }

    .navbar .logout-btn {
      background: #e74c3c;
      color: #fff !important;
      border: none;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 13px;
      text-decoration: none;
    }

    .navbar .logout-btn:hover {
      background: #c0392b;
    }

    .sidebar-toggle {
      background: transparent;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }

    /* ===== Sidebar ===== */
    .sidebar {
      position: fixed;
      top: 65px;
      left: 0;
      width: 210px;
      height: calc(100% - 65px);
      background: #2d3436;
      padding-top: 15px;
      overflow-y: auto;
      transition: all 0.3s ease;
    }

    .sidebar.hide {
      left: -210px;
    }

    .sidebar a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #dfe6e9;
      padding: 10px 18px;
      text-decoration: none;
      transition: background 0.3s ease;
    }

    .sidebar a span {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sidebar a:hover,
    .sidebar .active {
      background-color: #636e72;
      color: #fff;
    }

    .sidebar i {
      width: 20px;
      text-align: center;
    }

    .rotate-icon {
      transition: transform 0.3s ease;
    }

    .rotate-icon.rotate {
      transform: rotate(180deg);
    }

    .main-content {
      margin-left: 210px;
      margin-top: 10px;
      padding: 20px;
      transition: margin-left 0.3s ease;
    }

    .main-content.full {
      margin-left: 0;
    }

    @media(max-width:768px) {
      .sidebar {
        left: -210px;
      }

      .sidebar.show {
        left: 0;
      }

      .main-content {
        margin-left: 0;
      }

      .navbar .middle-title {
        display: none;
      }

      .navbar {
        flex-wrap: wrap;
        height: auto;
        padding: 0.5rem 1rem;
      }
    }
  </style>
</head>

<body>

  <!-- Navbar -->
  <nav class="navbar" id="dynamicNavbar">
    <div class="brand-section">
      <button class="sidebar-toggle" id="sidebarToggle"><i class="fas fa-bars"></i></button>
      <img src="        <?php echo $_SESSION['logo']; ?>" alt="Logo">
      <span class="theme-name"><?php echo $_SESSION['theme_name'] ?? 'Library'; ?></span>
    </div>

    <div class="middle-title">Wisdomstack - Library Management System</div>

    <div class="user-info">
      <div>
        <strong><?php echo $_SESSION['Full_Name'] ?? 'User'; ?></strong><br>
        <small>Last Login: <?php echo $_SESSION['last_login'] ?? '-'; ?></small>
      </div>
      <a href="logout.php" class="logout-btn">Logout</a>
    </div>
  </nav>

  <!-- Sidebar -->
  <div class="sidebar" id="sidebarMenu">
    <a href="dashboard.php" class="active"><span><i class="fas fa-tachometer-alt"></i> Dashboard</span></a>

    <a href="#accountMenu" class="d-flex justify-content-between align-items-center" data-bs-toggle="collapse">
      <span><i class="fas fa-user-circle"></i> Account</span>
      <i class="fas fa-caret-down rotate-icon" id="accountToggleIcon"></i>
    </a>
    <ul class="collapse list-unstyled" id="accountMenu">
      <li><a class="dropdown-item" href="my-profile.php">My Profile</a></li>
      <li><a class="dropdown-item" href="change-password.php">Change Password</a></li>
    </ul>

    <a href="issued-books.php"><span><i class="fas fa-book-reader"></i> Borrowed Books</span></a>
    <a href="available-books.php"><span><i class="fas fa-book-open"></i> Available Books</span></a>
  </div>

  <!-- Main Content -->
  <div class="main-content" id="mainContent">
    <!-- Dashboard content goes here -->
  </div>

  <!-- JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Sidebar toggle
    const toggleBtn = document.getElementById('sidebarToggle');
    const sidebar = document.getElementById('sidebarMenu');

    toggleBtn.addEventListener('click', () => {
      sidebar.classList.toggle('hide');

      // Find the main-content CSS rule
      const styleSheets = document.styleSheets;
      for (let sheet of styleSheets) {
        try {
          for (let rule of sheet.cssRules) {
            if (rule.selectorText === '.main-content') {
              if (sidebar.classList.contains('hide')) {
                rule.style.marginLeft = '0';
              } else {
                rule.style.marginLeft = '210px'; // match your sidebar width
              }
            }
          }
        } catch (e) {
          // ignore CORS-restricted stylesheets
        }
      }
    });


    // Dynamic text color adjustment
    function getLuminance(hex) {
      hex = hex.replace('#', '');
      const r = parseInt(hex.substr(0, 2), 16) / 255;
      const g = parseInt(hex.substr(2, 2), 16) / 255;
      const b = parseInt(hex.substr(4, 2), 16) / 255;
      const a = [r, g, b].map(v => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
      return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
    }

    const themeColor = getComputedStyle(document.documentElement)
      .getPropertyValue('--theme-color')
      .trim();

    const luminance = getLuminance(themeColor);
    const textColor = luminance > 0.5 ? '#000' : '#fff';

    document.querySelector('.navbar').style.color = textColor;
    document.querySelectorAll('.navbar .theme-name, .navbar .middle-title, .navbar .user-info, .navbar .logout-btn, .sidebar-toggle i')
      .forEach(el => el.style.color = textColor);
  </script>
</body>

</html>