<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - RestPO SaaS</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>
        body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
        .sidebar-transition { transition: all 0.3s ease-in-out; }
    </style>
</head>
<body class="text-gray-800" x-data="{ sidebarOpen: true, userMenuOpen: false }">

    <div class="flex h-screen overflow-hidden">
        
        <!-- Sidebar -->
        <aside class="bg-gray-900 text-white w-64 flex-shrink-0 sidebar-transition flex flex-col" :class="{'w-64': sidebarOpen, 'w-20': !sidebarOpen}">
            <div class="h-16 flex items-center justify-between px-4 bg-gray-950">
                <span class="text-xl font-bold tracking-wider" x-show="sidebarOpen">RestPO</span>
                <span class="text-xl font-bold tracking-wider mx-auto" x-show="!sidebarOpen">RP</span>
                <button @click="sidebarOpen = !sidebarOpen" class="text-gray-400 hover:text-white focus:outline-none hidden md:block">
                    <i class="fas fa-bars"></i>
                </button>
            </div>

            <div class="flex-1 overflow-y-auto py-4">
                <nav class="space-y-1 px-2">
                    <a href="/dashboard" class="bg-purple-600 text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md">
                        <i class="fas fa-home w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Dashboard</span>
                    </a>
                    
                    <?php if($_SESSION['role'] === 'superadmin'): ?>
                    <a href="/superadmin/restaurants" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-store w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Restaurants</span>
                    </a>
                    
                    <a href="/superadmin/packages" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-box w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Packages</span>
                    </a>

                    <a href="/superadmin/coupons" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-ticket-alt w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Coupons</span>
                    </a>
                    <?php elseif($_SESSION['role'] === 'admin'): ?>
                    <a href="/admin/floors" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-layer-group w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Floors & Tables</span>
                    </a>
                    <a href="/admin/categories" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-tags w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Categories</span>
                    </a>
                    <a href="/admin/products" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-hamburger w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Products</span>
                    </a>
                    <a href="/admin/staff" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-users-cog w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Staff</span>
                    </a>
                    <a href="/admin/qr" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-qrcode w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">QR Codes</span>
                    </a>
                    <?php else: ?>
                    <a href="/pos" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-cash-register w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">POS</span>
                    </a>
                    <?php endif; ?>

                    <?php if(in_array($_SESSION['role'], ['admin','superadmin','cashier'])): ?>
                    <a href="/kitchen" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-fire-burner w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Kitchen Display</span>
                    </a>
                    <?php endif; ?>

                    <?php if(in_array($_SESSION['role'], ['admin','superadmin'])): ?>
                    <a href="/reports" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md transition-colors">
                        <i class="fas fa-chart-line w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                        <span x-show="sidebarOpen">Reports</span>
                    </a>
                    <?php endif; ?>
                </nav>
            </div>
            
            <div class="p-4 bg-gray-950">
                <a href="/logout" class="text-gray-400 hover:text-white flex items-center w-full">
                    <i class="fas fa-sign-out-alt w-6 text-center text-lg mr-3" :class="{'mr-0 mx-auto': !sidebarOpen}"></i>
                    <span x-show="sidebarOpen">Logout</span>
                </a>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- Header -->
            <header class="h-16 bg-white shadow-sm flex items-center justify-between px-6 z-10">
                <div class="flex items-center">
                    <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 hover:text-gray-700 focus:outline-none md:hidden">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    <h2 class="text-xl font-semibold text-gray-800 ml-4">Dashboard</h2>
                </div>
                
                <div class="flex items-center space-x-4">
                    <button class="text-gray-400 hover:text-gray-600 relative">
                        <i class="fas fa-bell text-xl"></i>
                        <span class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                        </span>
                    </button>
                    
                    <div class="relative">
                        <button @click="userMenuOpen = !userMenuOpen" @click.away="userMenuOpen = false" class="flex items-center focus:outline-none">
                            <img class="h-9 w-9 rounded-full object-cover border-2 border-purple-500" src="https://ui-avatars.com/api/?name=<?php echo urlencode($_SESSION['name']); ?>&background=random" alt="User avatar">
                            <span class="ml-2 text-sm font-medium text-gray-700 hidden md:block"><?php echo htmlspecialchars($_SESSION['name']); ?></span>
                            <i class="fas fa-chevron-down ml-2 text-xs text-gray-400"></i>
                        </button>
                        
                        <!-- Dropdown -->
                        <div x-show="userMenuOpen" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 ring-1 ring-black ring-opacity-5 focus:outline-none" style="display: none;">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
                            <div class="border-t border-gray-100"></div>
                            <a href="/logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Main view -->
            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 p-6">
                
                <!-- Stats Cards -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                    
                    <?php if($_SESSION['role'] === 'superadmin' || $_SESSION['role'] === 'admin'): ?>
                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 mb-1">Total Revenue</p>
                                <?php $currency = $currency ?? FeatureGate::currency($_SESSION['restaurant_id']); ?>
                                <h3 class="text-2xl font-bold text-gray-800"><?php echo htmlspecialchars($currency); ?><?php echo number_format($stats['total_revenue'], 2); ?></h3>
                            </div>
                            <div class="p-3 bg-green-100 rounded-lg">
                                <i class="fas fa-dollar-sign text-green-600 text-xl"></i>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if($_SESSION['role'] === 'admin'): ?>
                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 mb-1">Total Orders</p>
                                <h3 class="text-2xl font-bold text-gray-800"><?php echo number_format($stats['total_orders']); ?></h3>
                            </div>
                            <div class="p-3 bg-blue-100 rounded-lg">
                                <i class="fas fa-shopping-bag text-blue-600 text-xl"></i>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if($_SESSION['role'] === 'cashier'): ?>
                    <div class="col-span-full bg-white rounded-xl shadow-sm p-8 border border-gray-100 text-center">
                        <h2 class="text-2xl font-bold text-gray-800 mb-2">Welcome, <?php echo htmlspecialchars($_SESSION['name']); ?></h2>
                        <p class="text-gray-500 mb-6">Your shift is currently closed. Please open a session to start taking orders.</p>
                        <a href="/pos" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-lg shadow transition">
                            <i class="fas fa-cash-register mr-2"></i> Go to POS Terminal
                        </a>
                    </div>
                    <?php endif; ?>

                    <?php if($_SESSION['role'] === 'superadmin'): ?>
                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 mb-1">Active Restaurants</p>
                                <h3 class="text-2xl font-bold text-gray-800"><?php echo number_format($stats['total_restaurants']); ?></h3>
                            </div>
                            <div class="p-3 bg-purple-100 rounded-lg">
                                <i class="fas fa-store text-purple-600 text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 mb-1">Total Users</p>
                                <h3 class="text-2xl font-bold text-gray-800"><?php echo number_format($stats['total_users']); ?></h3>
                            </div>
                            <div class="p-3 bg-orange-100 rounded-lg">
                                <i class="fas fa-users text-orange-600 text-xl"></i>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>

                <?php if($_SESSION['role'] === 'superadmin'): ?>
                <!-- Recent Activity Table -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="px-6 py-5 border-b border-gray-100 flex justify-between items-center">
                        <h3 class="text-lg font-semibold text-gray-800">Recent Restaurants Registered</h3>
                        <a href="/superadmin/restaurants" class="text-sm text-purple-600 hover:text-purple-800 font-medium">View All</a>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead>
                                <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider">
                                    <th class="px-6 py-3 font-medium">Restaurant Name</th>
                                    <th class="px-6 py-3 font-medium">Plan</th>
                                    <th class="px-6 py-3 font-medium">Status</th>
                                    <th class="px-6 py-3 font-medium">Joined Date</th>
                                    <th class="px-6 py-3 font-medium text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                <?php if(empty($recent_restaurants)): ?>
                                    <tr><td colspan="5" class="px-6 py-4 text-center text-gray-500">No restaurants found.</td></tr>
                                <?php endif; ?>
                                <?php foreach($recent_restaurants ?? [] as $rest): ?>
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4">
                                        <div class="flex items-center">
                                            <div class="h-10 w-10 flex-shrink-0 rounded-lg bg-purple-100 text-purple-600 flex items-center justify-center font-bold">
                                                <?php echo strtoupper(substr($rest['name'], 0, 2)); ?>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900"><?php echo htmlspecialchars($rest['name']); ?></div>
                                                <div class="text-sm text-gray-500"><?php echo htmlspecialchars($rest['email']); ?></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500"><?php echo $rest['package_name'] ?? 'No Package'; ?></td>
                                    <td class="px-6 py-4">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <?php echo $rest['status'] == 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'; ?>">
                                            <?php echo htmlspecialchars($rest['status']); ?>
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500"><?php echo date('M d, Y', strtotime($rest['created_at'])); ?></td>
                                    <td class="px-6 py-4 text-right text-sm font-medium">
                                        <a href="#" class="text-purple-600 hover:text-purple-900 mr-3"><i class="fas fa-edit"></i></a>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
                <?php endif; ?>

            </main>
        </div>
    </div>

</body>
</html>
