
<?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';  // Set this in login or fetch from DB
$user_avatar = 'assets/img/profiles/avator1.jpg'; // You can make this dynamic later
?>

<!-- Main Wrapper -->
<div class="main-wrapper">

    <!-- Header -->
    <div class="header d-flex justify-content-between align-items-center px-3" style="height: 66px;">
        <!-- Logo -->
        <div class="header-left active d-flex align-items-center" style="height: 66px;">
            <a href="index.php" class="logo logo-normal">
                <img src="assets/img/logo.png" alt="">
            </a>
            <a href="index.php" class="logo logo-white">
                <img src="assets/img/logo-white.png" alt="">
            </a>
            <a href="index.php" class="logo-small">
                <img src="assets/img/logo-small.png" alt="">
            </a>
            <a id="toggle_btn" href="javascript:void(0);">
                <i data-feather="chevrons-left" class="feather-16"></i>
            </a>
        </div>
        <!-- /Logo -->

        <!-- Header Menu -->
        <ul class="nav user-menu align-items-center mb-0" style="gap: 0.5em;">
            <!-- Flag -->
            <li class="nav-item dropdown has-arrow flag-nav nav-item-box">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">
                    <img src="assets/img/flags/us.png" alt="Language" class="img-fluid">
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item active">
                        <img src="assets/img/flags/us.png" alt="" height="16"> English
                    </a>
                    <!-- Add more languages here -->
                </div>
            </li>
            <!-- /Flag -->

            <li class="nav-item nav-item-box">
                <a href="javascript:void(0);" id="btnFullscreen">
                    <i data-feather="maximize"></i>
                </a>
            </li>

            <li class="nav-item nav-item-box">
                <a href="sys_settings.php"><i data-feather="settings"></i></a>
            </li>

            <!-- User Profile Dropdown -->
            <li class="nav-item dropdown has-arrow main-drop">
                <a href="#" class="dropdown-toggle nav-link userset" data-bs-toggle="dropdown">
                    <span class="user-info">
                        <span class="user-letter">
                            <img src="<?= $user_avatar ?>" alt="" class="img-fluid">
                        </span>
                        <span class="user-detail">
                            <span class="user-name"><?= htmlspecialchars($user_name) ?></span>
                            <span class="user-role"><?= htmlspecialchars($user_role) ?></span>
                        </span>
                    </span>
                </a>
                <div class="dropdown-menu menu-drop-user">
                    <div class="profilename">
                        <div class="profileset">
                            <span class="user-img"><img src="<?= $user_avatar ?>" alt="">
                                <span class="status online"></span></span>
                            <div class="profilesets">
                                <h6><?= htmlspecialchars($user_name) ?></h6>
                                <h5><?= htmlspecialchars($user_role) ?></h5>
                            </div>
                        </div>
                        <hr class="m-0">
                        <a class="dropdown-item" href="profile.html"><i class="me-2" data-feather="user"></i> My Profile</a>
                        <a class="dropdown-item" href="general-settings.html"><i class="me-2" data-feather="settings"></i> Settings</a>
                        <hr class="m-0">
                        <a class="dropdown-item logout pb-0" href="logout.php"><img src="assets/img/icons/log-out.svg" class="me-2" alt="img">Logout</a>
                    </div>
                </div>
            </li>
            <!-- POS Button (professional style) -->
            <li class="nav-item nav-item-box ms-3">
                <a href="pos.php" class="btn pos-btn d-flex align-items-center px-4 py-2" style="background: #FF9F43; color: #fff; font-weight: 600; font-size: 1.05rem; border-radius: 30px; box-shadow: 0 2px 8px rgba(255,159,67,0.15); gap: 0.5em;">
                    <i data-feather="shopping-bag"></i>
                    <span class="d-none d-md-inline">POS</span>
                </a>
            </li>
            <!-- /POS Button -->
        </ul>
        <!-- /Header Menu -->

        <!-- Mobile Menu -->
        <div class="dropdown mobile-user-menu">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-ellipsis-v"></i></a>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="profile.html">My Profile</a>
                <a class="dropdown-item" href="general-settings.html">Settings</a>
                <a class="dropdown-item" href="logout.php">Logout</a>
            </div>
        </div>
        <!-- /Mobile Menu -->
    </div>
    <!-- /Header -->
