var VPJadwalDetailProgress = (function () {
    let spinner = `<i class="fa fa-spin fa-spinner"></i>`;

    let vp_template = `
        <div class="card-style">
            <div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" v-model="realtime.state">
                    <label class="form-check-label" @click="toggleRealtime()">Auto Refresh {{timeOutRefresh}}</label>
                </div>
            </div>
            <div style="text-align:right">
                <button title="Filter" class="main-btn btn-sm primary-btn rounded-md btn-hover" data-bs-toggle="modal" data-bs-target="#modal-filter">
                    <i class="fas fa-filter"></i>
                </button>
                &nbsp;
                <button title="Unduh Data" class="main-btn btn-sm success-btn rounded-md btn-hover" data-bs-toggle="modal" data-bs-target="#modal-nilai">
                    <i class="fas fa-download"></i>
                </button>
                &nbsp;
                <button @click="generate" title="Generator Soal" class="main-btn btn-sm warning-btn rounded-md btn-hover" >
                    <i class="fas fa-cog fa-spin"></i>
                </button>
                &nbsp;
                <template v-if="data.filter(v=>[1,2].includes(v.status)).length>0" >
                    <button title="Tambah Waktu" class="main-btn btn-sm success-btn rounded-md btn-hover" data-bs-toggle="modal" data-bs-target="#modal-extra-time">
                        <i class="fas fa-clock"></i>
                    </button>
                    &nbsp;
                </template>
                <template v-if="data.filter(v=>[0,1].includes(v.status)).length>0" >
                    <button title="Selesaikan Ujian Pilihan" class="main-btn btn-sm danger-btn rounded-md btn-hover" @click="finishBatch()">
                        <i class="fas fa-flag-checkered"></i>
                    </button>
                    &nbsp;
                </template >
                <template v-if="data.filter(v=>v.jwt).length>0">
                    <button title="Buka Kunci" class="main-btn btn-sm success-btn rounded-md btn-hover" @click="unlockBatch()">
                        <i class="lni lni-unlock"></i>
                    </button>
                    &nbsp;
                </template>
                <button title="Peserta Ujian" class="main-btn btn-sm primary-btn rounded-md btn-hover" @click="$refs.pu.init(jadwalId)">
                    <i class="fas fa-users"></i>
                </button>
                &nbsp;
                <button title="Segarkan" class="main-btn btn-sm success-btn rounded-md btn-hover" @click="reload()" >
                    <i class="lni lni-reload"></i>
                </button>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover w-100" id="tbl">
                    <thead>
                        <tr>
                            <th><span class="d-none">Selector</span> <input type="checkbox" id="select-all-ujian"></th>
                            <th>Nomor Induk</th>
                            <th>Nama</th>
                            <th>Kelas</th>
                            <th>Jawaban</th>
                            <th>Nilai</th>
                            <th>Lama Ujian</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <jawaban-correction @changed="reload()" ref="modal-jawaban"></jawaban-correction>

            
            <div class="modal fade" id="modal-filter" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content card-style">
                        <div class="modal-header px-0 border-0">
                            <h5 class="text-bold">Filter</h5>
                            <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
                                <i class="lni lni-cross-circle"></i>
                            </button>
                        </div>
                        <div class="modal-body px-0">
                            <div class="content">

                                <div class="select-style-1">
                                    <label>Kelas</label>
                                    <div class="select-position">
                                    <select required v-model="filter.kelas.value">
                                        <option value="all">Semua</option>
                                        <option v-for="kelas in filter.kelas.options" v-show="data.findIndex(v=>v.id_kelas==kelas.value)!=-1" :value="kelas.value">{{kelas.text}}</option>
                                    </select>
                                    </div>
                                </div>
                                <div class="select-style-1">
                                    <label>Status</label>
                                    <div class="select-position">
                                    <select required v-model="filter.status">
                                        <option value="all">Semua</option>
                                        <option value="0">Belum Dikerjakan</option>
                                        <option value="1">Dikerjakan</option>
                                        <option value="2">Selesai</option>
                                        <option value="3">Terpilih</option>
                                    </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modal-nilai" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content card-style">
                        <div class="modal-header px-0 border-0">
                            <h5 class="text-bold">Unduh Data</h5>
                            <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
                                <i class="lni lni-cross-circle"></i>
                            </button>
                        </div>
                        <div class="modal-body px-0">
                            <div class="content">

                                <div>
                                    <button v-if="data.length>0" title="Print Daftar Hadir" class="main-btn btn-sm success-btn rounded-md btn-hover" @click="printKehadiran()">
                                        <i class="fas fa-print"> <span>&nbsp;Kehadiran</span></i>
                                    </button>
                                    &nbsp;
                                    <button v-if="data.length>0" title="Print Daftar Nilai" class="main-btn btn-sm success-btn rounded-md btn-hover" @click="printNilai()">
                                        <i class="fas fa-print"> <span>&nbsp;Print Daftar Nilai</span></i>
                                    </button>
                                    &nbsp;
                                    <button v-if="data.length>0" @click="exportBatch()" title="Export " class="main-btn btn-sm success-btn rounded-md btn-hover" >
                                        <i class="fas fa-file-excel"> <span>&nbsp;Export Nilai</span></i>
                                    </button>
                                    &nbsp;
                                    <button v-if="data.length>0" @click="printJawaban()" title="Print Jawaban" class="main-btn btn-sm success-btn rounded-md btn-hover" >
                                        <i class="fas fa-print"> <span>&nbsp;Jawaban</span></i>
                                    </button>
                                    &nbsp;
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="modal fade" id="modal-extra-time" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-fullscreen modal-dialog-centered">
                    <div class="modal-content card-style">
                        <div class="modal-header px-0 border-0">
                            <h5 class="text-bold">Tambah Waktu</h5>
                            <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
                                <i class="lni lni-cross-circle"></i>
                            </button>
                        </div>
                        <div class="modal-body px-0">
                            <div class="content">
                            
                            <!-- table -->    
                            <div class="table-wrapper table-responsive">
                                <table class="table striped-table">
                                <thead>
                                    <tr>
                                    <th><input type="checkbox" id="extra-time-select-all" :checked="data.filter(v=>v.checked&&[1,2].includes(v.status)).length==data.filter(v=>[1,2].includes(v.status)).length&&data.length>0"></th>
                                    <th><h6>Nama</h6></th>
                                    <th><h6>Status</h6></th>
                                    <th><h6>Lama Ujian</h6></th>
                                    <th><h6>Waktu Tambahan</h6></th>
                                    </tr>
                                    <!-- end table row-->
                                </thead>
                                <tbody>
                                    <tr v-for="(peserta,i) in data.filter(v=>[1,2].includes(v.status))">
                                    <td>
                                        <div class="check-input-primary">
                                        <input class="form-check-input" :id="'extra-time-checkbox-'+i" type="checkbox" v-model="peserta.checked">
                                        </div>
                                    </td>
                                    <td>
                                        <p>{{peserta.nomor_induk}} - {{peserta.nama}}</p>
                                    </td>
                                    <td>
                                        <p>{{peserta.status==1?'Dikerjakan':'Selesai'}}</p>
                                    </td>
                                    <td>
                                        <p>{{peserta.parsedTimeLeft}}</p>
                                    </td>
                                    <td>
                                        <input type="number" min="1" v-model="peserta.extra_time" title="Waktu Tambahan"> <span>Menit</span>
                                    </td>
                                    </tr>
                                    <!-- end table row -->
                                </tbody>
                                </table>
                                <!-- end table -->
                            </div>
                            <!-- table -->
                            </div>
                        </div>

                        <div class="modal-footer">
                            <div class="action d-flex flex-wrap justify-content-end">
                                <button type="button" class="main-btn btn-sm success-btn btn-hover" id="extra_time_picker"> 
                                    <i class="fas fa-clock"></i> 
                                </button>
                            </div>
                            <div class="action d-flex flex-wrap justify-content-end">
                                <button @click="addExtraTime" :disabled="data.filter(v=>v.checked&&[1,2].includes(v.status)).length<1" type="button" class="main-btn btn-sm primary-btn btn-hover"> Simpan </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <peserta-ujian ref="pu"></peserta-ujian>
    `;
    return {

        template: vp_template,
        name: "jadwal-detail-progress",
        data() {
            return {
                data: [],
                jadwalId: atob(window.location.href.substring(window.location.href.lastIndexOf('/') + 1)),
                realtime: {
                    second: 10,
                    current: 0,
                    state: false,
                },
                checkboxAllClickable: true,
                filter: {
                    kelas: {
                        value: 'all',
                        options: []
                    },
                    status: 'all',
                },

            }
        },
        mounted() {
            this.renderTable();
            this.eventListener();
            this.loadKelas();
            setInterval(this.updateTimeCount, 500);
            setInterval(this.updateCheckBox, 1);
            setInterval(() => {
                this.realtime.current++;
                if (!this.realtime.state || this.realtime.second >= this.realtime.current) return;
                this.reload();
            }, 1000)
            this.timePicker();
        },
        methods: {
            renderTable() {
                if (!this.tbl) this.tbl = $('#tbl').DataTable({
                    dom: 'Blfrtip',
                    colReorder: true,
                    buttons: [
                        'copy', 'excel', 'pdf', 'print'
                    ],
                    processing: true,
                    responsive: true,
                    // serverSide: true,
                    ajax: {
                        url: this.progressURL,
                        dataSrc: (data) => {
                            data = data.data.map(v => {
                                v.parsedTimeLeft = null;
                                v.checked = false;
                                let ldi = data.data.findIndex(x => x.id == v.id);
                                if (ldi != -1) {
                                    v.checked = data.data[ldi].checked;
                                }
                                let pg_benar = 0;
                                let pg_salah = 0;
                                let total_pg = 0;
                                let total_pgmtfc = this.pi(v.visible_pg) + this.pi(v.visible_pgmulti) + this.pi(v.visible_pgtf) + this.pi(v.visible_pgcouple);
                                v.total_point_pgcommon = this.pf(v.total_point_pgcommon);
                                v.total_point_pgmulti = this.pf(v.total_point_pgmulti);
                                v.total_point_pgtf = this.pf(v.total_point_pgtf);
                                v.total_point_pgcouple = this.pf(v.total_point_pgcouple);
                                v.total_point_shortentry = this.pf(v.total_point_shortentry);
                                v.total_true_default_point_pgmulti = this.pf(v.total_true_default_point_pgmulti);
                                v.total_true_default_point_pgtf = this.pf(v.total_true_default_point_pgtf);
                                v.total_true_default_point_pgcouple = this.pf(v.total_true_default_point_pgcouple);
                                v.total_true_default_point_pgcommon = this.pf(v.total_true_default_point_pgcommon);
                                v.total_true_default_point_shortentry = this.pf(v.total_true_default_point_shortentry);
                                v.nilai_pg = this.pf(v.nilai_pg);
                                let tp = this.pf(v.total_point_pgcommon + v.total_point_pgmulti + v.total_point_pgtf + v.total_point_pgcouple + v.total_point_shortentry);
                                let trp = this.pf(v.total_true_default_point_pgcommon + v.total_true_default_point_pgmulti + v.total_point_pgtf + v.total_true_default_point_pgcouple + v.total_true_default_point_shortentry)
                                let nilai_pg = (v.status == "2" ? v.nilai_pg : (tp / trp) * this.pi(v.bobot_tf));
                                if (v.status == "2") {
                                    //sudah ada hasil
                                    pg_benar = this.pi(v.pg_benar) + this.pi(v.pgmulti_benar) + this.pi(v.pgtf_benar) + this.pi(v.pgcouple_benar) + this.pi(v.shortentry_benar);
                                    pg_salah += (this.pi(v.total_pg) + this.pi(v.total_shortentry)) - pg_benar;
                                } else {
                                    //prediksi
                                    v.total_pg = total_pgmtfc;
                                    total_pg = total_pgmtfc;
                                    pg_benar = this.pi(v.soal_pg_benar) + this.pi(v.soal_pgmulti_benar) + this.pi(v.soal_pgtf_benar) + this.pi(v.soal_pgcouple_benar) + this.pi(v.soal_shortentry_benar)
                                    pg_salah += (this.pi(v.soal_pg_selesai) + this.pi(v.soal_pgmulti_selesai) + this.pi(v.soal_pgtf_selesai) + this.pi(v.soal_pgcouple_selesai) + this.pi(v.soal_shortentry_selesai)) - pg_benar;
                                }
                                let nilai_esai = 0;
                                if (v.status == "2") {
                                    //sudah ada hasil
                                    nilai_esai = this.pf(v.nilai_esai);
                                } else {
                                    //prediksi
                                    if (v.visible_esai) nilai_esai = this.pf(v.soal_esai_nilai) * (this.pi(v.bobot_esai) / 100);
                                }
                                v.nilai = (nilai_pg + nilai_esai).toFixed(2);
                                if (isNaN(v.nilai)) v.nilai = "0.0";
                                v.summary_jawaban = { pg_benar, pg_salah, total_pg };
                                if (v.status == "0") {
                                    v.nilai = "0.0";
                                    v.summary_jawaban = { pg_benar: '-', pg_salah: '-', total_pg: '-' };
                                }
                                v.status = parseInt(v.status);
                                return v;
                            });
                            if (this.filter.status == 3) data = data.filter(v => v.checked);
                            this.checkboxAllClickable = false;
                            setTimeout(() => {
                                document.getElementById('select-all-ujian').checked = data.filter(v => v.checked).length == data.length;
                            }, 200);
                            this.checkboxAllClickable = true;
                            this.data = data;
                            return data;
                        },
                        beforeSend: function (request) {
                            request.setRequestHeader("X-Requested-With", 'XMLHttpRequest');
                        }
                    },
                    columnDefs: [
                        {
                            target: 0, visible: true, render: (data) => {
                                let checkbox = `<div class="custom-checkbox custom-control d-flex align-items-center text-center">
                                <input type="checkbox" value="${data.id}" class="custom-control-input checkbox-child" id="checkbox-ujian-${data.id}">
                                <label for="checkbox-ujian-${data.id}" class="custom-control-label">&nbsp;</label>
                                </div>`;
                                return checkbox;
                            }
                        },
                        {
                            target: 4, visible: true, render: function (data, type, row) {
                                let total_soal = parseInt(data.total_pg) + parseInt(data.visible_shortentry);
                                let k = "<span class='d-flex justify-content-evenly'>";
                                k += `<span class="badge bg-success">${data.summary_jawaban.pg_benar} <i class="lni lni-checkmark"></i></span>`;
                                k += `<span class="badge bg-danger mx-1">${data.summary_jawaban.pg_salah} <i class="lni lni-close"></i></span>`;
                                if (total_soal > 0) k += `<span class="badge bg-primary mx-1">${total_soal} <i class="lni lni-write"></i></span>`;
                                k += "</span>";
                                return k;
                            }
                        },
                        {
                            target: 5, visible: true, render: function (data, type, row) {
                                return `<span class="badge bg-success">${data.nilai}</i></span>`;
                            }
                        },
                        {
                            target: 6, visible: true, render: function (data) {
                                return `<span class="badge text-dark lamaUjian" id="detail-time-${data.id}"></span>`;
                            }
                        },
                        {
                            target: 7, visible: true, render: function (data) {
                                let k = "";
                                if (data.soal_generated == null) return `<span class="badge bg-danger">Soal Belum Dibuat!</span>`;
                                switch (parseInt(data.status)) {
                                    case 0:
                                        k += `<span class="badge bg-secondary">Belum Dikerjakan</span>`;
                                        break;
                                    case 1:
                                        k += `<span class="badge bg-info">${spinner} Dikerjakan</span>`;
                                        break;
                                    case 2:
                                        k += `<span class="badge bg-success">Selesai</span>`;
                                        break;
                                }
                                k += `<br><span>${data.ip_address || ''}</span>`;
                                return k;
                            }
                        },
                        {
                            target: 8, visible: true, render: function (data, type, row) {
                                let btn = "<div class='d-flex justify-content-evenly'>";
                                if (data.status == '1') {
                                    btn += `&nbsp;<button title="Selesaikan Ujian" class="btn btn-danger rounded-md" id="trigger-finish" data-id="${data.id}"><i id="trigger-finish" data-id="${data.id}" class="fas fa-flag-checkered"></i></button>`;
                                }
                                if (data.status == '2') {
                                    btn += `&nbsp;<button title="Lihat Jawaban" class="btn btn-success rounded-md" id="trigger-correction" data-id="${data.id}"><i id="trigger-correction" data-id="${data.id}" class="lni lni-write"></i></button>`;
                                }
                                if (data.jwt) {
                                    btn += `&nbsp;<button title="Buka Kunci" class="btn btn-success rounded-md" id="trigger-reset-login" data-id="${data.id}"><i id="trigger-reset-login" data-id="${data.id}" class="lni lni-unlock"></i></button>`;
                                }
                                btn += "</div>";
                                return btn;
                            }
                        },
                        // {
                        //     target: 6, visible: true, render: function (data, type, row) {

                        //         let state = data.status == '1';
                        //         let k = `<span class="badge bg-${state ? 'success' : 'danger'}">${state ? 'Aktif' : 'Tidak Aktif'}</span>`;
                        //         return k;
                        //     }
                        // },
                        // {
                        //     target: 7, visible: true,
                        //     render: function (data, type, row) {
                        //         let btn = `<div class="d-flex justify-content-evenly">`;
                        //         btn += `&nbsp;<button class="btn btn-warning rounded-md" id="trigger-generate" data-id="${data.id}"><i id="trigger-generate" data-id="${data.id}" class='fas fa-cog fa-spin'></i></button>`;
                        //         btn += `&nbsp;<button class="btn btn-primary rounded-md" id="trigger-edit" data-id="${data.id}"><i id="trigger-edit" data-id="${data.id}" class='lni lni-pencil-alt'></i></button>`;
                        //         btn += `&nbsp;<button class="btn btn-danger rounded-md" id="trigger-delete" data-id="${data.id}"><i id="trigger-delete" data-id="${data.id}" class='lni lni-trash-can'></i></button>`;
                        //         btn += `&nbsp;<button title="Overview" class="btn btn-success rounded-md" id="trigger-overview" data-id="${data.id}"><i id="trigger-overview" data-id="${data.id}" class='lni lni-zoom-in'></i></button>`;
                        //         btn += `&nbsp;<button title="Peserta" class="btn btn-primary rounded-md" id="trigger-peserta" data-id="${data.id}"><i id="trigger-peserta" data-id="${data.id}" class='lni lni-users'></i></button>`;
                        //         btn += '</div>';
                        //         return btn;
                        //     }
                        // }
                    ],
                    columns: [
                        { data: null },
                        { data: 'nomor_induk' },
                        { data: 'nama' },
                        { data: 'nama_kelas' },
                        { data: null },
                        { data: null },
                        { data: null },
                        { data: null },
                        { data: null },
                    ]
                });
            },
            timePicker() {
                let extra_time_picker = new NJTimePicker({
                    targetID: 'extra_time_picker',
                    format: '24',
                    autoSave: true
                });

                extra_time_picker.on('save', (data) => {
                    if (!data.fullResult) return;
                    let hours = data.fullResult.split(":")[0];
                    let minutes = data.fullResult.split(":")[1];
                    let extra_time = (parseInt(hours) * 60) + parseInt(minutes);
                    if (extra_time < 1) return;
                    this.data.map(v => {
                        v.extra_time = extra_time;
                        return v;
                    })
                });
            },
            eventListener() {
                document.addEventListener('change', (e) => {
                    if (e.target && e.target.id == 'extra-time-select-all') {
                        let data = this.data;
                        if (data.filter(v => v.checked && [1, 2].includes(v.status)).length == data.filter(v => [1, 2].includes(v.status)).length) {
                            data.map(v => {
                                if (![1, 2].includes(v.status)) return v;
                                v.checked = false;
                                return v;
                            })
                        } else {
                            data.map(v => {
                                if (![1, 2].includes(v.status)) return v;
                                v.checked = true;
                                return v;
                            })
                        }
                        if (data.length == data.filter(v => v.checked).length) {
                            document.getElementById('select-all-ujian').checked = true;
                        } else {
                            document.getElementById('select-all-ujian').checked = false;
                        }
                    }
                    if (e.target && e.target.id == 'select-all-ujian') {
                        if (this.checkboxAllClickable) this.checkAll();
                        this.checkboxAllClickable = true;
                    }
                    if (e.target && e.target.id.includes('checkbox-ujian')) {
                        this.checkboxAllClickable = false;
                        let data = this.data;
                        if (data.length == data.filter(v => v.checked).length) {
                            document.getElementById('select-all-ujian').checked = true;
                        } else {
                            document.getElementById('select-all-ujian').checked = false;
                        }
                        this.checkboxAllClickable = true;
                    }
                    if (e.target && e.target.id.includes('extra-time-checkbox')) {
                        this.checkboxAllClickable = false;
                        let data = this.data;
                        if (data.length == data.filter(v => v.checked).length) {
                            document.getElementById('select-all-ujian').checked = true;
                        } else {
                            document.getElementById('select-all-ujian').checked = false;
                        }
                        this.checkboxAllClickable = true;
                    }
                })
                document.addEventListener('click', (e) => {
                    if (e.target && e.target.id == 'trigger-finish') {
                        this.finish(e.target.dataset.id)
                    }
                    if (e.target && e.target.id == 'trigger-correction') {
                        this.$refs['modal-jawaban'].loadJawaban(btoa(e.target.dataset.id));
                    }
                    if (e.target && e.target.id == 'trigger-reset-login') {
                        this.unlock(e.target.dataset.id)
                    }
                    if (e.target.classList.value.includes('checkbox-child')) {
                        this.check(e.target.value, e.target.checked);
                    }
                });
            },
            loadKelas() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + "/panel/md/kelas/all",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.filter.kelas.options = response.data.data.map(e => {
                        let k = e.kode + " - " + e.nama;
                        if (e.kode_tingkat) {
                            k += " | " + e.kode_tingkat
                        }
                        if (e.kode_jurusan) {
                            k += " | " + e.kode_jurusan
                        }
                        return { value: e.id, text: k }
                    });
                }, (error) => {
                });
            },
            updateCheckBox() {
                for (let i = 0; i < document.getElementsByClassName('checkbox-child').length; i++) {
                    const elem = document.getElementsByClassName('checkbox-child')[i];
                    let a = this.data.findIndex(v => v.id == elem.value);
                    if (a != -1) {
                        elem.checked = this.data[a].checked;
                    }
                }
            },
            printJawaban() {
                let data = this.data.filter(v => v.checked).map(v => v.id);
                if (data.length < 1) return Swal.fire('Salah', 'Mohon Pilih Data Siswa Yang Akan DiPrint', 'error');
                let url = window.location.href + '/print-jawaban?id=' + data.join(',');
                window.open(url);
            },
            exportBatch() {
                let data = this.data.filter(v => v.checked).map(v => v.id);
                if (data.length < 1) return Swal.fire('Salah', 'Mohon Pilih Data Siswa Yang Akan DiExport', 'error');
                window.location.href = window.location.href + '/export?id=' + data.join(',');
            },
            printKehadiran() {
                let data = this.data.filter(v => v.checked).map(v => v.id);
                if (data.length < 1) return Swal.fire('Salah', 'Mohon Pilih Data Siswa Yang Akan DiPrint', 'error');
                let url = window.location.href + '/print-kehadiran?id=' + data.join(',');
                window.open(url);
            },
            printNilai() {
                let data = this.data.filter(v => v.checked).map(v => v.id);
                if (data.length < 1) return Swal.fire('Salah', 'Mohon Pilih Data Siswa Yang Akan DiPrint', 'error');
                let url = window.location.href + '/print-nilai?id=' + data.join(',');
                window.open(url);
            },
            checkAll() {
                let data = this.data;
                let notChecked = data.filter(v => !v.checked);
                this.data = this.data.map(v => {
                    if (notChecked.length > 0) {
                        v.checked = true;
                    } else {
                        v.checked = false;
                    }
                    return v;
                });
            },
            check(id, checked) {
                this.data = this.data.map(v => {
                    v.checked = v.checked || false;
                    if (id == v.id) {
                        v.checked = checked;
                    }
                    return v;
                });
            },
            generate() {
                let data = this.data.filter(v => v.checked).map(v => v.id);
                if (data.length < 1) return Swal.fire('Error', 'Mohon Pilih Siswa Yang Akan Di Buat Soalnya', 'error');
                SwalDelete({
                    params: {
                        title: "Generator Soal",
                        text: "Tindakan ini akan mengatur ulang data ujian yang sudah ada, apakah anda yakin?",
                        confirmButtonText: "Buat Soal"
                    },
                    confirmed: () => {
                        showDismisableLoading();
                        axios({
                            method: 'post',
                            url: window.location.href + "/generate-soal",
                            data: { id: data, [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
                        }).then((response) => {
                            if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                            Swal.close();
                            this.reload();
                            Swal.fire('Berhasil', response.data.message, 'success')
                        }, (error) => {
                            Swal.fire('Gagal', gaem(error), 'error')
                        });
                    }
                });
            },
            finishBatch() {
                let data = this.data.filter(v => v.checked).map(v => v.id);
                if (data.length < 1) return;
                SwalDelete({
                    params: {
                        title: "Selesaikan",
                        text: "Tindakan ini akan menyelesaikan ujian",
                        confirmButtonText: "Ya, Selesaikan"
                    },
                    confirmed: () => {
                        showDismisableLoading();
                        axios({
                            method: 'put',
                            url: window.location.href + "/finish-batch",
                            data: { id: data, [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
                        }).then((response) => {
                            Swal.close();
                            if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                            this.reload();
                            Swal.fire(response.data.finished ? 'Berhasil' : 'Gagal', response.data.message, response.data.finished ? 'success' : 'error')
                        }, (error) => {
                            Swal.fire('Gagal', gaem(error), 'error')
                        });
                    }
                });
            },
            unlockBatch() {
                let data = this.data.filter(v => v.jwt).map(v => v.id);
                if (data.length < 1) return;
                SwalDelete({
                    params: {
                        title: "Buka Kunci",
                        text: "Tindakan ini akan membuka ujian peserta yang terkunci",
                        confirmButtonText: "Ya, Bukakan"
                    },
                    confirmed: () => {
                        showDismisableLoading();
                        axios({
                            method: 'put',
                            url: window.location.href + "/unlock-batch",
                            data: { id: data, [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
                        }).then((response) => {
                            Swal.close();
                            if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                            this.reload();
                            Swal.fire(response.data.unlocked ? 'Berhasil' : 'Gagal', response.data.message, response.data.unlocked ? 'success' : 'error')
                        }, (error) => {
                            Swal.fire('Gagal', gaem(error), 'error')
                        });
                    }
                });
            },
            unlock(id) {
                if (id == "null") return;
                SwalDelete({
                    params: {
                        title: "Buka Kunci",
                        text: "Tindakan ini akan membuka ujian peserta yang terkunci",
                        confirmButtonText: "Ya, Bukakan"
                    },
                    confirmed: () => {
                        showDismisableLoading();
                        axios({
                            method: 'put',
                            url: window.location.href + "/unlock/" + btoa(id),
                            data: { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
                        }).then((response) => {
                            Swal.close();
                            if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                            this.reload();
                            Swal.fire(response.data.unlocked ? 'Berhasil' : 'Gagal', response.data.message, response.data.unlocked ? 'success' : 'error')
                        }, (error) => {
                            Swal.fire('Gagal', gaem(error), 'error')
                        });
                    }
                });
            },
            finish(id) {
                if (id == "null") return;

                SwalDelete({
                    params: {
                        title: "Selesaikan",
                        text: "Tindakan ini akan menyelesaikan ujian",
                        confirmButtonText: "Ya, Selesaikan"
                    },
                    confirmed: () => {
                        showDismisableLoading();
                        axios({
                            method: 'put',
                            url: window.location.href + "/finish-batch",
                            data: { id: [id], [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
                        }).then((response) => {
                            Swal.close();
                            if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                            this.reload();
                            Swal.fire(response.data.finished ? 'Berhasil' : 'Gagal', response.data.message, response.data.finished ? 'success' : 'error')
                        }, (error) => {
                            Swal.fire('Gagal', gaem(error), 'error')
                        });
                    }
                });
            },
            reload() {
                this.realtime.current = 0;
                this.tbl.ajax.reload(null, false);
            },
            toggleRealtime() {
                this.realtime.current = 0;
                this.realtime.state = !this.realtime.state
            },
            updateTimeCount() {
                let td = document.querySelectorAll('.lamaUjian');
                let lu = {};

                td.forEach(v => {
                    lu[v.id] = v;
                })
                this.data.forEach(v => {
                    let e = lu['detail-time-' + v.id];
                    if (!e) return
                    if (!v.start_at) return e.innerText = "-";
                    let time = v.status == 2 ? v.end_at - v.start_at : moment().unix() - v.start_at;
                    let text = ``;
                    if (time < 0 || !v.start_at) {
                        return e.innerText = "Belum Mulai";
                        //belum mulai
                    }
                    time = secondsToTime(time);
                    time = parseTimeToString(time);
                    text += time;
                    e.innerText = text;
                    v.parsedTimeLeft = text;
                })
            },
            pi(v) {
                return parseInt(v);
            },
            pf(v) {
                return parseFloat(v);
            },
            addExtraTime() {
                let data = this.data.filter(v => {
                    if (![1, 2].includes(v.status)) return false;
                    if (!v.checked) return false;
                    if (!v.extra_time) return false;
                    if (v.extra_time < 1) return false;
                    return true;
                }).map(v => {
                    return { id: v.id, extra_time: v.extra_time }
                })
                if (data.length < 1) return;
                SwalDelete({
                    params: {
                        title: "Tambah Waktu",
                        text: "Tindakan ini akan menambahkan waktu ujian",
                        confirmButtonText: "Ya, Tambahkan"
                    },
                    confirmed: () => {
                        showDismisableLoading();
                        axios({
                            method: 'PUT',
                            url: window.location.href + "/extra-time",
                            data: { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value, data }
                        }).then((response) => {
                            Swal.close();
                            if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                            Swal.fire('Success', response.data.message, 'success')
                            this.reload();
                        }, (error) => {
                            Swal.fire('Gagal', gaem(error), 'error')
                        });
                    }
                });
            }
        },
        watch: {
            progressURL(v) {
                if (this.tbl) this.tbl.ajax.url(v).load();
            }
        },
        computed: {
            progressURL() {
                let url = window.location.href + '/progress?';
                url += "kelas=" + this.filter.kelas.value;
                url += "&status=" + this.filter.status;
                return url;
            },
            timeOutRefresh() {
                if (!this.realtime.state) return "";
                let countDown = parseTimeToString(secondsToTime(this.realtime.second - this.realtime.current));
                return countDown.replace(/\s+/g, '') === "" ? "Loading..." : countDown;
            }
        }
    }
})();
