<?php
session_start();
require_once "config.php";

$error = "";

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

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

    if($username != "" && $password != ""){

        $stmt = $pdo->prepare(
            "SELECT * FROM users WHERE username=? AND status=1 LIMIT 1"
        );

        $stmt->execute([$username]);

        $user = $stmt->fetch();

        if($user){

            if($user['password']){

                $_SESSION['user_id']=$user['id'];
                $_SESSION['fullname']=$user['fullname'];
                $_SESSION['role']=$user['role'];

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

            }else{

                $error="Invalid password";

            }

        }else{

            $error="Username does not exist";

        }

    }else{

        $error="Please enter login details";

    }

}

?>


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

<head>

<meta charset="UTF-8">

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

<title>Expense Management Login</title>


<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">


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


<style>


*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:'Poppins',sans-serif;
}


body{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:
linear-gradient(
135deg,
#065f46,
#10b981,
#0284c7
);

padding:15px;

transition:.4s;

}


/* DARK MODE */

body.dark{

background:#111827;

}


.login-box{

width:100%;

max-width:420px;

background:white;

border-radius:20px;

padding:30px 25px;

box-shadow:
0 20px 50px rgba(0,0,0,.25);

animation:slide .5s ease;

}


body.dark .login-box{

background:#1f2937;

color:white;

}



@keyframes slide{

from{
transform:translateY(30px);
opacity:0;
}

to{
transform:translateY(0);
opacity:1;
}

}



.theme-btn{

position:absolute;

top:20px;

right:20px;

width:45px;

height:45px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

color:#047857;

box-shadow:0 5px 15px #0003;

}



.logo{

text-align:center;

margin-bottom:25px;

}


.logo i{

font-size:65px;

color:#059669;

}


.logo h2{

font-size:22px;

margin-top:10px;

}


.logo p{

font-size:14px;

color:#777;

}



.input-group{

margin-bottom:18px;

}


label{

font-size:14px;

font-weight:500;

display:block;

margin-bottom:7px;

}



.input-box{

height:52px;

border:1px solid #ddd;

border-radius:12px;

display:flex;

align-items:center;

padding:0 15px;

}


body.dark .input-box{

background:#374151;

border-color:#4b5563;

}



.input-box i{

color:#059669;

}



.input-box input{

width:100%;

border:none;

outline:none;

padding:12px;

font-size:15px;

background:transparent;

}



body.dark input{

color:white;

}



.password-eye{

cursor:pointer;

}



button{

width:100%;

height:52px;

border:none;

border-radius:12px;

background:

linear-gradient(
45deg,
#059669,
#10b981
);

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

margin-top:15px;

transition:.3s;

}


button:active{

transform:scale(.97);

}



.options{

display:flex;

justify-content:space-between;

font-size:13px;

margin-top:15px;

}


.options a{

color:#059669;

text-decoration:none;

}



.error{

background:#fee2e2;

color:#b91c1c;

padding:12px;

border-radius:10px;

font-size:14px;

margin-bottom:15px;

}


.footer{

text-align:center;

font-size:12px;

color:#777;

margin-top:25px;

}



/* MOBILE */

@media(max-width:480px){


body{

padding:10px;

}


.login-box{

padding:25px 20px;

border-radius:16px;

}


.logo i{

font-size:55px;

}


.logo h2{

font-size:20px;

}


button{

height:50px;

}


}


</style>


</head>


<body>


<div class="theme-btn" onclick="theme()">

<i class="fa fa-moon"></i>

</div>



<div class="login-box">


<div class="logo">


<i class="fa fa-wallet"></i>


<h2>
Expense Tracker
</h2>


<p>
Secure Login Portal
</p>


</div>



<?php if($error){ ?>

<div class="error">

<i class="fa fa-circle-exclamation"></i>

<?= $error ?>

</div>


<?php } ?>



<form method="POST">


<div class="input-group">

<label>
Username
</label>


<div class="input-box">

<i class="fa fa-user"></i>

<input 
type="text"
name="username"
placeholder="Username"
autocomplete="username"
required>

</div>


</div>




<div class="input-group">

<label>
Password
</label>


<div class="input-box">


<i class="fa fa-lock"></i>


<input 
type="password"
id="password"
name="password"
placeholder="Password"
autocomplete="current-password"
required>


<i 
class="fa fa-eye password-eye"
onclick="showPassword()"
id="eye">
</i>


</div>


</div>



<div class="options">

<label>

<input type="checkbox">

Remember me

</label>


<a href="forgot_password.php">
Forgot Password?
</a>


</div>



<button type="submit">

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

 Login

</button>


</form>



<div class="footer">

© <?=date('Y')?> Expense Management System

</div>



</div>



<script>


function showPassword(){

let pass=document.getElementById("password");

let eye=document.getElementById("eye");


if(pass.type==="password"){

pass.type="text";

eye.classList.replace(
"fa-eye",
"fa-eye-slash"
);


}else{


pass.type="password";


eye.classList.replace(
"fa-eye-slash",
"fa-eye"
);


}

}




function theme(){


document.body.classList.toggle("dark");


localStorage.setItem(
"theme",
document.body.classList.contains("dark")
);


}



if(localStorage.getItem("theme")){

document.body.classList.add("dark");

}


</script>


</body>

</html>