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

if (!defined('BASE_URL')) {
    define('BASE_URL', '/rooms');
}

if (!function_exists('e')) {
    function e($value)
    {
        return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
    }
}

if (!function_exists('nav_active')) {
    function nav_active(array $needles = [])
    {
        $uri = $_SERVER['REQUEST_URI'] ?? '';
        foreach ($needles as $needle) {
            if ($needle !== '' && stripos($uri, $needle) !== false) {
                return 'active';
            }
        }
        return '';
    }
}

if (!isset($pageTitle) || trim((string)$pageTitle) === '') {
    $pageTitle = 'Dashboard';
}

$appName = $appName ?? $appname ?? 'Lodge PMS';

$currentUserName = $currentUserName
    ?? ($_SESSION['ss_username'] ?? $_SESSION['username'] ?? 'User');

$currentUserRole = $_SESSION['role']
    ?? $_SESSION['user_role']
    ?? $_SESSION['ss_role']
    ?? 'User';

$currentPropertyName = $_SESSION['property_name']
    ?? $_SESSION['branch_name']
    ?? $_SESSION['selected_property_name']
    ?? 'All Properties';

$userInitial = strtoupper(substr((string)$currentUserName, 0, 1));
if ($userInitial === '') {
    $userInitial = 'U';
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo e($pageTitle); ?> | <?php echo e($appName); ?></title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

    <!-- IMPORTANT: absolute path so it works from /rooms/ and /rooms/modules/... -->
    <link href="<?php echo BASE_URL; ?>/assets/css/app.css?v=4" rel="stylesheet">

    <style>
        /* Elite topbar upgrade */
        .topbar{
            position:sticky;
            top:0;
            z-index:50;
            min-height:68px;
            padding:10px 18px;
            background:rgba(255,255,255,.88);
            backdrop-filter:blur(14px);
            border-bottom:1px solid rgba(226,232,240,.85);
            box-shadow:0 10px 30px rgba(15,23,42,.045);
        }
        .topbar-left{
            gap:12px;
            min-width:0;
        }
        .page-eyebrow{
            font-size:.7rem;
            letter-spacing:.08em;
            text-transform:uppercase;
            font-weight:800;
            color:#64748b;
        }
        .page-title{
            font-size:1.18rem;
            line-height:1.1;
            font-weight:900;
            color:#0f172a;
            max-width:520px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .elite-actions{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .elite-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:38px;
            padding:7px 10px;
            border:1px solid #e6edf5;
            border-radius:14px;
            background:#fff;
            box-shadow:0 6px 18px rgba(15,23,42,.035);
            color:#334155;
            text-decoration:none;
        }
        .elite-chip .chip-title{
            font-size:.78rem;
            font-weight:800;
            line-height:1.1;
        }
        .elite-chip .chip-sub{
            font-size:.66rem;
            color:#64748b;
            line-height:1.1;
        }
        .elite-icon-btn{
            width:38px;
            height:38px;
            border-radius:14px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border:1px solid #e6edf5;
            background:#fff;
            color:#334155;
            box-shadow:0 6px 18px rgba(15,23,42,.035);
            text-decoration:none;
            position:relative;
        }
        .elite-icon-btn:hover,
        .elite-chip:hover{
            background:#f8fafc;
            color:#0f172a;
        }
        .elite-badge-dot{
            position:absolute;
            right:7px;
            top:7px;
            width:8px;
            height:8px;
            border-radius:999px;
            background:#dc3545;
            box-shadow:0 0 0 2px #fff;
        }
        .elite-user-dropdown .user-chip{
            border:1px solid #e6edf5;
            background:#fff;
            min-height:42px;
            padding:6px 10px 6px 7px;
            border-radius:16px;
            display:flex;
            align-items:center;
            gap:10px;
            box-shadow:0 8px 24px rgba(15,23,42,.05);
            color:#0f172a;
        }
        .elite-user-dropdown .user-chip::after{
            margin-left:2px;
            font-size:.7rem;
            color:#64748b;
        }
        .avatar-circle{
            width:32px;
            height:32px;
            border-radius:12px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
            color:#fff;
            font-weight:900;
            box-shadow:0 8px 18px rgba(37,99,235,.24);
            flex:0 0 auto;
        }
        .elite-user-name{
            max-width:150px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            font-size:.84rem;
            line-height:1.05;
        }
        .elite-user-role{
            color:#64748b;
            font-size:.68rem;
            line-height:1.05;
        }
        .elite-dropdown{
            border:1px solid #e6edf5;
            border-radius:18px;
            padding:8px;
            min-width:260px;
            box-shadow:0 20px 48px rgba(15,23,42,.14);
        }
        .elite-dropdown .dropdown-item{
            border-radius:12px;
            padding:9px 10px;
            font-weight:650;
            font-size:.88rem;
        }
        .elite-dropdown-header{
            padding:10px;
            border-radius:14px;
            background:linear-gradient(135deg,#f8fafc 0%,#eef5ff 100%);
            margin-bottom:6px;
        }
        .quick-action-menu .dropdown-menu{
            border:1px solid #e6edf5;
            border-radius:18px;
            padding:8px;
            min-width:250px;
            box-shadow:0 20px 48px rgba(15,23,42,.14);
        }
        .quick-action-menu .dropdown-item{
            border-radius:12px;
            padding:9px 10px;
            font-weight:650;
            font-size:.88rem;
        }
        @media (max-width: 1199.98px){
            .elite-chip-date,
            .elite-chip-property{display:none;}
        }
        @media (max-width: 767.98px){
            .topbar{padding:8px 10px;min-height:58px;}
            .page-title{font-size:1rem;max-width:190px;}
            .page-eyebrow{display:none;}
            .elite-icon-btn{width:34px;height:34px;border-radius:12px;}
            .elite-user-dropdown .user-chip{min-height:36px;padding:4px 7px 4px 5px;}
            .elite-user-dropdown .text-start{display:none;}
            .avatar-circle{width:28px;height:28px;border-radius:10px;}
        }
    </style>
</head>
<body>
<div class="app-shell">
    <?php require_once __DIR__ . '/sidebar.php'; ?>

    <main class="app-main">
        <header class="topbar d-flex align-items-center justify-content-between gap-3">
            <div class="topbar-left d-flex align-items-center">
                <button class="mobile-menu-btn" type="button" data-sidebar-toggle aria-label="Toggle menu">
                    <i class="bi bi-list fs-4"></i>
                </button>

                <div class="min-w-0">
                    <div class="page-eyebrow">
                        <i class="bi bi-stars"></i> Back Office
                    </div>
                    <h1 class="page-title mb-0"><?php echo e($pageTitle); ?></h1>
                </div>
            </div>

            <div class="topbar-actions elite-actions">
                <a class="elite-chip elite-chip-date" href="<?php echo BASE_URL; ?>/dashboard.php" title="Today">
                    <i class="bi bi-calendar3 text-primary"></i>
                    <div>
                        <div class="chip-title"><?php echo date('D, d M Y'); ?></div>
                        <div class="chip-sub">Operations overview</div>
                    </div>
                </a>

                <span class="elite-chip elite-chip-property" title="Current Property / Branch">
                    <i class="bi bi-building text-success"></i>
                    <div>
                        <div class="chip-title"><?php echo e($currentPropertyName); ?></div>
                        <div class="chip-sub">Active scope</div>
                    </div>
                </span>

                <div class="dropdown quick-action-menu">
                    <button class="elite-icon-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Quick Actions">
                        <i class="bi bi-lightning-charge"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="<?php echo BASE_URL; ?>/modules/reservations/reservation_form.php"><i class="bi bi-plus-circle me-2 text-primary"></i>New Reservation</a></li>
                        <li><a class="dropdown-item" href="<?php echo BASE_URL; ?>/modules/payments/frontdesk_dashboard.php"><i class="bi bi-display me-2 text-success"></i>Front Desk</a></li>
                        <li><a class="dropdown-item" href="<?php echo BASE_URL; ?>/modules/calendar/availability_calendar.php"><i class="bi bi-calendar-week me-2 text-warning"></i>Availability</a></li>
                        <li><a class="dropdown-item" href="<?php echo BASE_URL; ?>/modules/payments/housekeeping_board.php"><i class="bi bi-brush me-2 text-info"></i>Housekeeping</a></li>
                    </ul>
                </div>

                <a class="elite-icon-btn" href="<?php echo BASE_URL; ?>/modules/reports/alerts.php" title="Alerts">
                    <i class="bi bi-bell"></i>
                    <span class="elite-badge-dot" id="topbarAlertsDot" style="display:none;"></span>
                </a>

                <div class="dropdown elite-user-dropdown">
                    <button class="user-chip dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="avatar-circle"><?php echo e($userInitial); ?></span>
                        <div class="text-start">
                            <div class="fw-semibold elite-user-name"><?php echo e($currentUserName); ?></div>
                            <small class="elite-user-role"><?php echo e(ucwords(str_replace('_', ' ', (string)$currentUserRole))); ?></small>
                        </div>
                    </button>

                    <ul class="dropdown-menu dropdown-menu-end elite-dropdown">
                        <li>
                            <div class="elite-dropdown-header d-flex align-items-center gap-2">
                                <span class="avatar-circle"><?php echo e($userInitial); ?></span>
                                <div class="min-w-0">
                                    <div class="fw-bold text-truncate"><?php echo e($currentUserName); ?></div>
                                    <div class="small text-muted text-truncate"><?php echo e(ucwords(str_replace('_', ' ', (string)$currentUserRole))); ?> • Signed in</div>
                                </div>
                            </div>
                        </li>
                        <li><a class="dropdown-item" href="<?php echo BASE_URL; ?>/modules/settings/users.php"><i class="bi bi-person me-2"></i>Profile / Users</a></li>
                        <li><a class="dropdown-item" href="<?php echo BASE_URL; ?>/change_password.php"><i class="bi bi-shield-lock me-2 text-primary"></i>Change Password</a></li>
                        <li><a class="dropdown-item" href="<?php echo BASE_URL; ?>/modules/settings/lodge_settings.php"><i class="bi bi-gear me-2"></i>Settings</a></li>
                        <li><a class="dropdown-item" href="<?php echo BASE_URL; ?>/dashboard.php"><i class="bi bi-speedometer2 me-2"></i>Dashboard</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item text-danger" href="<?php echo BASE_URL; ?>/logout.php">
                                <i class="bi bi-box-arrow-right me-2"></i>Logout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <div class="page-content container-fluid">

<script>
document.addEventListener('DOMContentLoaded', function () {
    var alertsDot = document.getElementById('topbarAlertsDot');
    if (!alertsDot) return;

    function refreshTopbarAlertsDot() {
        fetch('<?php echo BASE_URL; ?>/modules/reports/alerts_count.php', {
            credentials: 'same-origin',
            cache: 'no-store'
        })
            .then(function (res) { return res.json(); })
            .then(function (data) {
                var total = parseInt((data && data.total) ? data.total : 0, 10) || 0;
                alertsDot.style.display = total > 0 ? 'inline-block' : 'none';
            })
            .catch(function () {
                alertsDot.style.display = 'none';
            });
    }

    refreshTopbarAlertsDot();
    setInterval(refreshTopbarAlertsDot, 30000);
});
</script>
