var VPJadwalMengajar = (function () {
    let vp_template = `
    <div class="d-flex justify-content-center">
        <div class="select-style-1  mb-2 mx-1">
            <div class="select-position">
            <select class="bg-white" style="margin-right:25px" @change="" v-model="hari">
                <option value="">Semua Hari</option>
                <option value="1">Senin</option>
                <option value="2">Selasa</option>
                <option value="3">Rabu</option>
                <option value="4">Kamis</option>
                <option value="5">Jumat</option>
                <option value="6">Sabtu</option>
                <option value="0">Minggu</option>
            </select>
            </div>
        </div>
        <div class="select-style-1 mb-2 mx-1">
            <div class="select-position">
            <select class="bg-white" style="margin-right:25px" @change="" v-model="kelas">
                <option value="">Semua Kelas</option>
                <option v-for="(nama,kode) in sortKelas" :value="kode">{{nama}}</option>
            </select>
            </div>
        </div>
    </div>
<div class="row">
    <div v-for="j in filteredJadwal" class="col-lg-4 col-md-4 col-sm-12 mb-3">
        <div class="jadwal-mengajar card-style-1 pb-3">
            <div class="card-meta text-center" :class="j.startActivity<mm().unix()&&j.endActivity>mm().unix()&&j.is_libur==0?'bg-primary':'bg-secondary'">
                <h4 class="text-white p-3">{{j.kode_mapel}} - {{j.nama_mapel}}</h4>
                <span v-if="j.title_libur" class="main-btn danger-btn rounded-full btn-sm">{{j.title_libur}}</span>
            </div>
            <div class="card-content jadwal-body">
                <table class="table">
                    <tbody>
                        <tr>
                            <td><i class="fas fa-user fa-2x"></i> Nomor Induk</td>
                            <td>{{j.nomor_induk}}</td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-book fa-2x"></i> Kelas</td>
                            <td>{{j.kode_kelas}}</td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-clock fa-2x"></i> Waktu</td>
                            <td>{{j.sdtm.format('dddd')}}, {{j.sdtm.format('HH:mm')}} - {{j.edtm.format('HH:mm')}}</td>
                        </tr>
                       
                    </tbody>
                </table>
                
            </div>
            <div class="jadwal-footer">

                <div class="d-flex justify-content-center">

                    <a v-if="j.startDateTime<mm().unix()&&j.endDateTime>mm().unix()&&j.is_libur==0" :href="j.masuk" class="main-btn success-btn btn-sm rounded-full btn-hover ">Masuk Kelas</a>&nbsp;

                    <a :href="j.diskusi" type="button" title="Ruang Diskusi"  class="btn-sm main-btn primary-btn btn-sm 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-sm main-btn primary-btn btn-sm rounded-full btn-hover text-white">
                        <i class="fas fa-archive"></i>
                    </a>&nbsp;
                    <a :href="j.tugas" type="button" title="Ruang Tugas" class="btn-sm main-btn primary-btn btn-sm rounded-full btn-hover text-white">
                        <i class="fas fa-inbox"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
    `;
    return {
        name: "jadwal-mengajar",
        template: vp_template,
        data() {
            return {
                hari: '',
                kelas: '',
                jadwal: [],
            }
        },
        mounted() {
            this.loadJadwal();
        },
        methods: {
            mm() {
                return moment();
            },
            loadJadwal() {

                axios({
                    method: 'get',
                    url: window.location.href + "/all",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.jadwal = response.data.map(v => {
                        v.sdtm = mm({ unix: v.startDateTime });
                        v.edtm = mm({ unix: v.endDateTime });
                        v.sam = mm({ unix: v.startActivity });
                        v.eam = mm({ unix: v.endActivity });
                        v.startTime = v.sam.format('HH:mm');
                        v.endTime = v.eam.format('HH:mm');
                        return v;
                    });
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                });
            },
        },
        computed: {
            filteredJadwal() {
                let jadwal = [
                    ...this.jadwal.filter(v => v.sdtm.day() == 0),
                    ...this.jadwal.filter(v => v.sdtm.day() == 1),
                    ...this.jadwal.filter(v => v.sdtm.day() == 2),
                    ...this.jadwal.filter(v => v.sdtm.day() == 3),
                    ...this.jadwal.filter(v => v.sdtm.day() == 4),
                    ...this.jadwal.filter(v => v.sdtm.day() == 5),
                    ...this.jadwal.filter(v => v.sdtm.day() == 6)
                ];
                return jadwal.filter(v => {
                    if (this.hari && this.kelas) {
                        return (v.kode_kelas == this.kelas && v.sdtm.day() == this.hari)
                    } else if (this.hari) {
                        return v.sdtm.day() == this.hari;
                    } else if (this.kelas) {
                        return v.kode_kelas == this.kelas;
                    }
                    return true;
                })
            },
            sortKelas() {
                let kelas = {};
                this.jadwal.map(elem => {
                    if (typeof kelas[elem.kode_kelas] == 'undefined') kelas[elem.kode_kelas] = elem.nama_kelas;
                });
                return kelas;
            }
        }
    }
})();
