<?php
$currentUser = $user ?? ['name' => 'Owner', 'role' => 'owner'];
$nameParts = preg_split('/\s+/', trim((string) ($currentUser['name'] ?? 'Owner')));
$initials = strtoupper(mb_substr($nameParts[0] ?? 'O', 0, 1) . mb_substr($nameParts[1] ?? '', 0, 1));

$menuLabels = [
    'dashboard' => 'Dashboard',
    'cashier_dashboard' => 'Dashboard',
    'users' => 'Manajemen User',
    'products' => 'Manajemen Produk & Jasa',
    'employees' => 'Manajemen Pegawai',
    'members' => 'Manajemen Member',
    'member_points' => 'Riwayat Poin Member',
    'reports' => 'Laporan Transaksi',
    'report_daily' => 'Laporan Harian',
    'report_monthly' => 'Laporan Bulanan',
    'report_yearly' => 'Laporan Tahunan',
    'history' => 'Riwayat Transaksi',
    'cashier' => 'Kasir (POS)',
    'settings_points' => 'Pengaturan Poin',
    'rewards' => 'Katalog Reward',
];
$pageLabel = $menuLabels[$activeMenu ?? ''] ?? ($title ?? 'Dashboard');
$isOwner = ($currentUser['role'] ?? 'owner') === 'owner';

$iconDashboard = '<rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect>';
$iconCart = '<circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>';
$iconDatabase = '<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>';
$iconStar = '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>';
$iconChart = '<line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line>';
$iconClock = '<circle cx="12" cy="12" r="9"></circle><polyline points="12 7 12 12 16 14"></polyline>';
$iconSettings = '<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>';
$iconUsers = '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>';

$ownerMenu = [
    ['type' => 'link', 'key' => 'dashboard', 'label' => 'Dashboard', 'href' => '/owner', 'icon' => $iconDashboard],
    ['type' => 'group', 'key' => 'transaksi', 'label' => 'Transaksi', 'icon' => $iconCart, 'items' => [
        ['key' => 'cashier', 'label' => 'Transaksi Baru (Kasir)', 'href' => '/cashier'],
        ['key' => 'history', 'label' => 'Riwayat Transaksi', 'href' => '/transaction-history'],
    ]],
    ['type' => 'group', 'key' => 'master', 'label' => 'Master Data', 'icon' => $iconDatabase, 'items' => [
        ['key' => 'employees', 'label' => 'Pegawai', 'href' => '/owner/employees'],
        ['key' => 'products', 'label' => 'Produk & Jasa', 'href' => '/owner/products'],
        ['key' => 'members', 'label' => 'Member', 'href' => '/owner/members'],
    ]],
    ['type' => 'group', 'key' => 'membership', 'label' => 'Membership', 'icon' => $iconStar, 'items' => [
        ['key' => 'member_points', 'label' => 'Riwayat Poin', 'href' => '/owner/member-points'],
        ['key' => 'rewards', 'label' => 'Katalog Reward', 'href' => '/owner/rewards'],
    ]],
    ['type' => 'group', 'key' => 'laporan', 'label' => 'Laporan', 'icon' => $iconChart, 'items' => [
        ['key' => 'report_daily', 'label' => 'Laporan Harian', 'href' => '/owner/report-daily'],
        ['key' => 'report_monthly', 'label' => 'Laporan Bulanan', 'href' => '/owner/report-monthly'],
        ['key' => 'report_yearly', 'label' => 'Laporan Tahunan', 'href' => '/owner/report-yearly'],
        ['key' => 'reports', 'label' => 'Detail & Export', 'href' => '/owner/reports'],
    ]],
    ['type' => 'group', 'key' => 'pengaturan', 'label' => 'Pengaturan', 'icon' => $iconSettings, 'items' => [
        ['key' => 'users', 'label' => 'Pengaturan User', 'href' => '/owner/users'],
        ['key' => 'settings_points', 'label' => 'Pengaturan Poin', 'href' => '/owner/settings-points'],
    ]],
];

$cashierMenu = [
    ['key' => 'cashier_dashboard', 'label' => 'Dashboard', 'href' => '/cashier/dashboard', 'icon' => $iconDashboard],
    ['key' => 'cashier', 'label' => 'Kasir (POS)', 'href' => '/cashier', 'icon' => $iconCart],
    ['key' => 'history', 'label' => 'Riwayat Transaksi', 'href' => '/transaction-history', 'icon' => $iconClock],
    ['key' => 'members', 'label' => 'Member', 'href' => '/owner/members', 'icon' => $iconUsers],
];

$activeGroupKey = null;
foreach ($ownerMenu as $menuEntry) {
    if ($menuEntry['type'] === 'group') {
        foreach ($menuEntry['items'] as $subItem) {
            if ($subItem['key'] === ($activeMenu ?? '')) {
                $activeGroupKey = $menuEntry['key'];
            }
        }
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <title><?= esc($title ?? 'Dashboard Owner') ?></title>
    <style>
        :root { --bg: #f8fafc; --card: #ffffff; --text: #0f172a; --muted: #64748b; --accent: #2563eb; --accent-2: #7c3aed; --border: #e2e8f0; --sidebar: #0f172a; }
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html, body { margin: 0; padding: 0; }
        body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--text); }

        .app { display: flex; min-height: 100vh; }

        /* Sidebar */
        .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 45; opacity: 0; transition: opacity .2s ease; }
        .sidebar-backdrop.show { display: block; opacity: 1; }

        .sidebar { width: 264px; flex-shrink: 0; background: var(--sidebar); color: white; padding: 20px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
        .brand { font-size: 18px; font-weight: 800; margin-bottom: 22px; display: flex; align-items: center; gap: 10px; padding: 4px 10px; }
        .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 16px rgba(37,99,235,0.35); }
        .brand-mark svg { width: 18px; height: 18px; color: white; }

        .sidebar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #64748b; padding: 0 12px; margin: 4px 0 10px; }
        .nav-links { display: flex; flex-direction: column; gap: 2px; }
        .nav-link { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 12px 11px 15px; border-radius: 10px; color: #94a3b8; text-decoration: none; font-weight: 600; font-size: 14px; min-height: 44px; border-left: 3px solid transparent; }
        .nav-link:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
        .nav-link.active { background: rgba(37,99,235,0.16); color: white; border-left-color: var(--accent); }
        .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
        .nav-link.active .nav-icon { opacity: 1; color: #93c5fd; }
        .nav-icon svg { width: 100%; height: 100%; }

        .nav-group-toggle { width: 100%; background: none; border: none; display: flex; align-items: center; gap: 11px; padding: 11px 12px 11px 15px; border-radius: 10px; color: #94a3b8; font-weight: 600; font-size: 14px; cursor: pointer; min-height: 44px; border-left: 3px solid transparent; font-family: inherit; text-align: left; }
        .nav-group-toggle:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
        .nav-group.open > .nav-group-toggle { color: white; }
        .nav-group-label { flex: 1; }
        .nav-group-chevron { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; transition: transform .15s ease; }
        .nav-group.open .nav-group-chevron { transform: rotate(90deg); }
        .nav-group-items { display: none; flex-direction: column; gap: 2px; padding: 2px 0 2px 30px; }
        .nav-group.open .nav-group-items { display: flex; }
        .nav-sublink { min-height: 38px; padding: 9px 12px; font-size: 13.5px; }

        .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 2px; }

        .content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

        /* Top header (persistent admin-panel style bar) */
        .topheader { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--border); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
        .topheader-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
        .breadcrumb { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 2px; }
        .page-title { margin: 0; font-size: 19px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: #f1f5f9; border: 1px solid var(--border); color: var(--text); border-radius: 10px; cursor: pointer; padding: 0; flex-shrink: 0; }
        .menu-toggle:hover { background: #e2e8f0; }
        .menu-toggle svg { width: 20px; height: 20px; }

        .user-menu { position: relative; flex-shrink: 0; }
        .user-menu-trigger { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px 6px 6px; cursor: pointer; min-height: 0; width: auto; }
        .user-menu-trigger:hover { background: #eef2ff; }
        .user-menu-name { font-size: 13px; font-weight: 700; color: var(--text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .user-menu-chevron { width: 14px; height: 14px; color: var(--muted); transition: transform .15s ease; flex-shrink: 0; }
        .user-menu.open .user-menu-chevron { transform: rotate(180deg); }
        .user-menu-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: white; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 40px rgba(15,23,42,0.14); min-width: 200px; padding: 8px; z-index: 60; }
        .user-menu.open .user-menu-dropdown { display: block; }
        .user-menu-info { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
        .user-menu-info .name { font-size: 13px; font-weight: 700; color: var(--text); }
        .user-menu-info .role { font-size: 11px; color: var(--muted); text-transform: capitalize; }
        .user-menu-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px; min-height: 0; width: auto; }
        .user-menu-dropdown a:hover { background: #f1f5f9; }
        .user-menu-dropdown a.danger { color: #dc2626; }
        .user-menu-dropdown a.danger:hover { background: #fef2f2; }
        .user-menu-dropdown svg { width: 16px; height: 16px; flex-shrink: 0; }

        .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: white; flex-shrink: 0; }
        .avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: white; flex-shrink: 0; }

        .content-body { padding: 24px 28px; flex: 1; }

        .hero { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: white; padding: 24px 28px; border-radius: 24px; margin-bottom: 20px; box-shadow: 0 16px 35px rgba(37, 99, 235, 0.18); }
        .hero h2 { font-size: 22px; }
        .panel { background: var(--card); padding: 20px; border-radius: 20px; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px rgba(15, 23, 42, 0.06); border: 1px solid var(--border); margin-bottom: 18px; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
        .stat-card { background: var(--card); padding: 20px; border-radius: 20px; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px rgba(15, 23, 42, 0.06); border: 1px solid var(--border); display: flex; align-items: flex-start; gap: 14px; }
        .stat-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .stat-icon svg { width: 22px; height: 22px; }
        .stat-icon.blue { background: #eff6ff; color: #2563eb; }
        .stat-icon.violet { background: #f5f3ff; color: #7c3aed; }
        .stat-icon.green { background: #f0fdf4; color: #16a34a; }
        .stat-icon.amber { background: #fffbeb; color: #d97706; }
        .stat-card h3 { margin: 0 0 6px; color: #64748b; font-size: 13px; font-weight: 600; }
        .stat-card .big { font-size: 22px; font-weight: 800; }
        .chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; margin-top: 12px; }
        .bar { flex: 1; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%); border-radius: 10px 10px 0 0; position: relative; min-height: 10px; }
        .bar span { position: absolute; bottom: -24px; width: 100%; text-align: center; font-size: 12px; color: #64748b; }
        .pill { display: inline-block; padding: 6px 10px; border-radius: 999px; background: #eff6ff; color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
        .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; }
        th { background: #f8fafc; color: #64748b; white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
        tbody tr:hover { background: #f8fafc; }
        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
        input, select, button { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; box-sizing: border-box; min-height: 44px; }
        button { cursor: pointer; border: none; font-weight: 700; }
        .btn-primary { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); color: white; }
        .btn-secondary { background: #e2e8f0; color: var(--text); }
        .link-edit { color: var(--accent); text-decoration: none; font-weight: 600; }
        .link-delete { color: #dc2626; text-decoration: none; font-weight: 600; }
        .muted { color: #64748b; }

        .action-cell { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
        .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 36px; border-radius: 10px; border: 1px solid var(--border); background: #f8fafc; color: var(--muted); cursor: pointer; padding: 0; text-decoration: none; flex-shrink: 0; }
        .icon-btn svg { width: 16px; height: 16px; }
        .icon-btn:hover { background: #eef2ff; color: var(--text); }
        .icon-btn.icon-edit:hover { background: #eff6ff; color: var(--accent); border-color: #bfdbfe; }
        .icon-btn.icon-delete:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
        .icon-btn.icon-print:hover { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
        .icon-btn.icon-view:hover { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }

        /* Tablet & mobile: sidebar becomes an off-canvas drawer */
        @media screen and (max-width: 1024px) {
            .menu-toggle { display: flex; }
            .sidebar { position: fixed; top: 0; left: 0; z-index: 50; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 6px 0 30px rgba(0,0,0,0.25); }
            .sidebar.open { transform: translateX(0); }
            .content-body { padding: 20px; }
            .user-menu-name { display: none; }
        }

        @media screen and (max-width: 600px) {
            .topheader { padding: 12px 14px; }
            .page-title { font-size: 16px; }
            .content-body { padding: 14px; }
            .hero { padding: 18px; border-radius: 18px; }
            .hero h2 { font-size: 19px; }
            .panel { padding: 16px; border-radius: 16px; }
            .grid { grid-template-columns: 1fr; gap: 12px; }
            .stat-card { padding: 16px; }
            .stat-card .big { font-size: 20px; }
            th, td { padding: 10px 8px; font-size: 13px; }
            .form-grid { grid-template-columns: 1fr; }
            .sidebar { width: 82vw; max-width: 300px; }
        }
    </style>
</head>
<body>
<div class="app">
    <div class="sidebar-backdrop" id="sidebarBackdrop"></div>
    <aside class="sidebar" id="sidebar">
        <div class="brand">
            <span class="brand-mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l4 4-8 8 4 4 8-8 4 4-4-14z"></path></svg></span>
            POS Barber
        </div>
        <div class="sidebar-label">Menu</div>
        <nav class="nav-links">
            <?php if ($isOwner) : ?>
                <?php foreach ($ownerMenu as $menuEntry) : ?>
                    <?php if ($menuEntry['type'] === 'link') : ?>
                        <a class="nav-link <?= ($activeMenu ?? '') === $menuEntry['key'] ? 'active' : '' ?>" href="<?= esc($menuEntry['href']) ?>">
                            <span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><?= $menuEntry['icon'] ?></svg></span>
                            <?= esc($menuEntry['label']) ?>
                        </a>
                    <?php else : ?>
                        <div class="nav-group <?= $activeGroupKey === $menuEntry['key'] ? 'open' : '' ?>">
                            <button type="button" class="nav-group-toggle" onclick="toggleNavGroup(this)">
                                <span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><?= $menuEntry['icon'] ?></svg></span>
                                <span class="nav-group-label"><?= esc($menuEntry['label']) ?></span>
                                <svg class="nav-group-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
                            </button>
                            <div class="nav-group-items">
                                <?php foreach ($menuEntry['items'] as $subItem) : ?>
                                    <a class="nav-link nav-sublink <?= ($activeMenu ?? '') === $subItem['key'] ? 'active' : '' ?>" href="<?= esc($subItem['href']) ?>"><?= esc($subItem['label']) ?></a>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endif; ?>
                <?php endforeach; ?>
            <?php else : ?>
                <?php foreach ($cashierMenu as $menuEntry) : ?>
                    <a class="nav-link <?= ($activeMenu ?? '') === $menuEntry['key'] ? 'active' : '' ?>" href="<?= esc($menuEntry['href']) ?>">
                        <span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><?= $menuEntry['icon'] ?></svg></span>
                        <?= esc($menuEntry['label']) ?>
                    </a>
                <?php endforeach; ?>
            <?php endif; ?>
        </nav>
    </aside>
    <div class="content">
        <div class="topheader">
            <div class="topheader-left">
                <button class="menu-toggle" id="menuToggle" type="button" aria-label="Buka menu" aria-expanded="false" aria-controls="sidebar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="7" x2="20" y2="7"></line><line x1="4" y1="12" x2="20" y2="12"></line><line x1="4" y1="17" x2="20" y2="17"></line></svg>
                </button>
                <div>
                    <p class="breadcrumb">POS Barber / <?= $isOwner ? 'Admin Panel' : 'Kasir' ?></p>
                    <h1 class="page-title"><?= esc($pageLabel) ?></h1>
                </div>
            </div>
            <div class="user-menu" id="userMenu">
                <button class="user-menu-trigger" type="button" id="userMenuTrigger">
                    <span class="avatar-sm"><?= esc($initials) ?></span>
                    <span class="user-menu-name"><?= esc($currentUser['name'] ?? 'Owner') ?></span>
                    <svg class="user-menu-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
                </button>
                <div class="user-menu-dropdown" id="userMenuDropdown">
                    <div class="user-menu-info">
                        <div class="name"><?= esc($currentUser['name'] ?? 'Owner') ?></div>
                        <div class="role"><?= esc($currentUser['role'] ?? 'owner') ?></div>
                    </div>
                    <a href="/cashier">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                        Kasir
                    </a>
                    <a href="/logout" class="danger">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
                        Logout
                    </a>
                </div>
            </div>
        </div>
        <div class="content-body">
            <?= $content ?? '' ?>
        </div>
    </div>
</div>
<script>
function toggleNavGroup(btn) {
    var group = btn.closest('.nav-group');
    if (group) {
        group.classList.toggle('open');
    }
}
</script>
<script>
(function () {
    var toggle = document.getElementById('menuToggle');
    var sidebar = document.getElementById('sidebar');
    var backdrop = document.getElementById('sidebarBackdrop');
    if (toggle && sidebar && backdrop) {
        function openSidebar() {
            sidebar.classList.add('open');
            backdrop.classList.add('show');
            toggle.setAttribute('aria-expanded', 'true');
        }
        function closeSidebar() {
            sidebar.classList.remove('open');
            backdrop.classList.remove('show');
            toggle.setAttribute('aria-expanded', 'false');
        }
        toggle.addEventListener('click', function () {
            sidebar.classList.contains('open') ? closeSidebar() : openSidebar();
        });
        backdrop.addEventListener('click', closeSidebar);
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') closeSidebar();
        });
        sidebar.querySelectorAll('.nav-link').forEach(function (link) {
            link.addEventListener('click', closeSidebar);
        });
    }

    var userMenu = document.getElementById('userMenu');
    var userMenuTrigger = document.getElementById('userMenuTrigger');
    if (userMenu && userMenuTrigger) {
        userMenuTrigger.addEventListener('click', function (e) {
            e.stopPropagation();
            userMenu.classList.toggle('open');
        });
        document.addEventListener('click', function (e) {
            if (!userMenu.contains(e.target)) {
                userMenu.classList.remove('open');
            }
        });
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') userMenu.classList.remove('open');
        });
    }
})();
</script>
</body>
</html>
