<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $pageTitle ?? 'Restaurant Admin'; ?> - RestPO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { font-family: 'Inter', sans-serif; }
        body { background: #0d1117; color: white; }
        .sidebar-link { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:#94a3b8; font-size:13.5px; font-weight:500; transition:all 0.18s; text-decoration:none; white-space:nowrap; overflow:hidden; }
        .sidebar-link:hover { background:rgba(255,255,255,0.08); color:white; }
        .sidebar-link.active { background:rgba(16,185,129,0.2); color:#6ee7b7; border-left:2px solid #10b981; }
        .sidebar-link i { width:18px; text-align:center; flex-shrink:0; }
        .sidebar-section { font-size:10px; font-weight:700; color:#1e3a2f; text-transform:uppercase; letter-spacing:0.12em; padding:12px 12px 4px; }
        /* Modal */
        .modal-backdrop { background:rgba(0,0,0,0.7); backdrop-filter:blur(6px); }
        .modal-box { background:#0d2137; border:1px solid rgba(16,185,129,0.25); border-radius:20px; }
        .form-input { width:100%; padding:10px 14px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:10px; color:white; font-size:14px; outline:none; transition:border 0.2s; }
        .form-input:focus { border-color:#10b981; background:rgba(16,185,129,0.08); }
        .form-input::placeholder { color:#475569; }
        .btn-success { background:linear-gradient(135deg,#10b981,#059669); color:white; font-weight:600; padding:10px 20px; border-radius:10px; border:none; cursor:pointer; font-size:14px; transition:opacity 0.2s; }
        .btn-success:hover { opacity:0.9; }
        ::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:10px; }
        select option { background:#0d2137; }
        @media print { aside, header { display:none!important; } main { padding:0!important; } }
    </style>
</head>
<?php
// Load feature gate for sidebar gating
$__gate = FeatureGate::check($_SESSION['restaurant_id'] ?? 0);
if (($_SESSION['role'] ?? '') === 'superadmin') {
    $__gate['expired'] = false;
    $__gate['package_name'] = 'Super Admin';
    $__gate['features']['qr_ordering'] = true;
    $__gate['features']['kitchen_display'] = true;
    $__gate['features']['inventory'] = true;
    $__gate['features']['staff_management'] = true;
}
$__hasQr = !$__gate['expired'] && ($__gate['features']['qr_ordering'] ?? false);
$__hasKitchen = !$__gate['expired'] && ($__gate['features']['kitchen_display'] ?? false);
$__pkgName = $__gate['package_name'] ?? 'No Package';
$__navDisabled = $__gate['expired'] ? 'pointer-events-none opacity-30' : '';
$__isAdmin = in_array($_SESSION['role'] ?? '', ['admin', 'superadmin']);
?>
<body x-data="adminApp()">
<div class="flex h-screen overflow-hidden">

    <!-- ===== SIDEBAR ===== -->
    <aside class="flex flex-col flex-shrink-0 transition-all duration-300"
           :style="sidebarOpen ? 'width:240px' : 'width:62px'"
           style="background:linear-gradient(180deg,#0d2137 0%,#0a1929 100%); border-right:1px solid rgba(255,255,255,0.05)">

        <!-- Logo -->
        <div class="h-16 flex items-center px-4 gap-3 border-b border-white/5 flex-shrink-0">
            <div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0"
                 style="background:linear-gradient(135deg,#10b981,#059669)">
                <i class="fas fa-store text-white text-sm"></i>
            </div>
            <div x-show="sidebarOpen" x-transition:enter="transition-opacity duration-200"
                 x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" style="display:none">
                <div class="text-white font-bold text-sm leading-tight">RestPO</div>
                <div class="text-xs font-medium" style="color:#10b981"><?php echo htmlspecialchars($__pkgName); ?></div>
            </div>
        </div>

        <!-- Nav -->
        <nav class="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
            <?php if ($__isAdmin): ?>
            <a href="/admin/dashboard" class="sidebar-link <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/dashboard')!==false?'active':''; ?>">
                <i class="fas fa-home"></i><span x-show="sidebarOpen" style="display:none">Dashboard</span>
            </a>
            <?php else: ?>
            <a href="/pos" class="sidebar-link <?php echo strpos($_SERVER['REQUEST_URI'],'/pos')!==false?'active':''; ?>">
                <i class="fas fa-cash-register"></i><span x-show="sidebarOpen" style="display:none">POS Terminal</span>
            </a>
            <?php endif; ?>

            <?php if ($__isAdmin): ?>
            <p class="sidebar-section" x-show="sidebarOpen" style="display:none">Setup</p>
            <a href="/admin/floors" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/floors')!==false?'active':''; ?>">
                <i class="fas fa-layer-group"></i><span x-show="sidebarOpen" style="display:none">Floors &amp; Tables</span>
            </a>
            <a href="/admin/categories" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/categories')!==false?'active':''; ?>">
                <i class="fas fa-tags"></i><span x-show="sidebarOpen" style="display:none">Categories</span>
            </a>
            <a href="/admin/products" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/products')!==false?'active':''; ?>">
                <i class="fas fa-hamburger"></i><span x-show="sidebarOpen" style="display:none">Products</span>
            </a>
            <?php if($__hasQr): ?>
            <a href="/admin/qr" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/qr')!==false?'active':''; ?>">
                <i class="fas fa-qrcode"></i><span x-show="sidebarOpen" style="display:none">QR Codes</span>
            </a>
            <?php endif; ?>
            <?php endif; ?>

            <?php if($__hasKitchen): ?>
            <a href="/kitchen" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/kitchen')!==false?'active':''; ?>">
                <i class="fas fa-fire-burner"></i><span x-show="sidebarOpen" style="display:none">Kitchen Display</span>
            </a>
            <?php endif; ?>
            
            <?php if ($__isAdmin): ?>
            <a href="/admin/coupons" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/coupons')!==false?'active':''; ?>">
                <i class="fas fa-ticket-alt"></i><span x-show="sidebarOpen" style="display:none">Coupons</span>
            </a>
            <a href="/admin/feedback" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/feedback')!==false?'active':''; ?>">
                <i class="fas fa-comments"></i><span x-show="sidebarOpen" style="display:none">Feedbacks</span>
            </a>

            <a href="/admin/settings" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/settings')!==false?'active':''; ?>">
                <i class="fas fa-cog"></i><span x-show="sidebarOpen" style="display:none">Settings</span>
            </a>

            <p class="sidebar-section" x-show="sidebarOpen" style="display:none">People</p>
            <a href="/admin/staff" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/staff')!==false?'active':''; ?>">
                <i class="fas fa-users-cog"></i><span x-show="sidebarOpen" style="display:none">Staff</span>
            </a>
            <?php endif; ?>

            <?php if (!$__gate['expired'] && !empty($__gate['features']['staff_management'])): ?>
            <a href="/admin/hr" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/hr')!==false?'active':''; ?>">
                <i class="fas fa-id-badge"></i><span x-show="sidebarOpen" style="display:none">HR Management</span>
            </a>
            <?php endif; ?>

            <?php if ($__isAdmin): ?>
            <p class="sidebar-section" x-show="sidebarOpen" style="display:none">Reports</p>
            <a href="/admin/reports" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/reports')!==false?'active':''; ?>">
                <i class="fas fa-chart-bar"></i><span x-show="sidebarOpen" style="display:none">Sales Reports</span>
            </a>
            <?php endif; ?>

            <?php if (!empty($__gate['features']['inventory'])): ?>
            <a href="/admin/inventory" class="sidebar-link <?php echo $__navDisabled; ?> <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/inventory')!==false?'active':''; ?>">
                <i class="fas fa-boxes"></i><span x-show="sidebarOpen" style="display:none">Inventory</span>
            </a>
            <?php endif; ?>

            <?php if ($__isAdmin): ?>
            <p class="sidebar-section" x-show="sidebarOpen" style="display:none">Billing</p>
            <a href="/admin/subscription" class="sidebar-link <?php echo strpos($_SERVER['REQUEST_URI'],'/admin/subscription')!==false?'active':''; ?>">
                <i class="fas fa-credit-card"></i><span x-show="sidebarOpen" style="display:none">Subscription Plan</span>
            </a>
            <?php endif; ?>
        </nav>

        <!-- Bottom -->
        <div class="p-2 border-t border-white/5 flex-shrink-0">
            <a href="/logout" class="sidebar-link hover:text-red-400 hover:bg-red-500/10">
                <i class="fas fa-sign-out-alt"></i><span x-show="sidebarOpen" style="display:none">Sign Out</span>
            </a>
        </div>
    </aside>

    <!-- ===== MAIN ===== -->
    <div class="flex-1 flex flex-col overflow-hidden">

        <!-- Topbar -->
        <header class="h-16 flex items-center justify-between px-5 flex-shrink-0"
                style="background:#0d1117; border-bottom:1px solid rgba(255,255,255,0.05)">
            <div class="flex items-center gap-3">
                <button @click="sidebarOpen = !sidebarOpen"
                        class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-400 hover:text-white transition"
                        style="background:rgba(255,255,255,0.04)">
                    <i class="fas fa-bars text-base"></i>
                </button>
                <div>
                    <h1 class="text-base font-semibold text-white leading-tight"><?php echo $pageTitle ?? 'Dashboard'; ?></h1>
                    <p class="text-xs text-slate-500">Restaurant Admin Panel</p>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <!-- POS Button -->
                <?php if (!$__gate['expired']): ?>
                <a href="/pos"
                   class="hidden md:flex items-center gap-2 text-xs font-semibold px-3 py-2 rounded-lg transition"
                   style="background:rgba(16,185,129,0.15); color:#10b981; border:1px solid rgba(16,185,129,0.25)">
                    <i class="fas fa-cash-register"></i> Open POS
                </a>
                <?php endif; ?>

                <!-- Notification Bell -->
                <button class="relative w-9 h-9 rounded-lg flex items-center justify-center text-slate-400 hover:text-white transition"
                        style="background:rgba(255,255,255,0.04)">
                    <i class="fas fa-bell text-base"></i>
                </button>

                <!-- Profile Dropdown -->
                <div class="relative" x-data="{ open: false }" @click.away="open = false">
                    <button @click="open = !open"
                            class="flex items-center gap-2.5 px-3 py-1.5 rounded-xl hover:bg-white/5 transition cursor-pointer"
                            style="border:1px solid rgba(16,185,129,0.2)">
                        <img class="h-8 w-8 rounded-full flex-shrink-0"
                             src="https://ui-avatars.com/api/?name=<?php echo urlencode($_SESSION['name']); ?>&background=10b981&color=fff&size=64"
                             alt="">
                        <div class="hidden md:block text-left">
                            <div class="text-sm font-semibold text-white leading-tight"><?php echo htmlspecialchars($_SESSION['name']); ?></div>
                            <div class="text-xs" style="color:#10b981">Restaurant Admin</div>
                        </div>
                        <i class="fas fa-chevron-down text-xs text-slate-500 hidden md:block"></i>
                    </button>

                    <!-- Dropdown -->
                    <div x-show="open"
                         x-transition:enter="transition ease-out duration-100"
                         x-transition:enter-start="opacity-0 scale-95"
                         x-transition:enter-end="opacity-100 scale-100"
                         class="absolute right-0 mt-2 w-52 rounded-xl shadow-xl z-50 overflow-hidden"
                         style="background:#0d2137; border:1px solid rgba(16,185,129,0.2); display:none">
                        <div class="p-3 border-b border-white/5">
                            <p class="text-xs text-slate-400">Signed in as</p>
                            <p class="text-sm font-semibold text-white truncate"><?php echo htmlspecialchars($_SESSION['name']); ?></p>
                            <p class="text-xs text-slate-500 truncate"><?php echo htmlspecialchars($_SESSION['email'] ?? ''); ?></p>
                        </div>
                        <div class="p-1.5 space-y-0.5">
                            <button @click="open=false; showProfile=true"
                                    class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-white/8 hover:text-white text-sm transition">
                                <i class="fas fa-user-edit w-4 text-center text-emerald-400"></i> Edit Profile
                            </button>
                            <?php if (!$__gate['expired']): ?>
                            <a href="/pos"
                               class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-white/8 hover:text-white text-sm transition">
                                <i class="fas fa-cash-register w-4 text-center text-blue-400"></i> Open POS
                            </a>
                            <?php endif; ?>
                            <div class="border-t border-white/5 my-1"></div>
                            <a href="/logout"
                               class="flex items-center gap-3 px-3 py-2 rounded-lg text-red-400 hover:bg-red-500/10 text-sm transition">
                                <i class="fas fa-sign-out-alt w-4 text-center"></i> Sign Out
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Content -->
        <main class="flex-1 overflow-y-auto p-5 relative">
            <?php 
            $__isBillingPage = strpos($_SERVER['REQUEST_URI'], '/admin/subscription') !== false;
            $__isBlurActive = $__gate['expired'] && !$__isBillingPage;
            ?>
            <div class="<?php echo $__isBlurActive ? 'filter blur-md pointer-events-none select-none' : ''; ?>">
                <?php echo $content; ?>
            </div>

            <?php if ($__isBlurActive): ?>
            <!-- Expiry Glassmorphic Overlay Card -->
            <div class="absolute inset-0 flex items-center justify-center p-4 z-40" style="background: rgba(13, 17, 23, 0.45);">
                <div class="w-full max-w-lg p-8 rounded-2xl border text-center shadow-2xl animate-fade-in" style="background: rgba(20, 27, 38, 0.85); border-color: rgba(239, 68, 68, 0.25); backdrop-filter: blur(12px);">
                    <div class="w-16 h-16 rounded-full bg-red-500/15 border border-red-500/30 flex items-center justify-center mx-auto mb-5 shadow-lg shadow-red-500/10">
                        <i class="fas fa-circle-exclamation text-red-500 text-2xl animate-pulse"></i>
                    </div>
                    
                    <h2 class="text-2xl font-bold text-white mb-2">Subscription Suspended</h2>
                    <p class="text-slate-300 text-sm mb-6 leading-relaxed">
                        Your restaurant's active plan (<span class="font-semibold text-emerald-400"><?php echo htmlspecialchars($__pkgName); ?></span>) has expired. To ensure continuous access and unlock your dashboard features, please contact the platform Super Admin.
                    </p>
                    
                    <div class="rounded-xl p-4 mb-6 border border-white/5 text-left text-xs space-y-2.5" style="background: rgba(255, 255, 255, 0.02);">
                        <div class="flex justify-between">
                            <span class="text-slate-400">Current Package:</span>
                            <span class="text-slate-200 font-semibold"><?php echo htmlspecialchars($__pkgName); ?></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-slate-400">Expiry Date:</span>
                            <span class="text-red-400 font-semibold"><?php echo $__gate['expiry_date'] ? date('M d, Y', strtotime($__gate['expiry_date'])) : 'N/A'; ?></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-slate-400">Days Elapsed:</span>
                            <span class="text-red-400 font-semibold"><?php echo $__gate['days_left'] !== null ? abs($__gate['days_left']) : 'N/A'; ?> days ago</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-col gap-3">
                        <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
                        <a href="/admin/subscription" class="w-full py-3.5 px-5 rounded-xl text-sm font-bold text-white transition-all shadow-lg hover:brightness-115 flex items-center justify-center gap-2 animate-pulse" style="background: linear-gradient(135deg, #10b981, #059669);">
                            <i class="fas fa-credit-card"></i> Renew / Upgrade Subscription
                        </a>
                        <?php endif; ?>
                        
                        <div class="flex flex-col sm:flex-row gap-3">
                            <a href="mailto:support@restpo.com" class="flex-1 py-3 px-5 rounded-xl text-sm font-semibold text-white transition-all shadow-lg hover:brightness-110 flex items-center justify-center gap-2" style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);">
                                <i class="fas fa-envelope text-slate-400"></i> Contact Support
                            </a>
                            <a href="/logout" class="py-3 px-6 rounded-xl text-sm font-semibold text-slate-300 hover:text-white border border-white/10 hover:bg-white/5 transition text-center flex-1">
                                Sign Out
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </main>
    </div>
</div>

<!-- ===== PROFILE EDIT MODAL ===== -->
<div x-show="showProfile"
     class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
     style="display:none"
     @click="showProfile=false"
     @keydown.escape.window="showProfile=false">
    <div class="modal-box w-full max-w-lg mx-4 shadow-2xl" @click.stop>

        <!-- Header -->
        <div class="flex items-center justify-between p-5 border-b border-white/8">
            <div>
                <h2 class="text-lg font-bold text-white">Edit Profile</h2>
                <p class="text-xs text-slate-400 mt-0.5">Update your account information</p>
            </div>
            <button @click="showProfile=false"
                    class="w-8 h-8 rounded-lg flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/8 transition">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Flash error inside modal -->
        <?php if(isset($_GET['profile_error'])): ?>
        <div class="mx-5 mt-4 p-3 rounded-lg text-xs" style="background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.3)">
            <i class="fas fa-exclamation-circle mr-1"></i> <?php echo htmlspecialchars($_GET['profile_error']); ?>
        </div>
        <?php endif; ?>

        <form action="/admin/profile/update" method="POST" class="p-5 space-y-4">
            <input type="hidden" name="redirect_url" value="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">

            <!-- Avatar preview -->
            <div class="flex justify-center">
                <img class="h-16 w-16 rounded-full ring-2 ring-emerald-500/40"
                     src="https://ui-avatars.com/api/?name=<?php echo urlencode($_SESSION['name']); ?>&background=10b981&color=fff&size=128"
                     alt="">
            </div>

            <!-- Name + Phone -->
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1.5">Full Name</label>
                    <input type="text" name="name" required
                           value="<?php echo htmlspecialchars($_SESSION['name']); ?>"
                           class="form-input" placeholder="Your name">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1.5">Phone</label>
                    <input type="text" name="phone"
                           value="<?php echo htmlspecialchars($_SESSION['phone'] ?? ''); ?>"
                           class="form-input" placeholder="+1 234 567 890">
                </div>
            </div>

            <!-- Email -->
            <div>
                <label class="block text-xs font-medium text-slate-400 mb-1.5">Email Address</label>
                <input type="email" name="email" required
                       value="<?php echo htmlspecialchars($_SESSION['email'] ?? ''); ?>"
                       class="form-input" placeholder="you@example.com">
            </div>

            <!-- Password -->
            <div class="pt-1 border-t border-white/6">
                <p class="text-xs text-slate-500 mb-3">Leave password blank to keep current password.</p>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">New Password</label>
                        <input type="password" name="new_password"
                               class="form-input" placeholder="••••••••"
                               autocomplete="new-password">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Confirm Password</label>
                        <input type="password" name="confirm_password"
                               class="form-input" placeholder="••••••••"
                               autocomplete="new-password">
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex gap-3 pt-2">
                <button type="submit" class="btn-success flex-1">
                    <i class="fas fa-save mr-2"></i>Save Changes
                </button>
                <button type="button" @click="showProfile=false"
                        class="px-4 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-white/8 transition">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Toast notifications -->
<?php if(isset($_GET['msg'])): ?>
<div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,3500)"
     class="fixed bottom-6 right-6 z-50 flex items-center gap-3 px-4 py-3 rounded-xl shadow-xl text-sm font-medium"
     style="background:#10b981; color:white">
    <i class="fas fa-check-circle"></i> <?php echo htmlspecialchars($_GET['msg']); ?>
</div>
<?php endif; ?>
<?php if(isset($_GET['error'])): ?>
<div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,4500)"
     class="fixed bottom-6 right-6 z-50 flex items-center gap-3 px-4 py-3 rounded-xl shadow-xl text-sm font-medium"
     style="background:#ef4444; color:white">
    <i class="fas fa-exclamation-circle"></i> <?php echo htmlspecialchars($_GET['error']); ?>
</div>
<?php endif; ?>

<script>
function adminApp() {
    return {
        sidebarOpen: window.innerWidth >= 1024,
        showProfile: <?php echo isset($_GET['profile_error']) ? 'true' : 'false'; ?>,
    }
}
</script>
</body>
</html>
