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

$error = '';

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

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

    if ($username === '' || $password === '') {
        $error = "Username / NPSN dan Password wajib diisi!";
    } else {

        $stmt = $conn->prepare("
            SELECT id_user, username, password, role
            FROM users
            WHERE username = ?
              AND status = 'aktif'
            LIMIT 1
        ");
        $stmt->bind_param("s", $username);
        $stmt->execute();
        $res = $stmt->get_result();

        if ($res->num_rows === 1) {
            $u = $res->fetch_assoc();

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

                $_SESSION['login']    = true;
                $_SESSION['id_user']  = $u['id_user'];
                $_SESSION['username'] = $u['username'];
                $_SESSION['npsn']     = $u['username'];
                $_SESSION['role']     = $u['role'];

                header("Location: dashboard.php");
                exit;
            } else {
                $error = "Password salah!";
            }
        } else {
            $error = "Username / NPSN tidak terdaftar!";
        }
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Aplikasi e-BOS</title>
<!-- Favicon (logo di tab browser) -->
<link rel="icon" href="assets/images/logomu.ico">
<style>
*{box-sizing:border-box}
body{
    margin:0;
    font-family:"Segoe UI", Arial;
    height:100vh;
    overflow:hidden;
}

/* BACKGROUND */
.bg-slideshow{
    position:fixed;
    inset:0;
    z-index:-2;
}
.bg-slideshow img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    animation:slide 18s infinite;
	
}

.bg-slideshow img:nth-child(1){animation-delay:0s}
.bg-slideshow img:nth-child(2){animation-delay:6s}
.bg-slideshow img:nth-child(3){animation-delay:12s}

@keyframes slide{
    0%{opacity:0}
    10%{opacity:1}
    30%{opacity:1}
    40%{opacity:0}
    100%{opacity:0}
}

/* OVERLAY */ustify-content:center;
    text-align:center;
    color:#fff;
}
.landing h1{font-size:36px;margin-bottom:10px}
.landing p{opacity:.9;margin-bottom:25px}

.btn{
    padding:12px 28px;
    border:none;
    border-radius:30px;
    font-size:15px;
    cursor:pointer;
    margin:0 6px;
}
.btn-login{background:#0d6efd;color:#fff}
.btn-daftar{background:#ffc107;color:#000}

/* LOGIN POPUP */
.login-box{
    display:none;
    position:fixed;
    inset:0;
    z-index:10;
}

/* WRAPPER */
.wrapper{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* CARD */
.login-card{
    width:680px;
    display:flex;
    background:#fff;
    border-radius:0;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

/* LEFT */
.login-left{
    width:50%;
    padding:35px;
}
.logo{text-align:center;margin-bottom:10px}
.logo img{
    width:80px;
    max-width:80px;
    height:auto;
}
.login-left h3{text-align:center;margin:10px 0 20px}

.login-left input{
    width:100%;
    padding:11px;
    margin-bottom:12px;
    border-radius:8px;
    border:1px solid #ccc;
}

.login-left button{
    width:100%;
    padding:11px;
    border:none;
    background:#0d6efd;
    color:#fff;
    border-radius:8px;
    font-weight:600;
}
.login-left button:hover{background:#0b5ed7}

.alert{
    background:#f8d7da;
    color:#842029;
    padding:10px;
    border-radius:6px;
    margin-bottom:12px;
    font-size:13px;
    text-align:center;
}

.footer-link{
    margin-top:14px;
    text-align:center;
    font-size:13px;
}
.footer-link a{
    color:#0d6efd;
    text-decoration:none;
}

/* RIGHT */
.login-right{
    width:50%;
    background:#ffc107;
    text-align:center;
    padding:30px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.login-right img{
    width:115px;
    max-width:115px;
    margin:15px 0;
}
.login-right h4{margin:8px 0}
.login-right p{
    font-size:13px;
    line-height:1.6;
}

/* RESPONSIVE */
@media(max-width:768px){
    .login-card{
        flex-direction:column;
        width:90%;
    }
    .login-left,.login-right{
        width:100%;
    }
}
/* HEADER */
.header-top{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:15px 25px;
    z-index:20;
    display:flex;
    justify-content:space-between; /* kiri & kanan */
    align-items:center;
    background:rgba(0,0,0,0.25);
    backdrop-filter:blur(6px);
}

/* NAMA APLIKASI */
.header-brand{
    color:#fff;
    font-size:18px;
    font-weight:600;
    letter-spacing:.5px;
}

/* KANAN */
.header-right{
    display:flex;
    gap:10px;
}

/* tombol */
.header-top .btn{
    padding:8px 18px;
    font-size:13px;
    border-radius:0px;
}
</style>
</head>

<body>

<div class="bg-slideshow">
    <img src="assets/images/saya.jpg">
    <img src="assets/images/aku.jpg">
    <img src="assets/images/kamu.jpg">
</div>
<div class="overlay"></div>
<!-- HEADER -->
<div class="header-top">
    
    <!-- KIRI (NAMA APP) -->
    <div class="header-brand">
    <img src="assets/images/logoku.png" style="height:28px;vertical-align:middle;">
    Aplikasi e-BOS
	</div>

    <!-- KANAN (TOMBOL) -->
    <div class="header-right">
        <button class="btn btn-login" onclick="showLogin()">Login</button>
        <a href="register.php">
            <button class="btn btn-daftar">Daftar</button>
        </a>
    </div>

</div>

<!-- LOGIN -->
<div class="login-box" id="loginBox">
    <div class="wrapper">
    <div class="login-card">

        <div class="login-left">
            <div class="logo">
                <img src="assets/images/logoku.png">
            </div>
            <h3>Aplikasi e-BOS</h3>

            <?php if($error){ ?>
                <div class="alert"><?= htmlspecialchars($error) ?></div>
            <?php } ?>

            <form method="post">
                <input type="text" name="username" placeholder="Username / NPSN" required>
                <input type="password" name="password" placeholder="Password" required>
                <button name="login">Login</button>
            </form>

            <div class="footer-link">
                <a href="#" onclick="hideLogin()">← Kembali</a> |
                <a href="register.php">Daftar Akun</a>
            </div>
        </div>

        <div class="login-right">
            <div>
                <h4>Situbondo Naik Kelas</h4>
                <img src="assets/images/logo_situbondo.png">
                <p>
                    Selamat Datang<br>
                    di Aplikasi Pembantu Laporan BOS<br>
                    Dinas Pendidikan<br>
                    <b>KABUPATEN SITUBONDO</b>
                </p>
            </div>
        </div>

    </div>
    </div>
</div>

<script>
function showLogin(){
    document.getElementById('landing').style.display='none';
    document.getElementById('loginBox').style.display='block';
}
function hideLogin(){
    document.getElementById('loginBox').style.display='none';
    document.getElementById('landing').style.display='flex';
}
</script>
<script>
function showLogin(){
    document.getElementById("loginBox").style.display = "block";
}

function hideLogin(){
    document.getElementById("loginBox").style.display = "none";
}
</script>
</body>
</html>
