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

<head>
    <!-- Unicode -->
    <meta charset="UTF-8">
    <!-- IE Compatiblity -->
    <meta http-equiv="X-UA Compatible" content="IE=edge">
    <!-- First Mobile Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Page Description -->
    <meta name="description" content="">
    <!-- Page Keywords -->
    <meta name="keywords" content="">

    <!-- Title Of template -->
    <title><?= $title; ?></title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="<?= base_url(); ?>/asset/frontend/img/fav.ico">

    <link rel="stylesheet" href="<?= base_url(); ?>/asset/plugins/fontawesome-free/css/all.min.css">

    <!-- Google fonts Raleway -->
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

    <!-- Google Font Titillium Web  -->
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">

    <!-- Load CSS Files -->
    <!-- <link href="../css/lib/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"> -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


    <link href="<?= base_url(); ?>/asset/frontend/css/lib/icomoon/icomoon.css" rel="stylesheet" type="text/css">
    <link href="<?= base_url(); ?>/asset/frontend/css/style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="<?= base_url(); ?>/asset/frontend/css/countdownstyle.css" type="text/css">



    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.3/b-colvis-1.6.3/b-flash-1.6.3/b-html5-1.6.3/b-print-1.6.3/r-2.2.5/datatables.min.css" />

    <!-- select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css">

    <!-- toastr -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

    <style type="text/css">
        .lightbox:before {
            transition: all .6s ease;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #333333;
            transform: scale(0);
            border-radius: 5px;
        }

        .lightbox:hover:before {
            opacity: .2;
            transform: scale(1);
        }

        .lightbox:after {
            transition: all .7s ease .2s;
            content: "";
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            border: 2px solid #fff;
            border-radius: 5px;
            background: #252525;
            opacity: 0;
            transform: scale(0);
        }

        .lightbox:hover:after {
            opacity: .35;
            transform: scale(1);
            border-radius: 5px;
        }

        ol {
            list-style: none;
            counter-reset: mycounter;
            padding: 0;
        }

        ol li {
            position: relative;
            margin-left: 30px;
            margin-bottom: 10px;
            /* padding: 5px 0; */
        }

        ol li::before {
            content: counter(mycounter);
            counter-increment: mycounter;
            position: absolute;
            top: 0;
            left: -30px;
            width: 25px;
            height: 25px;
            line-height: 25px;
            border-radius: 50%;
            color: black;
            background: white;
            text-align: center;
        }
    </style>

    <style>
        .wabutton {
            width: 70px;
            height: 70px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 900;
        }
    </style>

    <!-- Load Js Core Files -->
    <!-- <script src="js/lib/jquery.min.js"></script> -->
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="js/lib/bootstrap/bootstrap.min.js"></script> -->

    <!-- jQuery -->
    <script src="<?= base_url(); ?>/asset/plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="<?= base_url(); ?>/asset/plugins/jquery-ui/jquery-ui.min.js"></script>

    <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"> -->
    </script>



</head>

<body>


    <!-- <nav id="navigation" class="navbar navbar-expand-lg navbar-light" style="background-color: #4fbe6e;font-size: 14px;"> -->
    <nav id="navigation" class="navbar navbar-expand-lg navbar-light" style="background-color: #4fbe6e;font-size: 14px;">

        <div class="container">

            <a class="navbar-brand" href="#">
                <img src="<?= base_url(); ?>/asset/frontend/img/logo_madrasah.png" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>

            </button>


            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="<?= base_url('home'); ?>"><span class="fa fa-home" aria-hidden="true"></span> BERANDA</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?= base_url('home/peserta'); ?>"><span class="fa fa-address-card-o" aria-hidden="true"></span> PESERTA</a>
                    </li>



                    <li class="nav-item">
                        <a class="nav-link" href="<?= base_url('home/prosedur'); ?>"><span class="fas fa-fw fa-tasks" aria-hidden="true"></span> PROSEDUR</a>

                    </li>
                    <!-- <li class="nav-item">
                        <a class="nav-link" href="<?= base_url('home/jadwal'); ?>"><span class="fas fa-fw fa-clock" aria-hidden="true"></span> JADWAL</a>

                    </li> -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-fw fa-clock" aria-hidden="true"></span>
                            JADWAL <span class="caret"></span>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                            <a class="dropdown-item" href="<?= base_url('home/jadwalppdb/kb'); ?>">KB</a>
                            <a class="dropdown-item" href="<?= base_url('home/jadwalppdb/ra'); ?>">RA</a>
                            <a class="dropdown-item" href="<?= base_url('home/jadwalppdb/mi'); ?>">MI</a>
                            <a class="dropdown-item" href="<?= base_url('home/jadwalppdb/mts'); ?>">MTs</a>
                            <a class="dropdown-item" href="<?= base_url('home/jadwalppdb/ma'); ?>">MA</a>
                        </div>
                    </li>



                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-fw fa-file-upload" aria-hidden="true"></span>
                            Berkas <span class="caret"></span>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
                            <a class="dropdown-item" href="<?= base_url('home/downloadberkas'); ?>">Download</a>
                            <a class="dropdown-item" href="<?= base_url('home/uploadberkas'); ?>">Upload</a>

                        </div>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="<?= base_url('home/biayappdb'); ?>"><span class="fas fa-fw fa-tag" aria-hidden="true"></span> BIAYA</a>

                    </li>


                    <!-- <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            INFORMASI <span class="caret"></span>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="<?= base_url('home/prosedur'); ?>">Prosedur</a>
                            <a class="dropdown-item" href="<?= base_url('home/jadwal'); ?>">Jadwal</a>
                            <a class="dropdown-item" href="<?= base_url('home/pengumuman'); ?>">Pengumuman</a>
                            <a class="dropdown-item" href="<?= base_url('home/biaya'); ?>">Rincian Biaya</a>
                        </div>


                    </li> -->

                </ul>
                <?php
                if ($tglnow >= $tglbuka['tglbuka']) {
                    // dd($tglbuka['tglbuka'])
                ?>
                    
                <?php

                }
                ?>
            </div>



        </div>
    </nav>
    <!-- /End Navigation -->



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

    <!-- <a href="https://api.whatsapp.com/send?phone=628111264720" target="blank"> -->
    <a href="https://api.whatsapp.com/send?phone=628111264720&text=Assalamu'alaykum%0ASaya%20ingin%20bertanya%20seputar%20Madrasah%20Istiqlal%20Jakarta" target="blank">
        <!-- <img src="https://hantamo.com/free/whatsapp.svg" class="wabutton" alt="WhatsApp-Button"> -->
        <img src="<?= base_url(); ?>/asset/images/btnwa.png" class="wabutton" alt="WhatsApp-Button">
    </a>


    <!-- Start Footer -->
    <div id="footer" class="footer">

        <div class="container padding-top-50">
            <div class="row">

                <div class="col-md-6 tentang">
                    <h4>Tentang</h4>
                    <p>Madrasah Istiqlal adalah madrasah atau sekolah berbasis agama Islam yang berada di lingkungan Masjid Istiqlal Jakarta, Indonesia. Madrasah Istiqlal menggunakan sebagian bangunan di dalam kompleks Masjid Istiqlal, menyelenggarakan pendidikan dari Kelompok Bermain & Raudhatul Athfal (PAUD), Ibtidaiyah (SD), Tsanawiyah (SMP) dan Aliyah (SMU).</p>
                    <div class="social">
                        <a href="https://web.facebook.com/MadrasahIstiqlalJkt" target="_blank"><i class="fa fa-fw fa-facebook-official" aria-hidden="true"></i></a>
                        <a href="https://www.instagram.com/madrasahistiqlaljakarta/?hl=id" target="_blank"><i class="fa fa-fw fa-instagram" aria-hidden="true"></i></a>
                        <a href="https://www.youtube.com/channel/UCtqBe-ZogLpr7LobVwTCwMA" target="_blank"><i class="fa fa-fw fa-youtube"></i></a>
                    </div>
                </div>

                <div class="col-md-6 profile">
                    <h4>Profile</h4>
                    <p><i class="fa fa-fw fa-envelope" aria-hidden="true"></i> <a href="mailto:ppdb@mij.sch.id">ppdb@mij.sch.id</a></p>
                    <p><i class="fa fa-fw fa-home" aria-hidden="true"></i> Jl. Taman Wijaya Kusuma, Ps. Baru, Kecamatan Sawah Besar, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10710</p>
                    <p><i class="fa fa-fw fa-phone" aria-hidden="true"></i> <a href="tel:0213500711"> (021) 350 0711</a></p>
                    <p><i class="fa fa-fw fa-phone" aria-hidden="true"></i> <a href="tel:08111264720"> 08111264720 (Hotline)</a></p>
                </div>

            </div>
        </div>

        <hr>

        <div class="container  copyright">
            <p>&copy; copright 2020 . MIJ . All Right Reserved.</p>
        </div>

    </div>
    <!-- /End Footer -->

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.3/b-colvis-1.6.3/b-flash-1.6.3/b-html5-1.6.3/b-print-1.6.3/r-2.2.5/datatables.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</body>

</html>