<?= $this->extend('Panel/Layouts/App') ?>
<?= $this->section('css') ?>
<style>
    .fc-event-title {
        color: black;
        font-weight: bold;
    }
</style>
<?= $this->endSection() ?>
<?= $this->section('content') ?>

<div class="modal fade" id="backup-reminder" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content card-style">
            <div class="modal-header px-0 border-0">
                <h5 class="text-bold">Cadangkan Data</h5>
            </div>
            <div class="modal-body px-0">
                <div class="content mb-30">
                    <strong>Silahkan cadangkan data anda untuk antisipasi jika server mengalami gangguan <a href="<?= base_url('panel/app/settings/backup-restore/backup?assets=true&db=true') ?>">Disini</a></strong>
                </div>
                <div class="action d-flex flex-wrap align-items-center justify-content-between">
                    <div class="form-check checkbox-style m-2">
                        <input class="form-check-input" type="checkbox" id="disable-backup-reminder">
                        <label class="form-check-label" for="disable-backup-reminder">
                            Jangan tampilkan untuk hari ini
                        </label>
                    </div>
                    <!-- end checkbox -->
                    <button data-bs-dismiss="modal" class="main-btn primary-btn btn-hover m-1">
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="m-2">
    <!-- ========== title-wrapper start ========== -->
    <div class="title-wrapper">
        <div class="row align-items-center">
            <div class="col-md-12">
                <div class="title mb-20">
                    <h2><i class="lni lni-home"></i> <?= $page_title ?></h2>
                </div>
            </div>
            <!-- end col -->
            <div class="col-xl-3 col-lg-3 col-sm-6">
                <div data-intro="Ini Data Siswa" data-step="1" class="icon-card mb-10">
                    <div style="cursor:pointer" data-bs-toggle="modal" data-bs-target="#modal-siswa" class="icon purple">
                        <i class="lni lni-user"></i>
                    </div>
                    <div class="content">
                        <h6 class="mb-10">Data Siswa</h6>
                        <h3 class="text-bold mb-10"><?= $countSiswa ?></h3>

                    </div>
                </div>
                <!-- End Icon Cart -->
            </div>
            <div class="col-xl-3 col-lg-3 col-sm-6">
                <div data-intro="Ini Data Guru" data-step="1" data-title="ini title" class="icon-card mb-10">
                    <div style="cursor:pointer" onclick="window.location.href='<?= base_url('panel/users/staff') ?>'" class="icon success">
                        <i class="lni lni-user"></i>
                    </div>
                    <div class="content">
                        <h6 class="mb-10">Data Guru</h6>
                        <h3 class="text-bold mb-10"><?= $countGuru ?></h3>

                    </div>
                </div>
                <!-- End Icon Cart -->
            </div>
            <div class="col-xl-3 col-lg-3 col-sm-6">
                <div data-intro="Ini Data Guru" data-step="1" data-title="ini title" class="icon-card mb-10">
                    <div style="cursor:pointer" onclick="window.location.href='<?= base_url('panel/users/staff') ?>'" class="icon purple">
                        <i class="lni lni-user"></i>
                    </div>
                    <div class="content">
                        <h6 class="mb-10">Data Karyawan</h6>
                        <h3 class="text-bold mb-10"><?= $countKaryawan ?></h3>

                    </div>
                </div>
                <!-- End Icon Cart -->
            </div>
            <div class="col-xl-3 col-lg-3 col-sm-6">
                <div class="icon-card mb-10">
                    <div style="cursor:pointer" onclick="window.location.href='<?= base_url('panel/md/kelas') ?>'" class="icon primary">
                        <i class="lni lni-home"></i>
                    </div>
                    <div class="content">
                        <h6 class="mb-10">Data Kelas</h6>
                        <h3 class="text-bold mb-10"><?= $countKelas ?></h3>

                    </div>
                </div>
                <!-- End Icon Cart -->
            </div>

        </div>
        <div class="row ">
            <div class="col-xl-8 col-lg-8 col-sm-6">
                <div class="card p-1 my-1">
                    <monthline-ujian></monthline-ujian>
                </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-sm-6">
                <log-activity sd="<?= strtotime('-2 month') ?>" lim="5"></log-activity>
            </div>
            <!-- end row -->
        </div>
    </div>


    <div class="modal fade" id="modal-siswa" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content card-style">
                <div class="modal-header px-0 border-0">
                    <h5 class="text-bold">Data Siswa</h5>
                    <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
                        <i class="lni lni-cross-circle"></i>
                    </button>
                </div>
                <div class="modal-body px-0">
                    <div class="content">
                        <?= $mdlSiswa ?>
                    </div>
                </div>
            </div>
        </div>

        <?= $this->endSection() ?>
        <?= $this->section('js') ?>
        <script src="<?= base_url() ?>/vendors/fullcalendar/lib/main.min.js?v=<?= versioningjs() ?>"></script>
        <script src="<?= base_url() ?>/vendors/fullcalendar/lib/locales/id.js?v=<?= versioningjs() ?>"></script>
        <script src="<?= base_url() ?>/panel/assets/js/pages/ujian/overview/components/monthline.js?v=<?= versioningjs() ?>"></script>
        <script src="<?= base_url() ?>/panel/assets/js/components/logActivity.js?v=<?= versioningjs() ?>"></script>
        <script>
            VAPP.component(VPMonthlineUjian.name, VPMonthlineUjian);
            VAPP.component(VPLogActivity.name, VPLogActivity);
            setTimeout(() => {
                // axios({
                //     method: 'get',
                //     url: '<?= base_url('/panel/app/install/lc') ?>',
                // }).then((response) => {}, (error) => {});
            }, 10000)
            // introJs().setOptions({
            //     steps: [{
            //         intro: "Hello world!"
            //     }, {
            //         element: document.querySelector('.card'),
            //         intro: "Click here to login!"
            //     }]
            // }).start();
            $(document).ready(() => {
                let hideBackupReminder = localStorage.getItem("hideBackupReminder");
                let reminderToday = (new Date()).toISOString().split('T')[0];
                if (hideBackupReminder != reminderToday) {
                    let mdlBR = new bootstrap.Modal(document.getElementById('backup-reminder'));
                    document.getElementById('backup-reminder').addEventListener('hidden.bs.modal', function(event) {
                        if ($('#disable-backup-reminder').is(":checked")) localStorage.setItem("hideBackupReminder", reminderToday);
                    })
                    mdlBR.show();

                }
            })
        </script>

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