<?php
session_start();
include('mb.php'); // DB Connection

// ================= ALREADY LOGIN =================

if (isset($_SESSION['id']) && $_SESSION['is_login'] === true) {

    header("Location: dashboard.php");
    exit;
}

$error = "";

/* ================= LOGIN PROCESS ================= */

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

    $username = mysqli_real_escape_string(
        $ahk_conn,
        trim($_POST['username'] ?? '')
    );

    $password = $_POST['password'] ?? '';

    if ($username === '' || $password === '') {

        $error = "All fields are required.";

    } else {

        $query = mysqli_query(
            $ahk_conn,
            "SELECT id,phone,email,password,status,name
             FROM users
             WHERE phone='$username'
             OR email='$username'
             LIMIT 1"
        );

        if (mysqli_num_rows($query) === 1) {

            $user = mysqli_fetch_assoc($query);

            if (password_verify($password, $user['password'])) {

                if ($user['status'] == 1) {

                    $_SESSION['user_id']    = $user['id'];
                    $_SESSION['phone']      = $user['phone'];
                    $_SESSION['is_login']   = true;
                    $_SESSION['login_time'] = time();

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

                } else {

                    $error = "Your account is inactive.";

                }

            } else {

                $error = "Incorrect password.";

            }

        } else {

            $error = "User not registered.";

        }
    }
}
?>

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Login Portal</title>

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    min-height:100vh;
    background:
    linear-gradient(rgba(15,23,42,.75),rgba(15,23,42,.75)),
    url('https://images.unsplash.com/photo-1556740749-887f6717d7e4?q=80&w=1400&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    font-family:'Segoe UI',sans-serif;
    overflow:hidden;
}

/* ================= BACKGROUND SHAPES ================= */

.circle1{
    position:absolute;
    width:320px;
    height:320px;
    background:linear-gradient(135deg,#0d6efd,#6610f2);
    border-radius:50%;
    top:-120px;
    left:-120px;
    opacity:.35;
    filter:blur(30px);
}

.circle2{
    position:absolute;
    width:280px;
    height:280px;
    background:linear-gradient(135deg,#ff9800,#ff5722);
    border-radius:50%;
    bottom:-100px;
    right:-100px;
    opacity:.35;
    filter:blur(30px);
}

/* ================= LOGIN CARD ================= */

.login-container{
    width:100%;
    max-width:1050px;
    min-height:620px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.15);
    border-radius:30px;
    overflow:hidden;
    backdrop-filter:blur(20px);
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    position:relative;
    z-index:10;
}

.left-side{
    background:linear-gradient(135deg,#0d6efd,#6610f2);
    color:#fff;
    padding:60px 45px;
    height:100%;
    position:relative;
    overflow:hidden;
}

.left-side::before{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-100px;
    right:-100px;
}

.left-side::after{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    bottom:-60px;
    left:-60px;
}

.brand{
    font-size:34px;
    font-weight:800;
    margin-bottom:15px;
}

.brand span{
    color:#ffd43b;
}

.left-side h2{
    font-size:42px;
    font-weight:800;
    line-height:1.3;
    margin-bottom:20px;
}

.left-side p{
    color:rgba(255,255,255,.85);
    line-height:1.8;
    margin-bottom:35px;
}

.feature-box{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:22px;
}

.feature-icon{
    width:55px;
    height:55px;
    border-radius:16px;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

/* ================= RIGHT SIDE ================= */

.right-side{
    background:rgba(255,255,255,.96);
    padding:55px 45px;
    height:100%;
}

.login-title{
    font-size:32px;
    font-weight:800;
    color:#111827;
    margin-bottom:8px;
}

.login-sub{
    color:#6b7280;
    margin-bottom:35px;
}

/* ================= FORM ================= */

.form-label{
    font-weight:600;
    margin-bottom:8px;
    color:#374151;
}

.input-group{
    margin-bottom:22px;
}

.input-group-text{
    border-radius:14px 0 0 14px;
    border:1px solid #dbe2ea;
    background:#f8fafc;
    padding:14px 16px;
}

.form-control{
    height:54px;
    border-radius:0 14px 14px 0;
    border:1px solid #dbe2ea;
    font-size:15px;
    box-shadow:none !important;
}

.form-control:focus{
    border-color:#6610f2;
}

.login-btn{
    width:100%;
    border:none;
    height:55px;
    border-radius:16px;
    background:linear-gradient(135deg,#0d6efd,#6610f2);
    color:#fff;
    font-size:17px;
    font-weight:700;
    transition:.3s;
    box-shadow:0 10px 25px rgba(13,110,253,.30);
}

.login-btn:hover{
    transform:translateY(-2px);
}

.alert-box{
    background:#ffe5e5;
    color:#dc2626;
    padding:14px;
    border-radius:14px;
    font-size:14px;
    margin-bottom:20px;
    border:1px solid #fecaca;
}

/* ================= FOOTER TEXT ================= */

.footer-text{
    text-align:center;
    margin-top:25px;
    color:#6b7280;
    font-size:14px;
}

.footer-text a{
    color:#6610f2;
    text-decoration:none;
    font-weight:700;
}

/* ================= MOBILE ================= */

@media(max-width:991px){

    .left-side{
        display:none;
    }

    .right-side{
        padding:40px 25px;
    }

    .login-container{
        min-height:auto;
    }
}

@media(max-width:576px){

    .login-title{
        font-size:28px;
    }

    .right-side{
        padding:35px 20px;
    }
}

</style>

</head>

<body>

<div class="circle1"></div>
<div class="circle2"></div>

<div class="container">

<div class="login-container">

<div class="row g-0 h-100">

<!-- ================= LEFT ================= -->

<div class="col-lg-6">

<div class="left-side d-flex flex-column justify-content-center">

<div class="brand">
Recharge<span>Portal</span>
</div>

<h2>
Fast & Secure Login Portal
</h2>

<p>
Access recharge services, wallet dashboard, utility payments and premium API tools instantly from one secure platform.
</p>

<div class="feature-box">

<div class="feature-icon">
<i class="fa-solid fa-mobile-screen"></i>
</div>

<div>
<h6 class="mb-1">Mobile Recharge</h6>
<small>All operators supported</small>
</div>

</div>

<div class="feature-box">

<div class="feature-icon">
<i class="fa-solid fa-wallet"></i>
</div>

<div>
<h6 class="mb-1">Wallet System</h6>
<small>Secure balance management</small>
</div>

</div>

<div class="feature-box">

<div class="feature-icon">
<i class="fa-solid fa-shield-halved"></i>
</div>

<div>
<h6 class="mb-1">100% Secure</h6>
<small>Encrypted login system</small>
</div>

</div>

</div>

</div>

<!-- ================= RIGHT ================= -->

<div class="col-lg-6">

<div class="right-side d-flex flex-column justify-content-center">

<h2 class="login-title">
Welcome Back 👋
</h2>

<p class="login-sub">
Login with your registered mobile number or email address.
</p>

<?php if($error){ ?>

<div class="alert-box">

<i class="fa-solid fa-circle-exclamation me-2"></i>

<?= htmlspecialchars($error) ?>

</div>

<?php } ?>

<form method="POST" autocomplete="off">

<label class="form-label">
Mobile Number / Email
</label>

<div class="input-group">

<span class="input-group-text">
<i class="fa-solid fa-user"></i>
</span>

<input
type="text"
name="username"
class="form-control"
placeholder="Enter mobile or email"
required
>

</div>

<label class="form-label">
Password
</label>

<div class="input-group">

<span class="input-group-text">
<i class="fa-solid fa-lock"></i>
</span>

<input
type="password"
name="password"
class="form-control"
placeholder="Enter password"
required
>

</div>

<button type="submit" class="login-btn">

<i class="fa-solid fa-right-to-bracket me-2"></i>

Login Now

</button>

</form>

<div class="footer-text">

© <?= date('Y') ?> Recharge Portal

</div>

</div>

</div>

</div>

</div>

</div>

</body>
</html>