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

                    <div class="col-md-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-md-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-md-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-md-12">
                        <div class="card-style-3 mb-10 ">
                            <div class="card-content" style="min-height:376px;">
                                <div  class="table-wrapper table-responsive">
                                    <button v-for="ak in absensiKelas"  class="status-btn close-btn border-0 m-1">
                                    {{ak.nama}}&nbsp; <span class="badge rounded-pill bg-secondary">{{ak.absensi}}/{{ak.siswa}}</span>
                                    </button>
                                </div>
                                   
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div v-if="latestPresent.filter(v=>v.role==1).length>0" class="card-style mb-20" style="padding:2px 10px;">
                    <div class="row">
                        <div v-for="lp in latestPresent.filter(v=>v.role==1)" class="col-md-5 col-sm-6 my-1">
                            <div class="row" style="font-size:12px">
                                <div class="col-3 text-center">
                                    <img :src="lp.photo" :onerror="$store.state.config.onerrorAvatar" :alt="'Foto '+lp.fullname" class="card-img-top" :alt="lp.fullname">
                                </div>
                                <div class="col-9">
                                    <strong>{{lp.fullname}}</strong>
                                    <br/>
                                    <i class="lni lni-enter"></i> In : <span class="text-success" v-if="lp.timeIn">{{lp.timeIn.format('HH:mm')}}</span>
                                &nbsp;
                                <i class="lni lni-exit"></i> Out : <span class="text-primary" v-if="lp.timeOut">{{lp.timeOut.format('HH:mm')}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="latestPresent.filter(v=>v.role==3).length>0" class="card-style mb-20" style="padding:2px 10px;">
                    <div class="row">
                        <div v-for="lp in latestPresent.filter(v=>v.role==3)" class="col-md-5 col-sm-6 my-1">
                            <div class="row" style="font-size:12px">
                                <div class="col-3 text-center">
                                    <img :src="lp.photo" :onerror="$store.state.config.onerrorAvatar" :alt="'Foto '+lp.fullname" class="card-img-top" :alt="lp.fullname">
                                </div>
                                <div class="col-9">
                                    <strong>{{lp.fullname}}</strong>
                                    <br/>
                                    <i class="lni lni-enter"></i> In : <span class="text-success" v-if="lp.timeIn">{{lp.timeIn.format('HH:mm')}}</span>
                                &nbsp;
                                <i class="lni lni-exit"></i> Out : <span class="text-primary" v-if="lp.timeOut">{{lp.timeOut.format('HH:mm')}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="latestPresent.filter(v=>v.role==2).length>0" class="card-style mb-30" style="padding:2px 10px;">
                    <div class="row">
                        <div v-for="lp in latestPresent.filter(v=>v.role==2)" class="col-md-5 col-sm-6 my-1">
                            <div class="row" style="font-size:12px">
                                <div class="col-3 text-center">
                                    <img :src="lp.photo" :onerror="$store.state.config.onerrorAvatar" :alt="'Foto '+lp.fullname" class="card-img-top" :alt="lp.fullname">
                                </div>
                                <div class="col-9">
                                    <strong>{{lp.fullname}}</strong>
                                    <br/>
                                    <i class="lni lni-enter"></i> In : <span class="text-success" v-if="lp.timeIn">{{lp.timeIn.format('HH:mm')}}</span>
                                &nbsp;
                                <i class="lni lni-exit"></i> Out : <span class="text-primary" v-if="lp.timeOut">{{lp.timeOut.format('HH:mm')}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    return {
        name: "display",
        props: ['sck', 'base_url'],
        template: vt_template,
        data() {
            return {
                ready: false,
                scanned: {
                    value: '',
                    timer: null,
                    auth: false,
                },
                config: {},
                presentCount: {},
                latestPresent: [],
                absensiKelas: [],
                scroll: {
                    state: 0,
                    value: 0,
                    lastValue: 0,
                    cursorOn: true,
                    cursorTimeout: null,
                }
            }
        },
        mounted() {
            this.loadConfig();
            this.loadPresentCount();
            this.loadLatestPresent();
            this.setLoop();
            this.loadAbsensiKelas();
            document.querySelector('body').onkeydown = this.listenScanned;
        },
        methods: {
            setLoop() {
                setInterval(this.loadPresentCount, 1000 * 60);
                setInterval(this.syncAttendanceSolution, 1000 * 60 * 30);
            },
            loadConfig() {
                axios({
                    method: 'get',
                    url: `${this.base_url}/panel/display/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: `${this.base_url}/panel/display/presentCount`
                }).then((response) => {
                    this.presentCount = response.data;
                }, (error) => {
                });
            },
            syncAttendanceSolution() {
                axios({
                    method: 'get',
                    url: `${this.base_url}/panel/display/sync-attendance-solution`
                }).then((response) => {
                    this.loadLatestPresent();
                    this.loadAbsensiKelas();
                }, (error) => {
                }).finally(() => {
                    setTimeout(() => {
                        this.syncAttendanceSolution();
                    }, 10000)

                });
            },
            loadLatestPresent() {
                axios({
                    method: 'get',
                    url: `${this.base_url}/panel/display/latestPresent`
                }).then((response) => {

                    this.latestPresent = response.data.map(v => {
                        v.timeIO = moment.unix(v.timeIO).format('HH:mm');
                        if (v.timeIn) v.timeIn = moment.unix(v.timeIn);
                        if (v.timeOut) v.timeOut = moment.unix(v.timeOut);
                        return v;
                    }).reverse();
                }, (error) => {
                });
            },
            loadAbsensiKelas() {
                axios({
                    method: 'get',
                    url: `${this.base_url}/panel/display/absensi/kelas`
                }).then((response) => {
                    this.absensiKelas = response.data;
                }, (error) => {
                });
            },
        }
    }
})();
