<?php
session_start();

include '../koneksi.php';

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

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

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

    $cek = mysqli_num_rows($query);

    if($cek > 0){

        $_SESSION['admin'] = $username;

        header("Location:index.php");

    } else {

        $error = "Username atau password salah!";
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login Admin DPAD</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

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

<style>

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

body{
    font-family:'Inter',sans-serif;
    background:#f3f4f6;
}

/* CONTAINER */

.login-container{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

/* BOX LOGIN */

.login-box{
    width:100%;
    max-width:420px;
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* LOGO */

.logo-area{
    text-align:center;
    margin-bottom:25px;
}

.logo-area img{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:15px;
}

.logo-area h2{
    font-size:28px;
    color:#16a34a;
    margin-bottom:5px;
}

.logo-area p{
    color:#6b7280;
    font-size:14px;
}

/* ERROR */

.error{
    background:#fee2e2;
    color:#dc2626;
    padding:14px;
    border-radius:10px;
    margin-bottom:20px;
    text-align:center;
    font-size:14px;
}

/* INPUT */

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

.input-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#374151;
}

.input-group input{
    width:100%;
    padding:14px;
    border:1px solid #d1d5db;
    border-radius:10px;
    outline:none;
    font-size:15px;
    transition:0.3s;
}

.input-group input:focus{
    border-color:#16a34a;
    box-shadow:0 0 0 3px rgba(22,163,74,0.1);
}

/* BUTTON LOGIN */

.btn-login{
    width:100%;
    padding:14px;
    background:#16a34a;
    color:white;
    border:none;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.btn-login:hover{
    background:#15803d;
}

/* BUTTON BACK */

.btn-back{
    width:100%;
    display:block;
    text-align:center;
    margin-top:15px;
    padding:14px;
    background:#e5e7eb;
    color:#111827;
    text-decoration:none;
    border-radius:10px;
    font-weight:600;
    transition:0.3s;
}

.btn-back:hover{
    background:#d1d5db;
}

/* RESPONSIVE */

@media(max-width:500px){

    .login-box{
        padding:30px 20px;
    }

    .logo-area h2{
        font-size:24px;
    }
}

</style>
</head>

<body>

<div class="login-container">

    <div class="login-box">

        <!-- LOGO -->
        <div class="logo-area">

            <img src="../img/logo.png" alt="Logo DPAD">

            <h2>Login Admin</h2>

            <p>
                Dinas Perpustakaan dan Arsip Daerah
                <br>
                Kabupaten Solok Selatan
            </p>

        </div>

        <!-- ERROR -->
        <?php if(isset($error)){ ?>

            <div class="error">
                <i class="fas fa-circle-exclamation"></i>
                <?php echo $error; ?>
            </div>

        <?php } ?>

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

            <div class="input-group">
                <label>Username</label>

                <input
                type="text"
                name="username"
                placeholder="Masukkan username"
                required>
            </div>

            <div class="input-group">
                <label>Password</label>

                <input
                type="password"
                name="password"
                placeholder="Masukkan password"
                required>
            </div>

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

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

            </button>

            <!-- KEMBALI -->
            <a href="../dashboard.php" class="btn-back">

                <i class="fas fa-house"></i>
                Kembali ke Beranda

            </a>

        </form>

    </div>

</div>

</body>
</html>