<?php session_start();?>
<!DOCTYPE html>
<html lang="id">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Login - Little King PreSchool</title>

        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
        <link rel="stylesheet" type="text/css" href="assets/css/signin.css">

        <script type="text/javascript" src="assets/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>

        <div class="login-page">

            <!-- Panel Kiri: Branding -->
            <div class="login-brand d-none d-md-flex">

                <div class="blob blob-green"></div>
                <div class="blob blob-yellow"></div>

                <div class="login-brand-content">
                    <i class="bi bi-award-fill brand-icon"></i>
                    <h1>Little King<br><span>Pre School</span></h1>
                    <p>Sistem Informasi Perkembangan Murid</p>

                    <div class="brand-decor">
                        <i class="bi bi-star-fill decor-yellow"></i>
                        <i class="bi bi-heart-fill decor-green"></i>
                        <i class="bi bi-balloon-fill decor-white"></i>
                    </div>
                </div>
            </div>

            <!-- Panel Kanan: Form Login -->
            <div class="login-form-panel">
                <form class="form-signin" method="POST">

                    <div class="text-center d-md-none mb-4">
                        <i class="bi bi-award-fill" style="font-size:48px; color:#f4b942;"></i>
                    </div>

                    <h3 class="mb-1 fw-bold">Selamat Datang</h3>
                    <p class="text-muted mb-4">Silahkan login untuk melanjutkan</p>

                    <div class="mb-3 input-group">
                        <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                        <input class="form-control" type="text" name="username" placeholder="Username" autocomplete="off">
                    </div>

                    <div class="mb-3 input-group">
                        <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                        <input class="form-control" type="password" name="password" placeholder="Password">
                    </div>

                    <button class="btn w-100 login-btn" type="submit">
                        <i class="bi bi-box-arrow-in-right me-1"></i> Login
                    </button>

                    <?php
                    if(isset($_POST['username']) && isset($_POST['password'])){
                        require "koneksi.php";
                        //Buka Koneksi
                        $con = open_connection();

                        //membuat query mySQL
                        $query = "SELECT * FROM guru WHERE username = '$_POST[username]' AND password = MD5('$_POST[password]')";

                        //Eksekusi Query
                        $hasil = mysqli_query($con, $query);

                        //Baca hasil, kalau berhasil kita pindah halaman, jika gagal muncul pesan
                        if($isi = mysqli_fetch_assoc($hasil)){
                            $_SESSION['username'] = $isi['username'];
                            header("Location: http://localhost/LittleKing/index.php");
                        }else{
                            echo '<div class="alert alert-danger mt-3 py-2 d-flex align-items-center" role="alert">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i> Username dan password salah
                                </div>';
                        }

                    }
                    ?>

                </form>
            </div>

        </div>

    </body>
</html>