<?php
session_start();
include 'config.php'; // DB connection file

$error = "";

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $username = trim($_POST['username']);
    $password = trim($_POST['password']);
    $captcha = trim($_POST['captcha']);

    if (empty($username) || empty($password)) {
        $error = "Please enter both username and password.";
    } elseif (empty($captcha) || strcasecmp($captcha, $_SESSION['captcha']) != 0) {
        $error = "Invalid captcha entered.";
    } else {
        // Query user by username
        $sql = "SELECT id, username, password FROM sales_man WHERE username = ?";
        $stmt = mysqli_prepare($con, $sql);
        mysqli_stmt_bind_param($stmt, "s", $username);
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);

        if ($row = mysqli_fetch_assoc($result)) {
            if (password_verify($password, $row['password'])) {
                // Login successful
                $_SESSION['user_id'] = $row['id'];
                $_SESSION['username'] = $row['username'];
                
                if ($_SESSION['username'] == 'admin') {
                    header("Location: dashboard");
                    exit(); // always good practice after header redirect
                } else {
                    header("Location: staff-dashboard");
                    exit();
                }
                
                exit;
            } else {
                $error = "Incorrect password.";
            }
        } else {
            $error = "No account found with that username.";
        }
    }
}
?>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    function refreshCaptcha() {
      document.getElementById("captchaImage").src = "captcha.php?rand=" + Math.random();
    }
  </script>
</head>
<body class="bg-blue-200 flex flex-col items-center justify-center min-h-screen p-4">
    <main class="w-full max-w-md">
        <div class="bg-white shadow-2xl rounded-2xl p-8 border border-gray-200">
            <h1 class="text-3xl font-extrabold text-center mb-6 text-gray-800">🔐 Sign In</h1>
            
            <?php if (!empty($error)) : ?>
                <div class="bg-red-100 text-red-700 p-3 mb-4 rounded-lg border border-red-300 text-sm">
                    <?= htmlspecialchars($error) ?>
                </div>
            <?php endif; ?>

            <form method="POST" action="" class="space-y-5">
                <div>
                    <input type="text" name="username" placeholder="Username" required
                           class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition">
                </div>
                <div>
                    <input type="password" name="password" placeholder="Password" required
                           class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition">
                </div>

                <!-- Normal captcha with refresh button -->
                <div class="flex items-center gap-2">
                    <img src="captcha.php" id="captchaImage" alt="Captcha" class="border rounded h-12 w-28">
                    
                    <!-- Refresh button -->
                    <button type="button" onclick="refreshCaptcha()" 
                            class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-2 rounded-lg shadow-sm flex items-center justify-center">
                        🔄
                    </button>

                    <input type="text" name="captcha" placeholder="Enter Captcha" required
                           class="flex-1 px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none">
                </div>

                <button type="submit" 
                        class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-lg shadow-md transition duration-200">
                    Sign In
                </button>
            </form>
        </div>
    </main>
</body>
</html>
