
var VPDisplay = (function () {
    let vt_template = `
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                <div class="row">

                    <div class="col-xl-4 col-lg-4 col-sm-4">
                        <div class="icon-card icon-card-2 mb-10" style="padding: 10px;">
                            <div class="d-flex align-items-center">
                                <div class="icon purple">
                                    <i class="lni lni-smile"></i>
                                </div>
                                <div class="content">
                                    <h6 class="mb-10">Guru</h6>
                                    <h3 v-if="presentCount.guru" class="text-bold mb-10">{{presentCount.guru.present}} / {{presentCount.guru.total}}</h3>
                                </div> 
                            </div>
                        </div>
                        <!-- End Icon Cart -->
                    </div>
                    <div class="col-xl-4 col-lg-4 col-sm-4">
                        <div class="icon-card icon-card-2 mb-10" style="padding: 10px;">
                            <div class="d-flex align-items-center">
                                <div class="icon purple">
                                    <i class="lni lni-smile"></i>
                                </div>
                                <div class="content">
                                    <h6 class="mb-10">Karyawan</h6>
                                    <h3 v-if="presentCount.karyawan" class="text-bold mb-10">{{presentCount.karyawan.present}} / {{presentCount.karyawan.total}}</h3>
                                </div>
                            </div>
                        </div>
                        <!-- End Icon Cart -->
                    </div>
                    <div class="col-xl-4 col-lg-4 col-sm-4">
                        <div class="icon-card icon-card-2 mb-10" style="padding: 10px;">
                            <div class="d-flex align-items-center">
                                <div class="icon purple">
                                    <i class="lni lni-smile"></i>
                                </div>
                                <div class="content">
                                    <h6 class="mb-10">Siswa</h6>
                                    <h3 v-if="presentCount.siswa" class="text-bold mb-10">{{presentCount.siswa.present}} / {{presentCount.siswa.total}}</h3>
                                </div>
                            </div>
                        </div>
                        <!-- End Icon Cart -->
                    </div>
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                        <div class="card-style-3 mb-10 p-0">
                            <div class="card-content" style="height: 380px;">
                                <div class="h_iframe">
                                    <iframe :src="config.display_video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="row">
                    <div class="card-style clients-table-card mb-10 p-0">
                        <div class="card-image d-flex justify-content-center py-2" style="text-align: center;">
                            <div class="text-center" id="qrcode"></div>

                        </div>
                        <div class="title" style="text-align: center;">
                            <h6 class="mb-10">Scan untuk Presensi !</h6>
                        </div>

                    </div>
                    <!-- end card -->
                    <div class="card-style activity-card mb-30" style="padding: 10px;">
                        <div class="title d-flex flex-wrap align-items-center justify-content-between mb-10">
                            <div class="left mb-2">
                                <h6 class="text-medium mb-2">Log Presensi</h6>
                            </div>
                            <div class="right mb-2 d-none">
                                <div class="button-group">
                                    <a href="javascript:void(0)" class="active">Sudah</a>
                                    <a href="javascript:void(0)">Belum</a>

                                </div>
                            </div>
                        </div>
                        <!-- End Title -->
                        <div class="table-responsive">
                            <table class="table activity-table">
                                <tbody>
                                    <tr v-for="lp in latestPresent">
                                        <td>
                                            <div class="d-flex">
                                                <div class="icon" :class="lp.timeOut?'primary-bg':'success-bg'">
                                                    <i :class="lp.role==1?'fa-user-graduate':(lp.role==2?'fa-user-alt':'fa-user-tie')" class="fas text-white"></i>
                                                </div>
                                                <span class="text-sm text-gray ms-2 fw-500">
                                                    {{lp.fullname}}
                                                </span>
                                            </div>
                                        </td>

                                        <td class="text-end">
                                            <span class="status-btn">
                                            <small v-if="lp.suhuIO">{{lp.suhuIO}}°C</small>
                                            {{lp.timeIO}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card-style clients-table-card mb-30">
                    <div class="title d-flex justify-content-between align-items-center">
                        <h6 class="mb-10">JADWAL PELAJARAN BERLANGSUNG</h6>
                    </div>
                    <div class="table-wrapper table-responsive">
                        <table class="table table-sm">
                            <tbody>
                                <tr v-for="kelas in currentClass">
                                    <td>
                                        <h5 class="text-medium">{{kelas.nama_kelas}}</h5>
                                        <p>{{kelas.nama_guru}}</p>
                                    </td>
                                    <td>
                                        <h5 class="text-medium">{{kelas.nama_mapel}}</h5>
                                        <p>{{kelas.startTime}} - {{kelas.endTime}}</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- end table -->
                    </div>
                </div>
                <!-- end card -->
            </div>
        </div>
    `;
    return {
        name: "display",
        props: ['sck'],
        template: vt_template,
        data() {
            return {
                ready: false,
                scanned: {
                    value: '',
                    timer: null,
                    auth: false,
                },
                config: {},
                presentCount: {},
                latestPresent: [],
                currentClass: [],
            }
        },
        mounted() {
            this.loadConfig()
            this.loadPresentCount()
            this.loadLatestPresent()
            this.loadCurrentClass()
            this.setLoop();
            this.syncAttendanceSolution();
            document.querySelector('body').onkeydown = this.listenScanned;
        },
        computed: {
            qrCode: {
                get() {
                    return this.config.attendance_qr;
                },
                set(v) {
                    this.config.attendance_qr = v;
                }
            }
        },
        watch: {
            qrCode(code) {
                if (this.config.QRinstance) {
                    this.config.QRinstance.clear();
                    this.config.QRinstance.makeCode(code);
                    return;
                }
                this.config.QRinstance = new QRCode("qrcode", {
                    text: code,
                    width: 128,
                    height: 128,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
            }
        },
        methods: {
            listenScanned(e) {
                if (this.scanned.auth) return;
                if (this.scanned.value && e.key == 'Enter') {
                    let code = `${this.sck}:${this.scanned.value}`;
                    this.scanned.auth = true;
                    showDismisableLoading("Mengirim presensi");
                    axios({
                        method: 'POST',
                        headers: {
                            'candy-rf-machine': this.sck,
                            Authorization: 'Bearer ' + btoa(code) //the token is a variable which holds the token
                        },
                        data: { id: this.scanned.value },
                        url: `${this.$store.state.config.base_url}/api/presence-rf`
                    }).then((response) => {
                        Swal.close()
                        this.loadLatestPresent();
                        this.loadPresentCount();
                    }, (error) => {
                        Swal.fire('Gagal', gaem(error, "Gagal Melakukan Presensi"), 'error')
                    }).finally(() => this.scanned.auth = false);
                } else {
                    if (this.scanned.timer != null) {
                        clearTimeout(this.scanned.timer);
                        this.scanned.timer = null;
                    }
                    this.scanned.timer = setTimeout(() => {
                        this.scanned.timer = null;
                        this.scanned.value = '';
                    }, 1000);
                    this.scanned.value += e.key;
                }

            },
            setLoop() {
                setInterval(this.loadConfig, 1000 * 60 * 60);
                setInterval(this.loadCurrentClass, 1000 * 60 * 5);
                setInterval(this.loadPresentCount, 1000 * 60);
                setInterval(this.loadLatestPresent, 1000 * 60 * 5);
            },
            loadConfig() {
                axios({
                    method: 'get',
                    url: `${window.location.href}/static`
                }).then((response) => {
                    this.ready = true;
                    this.config = response.data;
                    document.getElementById('school-name').innerText = this.config.nama_sekolah;
                    document.getElementById('address').innerText = this.config.alamat;
                    document.getElementById('display-news').innerHTML = `<marquee>${this.config.display_news}</marquee>`;
                }, (error) => {
                    if (this.ready) return
                    Swal.fire('Gagal', gaem(error, "Gagal Memuat Data Display"), 'error')
                });
            },
            loadPresentCount() {
                axios({
                    method: 'get',
                    url: `${window.location.href}/presentCount`
                }).then((response) => {
                    this.presentCount = response.data;
                }, (error) => {
                });
            },
            syncAttendanceSolution() {
                axios({
                    method: 'get',
                    url: `${window.location.href}/sync-attendance-solution`
                }).then((response) => {
                    this.loadLatestPresent();
                }, (error) => {
                }).finally(() => {
                    setTimeout(() => {
                        this.syncAttendanceSolution();
                    }, 5000)

                });
            },
            loadCurrentClass() {
                axios({
                    method: 'get',
                    url: `${window.location.href}/currentClass`
                }).then((response) => {
                    this.currentClass = response.data;
                }, (error) => {
                });
            },
            loadLatestPresent() {
                axios({
                    method: 'get',
                    url: `${window.location.href}/latestPresent?limit=10`
                }).then((response) => {
                    this.latestPresent = response.data.map(v => {
                        v.timeIO = moment.unix(v.timeIO).format('HH:mm')
                        return v;
                    });
                }, (error) => {
                });
            },
        }
    }
})();
