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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Riho admin is super flexible, powerful, clean &amp; modern responsive bootstrap 5 admin template with unlimited possibilities.">
    <meta name="keywords" content="admin template, Riho admin template, dashboard template, flat admin template, responsive admin template, web app">
    <meta name="author" content="pixelstrap">
    <link rel="icon" href="<?= base_url() ?>assets/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="<?= base_url() ?>assets/img/favicon.ico" type="image/x-icon">
    <title><?= $title ?></title>
    <!-- Google font-->
    <link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i,700,700i&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&amp;display=swap" rel="stylesheet">
    <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=Caveat:wght@700&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/css/vendors/icofont.css">
    <link rel="icon" href="<?= base_url() ?>assets/svg/landing-icons.svg">
    <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/css/vendors/slick.css">
    <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/css/vendors/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/css/vendors/animate.css">
    <!-- Bootstrap css-->
    <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/css/vendors/bootstrap.css">
    <!-- App css-->
    <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/css/style.css">
    <!-- Responsive css-->
    <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/css/responsive.css">
</head>

<body class="landing-page">
    <!-- tap on top starts-->
    <div class="tap-top"><i data-feather="chevrons-up"></i></div>
    <!-- tap on tap ends-->
    <!-- page-wrapper Start-->
    <div class="landing-page"><span class="cursor"><span class="cursor-move-inner"><span class="cursor-inner"></span></span><span class="cursor-move-outer"><span class="cursor-outer"> </span></span></span>
        <!-- Page Body Start-->
        <div class="landing-home" id="home">
            <div class="container-fluid">
                <div class="sticky-header">
                    <header>
                        <nav class="navbar navbar-b navbar-dark navbar-trans navbar-expand-xl fixed-top nav-padding" id="sidebar-menu"><a style="color:black" class="navbar-brand p-0" href="<?= base_url('/') ?>"><img class="img-fluid" src="<?= base_url('assets/img/') . $setting->logo ?>" width="50" alt=""> <b><?= $setting->nama_sekolah ?></b></a>
                            <button class="navbar-toggler navabr_btn-set custom_nav" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation"><span></span><span></span><span></span></button>
                            <div class="navbar-collapse justify-content-end collapse hidenav" id="navbarDefault">
                                <ul class="navbar-nav navbar_nav_modify" id="scroll-spy">
                                    <li class="nav-item"><a class="nav-link active" href="#home"><i class="fa fa-home"></i> Home</a></li>
                                    <li class="nav-item"> <a class="nav-link" id="page" href="#login"><i class="fa fa-sign-in"></i> Login</a></li>

                                </ul>
                            </div>
                        </nav>
                    </header>
                </div>
                <div class="row justify-content-center">
                    <div class="content text-center">
                        <div>
                            <h1 class="text-center">Pengumuman Kelulusan<span class="d-flex align-items-center justify-content-center pt-2"><span class="kata2">Dibuka Dalam</span></span></h1>
                            <div class="arrow-animate">
                                <svg>
                                    <use href="../assets/svg/icon-sprite.svg#animated-arrow"> </use>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="comingsoon" style="min-height: fit-content;">
                        <div class="comingsoon-inner text-center">
                            <!-- <img src="../assets/images/other-images/logo-login.png" alt=""> -->
                            <div class="countdown" id="clock-arrival" data-hours="1" data-minutes="2" data-seconds="3">
                                <ul>
                                    <li><span class="days time"></span><span class="title">days</span></li>
                                    <li><span class="hours time"></span><span class="title">Hours</span></li>
                                    <li><span class="minutes time"></span><span class="title">Minutes</span></li>
                                    <li><span class="seconds time"></span><span class="title">Seconds</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <section class="demo-section section-py-space" id="login">
        <div class="title text-center">
            <h5>Hasil akan terlihat jika waktunya sudah sesuai</h5>
            <h2 class="mb-lg-2 mb-0">Silahkan Login</h2>
        </div>
        <div class="container ">
            <div class="d-flex justify-content-center align-items-center text-center">
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-body">
                            <div id="alert-container"></div>
                            <form id="form-login" class="needs-validation" novalidate>
                                <div class="form-group">
                                    <label for="username"></label>
                                    <input type="text" class="form-control input-air-primary btn-pill p-15 text-center" name="username" id="username" aria-describedby="helpId" placeholder="Masukan Username" required>
                                    <div class="invalid-feedback">Username wajib diisi</div>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="password"></label>
                                    <input type="password" class="form-control input-air-primary btn-pill p-15 text-center" name="password" id="password" aria-describedby="helpId" placeholder="Masukan Password" required>
                                    <div class="invalid-feedback">Password wajib diisi</div>
                                </div>
                                <button type="submit" class="btn btn-pill btn-lg btn-primary">Login</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="landing-footer section-py-space" id="footer">
        <div class="custom-container">
            <div class="row p-0 m-0">
                <div class="col-12">
                    <div class="footer-contain">
                        <div class="rating-wrraper"><img class="img-fluid" src="<?= base_url('assets/img/') . $setting->logo ?>" width="50" alt="logo"></div>
                        <h2 class="f-w-600"><?= $setting->nama_sekolah ?></h2>
                        <p class="f-w-500">Copyright <?= date('Y') ?> © Candy SKL.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    </div>
    <!-- latest jquery-->
    <script src="<?= base_url() ?>assets/js/jquery-3.5.1.min.js"></script>
    <script src="<?= base_url() ?>assets/js/cursor/stats.min.js"> </script>
    <!-- Bootstrap js-->
    <script src="<?= base_url() ?>assets/js/bootstrap/bootstrap.bundle.min.js"></script>
    <!-- feather icon js-->
    <script src="<?= base_url() ?>assets/js/icons/feather-icon/feather.min.js"></script>
    <script src="<?= base_url() ?>assets/js/icons/feather-icon/feather-icon.js"></script>
    <!-- Plugins JS start-->
    <script src="<?= base_url() ?>assets/js/tooltip-init.js"></script>
    <script src="<?= base_url() ?>assets/js/animation/wow/wow.min.js"></script>
    <script src="<?= base_url() ?>assets/js/landing_sticky.js"></script>
    <script src="<?= base_url() ?>assets/js/landing.js"></script>
    <script src="<?= base_url() ?>assets/js/slick/slick.min.js"></script>
    <script src="<?= base_url() ?>assets/js/slick/slick.js"></script>
    <script src="<?= base_url() ?>assets/js/landing-slick.js"></script>
    <script src="<?= base_url() ?>assets/js/header-slick.js"></script>
    <!-- <script src="<?= base_url() ?>assets/js/countdown.js"></script> -->
    <!-- Plugins JS Ends-->
    <script>
        $(document).ready(function() {
            $('#form-login').submit(function(e) {
                e.preventDefault(); // Mencegah form submit jika ada validasi yang gagal

                // Mengecek apakah form valid
                if (this.checkValidity() === false) {
                    e.stopPropagation();
                } else {
                    // Mengambil nilai input
                    var username = $('#username').val();
                    var password = $('#password').val();

                    // Mengirimkan data form menggunakan AJAX
                    $.ajax({
                        url: '<?= base_url('siswalogin') ?>',
                        type: 'POST',
                        data: {
                            username: username,
                            password: password
                        },
                        success: function(response) {
                            if (response.success) {
                                var alertClass = 'alert-success'; // Atur kelas alert Bootstrap sesuai dengan jenis pesan
                                var alertMessage = 'Login berhasil'; // Pesan default jika tidak ada respons dari server

                                // Periksa apakah ada pesan khusus dari server
                                if (response.message) {
                                    alertMessage = response.message;
                                }

                                // Tampilkan alert Bootstrap dengan pesan dari respons server
                                $('#alert-container').html('<div class="alert ' + alertClass + ' alert-dismissible fade show" role="alert">' + alertMessage + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>');

                                // Redirect ke halaman "info" setelah 3 detik
                                setTimeout(function() {
                                    window.location.href = 'info';
                                }, 3000);
                            } else {
                                // Jika respons tidak sukses, tampilkan pesan kesalahan
                                var errorMessage = response.message || 'Terjadi kesalahan saat login';
                                $('#alert-container').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">' + errorMessage + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>');
                            }
                        },
                        error: function(xhr, status, error) {
                            // Handle error di sini
                            console.error('Terjadi kesalahan: ' + status);
                        }
                    });
                }

                // Menandai form sebagai "touched" agar muncul pesan validasi
                $(this).addClass('was-validated');
            });

            /***** SET A VALID END DATE *****/

            var deadline = new Date(<?= strtotime($setting->tgl_pengumuman) * 1000 ?>);
            initializeClock("clock-arrival", deadline);
        });

        /***** CALCULATE THE TIME REMAINING *****/
        function getTimeRemaining(endtime) {
            var t = endtime - Date.now();
            var seconds = Math.floor((t / 1000) % 60);
            var minutes = Math.floor((t / 1000 / 60) % 60);
            var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
            var days = Math.floor(t / (1000 * 60 * 60 * 24));
            return {
                'total': t,
                'days': days,
                'hours': hours,
                'minutes': minutes,
                'seconds': seconds
            };
        }

        /***** DISPLAY THE CLOCK AND STOP IT WHEN IT REACHES ZERO *****/
        function initializeClock(id, endtime) {
            var clock = document.getElementById(id);
            var daysSpan = clock.querySelector('.days');
            var hoursSpan = clock.querySelector('.hours');
            var minutesSpan = clock.querySelector('.minutes');
            var secondsSpan = clock.querySelector('.seconds');

            function updateClock() {
                var t = getTimeRemaining(endtime);

                daysSpan.innerHTML = t.days;
                hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
                minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
                secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

                if (t.total <= 0) {
                    clearInterval(timeinterval);
                    // Tindakan saat countdown selesai
                    $('.comingsoon').hide();
                    $('.kata2').html('Sudah Dibuka');
                }
            }

            updateClock();
            var timeinterval = setInterval(updateClock, 1000);
        }
    </script>

</body>

</html>