<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Staff Login | Mei Hotel Penang</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    background-image: radial-gradient(ellipse at 30% 60%, rgba(59,130,246,0.08) 0%, transparent 60%),
                      radial-gradient(ellipse at 70% 20%, rgba(99,102,241,0.06) 0%, transparent 50%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.card {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 16px;
    padding: 36px 32px 32px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
    margin: 16px;
}

.logo-wrap { text-align: center; margin-bottom: 18px; }
.logo-wrap img { max-width: 130px; height: auto; border-radius: 6px; }

.card-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}
.card-sub {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 24px;
}

.alert {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert.error   { background: #fee2e2; color: #991b1b; }
.alert.warning { background: #fffbeb; color: #92400e; }

.field { margin-bottom: 14px; }
.field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.field input {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    color: #111827;
}
.field input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: background .2s, transform .1s;
}
.btn:hover   { background: #1d4ed8; }
.btn:active  { transform: scale(0.99); }
.btn:disabled { background: #93c5fd; cursor: not-allowed; }

.footer {
    text-align: center;
    font-size: 11.5px;
    color: #9ca3af;
    margin-top: 20px;
}
</style>
</head>
<body>

<div class="card">
    <div class="logo-wrap">
        <img src="assets/logo.jpg" alt="Mei Hotel Penang">
    </div>

    <h1 class="card-title">Staff Login</h1>
    <p class="card-sub">Mei Hotel Penang — Purchasing</p>

    <?php if (isset($_GET['error'])): ?>
        <div class="alert error" role="alert">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Invalid username or password. Please try again.
        </div>
    <?php elseif (isset($_GET['expired'])): ?>
        <div class="alert warning" role="alert">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Your session expired. Please log in again.
        </div>
    <?php endif; ?>

    <form method="POST" action="authenticate.php" id="loginForm">
        <div class="field">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required autofocus
                   autocomplete="username" spellcheck="false">
        </div>
        <div class="field">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required
                   autocomplete="current-password">
        </div>
        <button class="btn" type="submit" id="submitBtn">Sign In</button>
    </form>

    <p class="footer">Authorized personnel only</p>
</div>

<script>
// Disable button after submit to prevent double-submit
document.getElementById('loginForm').addEventListener('submit', function() {
    const btn = document.getElementById('submitBtn');
    btn.disabled = true;
    btn.textContent = 'Signing in…';
});
</script>
</body>
</html>
