<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link rel="stylesheet" href="/assets/css/admin.css">
</head>
<body>

    <div class="admin-container">
        <div class="admin-sidebar">
            <img src="/assets/images/Logo.png" alt="Logo" class="logo">
            <h2>Admin Panel</h2>
            <nav>
                <ul>
                    <li><a href="#" class="tab active" onclick="openTab(event, 'home')">Home</a></li>
                    <li><a href="#" class="tab" onclick="openTab(event, 'manage-employees')">Manage Employees</a></li>
                    <li><a href="#" class="tab" onclick="openTab(event, 'employee-logs')">Employee Logs</a></li>
                </ul>
            </nav>
        </div>

        <div class="admin-main-content">
            <div id="home" class="tab-content active">
                <div class="admin-header">
                    <h1>Dashboard Overview</h1>
                    <button class="logout-button" onclick="logout()">Logout</button>
                </div>
    
                <!-- Dashboard Cards -->
                <div class="dashboard-overview">
                    <div class="dashboard-card">
                        <h3>Total Employees</h3>
                        <p></p>
                    </div>
                    <div class="dashboard-card">
                        <h3>Active Sessions</h3>
                        <p></p>
                    </div>
                    <div class="dashboard-card">
                        <h3>Server Status</h3>
                        <p>Online</p>
                        <button id="end-server-btn">End Server</button>
                    </div>
                </div>
    
                <!-- Recent Activity -->
                <div class="dashboard-recent-activity">
                    <h3>Recent Activity</h3>
                    <ul id = "recent-activity-list"></ul>
                        <!-- Logs will be dynamically populated here -->
                    
                </div>
            </div>

            <div id="manage-employees" class="tab-content">
                <h2>Employee Accounts</h2>
                <button id="create-account-btn" class="create-account-btn">Create Account</button>
                <div id="employee-list">
                    <!-- Employee list will populate here -->
                </div>
            </div>
            <div id="employee-logs" class="tab-content">
                <h2>Employee Logs</h2>
                <ul id="employee-logs-list">
                    <!-- Logs content will be dynamically populated here -->
                </ul>
            </div>
        </div>
    </div>

    <script src="/assets/js/admin.js"></script>
    <script src="/assets/js/home.js"></script>

    <script>
        function openTab(event, tabId) {
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

            event.currentTarget.classList.add('active');
            document.getElementById(tabId).classList.add('active');
        }
    </script>

</body>
</html>