<?php
session_start();
require_once("../api/config/db.php");

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

$error = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $mobile = trim($_POST['mobile'] ?? '');
    $password = $_POST['password'] ?? '';

    if ($mobile === '' || $password === '') {
        $error = "Please enter mobile number and password.";
    } else {
        $stmt = $conn->prepare("SELECT * FROM users WHERE mobile=? AND role='sub_admin' LIMIT 1");
        $stmt->bind_param("s", $mobile);
        $stmt->execute();
        $result = $stmt->get_result();

        if ($result->num_rows === 0) {
            $error = "Sub Admin not found.";
        } else {
            $user = $result->fetch_assoc();

            if ($user['status'] !== 'approved') {
                $error = "Your account is not approved yet.";
            } elseif (!password_verify($password, $user['password'])) {
                $error = "Invalid password.";
            } else {
                $_SESSION['sub_admin_id'] = $user['id'];
                $_SESSION['sub_admin_name'] = $user['name'];
                $_SESSION['sub_admin_mobile'] = $user['mobile'];
                $_SESSION['sub_admin_role'] = $user['role'];
                $_SESSION['sub_admin_village_id'] = $user['village_id'];

                header("Location: dashboard.php");
                exit;
            }
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sub Admin Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;min-height:100%;font-family:Arial,sans-serif}
body{
    min-height:100vh;
    background:linear-gradient(135deg,#07111f,#123c88,#0ea5e9);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.login-wrap{width:100%;max-width:430px}
.login-card{
    background:rgba(255,255,255,.97);
    border-radius:34px;
    padding:30px 24px;
    box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.logo{
    width:78px;height:78px;
    margin:0 auto 18px;
    border-radius:28px;
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
}
h1{
    margin:0;
    text-align:center;
    font-size:27px;
    color:#0f172a;
}
.subtitle{
    text-align:center;
    color:#64748b;
    margin:8px 0 26px;
    font-size:14px;
}
label{
    display:block;
    margin:14px 0 8px;
    font-size:14px;
    font-weight:700;
    color:#334155;
}
input{
    width:100%;
    height:54px;
    border:1px solid #dbeafe;
    border-radius:18px;
    padding:0 16px;
    font-size:16px;
    outline:none;
    background:#f8fafc;
}
input:focus{
    border-color:#2563eb;
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
button{
    width:100%;
    height:56px;
    border:0;
    border-radius:20px;
    margin-top:20px;
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    color:white;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(37,99,235,.35);
}
.alert{
    background:#fee2e2;
    color:#991b1b;
    padding:13px 15px;
    border-radius:16px;
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
    text-align:center;
}
.link{
    text-align:center;
    margin-top:22px;
    color:#64748b;
    font-size:14px;
}
.link a{
    color:#2563eb;
    font-weight:800;
    text-decoration:none;
}
.note{
    margin-top:20px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1e3a8a;
    padding:13px;
    border-radius:18px;
    font-size:13px;
    line-height:1.5;
}
.footer{
    text-align:center;
    color:rgba(255,255,255,.8);
    font-size:12px;
    margin-top:18px;
}
@media(max-width:480px){
    body{
        display:block;
        padding:18px;
        min-height:100vh;
        overflow-y:auto;
    }
    .login-wrap{
        max-width:100%;
        margin-top:35px;
    }
    .login-card{
        border-radius:30px;
        padding:28px 20px;
    }
}
</style>
</head>

<body>

<div class="login-wrap">
    <div class="login-card">
        <div class="logo">🛡️</div>

        <h1>Sub Admin Login</h1>
        <div class="subtitle">Village Security Visitor Tracking</div>

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

        <form method="POST">
            <label>Mobile Number</label>
            <input type="text" name="mobile" maxlength="10" inputmode="numeric" placeholder="Enter mobile number" required>

            <label>Password</label>
            <input type="password" name="password" placeholder="Enter password" required>

            <button type="submit">Login</button>
        </form>

        <div class="link">
            New Sub Admin? <a href="register.php">Register here</a>
        </div>

        <div class="note">
            Use approved Sub Admin mobile number. Pending accounts cannot login until Village Admin approval.
        </div>
    </div>

    <div class="footer">Gram Adhikar Village Security</div>
</div>

</body>
</html>