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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
    <meta name="author" content="NobleUI">
    <meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">

    <title id="title"></title>

    <!-- Fonts -->
    <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=Roboto:wght@300;400;500;700;900&amp;display=swap" rel="stylesheet">
    <!-- End fonts -->

    <!-- core:css -->
    <link rel="stylesheet" href="<?= base_url(); ?>/public/assets/vendors/core/core.css">
    <!-- endinject -->

    <!-- Plugin css for this page -->
    <!-- End plugin css for this page -->

    <!-- inject:css -->
    <link rel="stylesheet" href="<?= base_url(); ?>/public/assets/fonts/feather-font/css/iconfont.css">
    <link rel="stylesheet" href="<?= base_url(); ?>/public/assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <!-- endinject -->

    <!-- Layout styles -->
    <link rel="stylesheet" href="<?= base_url(); ?>/public/assets/css/demo1/style.min.css">
    <!-- End layout styles -->

    <link rel="shortcut icon" href="<?= base_url(); ?>/public/assets/images/favicon.png" />

    <style>
        .app-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-top: 20px;
        }

        #logo_aplikasi {
            max-width: 120px;
            border-radius: 10px;
            /* Biar lebih smooth */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            /* Efek bayangan */
        }

        #nama_aplikasi {
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
            /* Warna biru flat */
            margin-top: 10px;
            text-transform: uppercase;
        }
    </style>

    <style>
        .info-box {
            background: #f8f9fa;
            border-left: 5px solid #007bff;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .info-box strong {
            color: #007bff;
        }
    </style>

</head>

<body>
    <div class="main-wrapper">
        <div class="page-wrapper full-page">
            <div class="page-content d-flex align-items-center justify-content-center">

                <div class="row w-100 mx-0 auth-page">
                    <div class="col-md-8 col-xl-6 mx-auto">
                        <div class="card">
                            <div class="row">
                                <div class="col-md-4 pe-md-0">
                                    <div class="auth-side-wrapper">

                                    </div>
                                </div>
                                <div class="col-md-8 ps-md-0">
                                    <div class="auth-form-wrapper px-4 py-5">
                                        <div class="app-header">
                                            <img id="logo_aplikasi" src="" alt="Logo Aplikasi" style="max-width: 100px;">
                                            <h3 id="nama_aplikasi"></h3>
                                        </div>

                                        <h5 class="text-muted fw-normal mb-4">Welcome back! Log in to your account.</h5>
                                        <form class="forms-sample" id="loginform" method="post" action="<?= base_url(); ?>/Auth/processLogin">
                                            <div class="mb-3">
                                                <label for="userEmail" class="form-label">Email address</label>
                                                <input type="email" class="form-control" id="email" name="email" required placeholder="Email">
                                            </div>
                                            <div class="mb-3">
                                                <label for="userPassword" class="form-label">Password</label>
                                                <input type="password" class="form-control password" name="password" id="password" autocomplete="current-password" placeholder="Password">
                                            </div>
                                            <div class="mb-3">
                                                <input type="checkbox" id="md_checkbox_21" class="filled-in chk-col-red lihat" />
                                                <label for="md_checkbox_21">Show Password</label>
                                            </div>
                                            <!-- ✅ Tempatkan pesan error di bawah tombol login -->

                                            <?php if (session()->getFlashdata('error')) : ?>
                                                <div class="alert alert-danger mt-3" role="alert">
                                                    <?= session()->getFlashdata('error') ?>
                                                </div>
                                            <?php endif; ?>

                                            <?php if (isset($validation)) : ?>
                                                <div class="alert alert-danger mt-3" role="alert">
                                                    <?= $validation->listErrors() ?>
                                                </div>
                                            <?php endif; ?>

                                            <div>
                                                <button class="btn btn-primary" type="submit">Login</button>
                                                <!-- <a href="<?= base_url('auth/signup') ?>" class="d-block mt-3 text-muted">Belum Punya Akun? Daftar!</a> -->
                                            </div>


                                        </form>
                                        <!-- Informasi Login Demonstrasi -->
                                        <!-- <div class="info-box mt-4">
                                            <p class="mb-1"><strong>Demo Login:</strong></p>
                                            <p class="mb-1">Username: <strong>admin@gmail.com</strong></p>
                                            <p>Password: <strong>herimunandar</strong></p>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

    <script>
        window.onload = function() {
            <?php if (session()->getFlashdata('success')) : ?>
                Swal.fire({
                    title: "Sukses!",
                    text: "<?= session()->getFlashdata('success') ?>",
                    icon: "success",
                    confirmButtonText: "OK"
                });
            <?php endif; ?>

            <?php if (session()->getFlashdata('error')) : ?>
                Swal.fire({
                    title: "Gagal!",
                    text: "<?= session()->getFlashdata('error') ?>",
                    icon: "error",
                    confirmButtonText: "OK"
                });
            <?php endif; ?>
        };
    </script>

    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <!-- core:js -->
    <script src="<?= base_url(); ?>/public/assets/vendors/core/core.js"></script>
    <!-- endinject -->

    <script>
        $(document).ready(function() {
            $.ajax({
                url: "<?= base_url('auth/getSettingsNoLevel'); ?>", // Ubah URL ke metode yang benar
                type: "GET",
                dataType: "json",
                success: function(response) {
                    if (response.success) {
                        $("#nama_aplikasi").text(response.settings.nama_aplikasi);
                        $("#logo_aplikasi").attr("src", response.settings.logo);
                    } else {
                        console.log("Gagal mengambil data:", response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.log("Error:", error);
                }
            });
        });
    </script>

    <!-- inject:js -->
    <script src="<?= base_url(); ?>/public/assets/vendors/feather-icons/feather.min.js"></script>
    <script src="<?= base_url(); ?>/public/assets/js/template.js"></script>
    <!-- endinject -->

    <!-- Custom js for this page -->
    <!-- End custom js for this page -->

    <script type="text/javascript">
        $(document).ready(function() {
            $('.lihat').click(function() {
                if ($(this).is(':checked')) {
                    $('.password').attr('type', 'text');
                } else {
                    $('.password').attr('type', 'password');
                }
            });
        });
    </script>

</body>

</html>