<?php
// ======================================
// DemoBank User Login (PROFESSIONAL UI)
// ======================================

ini_set('display_errors', 1);
error_reporting(E_ALL);

session_start();

require_once __DIR__ . '/../includes/db.php';
require_once __DIR__ . '/../includes/functions.php';

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

$error = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $email = trim($_POST['email'] ?? '');
    $password = trim($_POST['password'] ?? '');

    if ($email === "" || $password === "") {
        $error = "Please fill in all fields.";
    } else {

        $stmt = $conn->prepare("SELECT id, password FROM users WHERE email = ? LIMIT 1");

        if ($stmt) {

            $stmt->bind_param("s", $email);
            $stmt->execute();
            $stmt->store_result();

            if ($stmt->num_rows === 1) {

                $stmt->bind_result($user_id, $hashed_password);
                $stmt->fetch();

                if (password_verify($password, $hashed_password)) {

                    $_SESSION['user_id'] = $user_id;
                    $_SESSION['email'] = $email;

                    header("Location: /user/dashboard.php");
                    exit;

                } else {
                    $error = "Invalid email or password.";
                }

            } else {
                $error = "Invalid email or password.";
            }

            $stmt->close();
        } else {
            $error = "Database error.";
        }
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lombard Odier Financial Bank Login</title>

<style>
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

/* LOGIN CARD */
.login-box {
    width: 100%;
    max-width: 500px; /* Larger width */
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    text-align: center;
    overflow-y: auto; /* Allow scrolling if content overflows */
    box-sizing: border-box;
    height: auto;
}

/* LOGO */
.login-logo img {
    width: 100px;
    height: auto;
    margin-bottom: 10px;
}

.login-title {
    font-size: 26px; /* Larger title */
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 10px;
}

.login-subtitle {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 20px;
}

/* INPUTS */
input {
    width: 100%;
    padding: 16px;
    margin: 12px 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    transition: 0.2s;
    font-size: 18px; /* Larger font size */
}

input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}

/* BUTTON */
button {
    width: 100%;
    padding: 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.2s;
    font-size: 18px; /* Larger font size */
}

button:hover {
    background: #1d4ed8;
}

/* ERROR */
.error {
    background: #fee2e2;
    color: #b91c1c;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 14px;
}

/* LINKS AREA */
.auth-links {
    margin-top: 15px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.auth-links a {
    color: #2563eb;
    text-decoration: none;
    transition: 0.2s;
    width: 100%; /* Make links take full width on mobile */
    margin-bottom: 5px;
    text-align: center;
}

.auth-links a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* FOOTER */
.footer {
    margin-top: 15px;
    font-size: 14px;
    color: #94a3b8;
}

/* Responsive Design for Mobile Devices */
@media (max-width: 480px) {
    /* Fullscreen Login Box on Small Screens */
    body {
        padding: 10px;
    }

    .login-box {
        width: 100%;
        height: 100vh; /* Full height on mobile */
        max-width: none;
        padding: 40px 20px; /* Adjust padding */
    }

    .login-title {
        font-size: 28px; /* Larger title for mobile */
    }

    .login-subtitle {
        font-size: 18px; /* Larger subtitle */
    }

    input {
        padding: 18px;
        font-size: 20px; /* Larger font size in inputs */
    }

    button {
        padding: 18px;
        font-size: 20px; /* Larger button text */
    }

    .auth-links {
        font-size: 18px;
    }

    .footer {
        font-size: 16px;
    }
}
</style>

</head>

<body>

<div class="login-box">

    <!-- LOGO -->
    <div class="login-logo">
        <img src="/assets/images/logo.png" alt="Bank Logo">
    </div>

    <div class="login-title">Welcome to Lombard Odier Financial Bank</div>
    <div class="login-subtitle">Secure Online Banking Portal</div>

    <?php if ($error): ?>
        <div class="error"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>

    <form method="POST">
        <input type="email" name="email" placeholder="Email Address" required>
        <input type="password" name="password" placeholder="Password" required>
        <button type="submit">Login</button>
    </form>

    <!-- LINKS -->
    <div class="auth-links">
        <a href="/auth/register.php">Create Account</a>
        <a href="/auth/forgot_password.php">Forgot Password?</a>
    </div>

    <div class="footer">
        © <?= date('Y') ?> Lombard Odier Financial Bank Banking Corporation
    </div>

</div>

</body>
</html>