<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// Default values if session isn't set
$user_name = $_SESSION['username'] ?? 'Guest';
$user_role = $_SESSION['role_name'] ?? 'User';
$user_avatar = 'assets/img/profiles/avator1.jpg'; // Make dynamic if needed
?>

<!-- ✅ POS Header -->
<div class="header d-flex justify-content-between align-items-center px-3 py-2 bg-dark text-white shadow-sm sticky-top" style="z-index: 1050; height: 60px;">
  
  <!-- 🔹 Left: Logo + Title -->
  <div class="d-flex align-items-center gap-3">
    <a href="pos.php" class="d-flex align-items-center">
      <img src="assets/img/logo-white.png" alt="Logo" style="height: 35px;">
    </a>
    <h5 class="mb-0 text-white d-none d-md-block">ITR POS</h5>
  </div>

  <!-- 🔹 Right: Icons + Profile -->
  <div class="d-flex align-items-center gap-3">
    
    <!-- Fullscreen -->
    <a href="javascript:void(0);" id="btnFullscreen" class="text-white" title="Fullscreen">
      <i data-feather="maximize"></i>
    </a>

    <!-- Settings -->
    <a href="pos_settings.php" class="text-white" title="POS Settings">
      <i data-feather="settings"></i>
    </a>

    <!-- User Dropdown -->
    <div class="dropdown">
      <a href="#" class="d-flex align-items-center text-white dropdown-toggle" data-bs-toggle="dropdown">
        <img src="<?= $user_avatar ?>" alt="Avatar" class="rounded-circle me-2" style="width: 32px; height: 32px;">
        <div class="d-none d-md-block">
          <div class="fw-bold"><?= htmlspecialchars($user_name) ?></div>
          <small><?= htmlspecialchars($user_role) ?></small>
        </div>
      </a>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="pos.php"><i data-feather="user" class="me-2"></i> My Profile</a></li>
        <li><a class="dropdown-item" href="pos_settings.php"><i data-feather="settings" class="me-2"></i> Settings</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item text-danger" href="logout.php"><i data-feather="log-out" class="me-2"></i> Logout</a></li>
      </ul>
    </div>
  </div>
</div>
