<?php
session_start();

if (!isset($_SESSION['user_id'])) {
    header('Location: /login.php');
    exit;
}

$role = $_SESSION['role'] ?? 'guest';

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - GPTPayroll</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">

    <div class="flex md:flex-row-reverse flex-wrap">

        <!-- Main Content -->
        <div class="w-full md:w-4/5 bg-gray-100">
            <div class="container bg-gray-100 pt-16 px-6 mx-auto">
                <div class="bg-white shadow-md rounded p-8">
                    <h1 class="text-3xl font-bold text-gray-800">Welcome to your Dashboard</h1>
                    <p class="text-gray-600 mt-2">Your role is: <span class="font-bold text-green-500"><?= htmlspecialchars(ucfirst($role)) ?></span></p>
                    <p class="mt-4">This is the main content area. More features will be added here soon!</p>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="w-full md:w-1/5 bg-gray-800 md:min-h-screen">
            <div class="md:relative mx-auto lg:float-right lg:px-6">
                <ul class="list-reset flex flex-row md:flex-col text-center md:text-left">
                    <li class="mr-3 flex-1">
                        <a href="#" class="block py-4 px-4 text-white font-bold no-underline">Dashboard</a>
                    </li>
                    <li class="mr-3 flex-1">
                        <a href="/employees.php" class="block py-4 px-4 text-gray-400 hover:text-white no-underline">Employees</a>
                    </li>
                    <li class="mr-3 flex-1">
                        <a href="/payroll.php" class="block py-4 px-4 text-gray-400 hover:text-white no-underline">Payroll</a>
                    </li>
                    <li class="mr-3 flex-1">
                        <a href="/payroll_history.php" class="block py-4 px-4 text-gray-400 hover:text-white no-underline">Payroll History</a>
                    </li>
                    <li class="mr-3 flex-1">
                        <a href="/settings.php" class="block py-4 px-4 text-gray-400 hover:text-white no-underline">Settings</a>
                    </li>
                    <li class="mr-3 flex-1">
                        <a href="/logout.php" class="block py-4 px-4 text-gray-400 hover:text-white no-underline">Logout</a>
                    </li>
                </ul>
            </div>
        </div>

    </div>

</body>
</html>
