<?php
    require("include/connection.php");
    session_start();
    $error = "";

    if (isset($_POST['submit'])) {  
        $username = $_POST['username'];
        $password = $_POST['password'];

        if ($username && $password) {
            $query = "SELECT * FROM user_tbl WHERE username = '$username' AND password = '$password'";
            $result = mysqli_query($link, $query);

            if ($result && mysqli_num_rows($result) == 1) {
                $rows = mysqli_fetch_assoc($result);
                $uID = $rows['uID'];
                $_SESSION['uID'] = $uID;

                switch ($uID) {
                    case '1':
                    case '2':
                        header("Location: adminDashboard.php");
                        break;
                    case '3':
                        header("Location: accountantDashboard.php");
                        break;
                    default:
                        header("Location: index.php");
                        break;
                }
                exit;
            } else {
                $error = "Invalid username or password. Please try again.";
            }
        } else {
            $error = "Please fill in all required details.";
        }
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INTERNAL | Login</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
        }
        .wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
        .login-form {
            max-width: 400px;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        .login-form img {
            border-radius: 50%;
        }
        .form-title {
            color: #111;
            text-align: center;
            margin-bottom: 20px;
        }
        .btn-custom {
            width: 100%;
            background-color: #075fa8;
            color: #fff;
        }
        .btn-custom:hover {
            background-color: #064b7d;
        }
        .forgot-link {
            display: block;
            text-align: right;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <div class="login-form">
        <form method="POST" class="p-4">
            <div class="text-center">
                <img src="image/codeafrq.jpg" alt="User Image" width="120" height="120">
                <h2 class="form-title">CodeAfrica</h2>
            </div>
            <div class="mb-3">
                <input type="text" class="form-control" name="username" placeholder="Username" required>
            </div>
            <div class="mb-3">
                <input type="password" class="form-control" name="password" placeholder="Password" required>
            </div>
            <button type="submit" class="btn btn-custom" name="submit">Login</button>
            <a href="forgot_password.php" class="forgot-link">Forgot password? Reset</a>

            <?php if ($error): ?>
                <div class="alert alert-danger mt-3" role="alert">
                    <strong>ERROR:</strong> <?php echo htmlentities($error); ?>
                </div>
            <?php endif; ?>
        </form>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
