var VPJadwal = (function () {
    let vp_template = `
    
    <div v-if="jadwalExist">
            <div v-if="errMsg" class="alert custom-alert-1 alert-danger alert-dismissible fade show" role="alert"><i class="bi bi-x-circle"></i>
            {{errMsg}}
              <button class="btn btn-close position-relative p-1 ms-auto" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- Dot Loader -->
            <div v-if="loading&&!jadwal[activeDay]" class="dot-loader my-3">
                <div class="dot1 bg-dark"></div>
                <div class="dot2 bg-dark"></div>
                <div class="dot3 bg-dark"></div>
            </div>
        <div class="row p-1"> 
            <div v-for="j in jadwal[activeDay]" class="col-lg-4 col-md-4 col-sm-12 mb-3">
                <div class="card">
                    <div style="border-radius:0.25rem;" class="card-meta text-center" :class="(j.startDateTime>=mm().hours(0).minutes(0).seconds(0).unix()&&j.endDateTime<=mm().hours(23).minutes(59).seconds(59).unix())&&j.is_libur==0?'bg-primary':'bg-secondary'">
                        <h5 class="text-white p-3">{{j.nama_mapel}}</h5>

                    </div>
                    <div class="card-body p-2">
                        <table class="table table-borderless">
                            <tbody>
                                <tr>
                                   
                                    <td class="text-center"><h6><i class="fas fa-user"></i> {{j.nama_guru}}</h6></td>
                                </tr>
                                <tr>
                                   
                                    <td class="text-center"><i class="bi bi-clock"></i> {{j.sdtm.format('HH:mm')}} - {{j.edtm.format('HH:mm')}}</td>
                                </tr>
                                <tr>
                                   
                                    <td class="text-center">
                                        <div class="d-flex justify-content-center">
                                            &nbsp; <a :href="j.diskusi" type="button" title="Ruang Diskusi" class="btn btn-primary rounded-full btn-hover text-white"><i class="fas fa-comments"></i></a>
                                            &nbsp; <a :href="j.materi" type="button" title="Ruang Materi" class="btn btn-primary rounded-full btn-hover text-white"><i class="fas fa-book"></i></a>
                                            &nbsp; <a :href="j.tugas" type="button" title="Ruang Tugas" class="btn btn-primary rounded-full btn-hover text-white"><i class="fas fa-pencil-alt"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <div v-else-if="hidenull!=true" class="text-center h-100 py-5 my-5">
        <h3>Tidak Ada Jadwal</h3>
    </div>
    `;
    return {
        name: "jadwal",
        props: ['hidenull'],
        template: vp_template,
        data() {
            return {
                loading: false,
                errMsg: '',
                activeDay: (new Date()).getDay(),
            }
        },
        mounted() {
            this.eventListener();
        this.$store.dispatch('config/loadJadwalPelajaran');
        },
        computed: {
            jadwalExist() {
                if (!this.jadwal[this.activeDay]) return null;
                if (this.jadwal[this.activeDay].length <= 0) return null;
                return this.jadwal[this.activeDay];
            },
            jadwal() {
                return this.$store.state.config.jadwal_pelajaran;
            }
        },
        methods: {
            eventListener() {
                let dt = document.getElementsByClassName('day-tab');
                for (let i = 0; i < dt.length; i++) {
                    dt[i].addEventListener('click', () => {
                        this.activeDay = dt[i].dataset.id;
                        this.$store.dispatch('config/loadJadwalPelajaran', { 'day': this.activeDay })
                        this.removeActive()
                        dt[i].classList.add('bg-primary')
                        dt[i].classList.add('text-white')
                        dt[i].scrollIntoView({ block: "nearest", inline: "nearest" })
                    });
                    if (dt[i].dataset.id == mm().days()) dt[i].click();
                }
            },
            removeActive() {
                let dt = document.getElementsByClassName('day-tab');
                for (let i = 0; i < dt.length; i++) {
                    dt[i].classList.remove('bg-primary')
                    dt[i].classList.remove('text-white')
                }
            },
            mm() {
                return mm();
            }
        },
    }
})();
