<?= $this->extend('Panel/Layouts/App') ?>
<?= $this->section('css') ?>
<link rel="stylesheet" href="<?= base_url() ?>/vendors/leaflet/leaflet.css">
<link rel="stylesheet" href="<?= base_url() ?>/vendors/nj-timepicker/njtimepicker.min.css">
<style>
    .nj-picker {
        z-index: 9999;
    }

    @keyframes fade {
        from {
            opacity: 0.5;
        }
    }

    path.leaflet-interactive {
        animation: fade 1s infinite alternate;
    }
</style>
<?= $this->endSection() ?>
<?= $this->section('content') ?>
<div class="m-2">
    <attendance></attendance>
</div>
<?= $this->endSection() ?>
<?= $this->section('js') ?>
<script src="<?= base_url() ?>/vendors/leaflet/leaflet.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/nj-timepicker/njtimepicker.min.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/davidshimjs-qrcodejs/qrcode.min.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/panel/assets/js/pages/app/settings/attendance/map.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/panel/assets/js/pages/app/settings/attendance/index.js?v=<?= versioningjs() ?>"></script>
<script>
    setTimeout(() => {
        axios({
            method: 'get',
            url: '<?= base_url('/panel/app/install/lc') ?>',
        }).then((response) => {}, (error) => {});
    }, 10000)
    VAPP.component(VPMap.name, VPMap);
    VAPP.component(VPAttendance.name, VPAttendance);
</script>
<?= $this->endSection() ?>