var VPUjianDraft = (function () {
    function isSoalSync(t, s) {
        if (parseInt(t) > parseInt(s)) {
            return `<span title="Soal Tampil Lebih Dari Jumlah Soal" class="badge bg-danger">${t}</span> / <span class="badge bg-primary">${s}</span> <span title="Soal Tampil Lebih Dari Jumlah Soal" class="badge bg-danger">Tidak Valid!</span>`;
        }
        return `<span class="badge bg-primary">${t}</span> / <span class="badge bg-primary">${s}</span>`;
    }
    let vp_template = `
    <div class="alert-box info-alert pl-100">
      <div class="left">
        <h5 class="text-bold">Info</h5>
      </div>
      <div class="alert">
        <p class="text-medium">
          1. Jangan menghapus draft yg sudah dipakai ujian karena jadwal dan nilai akan ikut terhapus.
        </p>
        <p class="text-medium">
          2. Jangan lupa untuk memilih soal terlebih dahulu
        </p>
      </div>
    </div>
    <div class="card-style">
        <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 class="main-btn btn-sm primary-btn rounded-md btn-hover" @click="mdl.id=null,modal('show')">
                <i class="lni lni-plus"></i>
            </button>
            &nbsp;
            <button class="main-btn btn-sm success-btn rounded-md btn-hover" @click="tbl.ajax.reload(null, false)" >
                <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>Nama</th>
                        <th>Kode Bank Soal</th>
                        <th>Mata Pelajaran</th>
                        <th>Pengaturan</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
            </table>
        </div>
      </div>
      
  
      <div class="modal fade" :ref="mdl.ref"  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">Draft Soal</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">
                            <form @submit.prevent="mdl.id?edit():add()">
                                <div class="input-style-1">
                                    <label>Nama</label>
                                    <input required v-model="mdl.nama" type="text" placeholder="Nama Draft">
                                </div>
                                <div class="my-3">
                                    <label for="mapel">Mata Pelajaran</label>
                                    <tomselect id="mapel" required :options="mdl.mapel.options" :value="mdl.mapel.value" @changed="mdl.mapel.value=$event" placeholder="Pilih Mata Pelajaran"  eltype="select" style="width: 100%;">
                                    </tomselect>
                                </div>
                                <div class="my-3">
                                    <label for="bank-soal">Bank Soal</label>
                                    <tomselect id="bank-soal" required :options="mdl.bs.options" :value="bsid" @changed="bsid=$event" placeholder="Pilih Bank Soal"  eltype="select" style="width: 100%;">
                                    </tomselect>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="input-style-2">
                                            <label>Bobot Soal True/False</label>
                                            <input class="remove-arrow-num" required v-model="mdl.bobot_tf" type="number" :max="100-(mdl.bobot_esai||0)" min="0" placeholder="Bobot True/False">
                                            <span class="icon"> % </span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-style-2">
                                            <label>Bobot Soal ESAI</label>
                                            <input class="remove-arrow-num" required v-model="mdl.bobot_esai" type="number" :max="100-(mdl.bobot_tf||0)" min="0" placeholder="Bobot ESAI">
                                            <span class="icon"> % </span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-style-2">
                                            <label>Durasi</label>
                                            <input class="remove-arrow-num" required v-model="mdl.timeout" type="number" :max="1440" min="1" placeholder="Durasi Pengerjaan">
                                            <span class="icon"> Menit </span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-style-2">
                                            <label>Min Waktu Selesai</label>
                                            <input class="remove-arrow-num" required v-model="mdl.minFinishTime" type="number" :max="mdl.timeout" min="0" placeholder="Minimal Waktu Selesai">
                                            <span class="icon"> Menit </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" v-model="mdl.acak_soal" type="checkbox" >
                                            <label @click="mdl.acak_soal=!mdl.acak_soal" class="form-check-label">{{mdl.acak_soal?'Soal Acak':'Soal Normal'}}</label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" v-model="mdl.acak_opsi" type="checkbox" >
                                            <label @click="mdl.acak_opsi=!mdl.acak_opsi" class="form-check-label">{{mdl.acak_opsi?'Opsi Acak':'Opsi Normal'}}</label>
                                        </div>
                                    </div>
                                </div>
                                
  
                                <div class="action d-flex flex-wrap justify-content-end">
                                    <button type="submit":disabled="mdl.loading" class="main-btn btn-sm primary-btn btn-hover">
            
                                    <template v-if="mdl.loading"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                    </template>
                                    <template v-else>
                                        {{mdl.id?'Simpan':'Tambah'}}
                                    </template>
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="alert-box info-alert pl-100 pt-2">
                            <div class="left">
                                <h5 class="text-bold">Info</h5>
                            </div>
                            <div class="alert">
                                <p class="text-medium">
                                    Soal PG, Isian Singkat masuk kedalam bobot True/False.
                                </p>
                                <p class="text-medium">
                                   Bobot PG  dan Bobot Esai harus sama dengan 100.
                                </p>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <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>Bank Soal</label>
                                <tomselect id="filter-bank-soal" required :options="[{ 'text': 'Semua', 'value': 'all' }, ...mdl.bs.options]" :value="filter.bank_soal" @changed="filter.bank_soal=$event" placeholder="Pilih Bank Soal"  eltype="select" style="width: 100%;">
                                </tomselect>
                            </div>
                            <div class="select-style-1">
                                <label>Mata Pelajaran</label>
                                <tomselect id="filter-mapel" required :options="[{ 'text': 'Semua', 'value': 'all' }, ...mdl.mapel.options]" :value="filter.mapel" @changed="filter.mapel=$event" placeholder="Pilih Mata Pelajaran"  eltype="select" style="width: 100%;">
                                </tomselect>
                            </div>
                            <div class="row">
                                <div class="col-md-6 select-style-1">
                                    <label>Acak Soal</label>
                                    <div class="select-position">
                                        <select required v-model="filter.acak.soal">
                                            <option value="all">Semua</option>
                                            <option value="1">Aktif</option>
                                            <option value="0">Tidak Aktif</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 select-style-1">
                                    <label>Acak Opsi</label>
                                    <div class="select-position">
                                        <select required v-model="filter.acak.opsi">
                                            <option value="all">Semua</option>
                                            <option value="1">Aktif</option>
                                            <option value="0">Tidak Aktif</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-evenly">
                                <div class="col-md-2 select-style-1">
                                    <label>Soal PG</label>
                                    <div class="select-position">
                                        <select required v-model="filter.soal.pg">
                                            <option value="all">Semua</option>
                                            <option value="1">Aktif</option>
                                            <option value="0">Tidak Aktif</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 select-style-1">
                                    <label>Soal PGM</label>
                                    <div class="select-position">
                                        <select required v-model="filter.soal.pgmulti">
                                            <option value="all">Semua</option>
                                            <option value="1">Aktif</option>
                                            <option value="0">Tidak Aktif</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 select-style-1">
                                    <label>Soal PGTF</label>
                                    <div class="select-position">
                                        <select required v-model="filter.soal.pgtf">
                                            <option value="all">Semua</option>
                                            <option value="1">Aktif</option>
                                            <option value="0">Tidak Aktif</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 select-style-1">
                                    <label>Soal PGC</label>
                                    <div class="select-position">
                                        <select required v-model="filter.soal.pgcouple">
                                            <option value="all">Semua</option>
                                            <option value="1">Aktif</option>
                                            <option value="0">Tidak Aktif</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 select-style-1">
                                    <label>Soal SE</label>
                                    <div class="select-position">
                                        <select required v-model="filter.soal.pgcouple">
                                            <option value="all">Semua</option>
                                            <option value="1">Aktif</option>
                                            <option value="0">Tidak Aktif</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 select-style-1">
                                    <label>Soal ESAI</label>
                                    <div class="select-position">
                                        <select required v-model="filter.soal.esai">
                                            <option value="all">Semua</option>
                                            <option value="1">Aktif</option>
                                            <option value="0">Tidak Aktif</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade" ref="mdl-soals"  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">
                        <div>
                            <button title="Tidak Ada Soal" v-if="soals.data.length==0" class="main-btn primary-btn-outline rounded-full btn-hover btn-sm mt-1" disabled><i class="fas fa-check"></i></button>
                            <button title="Hapus Semua" v-else-if="soals.data.filter(s=>s.selected).length==soals.data.length" @click="soals.data.map(v=>{v.selected=false;return v})" class="main-btn primary-btn rounded-full btn-sm mt-1"><i class="fas fa-check"></i></button>
                            <button title="Pilih Semua" v-else @click="soals.data.map(v=>{v.selected=true;return v})" class="main-btn primary-btn-outline rounded-full btn-hover btn-sm mt-1"><i class="fas fa-check"></i></button>
                            &nbsp; 
                            <button title="Tidak Ada Soal" v-if="soals.data.length==0" class="main-btn success-btn-outline rounded-full btn-hover btn-sm mt-1" disabled><i class="fas fa-eye"></i></button>
                            <button title="Tutup Semua" v-else-if="soals.data.filter(s=>s.reveal).length==soals.data.length" @click="soals.data.map(v=>{v.reveal=false;return v})" class="main-btn success-btn rounded-full btn-sm mt-1"><i class="fas fa-eye-slash"></i></button>
                            <button title="Lihat Semua" v-else @click="soals.data.map(v=>{v.reveal=true;return v})" class="main-btn success-btn-outline rounded-full btn-hover btn-sm mt-1"><i class="fas fa-eye"></i></button>
                            &nbsp; 
                            <button title="Simpan" @click="saveSoals()" class="main-btn primary-btn-outline rounded-full btn-hover btn-sm mt-1"><i class="fas fa-save"></i></button>
                        </div>
                        <template v-if="soals.onSelect">
                            Soal : {{soals.temp.length}} / {{soals.temp.filter(s=>s.selected).length}}
                        </template>
                        <template v-else>
                            Soal : {{soals.data.length}} / {{soals.data.filter(s=>s.selected).length}}
                        </template>
                        <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">
                                <template v-if="soals.data.length==0&&soals.temp.length==0">
                                    <div class="text-center my-2">
                                        <strong>Tidak Ada Soal</strong>
                                    </div>
                                </template>
                                <template v-else>
                                    <template v-if="soals.onSelect">
                                        <div >
                                            <template v-for="(soal,i) in soals.temp" >
                                                <div class="card-style my-2 soal-item p-3" :class="soal.selected?'bg-primary text-white':''">
                                                    <div class="title d-flex flex-wrap align-items-center justify-content-between">
                                                        <div class="left">
                                                            <h6 class="text-medium mb-2 soal-number" :class="soal.selected?'text-white':''">No. {{i+1}}</h6>
                                                        </div>
                                                        
                                                        <div class="center">
                                                            <i class="fas fa-grip-horizontal"></i>
                                                        </div>
                                                        
                                                        <div class="right">
                                                            <div class="d-flex justify-content-between">
                                                                <i title="Lihat Selengkapnya" v-if="soal.reveal" @click="soal.reveal=!soal.reveal" class="fas fa-eye-slash"></i>
                                                                <i title="Tutup" v-else @click="soal.reveal=!soal.reveal" class="fas fa-eye"></i>
                                                                &nbsp; 
                                                                <h6 class="text-medium mb-2" :class="soal.selected?'text-white':''">
                                                                    <i title="Pilihan Ganda" v-if="soal.jenis_soal==1" class="fas fa-check"></i>
                                                                    <i title="Essai" v-else-if="soal.jenis_soal==2" class="fas fa-file-signature"></i>
                                                                    <i title="PG Multi" v-else-if="soal.jenis_soal==3" class="fas fa-check-double"></i>
                                                                    <i title="Menjodohkan" v-else-if="soal.jenis_soal==4" class="fas fa-link"></i>
                                                                    <i title="Isian Singkat" v-else-if="soal.jenis_soal==5" class="fas fa-align-left"></i>
                                                                    <i title="Benar Salah" v-else-if="soal.jenis_soal==6" class="fas fa-times-circle"></i>
                                                                </h6>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-content">
                                                        <div v-if="soal.reveal" v-html="soal.question"></div>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div id="soal-wrap" ref="soalWrap" v-sortable="{options:{onEnd:()=>{reorder()},handle:'.sort-handle',chosenClass:'blink_me',forceFallback: true,fallbackOnBody: true,swapThreshold: 0.65,animation: 300}}">
                                            <template v-for="(soal,i) in parsedSoals" :key="soal.id">
                                                <div @click="selectSoal(soal.id)" :id="'soal-'+soal.id" :data-id="soal.id" class="card-style my-2 soal-item p-3" :class="soal.selected?'bg-primary text-white':''">
                                                    <div class="title d-flex flex-wrap align-items-center justify-content-between">
                                                        <div class="left">
                                                            <h6 class="text-medium mb-2 soal-number" :class="soal.selected?'text-white':''">No. {{i+1}}</h6>
                                                        </div>
                                                        
                                                        <div class="center">
                                                            <i class="fas fa-grip-horizontal sort-handle"></i>
                                                        </div>
                                                        
                                                        <div class="right">
                                                            <div class="d-flex justify-content-between">
                                                                <i title="Lihat Selengkapnya" v-if="soal.reveal" @click="soal.reveal=!soal.reveal" class="fas fa-eye-slash"></i>
                                                                <i title="Tutup" v-else @click="soal.reveal=!soal.reveal" class="fas fa-eye"></i>
                                                                &nbsp; 
                                                                <h6 class="text-medium mb-2" :class="soal.selected?'text-white':''">
                                                                    <i title="Pilihan Ganda" v-if="soal.jenis_soal==1" class="fas fa-check"></i>
                                                                    <i title="Essai" v-else-if="soal.jenis_soal==2" class="fas fa-file-signature"></i>
                                                                    <i title="PG Multi" v-else-if="soal.jenis_soal==3" class="fas fa-check-double"></i>
                                                                    <i title="Menjodohkan" v-else-if="soal.jenis_soal==4" class="fas fa-link"></i>
                                                                    <i title="Isian Singkat" v-else-if="soal.jenis_soal==5" class="fas fa-align-left"></i>
                                                                    <i title="Benar Salah" v-else-if="soal.jenis_soal==6" class="fas fa-times-circle"></i>
                                                                </h6>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-content">
                                                        <div v-if="soal.reveal" v-html="soal.question"></div>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </template>

                                </template>
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        `
    return {
        name: "ujiandraft",

        template: vp_template,
        data() {
            return {
                filter: {
                    mapel: 'all',
                    bank_soal: 'all',
                    acak: {
                        soal: 'all',
                        opsi: 'all'
                    },
                    soal: {
                        pg: 'all',
                        esai: 'all',
                        pgmulti: 'all',
                        pgtf: 'all',
                        pgcouple: 'all',
                        shortentry: 'all'
                    }
                },
                soals: {
                    id: null,
                    loading: false,
                    data: [],
                    temp: [],
                },
                mdl: {
                    ref: "modal",
                    bobot_esai: 0,
                    bobot_tf: 0,
                    timeout: 0,
                    minFinishTime: 0,
                    bs: {
                        value: null,
                        options: [],
                    },
                    mapel: {
                        value: null,
                        options: [],
                        raw: []
                    }
                },
            }
        },
        mounted() {
            this.loadBankSoal();
            this.loadMapel();
            this.renderTable();
            this.eventListener();
        },
        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.draftURL,
                        dataSrc: 'data',
                        beforeSend: function (request) {
                            request.setRequestHeader("X-Requested-With", 'XMLHttpRequest');
                        }
                    },
                    columnDefs: [
                        {
                            target: 2, visible: true, render: function (data, type, row) {
                                let t = `<span class="badge bg-primary m-1">`;
                                t += `${data.nama_mapel} - ${data.kode_mapel}`;
                                t += `</span>`;
                                return t;
                            }
                        },
                        {
                            target: 3, visible: true, render: function (data, type, row) {
                                let time = secondsToTime(data.timeout * 60);
                                let timeout = parseTimeToString(time);
                                let minFinishTime = parseTimeToString(secondsToTime(data.minFinishTime * 60));
                                let totalSoal = data.visible_pg + data.visible_esai + data.visible_pgcouple + data.visible_pgmulti + data.visible_pgtf + data.visible_shortentry;
                                let k = "<div class='row' style='min-width:420px'>";
                                k += "<div class='col-6'>";
                                if (totalSoal > 0) {
                                    k += `PG : ${isSoalSync(data.visible_pg, data.count_soal_pg)}<hr class="m-1">`;
                                    k += `ESAI : ${isSoalSync(data.visible_esai, data.count_soal_esai)} <hr class="m-1">`;
                                    k += `PGMULTI : ${isSoalSync(data.visible_pgmulti, data.count_soal_pgmulti)} <hr class="m-1">`;
                                    k += `PGTF : ${isSoalSync(data.visible_pgtf, data.count_soal_pgtf)} <hr class="m-1">`;
                                    k += `PGCOUPLE : ${isSoalSync(data.visible_pgcouple, data.count_soal_pgcouple)} <hr class="m-1">`;
                                    k += `ISIAN SINGKAT : ${isSoalSync(data.visible_shortentry, data.count_soal_shortentry)} <hr class="m-1">`;
                                } else {
                                    k += `<div id="trigger-soals" data-id="${data.id}" style="cursor:pointer" class="text-center"><br><br><br><br><span id="trigger-soals" data-id="${data.id}" class="badge badge-danger bg-danger">Belum memilih soal!</span></div>`;
                                }
                                k += "</div>";
                                k += "<div class='col-6'>";
                                k += `DURASI : <span class="badge bg-primary">${timeout.replace(/\s+/g, '') === "" ? 'Tidak Terbatas' : timeout}</span><hr class="m-1">`;
                                k += `Min Finish Time : <span class="badge bg-primary">${minFinishTime.replace(/\s+/g, '') === "" ? 'Tidak Aktif' : minFinishTime}</span><hr class="m-1">`;
                                k += `BOBOT True/False : <span class="badge bg-primary">${data.bobot_tf}%</span><hr class="m-1">`;
                                k += `BOBOT ESAI : <span class="badge bg-primary">${data.bobot_esai}%</span><hr class="m-1">`;
                                k += `ACAK SOAL : <span class="badge bg-${data.acak_soal == '1' ? 'success' : 'secondary'}">${data.acak_soal == '1' ? 'YA' : 'TIDAK'}</span><hr class="m-1">`;
                                k += `ACAK OPSI : <span class="badge bg-${data.acak_opsi == '1' ? 'success' : 'secondary'}">${data.acak_opsi == '1' ? 'YA' : 'TIDAK'}</span><hr class="m-1">`;
                                k += "</div>";
                                k += "</div>";
                                return k;
                            }
                        },
                        {
                            target: 4, visible: true,
                            render: function (data, type, row) {
                                let btn = "<div class='text-center mx-2'>";
                                btn += `<button title='Ubah Draft' 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 title='Hapus Draft' 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='Pilih Soal' class="btn btn-primary rounded-md" id="trigger-soals" data-id="${data.id}"><i id="trigger-soals" data-id="${data.id}"  class='lni lni-write'></i></button>`;
                                btn += `&nbsp;<button title='Cetak Draft Soal' class="btn btn-success rounded-md" id="trigger-print" data-id="${data.id}"><i id="trigger-print" data-id="${data.id}"  class='lni lni-printer'></i></button>`;
                                btn += "</div>";
                                return btn;
                            }
                        }
                    ],
                    columns: [
                        { data: 'nama' },
                        { data: 'kode_bank_soal' },
                        { data: null },
                        { data: null },
                        { data: null },
                    ]
                });
            },
            eventListener() {
                document.addEventListener('click', (e) => {
                    if (!e.target) return;
                    switch (e.target.id) {
                        case 'trigger-edit':
                            this.detail(e.target.dataset.id)
                            break;
                        case 'trigger-delete':
                            this.delete(e.target.dataset.id)
                            break;
                        case 'trigger-print':
                            Swal.fire({
                                title: 'Print Soal?',
                                showDenyButton: true,
                                showCancelButton: true,
                                confirmButtonText: 'Print',
                                denyButtonText: `Dengan Jawaban`,
                            }).then((result) => {
                                if (result.isConfirmed || result.isDenied) {
                                    let url = this.$store.state.config.base_url + "/panel/ujian/draft/print/" + e.target.dataset.id + "?direct=true&";
                                    if (result.isDenied) url += "wk=true";
                                    window.open(url);
                                }
                            })
                            break;
                        case "trigger-soals":
                            this.getSoals(e.target.dataset.id);
                            break;
                    }
                    if (e.target.classList.contains('read-more')) {
                        let soal = this.mdl.bs.soal.data[e.target.dataset.id];
                        if (!soal) return;
                        soal.full = !soal.full;
                        this.mdl.bs.soal.data.map(v => {
                            if (soal.id == v.id) return v;
                            v.full = false;
                            return v;
                        })
                    }
                });

                this.$refs.modal.addEventListener('hide.bs.modal', (e) => {

                })
            },
            jenisSoal(id) {
                return jenisSoal(id);
            },
            readMoreElement(id, state) {
                if (state) return `... <span data-id="${id}" style="cursor: pointer;" class="read-more text-dark">Selengkapnya</span>`;
                return ` <span data-id="${id}" style="cursor: pointer;" class="read-more text-dark"> Sembunyikan</span>`;
            },
            selectAllSoal() {
                this.mdl.bs.soal.data.filter(v => v.selected).length == this.mdl.bs.soal.data.length ? this.mdl.bs.soal.data.map(v => { v.selected = false; return v }) : this.mdl.bs.soal.data.map(v => { v.selected = true; return v });
            },
            selectSoal(id) {
                this.soals.onSelect = true;
                let soals = JSON.parse(JSON.stringify(this.soals.data));
                let soal = soals.find(v => v.id == id);
                soal.selected = !soal.selected;
                this.soals.data = [];
                this.soals.temp = soals;
                setTimeout(() => {
                    this.soals.data = soals;
                    this.soals.onSelect = false;
                }, 50)
            },
            getSoals(id) {
                showDismisableLoading();
                this.soals.id = id;
                this.soals.selected = [];
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + "/panel/ujian/draft/soals/" + this.soals.id,
                }).then((response) => {
                    Swal.close();
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    response.data.map(v => {
                        v.selected = v.selected == 1;
                        return v;
                    });
                    this.soals.data = response.data;
                    this.soals.temp = response.data;
                    let mdlSoals = new bootstrap.Modal(this.$refs['mdl-soals']);
                    mdlSoals.show();
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                });
            },
            saveSoals() {
                showDismisableLoading();
                let data = {
                    soals: [],
                    orders: [],
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                };
                let draft_id = this.soals.id;
                let sp = this.soals.data;
                $('.soal-item').each(function (i) {
                    let id = $(this).data('id');
                    let soal = sp.find(v => v.id == id);
                    data.orders.push(id);
                    if (soal.selected) data.soals.push({
                        draft_id: draft_id,
                        soal_id: id,
                    });
                });
                axios({
                    method: 'put',
                    url: this.$store.state.config.base_url + "/panel/ujian/draft/soals/" + this.soals.id,
                    data,
                }).then((response) => {
                    Swal.close();
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Berhasil', "Berhasil Menyimpan", 'success')
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                });
            },
            reorder() {
                let soals = [];
                let sp = this.soals.data;
                $('.soal-number').each(function (i) {
                    let item = $(this).parent().parent().parent();
                    let soal = sp.find(v => v.id == item[0].dataset.id);
                    $(this).html("No. " + (i + 1));
                    if (soal) soals.push(soal);
                });
                this.soals.onSelect = true;
                this.soals.data = [];
                this.soals.temp = soals;
                setTimeout(() => {
                    this.soals.data = soals;
                    this.soals.onSelect = false;
                }, 50)
                this.soals.data = soals;
            },
            detail(id) {
                showDismisableLoading();
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + "/panel/ujian/draft/detail/" + id,
                }).then((response) => {
                    Swal.close();
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.mdl.id = response.data.data.id;
                    this.mdl.nama = response.data.data.nama;
                    this.mdl.bobot_tf = response.data.data.bobot_tf;
                    this.mdl.bobot_esai = response.data.data.bobot_esai;
                    this.mdl.acak_soal = response.data.data.acak_soal == '1';
                    this.mdl.acak_opsi = response.data.data.acak_opsi == '1';
                    this.mdl.timeout = response.data.data.timeout;
                    this.mdl.minFinishTime = response.data.data.minFinishTime;
                    this.bsid = response.data.data.bank_soal_id;
                    this.mdl.mapel.value = response.data.data.mapel_id;
                    this.modal("show")
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                });
            },
            edit() {
                let data = {
                    nama: this.mdl.nama,
                    bobot_tf: this.mdl.bobot_tf,
                    bobot_esai: this.mdl.bobot_esai,
                    acak_soal: this.mdl.acak_soal,
                    acak_opsi: this.mdl.acak_opsi,
                    timeout: this.mdl.timeout,
                    minFinishTime: this.mdl.minFinishTime,
                    bank_soal_id: this.bsid,
                    mapel_id: this.mdl.mapel.value
                }
                showDismisableLoading();
                this.mdl.loading = true;
                axios({
                    method: 'put',
                    data: { data, [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
                    url: this.$store.state.config.base_url + "/panel/ujian/draft/edit/" + this.mdl.id,
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Berhasil', response.data.message, 'success')
                    this.modal("hide");
                    this.tbl.ajax.reload(null, false);
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                }).finally(() => this.mdl.loading = false);
            },
            add() {
                let data = {
                    nama: this.mdl.nama,
                    bobot_tf: this.mdl.bobot_tf,
                    bobot_esai: this.mdl.bobot_esai,
                    acak_soal: this.mdl.acak_soal,
                    acak_opsi: this.mdl.acak_opsi,
                    timeout: this.mdl.timeout,
                    minFinishTime: this.mdl.minFinishTime,
                    bank_soal_id: this.bsid,
                    mapel_id: this.mdl.mapel.value,
                }
                showDismisableLoading();
                this.mdl.loading = true;
                axios({
                    method: 'POST',
                    data: { data, [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
                    url: this.$store.state.config.base_url + "/panel/ujian/draft/add",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Berhasil', response.data.message, 'success')
                    this.modal("hide");
                    this.tbl.ajax.reload(null, false);
                }, (error) => {
                    if (typeof error.response == 'undefined') return;
                    Swal.fire('Gagal', gaem(error), 'error')
                }).finally(() => this.mdl.loading = false);
            },
            delete(id, force = false) {
                let data = { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value }
                if (force) {
                    data['force-delete'] = true;
                    showDismisableLoading();
                    axios({
                        method: 'delete',
                        data,
                        url: this.$store.state.config.base_url + "/panel/ujian/draft/delete/" + id,
                    }).then((response) => {
                        Swal.close();
                        if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                        this.tbl.ajax.reload(null, false);
                        Swal.fire(response.data.deleted ? 'Berhasil' : 'Gagal', response.data.message, response.data.deleted ? 'success' : 'error')
                    }, (error) => {
                        return Swal.fire('Gagal', gaem(error), 'error')
                    });
                    return
                }
                SwalDelete({
                    confirmed: () => {
                        showDismisableLoading();
                        axios({
                            method: 'delete',
                            data,
                            url: this.$store.state.config.base_url + "/panel/ujian/draft/delete/" + id,
                        }).then((response) => {
                            Swal.close();
                            if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                            this.tbl.ajax.reload(null, false);
                            Swal.fire(response.data.deleted ? 'Berhasil' : 'Gagal', response.data.message, response.data.deleted ? 'success' : 'error')
                        }, (error) => {
                            let errMsg = gaem(error);
                            try {
                                if (!error.response.data.messages.confirmation) return Swal.fire('Gagal', errMsg, 'error')
                            } catch (error) {
                                return Swal.fire('Gagal', errMsg, 'error')
                            }
                            SwalDelete({
                                params: { confirmButtonText: 'Ya, Hapus!', text: errMsg },
                                confirmed: () => this.delete(id, true)
                            });
                        });
                    }
                });
            },
            loadBankSoal() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + `/panel/bank-soal/all`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.mdl.bs.raw = response.data.data;
                    this.mdl.bs.options = Object.assign([{ value: null, text: 'Pilih Bank Soal' }], response.data.data.map((v, i) => {
                        return { value: v.id, text: v.kode };
                    }));

                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                });
            },
            loadMapel() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + `/panel/ujian/draft/mapel`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.mdl.mapel.raw = response.data.data;
                    this.mdl.mapel.options = response.data.data.map((v, i) => {
                        if (i == 0) this.mdl.mapel.value = v.id;
                        return { value: v.id, text: `${v.kode} - ${v.nama}` };
                    })
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                });
            },
            modal(e = 'show') {
                if (!this.mdl.instance) {
                    this.mdl.instance = new bootstrap.Modal(this.$refs[this.mdl.ref]);
                }
                switch (e) {
                    case "hide":
                        this.mdl.instance.hide();
                        break;
                    case "show":
                        this.mdl.instance.show();
                        break;
                    case "toggle":
                        this.mdl.instance.toggle();
                        break;
                    case "dispose":
                        this.mdl.instance.dispose();
                        break;
                }
            }
        },
        watch: {
            draftURL(v) {
                if (this.tbl) this.tbl.ajax.url(v).load();
            },
            bsid(v) {
                // if (v) this.loadSoalData();
            }
        },
        computed: {
            parsedSoals() {
                return this.soals.data;
            },
            bsid: {
                get() {
                    return this.mdl.bs.value;
                },
                set(v) {
                    this.mdl.bs.value = v;
                }
            },
            draftURL() {
                let url = this.$store.state.config.base_url + '/panel/ujian/draft/all?';
                url += `&mapel=${this.filter.mapel}`;
                url += `&acak_soal=${this.filter.acak.soal}`;
                url += `&acak_opsi=${this.filter.acak.opsi}`;
                url += `&bank_soal=${this.filter.bank_soal}`;
                url += `&visible_pg=${this.filter.soal.pg}`;
                url += `&visible_pgmulti=${this.filter.soal.pgmulti}`;
                url += `&visible_pgtf=${this.filter.soal.pgtf}`;
                url += `&visible_pgcouple=${this.filter.soal.pgcouple}`;
                url += `&visible_shortentry=${this.filter.soal.shortentry}`;
                url += `&visible_esai=${this.filter.soal.esai}`;
                return url;
            },
        }
    }
})();
