<?php
session_start();

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

include 'koneksi.php';

if(isset($_POST['login'])){

    $username = mysqli_real_escape_string(
        $koneksi,
        $_POST['username']
    );

    $password = md5($_POST['password']);

    $query = mysqli_query($koneksi,"
    SELECT *
    FROM user
    WHERE BINARY username='$username'
    AND BINARY password='$password'
");

    $cek = mysqli_num_rows($query);

    if($cek > 0){

    $data = mysqli_fetch_assoc($query);

    $_SESSION['status']   = 'login';
    $_SESSION['username'] = $data['username'];

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

}else{

        echo "
        <script>
            alert('Username atau Password salah!');
        </script>
        ";

    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>

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

<title>Login Perpustakaan</title>

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

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

<style>

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

body{

    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:
    linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.55)),
    url('upload/perpus.png');

    background-size:cover;
    background-position:center;
    overflow:hidden;
}

/* LOGIN BOX */

.login-box{

    width:420px;

    background:rgba(255,255,255,0.15);

    border:1px solid rgba(255,255,255,0.3);

    backdrop-filter:blur(12px);

    padding:40px;

    border-radius:25px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.3);

    animation:muncul 1s ease;
}

/* ANIMASI */

@keyframes muncul{

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

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

/* LOGO */

.logo{

    width:110px;

    display:block;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:white;

    padding:8px;
}

/* TITLE */

.title{

    text-align:center;

    font-size:30px;

    font-weight:bold;

    color:white;
}

.subtitle{

    text-align:center;

    color:#e5e7eb;

    margin-bottom:30px;

    font-size:14px;
}

/* INPUT */

.custom-input{

    position:relative;

    margin-bottom:20px;
}

.input-icon{

    position:absolute;

    width:50px;
    height:52px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#166534;

    z-index:10;
}

.form-control{

    height:52px;

    border:none;

    border-radius:14px;

    padding-left:50px;

    background:rgba(255,255,255,0.9);

    transition:0.3s;
}

.form-control:focus{

    box-shadow:none;

    border:1px solid #22c55e;

    background:white;
}

/* BUTTON */

.btn-login{

    width:100%;

    height:52px;

    border:none;

    border-radius:14px;

    background:#166534;

    color:white;

    font-size:16px;

    font-weight:bold;

    transition:0.3s;
}

.btn-login i{

    margin-right:8px;
}

.btn-login:hover{

    background:#14532d;

    transform:translateY(-2px);
}

/* FOOTER */

.footer{

    text-align:center;

    margin-top:20px;

    color:#f3f4f6;

    font-size:13px;
}

.toggle-password{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#666;
    z-index:20;
}

.toggle-password:hover{
    color:#166534;
}

</style>
</head>

<body>

<!-- LOGIN BOX -->

<div class="login-box">

    <!-- LOGO -->
    <img
    src="upload/logo_stikom.jpg"
    class="logo">

    <!-- TITLE -->
    <div class="title">
        LOGIN
    </div>

    <!-- SUBTITLE -->
    <div class="subtitle">
        Sistem Informasi Perpustakaan
    </div>

    <!-- FORM -->
    <form action="" method="POST">

        <!-- USERNAME -->
        <div class="custom-input">

            <div class="input-icon">
                <i class="fas fa-user"></i>
            </div>

            <input
            type="text"
            name="username"
            class="form-control"
            placeholder="Masukkan Username"
            required>

        </div>

        <!-- PASSWORD -->
<div class="custom-input">

    <div class="input-icon">
        <i class="fas fa-lock"></i>
    </div>

    <input
    type="password"
    name="password"
    id="password"
    class="form-control"
    placeholder="Masukkan Password"
    required>

    <span class="toggle-password" onclick="togglePassword()">
        <i class="fas fa-eye" id="eyeIcon"></i>
    </span>

</div>

        <!-- BUTTON -->
        <button
        type="submit"
        name="login"
        class="btn-login">

            <i class="fas fa-sign-in-alt"></i>
            Login

        </button>

    </form>

</div>

<script>
function togglePassword() {

    var password = document.getElementById("password");
    var eyeIcon = document.getElementById("eyeIcon");

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

        password.type = "text";
        eyeIcon.classList.remove("fa-eye");
        eyeIcon.classList.add("fa-eye-slash");

    }else{

        password.type = "password";
        eyeIcon.classList.remove("fa-eye-slash");
        eyeIcon.classList.add("fa-eye");

    }

}
</script>

</body>
</html>