<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

    <title>ANJUMA Dashboard</title>
</head>

<?php
$userName = $_SESSION["name"] ?? "Benutzer";
$initial = strtoupper(substr($userName, 0, 1));
?>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark anjuma-nav shadow-sm fixed-top">
  <div class="container-fluid">

    <!-- Brand -->
    <a class="navbar-brand fw-bold" href="dashboard.php">
        <i class="bi bi-lightning-charge-fill text-warning me-1"></i> ANJUMA
    </a>

    <!-- Hamburger -->
    <button class="navbar-toggler border-0" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- NAVIGATION -->
    <div class="collapse navbar-collapse mt-2 mt-lg-0" id="navbarNav">

      <!-- Linke Seite -->
      <ul class="navbar-nav me-auto">

        <li class="nav-item">
            <a class="nav-link d-flex align-items-center" href="dashboard.php">
                <i class="bi bi-speedometer2 me-2"></i> Dashboard
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link d-flex align-items-center" href="termine.php">
                <i class="bi bi-calendar-event me-2"></i> Termine
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link d-flex align-items-center" href="finance.php">
                <i class="bi bi-bank me-2"></i> Finanzen
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link d-flex align-items-center" href="rechnungen.php">
                <i class="bi bi-receipt me-2"></i> Rechnungen
            </a>
        </li>

          <li class="nav-item">
              <a class="nav-link d-flex align-items-center" href="stream.php">
                <i class="bi bi-cast me-2"></i> Stream
            </a>
          </li>


        <?php if ($_SESSION['role'] === 'admin'): ?>
          <li class="nav-item">
              <a class="nav-link d-flex align-items-center" href="infrastructure.php">
                <i class="bi bi-server me-2"></i> Infrastructure
            </a>
          </li>
      <?php endif; ?>

      <?php if ($_SESSION['role'] === 'admin'): ?>
          <li class="nav-item">
              <a class="nav-link d-flex align-items-center" href="users.php">
                <i class="bi bi-people me-2"></i> Users
            </a>
          </li>
      <?php endif; ?>

        <?php if ($_SESSION['role'] === 'admin'): ?>
          <li class="nav-item">
              <a class="nav-link d-flex align-items-center" href="settings_calendar.php">
                <i class="bi bi-wrench-adjustable me-2"></i> Settings
            </a>
          </li>
      <?php endif; ?>

      </ul>

      <!-- RECHTS: USER DROPDOWN (einmalig, korrekt platziert) -->
      <ul class="navbar-nav ms-auto">
        <li class="nav-item dropdown">

          <!-- Dropdown Trigger -->
          <a class="nav-link dropdown-toggle d-flex align-items-center user-dropdown-trigger"
             href="#"
             id="userDropdown"
             role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false">

              <div class="user-avatar me-2"><?= $initial; ?></div>
              <span><?= htmlspecialchars($userName); ?></span>
          </a>

          <!-- Dropdown Menü -->
          <ul class="dropdown-menu dropdown-menu-end user-dropdown shadow-lg" aria-labelledby="userDropdown">

            <li>
              <a class="dropdown-item logout-item" href="logout.php">
                <i class="bi bi-box-arrow-right me-2"></i> Logout
              </a>
            </li>

          </ul>

        </li>
      </ul>

    </div>
  </div>
</nav>

<style>
<style>
/* NAVBAR – ANJUMA STYLE */
.anjuma-nav {
    background: rgba(30, 30, 30, 0.85) !important;
    backdrop-filter: blur(6px);
    border-bottom: 2px solid rgba(255, 193, 7, 0.2);
    transition: all 0.3s ease;
}

/* Avatar */
.user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ffc107, #ffdd57);
    color: #212529;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(255,193,7,0.4);
    transition: 0.3s ease;
}

.user-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255,193,7,0.7);
}

/* Dropdown Trigger */
.user-dropdown-trigger:hover {
    color: #ffc107 !important;
}

/* Dropdown */
.user-dropdown {
    border-radius: 12px;
    overflow: hidden;
}

.user-dropdown .dropdown-item {
    padding: 10px 16px;
    transition: 0.2s ease;
}

.user-dropdown .dropdown-item:hover {
    background: rgba(255,193,7,0.15);
    color: #ffc107 !important;
}

/* Logout rot */
.logout-item {
    color: #dc3545 !important;
    font-weight: 600;
}

.logout-item:hover {
    background: rgba(220,53,69,0.15) !important;
    color: #dc3545 !important;
}

/* Abstand wegen fixed-top */
body {
    padding-top: 70px;
}
</style>
<!-- Bootstrap JS Bundle für Burger & Dropdown -->