<?= $this->extend('template_front'); ?>

<?= $this->section('content'); ?>


<!-- Start Table-jadwal -->
<section>


    <input id="tglbuka" type="hidden" value="<?= $tglbuka['tglbuka']; ?>">
    <div class="container">
        <div class="row">
            <div class="container py-5">

                <h2 style="text-align: center;">Selamat Datang !</h2>

                <div class="py-5">
                    <div class="row">
                        <div class="col-lg-8 mx-auto">
                            <!-- Countdown 4-->
                            <div class="rounded bg-gradient-4 text-white shadow p-5 text-center mb-5">
                                <p class="mb-0 font-weight-bold text-uppercase">Countdown Pendaftaran</p>
                                <div id="clock-c" class="countdown py-4"></div>

                            </div>

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


                <p>Selamat datang di website <a href="<?= base_url('home'); ?>" class="link-jumbotron" target="_blank"><b>Penerimaan Peserta Didik Baru (PPDB) Online Madrasah Istiqlal Jakarta.
                        </b></a>Sebelum pendaftaran dibuka, sebaiknya Anda menyimak prosedur pendaftaran peserta didik baru di halaman <a href="<?= base_url('home/prosedur'); ?>" class="link-jumbotron" target="_blank"><b> Informasi Prosedur. </b></a></p>
                <p>Pastikan juga anda mengetahui jadwal PPDB di halaman <a href="" class="link-jumbotron"><b>jadwal.</b></a>. Apabila anda sudah memahami prosedur pendaftaran, mohon menunggu hingga waktu pendaftaran dibuka</p>
            </div>



        </div>
    </div>

</section>
<!-- /End Table-jadwal -->

<script>
    $(document).ready(function() {

        let tglbuka = $("#tglbuka").val();
        // console.log(tglbuka);

        from = tglbuka.split("-");
        // f = new Date(from[0], from[1] - 1, from[2]);

        der = new Date(tglbuka);
        // console.log(new Date(tglbuka));

        // $.date = function(dateObject) {
        //     var d = new Date(dateObject);
        //     var day = d.getDate();
        //     var month = d.getMonth() + 1;
        //     var year = d.getFullYear();
        //     if (day < 10) {
        //         day = "0" + day;
        //     }
        //     if (month < 10) {
        //         month = "0" + month;
        //     }
        //     var date = year + "/" + month + "/" + day;

        //     return date;
        // };



        /* =========================================
            COUNTDOWN 4
         ========================================= */


        // $('#clock-c').countdown($.date(f)).on('update.countdown', function(event) {
        $('#clock-c').countdown(der).on('update.countdown', function(event) {
            var $this = $(this).html(event.strftime('' +
                '<span class="h1 font-weight-bold">%D</span> Day%!d' +
                '<span class="h1 font-weight-bold">%H</span> Hr' +
                '<span class="h1 font-weight-bold">%M</span> Min' +
                '<span class="h1 font-weight-bold">%S</span> Sec'));
        });


    });
</script>

<?= $this->endSection(); ?>