<?php 
require '../includes/db.php';

$error = false;

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

    $username = trim($_POST['username']);
    $password = trim($_POST['password']);

    $stmt = $conn->prepare("SELECT * FROM admins WHERE username=?");
    $stmt->bind_param("s", $username);
    $stmt->execute();
    $res = $stmt->get_result();
    $admin = $res->fetch_assoc();

    if ($admin && password_verify($password, $admin['password'])) {
        $_SESSION['admin_id'] = $admin['id'];
        header("Location: dashboard.php");
        exit;
    } else {
        $error = true;
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login</title>

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

<style>
body {
    background: #020617;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* Card */
.card {
    background: rgba(15,23,42,0.9);
    border: 1px solid #1e293b;
    border-radius: 16px;
}

/* Inputs */
.form-control {
    background: #020617 !important;
    color: #fff !important;
    border: 1px solid #1e293b !important;
}

/* Button */
.btn-primary {
    background: linear-gradient(135deg,#3b82f6,#2563eb);
    border: none;
}
</style>
</head>

<body>

<div class="col-md-4">

    <div class="card p-4 shadow">

        <h4 class="text-center text-primary mb-4">🔐 Admin Login</h4>

        <!-- Error -->
        <?php if($error): ?>
            <div class="alert alert-danger">
                ❌ Invalid username or password
            </div>
        <?php endif; ?>

        <form method="POST" id="loginForm">

            <div class="mb-3">
                <label class="form-label">Username</label>
                <input 
                    type="text" 
                    name="username" 
                    class="form-control"
                    placeholder="Enter username"
                    required
                >
            </div>

            <div class="mb-3">
                <label class="form-label">Password</label>
                <div class="input-group">
                    <input 
                        type="password" 
                        name="password" 
                        id="password"
                        class="form-control"
                        placeholder="Enter password"
                        required
                    >
                    <button type="button" class="btn btn-outline-light" onclick="togglePassword()">
                        👁
                    </button>
                </div>
            </div>

            <div class="d-grid">
                <button id="loginBtn" class="btn btn-primary">
                    Login
                </button>
            </div>

        </form>

    </div>

</div>

<!-- JS -->
<script>
function togglePassword(){
    const pass = document.getElementById('password');
    pass.type = pass.type === 'password' ? 'text' : 'password';
}

// Loading state
document.getElementById('loginForm').addEventListener('submit', function(){
    const btn = document.getElementById('loginBtn');
    btn.innerHTML = '⏳ Logging in...';
    btn.disabled = true;
});
</script>

</body>
</html>