<!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;
      transition: background 0.3s ease;
    }

    .navbar .brand-section {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      /* Prevent shrinking */
    }

    .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 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-weight: 600;
      font-size: 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 50%;
      Adjust as needed
      text-align: center;
    } */

    .navbar .middle-title {
      position: static;
      transform: none;
      text-align: center;
      flex: 1;
      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;
      line-height: 1.4;
      flex-shrink: 0;
    }

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

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

    /* Sidebar Toggle Button */
    .sidebar-toggle {
      background: transparent;
      border: none;
      color: inherit;
      font-size: 20px;
      margin-right: 15px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .sidebar-toggle:hover {
      transform: scale(1.1);
    }

    /* ===== 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;
      z-index: 1100;
    }

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

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

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

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

    .sidebar-mobile-margin {
      margin-top: 28px !important;
    }

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

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

    #reportMenu .dropdown-item {
      font-size: 14px;
      padding: 8px 25px;
      color: #dcdde1;
    }

    #reportMenu .dropdown-item:hover {
      background-color: #636e72;
    }

    /* Responsive: smaller screens */
    @media (max-width: 768px) {
      .navbar {
        flex-wrap: wrap;
        height: auto;
        padding: 0.5rem 1rem;
      }

      .navbar .middle-title {
        position: static;
        transform: none;
        margin-top: 5px;
        text-align: center;
        max-width: 100%;
      }

      .navbar .user-info {
        width: 100%;
        justify-content: space-between;
      }
    }

    /* Mobile sidebar */
    @media (max-width: 768px) {
      .sidebar {
        left: -210px;
        transition: all 0.3s ease;
      }

      .sidebar.show {
        left: 0;
        /* z-index: 1100; */
        /* above main content */
      }

      .main-content {
        margin-left: 0 !important;
        margin-top: 30px;
      }

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


    .table>tbody {
      font-size: 18px !important;
    }

    /* Dynamic table header using theme color */
    .table-theme-header th {
      background:
        <?php echo $_SESSION['theme_color'] ?? '#3498db'; ?>
        !important;
      color:
      <?php
      function getTextColor($hex)
      {
        $hex = str_replace('#', '', $hex);
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));
        $brightness = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
        return ($brightness > 155) ? '#000' : '#fff';
      }
      echo getTextColor($_SESSION['theme_color'] ?? '#3498db');
      ?>
      !important;
      font-weight: 600;
      text-align: center;
    }
  </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']; ?></span>
    </div>

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

    <div class="user-info">
      <div>
        <strong><?php echo $_SESSION['Full_Name']; ?></strong><br>
        <small>
          Last Login:
          <?php
          echo isset($_SESSION['last_login']) && $_SESSION['last_login'] != ''
            ? date('d-m-Y h:i A', strtotime($_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"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
    <a href="manage-categories.php"><i class="fas fa-layer-group"></i> Categories</a>
    <a href="manage-authors.php"><i class="fas fa-user-edit"></i> Authors</a>
    <a href="manage-publishers.php"><i class="fas fa-newspaper"></i> Publishers</a>
    <a href="manage-racks.php"><i class="fas fa-th-large"></i> Cupboards</a>
    <a href="manage-departments.php"><i class="fas fa-building"></i> Department</a>
    <a href="manage-degrees.php"><i class="fas fa-graduation-cap"></i> Degree</a>
    <a href="manage-designations.php"><i class="fas fa-id-badge"></i> Designation</a>
    <a href="manage-books.php"><i class="fas fa-book"></i> Books</a>
    <a href="import-books.php"><i class="fas fa-file-import"></i> Import Books</a>
    <a href="manage-issued-books.php"><i class="fas fa-share-square"></i> Issue Books</a>
    <a href="extension-requests.php"><i class="fas fa-clock"></i> Extension Requests</a>
    <a href="manage-inout-records.php"><i class="fa-solid fa-arrow-right-arrow-left"></i> In/Out</a>

    <a id="reportMenuToggle" data-bs-toggle="collapse" href="#reportMenu" role="button" aria-expanded="false">
      <i class="fas fa-chart-bar"></i> Reports <i class="fas fa-caret-down ms-auto"></i>
    </a>
    <ul class="collapse list-unstyled" id="reportMenu">
      <li><a class="dropdown-item" href="report-issued-books.php">Issued Books</a></li>
      <li><a class="dropdown-item" href="report-returned-books.php">Returned Books</a></li>
      <li><a class="dropdown-item" href="report-notreturned-books.php">Not-Returned Books</a></li>
      <li><a class="dropdown-item" href="book-report.php">All Books</a></li>
      <!-- <li><a class="dropdown-item" href="damaged-book-report.php">Damaged Books</a></li> -->
      <li><a class="dropdown-item" href="report-logs.php">Logs</a></li>
      <li><a class="dropdown-item" href="report-admin-logs.php">Admin Logs</a></li>
      <li><a class="dropdown-item" href="report-fine.php">Fine Report</a></li>
    </ul>

    <a href="reg-students.php"><i class="fas fa-users"></i> Students</a>
    <a href="reg-staffs.php"><i class="fas fa-user-tie"></i> Staffs</a>
    <a href="theme_settings.php"><i class="fas fa-gear"></i> Theme</a>
    <a href="change-password.php"><i class="fas fa-key"></i> Change Password</a>
  </div>

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

  <!-- JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {

      const toggleBtn = document.getElementById('sidebarToggle');
      const sidebar = document.getElementById('sidebarMenu');
      const mainContent = document.querySelectorAll('.main-content');

      toggleBtn.addEventListener('click', () => {
        const windowWidth = window.innerWidth;

        if (windowWidth <= 768) {
          sidebar.classList.toggle('show');
          sidebar.classList.toggle('sidebar-mobile-margin');

        } else {
          sidebar.classList.toggle('hide');

          if (sidebar.classList.contains('hide')) {
            mainContent.forEach(el => { el.style.marginLeft = '0px'; });
          } else {
            mainContent.forEach(el => { el.style.marginLeft = '210px'; });
          }
        }
      });

    });


    // Click outside sidebar on mobile to hide it
    document.addEventListener('click', (e) => {
      const windowWidth = window.innerWidth;
      if (windowWidth <= 768 && sidebar.classList.contains('show')) {
        if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target)) {
          sidebar.classList.remove('show');
        }
      }
    });

    // Adjust mainContent margin on window resize
    window.addEventListener('resize', () => {
      if (window.innerWidth > 768) {
        sidebar.classList.remove('show'); // remove mobile show
        if (!sidebar.classList.contains('hide')) {
          mainContent.style.marginLeft = '210px';
        } else {
          mainContent.style.marginLeft = '0';
        }
      } else {
        mainContent.style.marginLeft = '0';
      }
    });



    // 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>