var VPOverview = (function () {
    let vp_template = `
    <div class="page-content-wrapper py-3">
        <!-- Pagination-->
        <div class="shop-pagination pb-3">
            <div class="container">
                <div class="card">
                    <div class="card-body p-2">
                        <div class="d-flex align-items-center justify-content-between">
                            <small class="ms-1">Showing {{jadwal.length}} of {{dataJadwal.length}}</small>
                            <div><input class="form-check-input" @change="today=!today" :checked="today" type="checkbox"> Hari Ini</div>
                            <form action="#">
                                <select class="pe-4 form-select form-select-sm" v-model="filter.selected" id="defaultSelectSm" name="defaultSelectSm" >
                                    <option v-for="(f,i) in filter.data" :selected="f.value==filter.selected" :value="f.value">{{f.text}}</option>
                                </select>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Top Products-->
        <div class="top-products-area product-list-wrap">
            <div class="container">
                <div class="row g-3">

                <div v-if="loading" class="col-12">
                    <div class="text-center">
                        <div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
                    </div>
                </div>
                <div v-else-if="jadwal.length<1" class="col-12">
                    <div class="card single-product-card">
                        <div class="card-body">
                            <div class="text-center">Tidak Ada Jadwal</div>
                        </div>
                    </div>
                </div>
                <template v-else>
                    <!-- Single Top Product Card-->
                    <div v-for="(j,i) in jadwal" class="col-12">
                        <div class="card single-product-card">
                            <div class="card-body">
                                <span v-if="j.status!=2&&j.expiredAt" class="badge bg-danger mt-0">Selesai : {{j.expiredAt}}</span>
                                <div class="d-flex align-items-center">

                                    <div class="card-side-img">
                                        
                                        <i v-if="j.timestart<0||j.status==0" style="font-size: 60px;" class="bi bi-calendar text-primary"></i>
                                        <i v-else-if="j.status==1" style="font-size: 60px;" class="bi bi-pencil-square text-info"></i>
                                        <i v-else-if="j.status==2" style="font-size: 60px;" class="bi bi-calendar-check text-success"></i>
                                        <i v-else-if="j.status==3" style="font-size: 60px;" class="bi bi-calendar-x text-danger"></i>
                                    </div>
                                    <div class="card-content px-4 py-2">

                                    <a class="product-title d-block text-truncate mt-0 text-break" href="javascript:void(0)">
                                    {{j.nama_jadwal}}
                                </a>
                                <small>
                                <span class="text-break" href="javascript:void(0)">
                                {{j.nama_mapel}}
                                </span>
                                </small>
                                        <p><small><span><i class="bi bi-calendar"></i> {{j.parsedDate}}</span></small></p>
                                        <a v-if="j.timestart<0" class="btn btn-outline-secondary btn-sm disabled" href="javascript:void(0)">
                                            <i class="bi bi-play-circle"></i>
                                            Belum Mulai
                                        </a>
                                        <a v-else-if="j.status==0" class="btn btn-outline-primary btn-sm" :href="$store.state.config.base_url+'/ujian/jadwal/confirm/'+j.ujian_id">
                                            <i class="bi bi-play-circle"></i>
                                            Mulai Ujian
                                        </a>
                                        <a v-else-if="j.status==1&&j.timeend>0" class="btn btn-outline-info btn-sm"  :href="$store.state.config.base_url+'/ujian/'+j.ujian_id+'/finish'">
                                            <i class="bi bi-pause-circle"></i>
                                            Selesaikan Ujian
                                        </a>
                                        <a v-else-if="j.status==1&&j.locked==1" class="btn btn-outline-info btn-sm" href="javascript:void(0)">
                                            <i class="bi bi-shield-lock"></i>
                                            Ujian Dikunci
                                        </a>
                                        <a v-else-if="j.status==1" class="btn btn-outline-info btn-sm" :href="$store.state.config.base_url+'/ujian/'+j.ujian_id ">
                                            <i class="bi bi-pause-circle"></i>
                                            Lanjutkan Ujian
                                        </a>
                                        <a v-else-if="j.status==2" class="btn btn-outline-success btn-sm disabled" href="javascript:void(0)">
                                            <i class="bi bi-check-circle"></i>
                                            Sudah Ujian
                                        </a>
                                        <a v-else-if="j.status==3" class="btn btn-outline-danger btn-sm disabled" href="javascript:void(0)">
                                            <i class="bi bi-exclamation-circle"></i>
                                            Telat Ujian
                                        </a>
                                        <a v-if="j.status==2&&j.show_point==1" class="mx-1 btn btn-outline-success btn-sm" :href="$store.state.config.base_url+'/ujian/'+j.ujian_id+'/point'">
                                            <i class="bi bi-bookmark-heart"></i>
                                            Nilai
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                </div>
            </div>
        </div>

    </div>`
    return {
        name: "overview",
        template: vp_template,
        data() {
            return {
                dataJadwal: [],
                today: true,
                loading: true,
                filter: {
                    selected: 'all',
                    data: [{
                        text: 'Semua Ujian',
                        value: 'all',
                    },
                    {
                        text: 'Belum Ujian',
                        value: 'ny',
                    },
                    {
                        text: 'Sudah Ujian',
                        value: 'y',
                    },
                    {
                        text: 'Telat Ujian',
                        value: 'p',
                    },
                    ]
                },
            }
        },
        watch: {
            today(v) {
                this.loadData();
            }
        },
        mounted() {
            this.loadData();
            setInterval(this.updateExpired, 500)
        },
        methods: {
            loadData() {
                this.loading = true;
                axios({
                    method: 'get',
                    url: this.parsedURL,
                }).then((response) => {
                    this.loading = false;
                    if (!isObject(response.data)) return setTimeout(this.loadData, 500);
                    this.dataJadwal = response.data.map(v => this.parseData(v));
                }, (error) => { });
            },
            updateExpired() {
                this.dataJadwal.map(v => this.parseData(v))
            },
            parseData(v) {
                v.expiredAt = '';
                v.status = parseInt(v.status);
                v.show_point = parseInt(v.show_point);
                if (v.status == 2) return v;
                v.timestart = moment().unix() - v.startDateTime;
                v.timeend = moment().unix() - v.endDateTime;
                if (v.timeend > 0 && v.timestart > 0) {
                    if (v.status == 0) {
                        v.status = 3;
                    }
                    v.expiredAt = mm({ unix: v.endDateTime }).format("YYYY-MM-DD HH:mm");
                    return v;
                } else if (v.timestart < 0) {
                    return v;
                }
                let time = secondsToTime(-v.timeend);
                time = `${parseTimeToString(time)} `;
                v.expiredAt = time;
                return v;
            }
        },
        computed: {
            parsedURL() {
                let u = window.location.href + '/all?';
                if (this.today) u += 'today=1';
                return u;
            },
            jadwal: {
                get() {
                    let data = this.dataJadwal.map(v => {
                        if (v.startDate == v.endDate) {
                            v.parsedDate = mm({ unix: v.startDateTime }).format('YYYY-MM-DD HH:mm');
                            v.parsedDate += " s/d " + mm({ unix: v.endDateTime }).format('HH:mm');
                        } else {
                            v.parsedDate = mm({ unix: v.startDateTime }).format('YYYY-MM-DD HH:mm');
                            v.parsedDate += " - " + mm({ unix: v.endDateTime }).format('YYYY-MM-DD HH:mm');
                        }
                        return v;
                    })
                    data = data.filter(v => {
                        if (this.filter.selected == 'all') return true;
                        if (this.filter.selected == 'p' && v.status == 3) return true;
                        if (this.filter.selected == 'ny' && (v.status == 0 || v.status == 1)) return true;
                        if (this.filter.selected == 'y' && v.status == 2) return true;
                        return false;
                    })
                    return data;
                },
                set() {

                }
            }
        }
    }
})();
