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

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
   body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;

    background: url('frontend/assets/images/b.png') no-repeat center center fixed;
background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;

}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: brightness(0.8);

}

    /* Dark overlay */
    .overlay {
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgba(146, 144, 121, 0.6);
    }

    /* Login box */
    .login-box {
        background: #ffffff;
        padding: 40px;
        border-radius: 12px;
        width: 100%;
        max-width: 420px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    .btn-login {
        background: #dacd64;
        border: none;

    }

    .btn-login:hover {
        background: #cbc188;
    }
</style>
</head>

<body>

<div class="overlay"></div>

<div class="container d-flex justify-content-center align-items-center"
     style="min-height:100vh; position:relative; z-index:2;">

    <div class="login-box">

        <h3 class="text-center mb-4">Login</h3>

      <form method="POST" action="{{ route('login') }}">
    @csrf

    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email"
               name="email"
               class="form-control"
               required>
    </div>

    <div class="mb-3">
        <label class="form-label">Password</label>
        <input type="password"
               name="password"
               class="form-control"
               required>
    </div>

    <div class="d-flex justify-content-between mb-3">
        <div>
            <input type="checkbox" name="remember"> Remember me
        </div>

        <a href="{{ route('password.request') }}"
           class="text-decoration-none">
            Forgot Password?
        </a>
    </div>

    <button type="submit"
            class="btn btn-login w-100 text-black">
        Login
    </button>
</form>

    </div>

</div>

</body>
</html>
