var VPJawabanCorrection = (function () {
    let vp_template = `
    <div class="modal fade from-bottom modal-correction" ref="modal"  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">Koreksi</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">
            <template v-if="!soal.ready">
                <div class="text-center">
                    <div class="spinner-grow" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </template>
            <template v-else-if="soal.error">
                <div class="text-center">
                    <span>
                        Ada kesalahan dalam mengambil info
                    </span>
                    <span v-if="soal.errMsg" class="text-danger">
                        {{soal.errMsg}}
                    </span>
                    <br>
                    <button @click="loadJawaban(this.ujian_id)" type="button"
                        class="main-btn btn-sm tranparent-btn btn-hover">Refresh</button>
                </div>
            </template>
            <template v-else-if="!hasResponds">
                <div class="text-center">
                    <span>
                        Tidak Ada Data Jawaban
                    </span>
                    <br>
                    <button @click="loadJawaban(this.ujian_id)" type="button" class="main-btn btn-sm tranparent-btn btn-hover">Refresh</button>
                </div>
            </template>
            <template v-else>
                <div class="accordion accordion-flush" id="jawaban">
                    <!-- start pg -->
                    <div class="accordion-item" v-if="pg_exists">
                        <h2 class="accordion-header" id="flush-headingPG">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapsePG" aria-expanded="false" aria-controls="flush-collapsePG">
                                Pilihan Ganda
                            </button>
                        </h2>
                        <div id="flush-collapsePG" class="accordion-collapse collapse" aria-labelledby="flush-headingPG"
                            data-bs-parent="#jawaban">
                            <div class="accordion-body">
                                <!-- start pg -->
                                <div class="soal-pg">
                                    <template v-if="soal.ready">
                                        <div v-for="(soal_data,index) in soal.pg.data.soal">
                                            <div class="row m-0">
                                                <div class="col-md-6 soal-area d-flex">
                                                    <b>{{index+1}}.</b>
                                                    <h3 v-html="soal_data.question"></h3>
                                                </div>
                                                <div class="col-md-6 opsi-area d-flex">
                                                    <div class="row m-0">
                                                        <template
                                                            v-for="opsi in soal.pg.data.opsi.filter(v=>v.soal_id==soal_data.soal_id)">
                                                            <div class="col-lg-6 col-sm-12">
                                                                <div class="form-check">
                                                                    <input :checked="soal_data.opsi_id==opsi.id"
                                                                        @click="soal.pg.data.soal[index].opsi_id =opsi.id"
                                                                        class="form-check-input"
                                                                        :title="opsi.is_key==1?'Jawaban Benar':''"
                                                                        :class="opsi.is_key==1?'bg-success':'bg-danger'"
                                                                        :name="'soal-'+soal_data.soal_id" type="radio">
                                                                    <label class="form-check-label" v-html="opsi.body"></label>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr v-if="index<soal.pg.data.soal.length-1">
                                        </div>
                                    </template>
                                </div>
                                <!-- end pg -->
                            </div>
                        </div>
                    </div>
                    <!-- end pg -->
        
                    <!-- start pgmulti -->
                    <div class="accordion-item" v-if="pgmulti_exists">
                        <h2 class="accordion-header" id="flush-headingMulti">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseMulti" aria-expanded="false" aria-controls="flush-collapseMulti">
                                Pilihan Ganda Multi
                            </button>
                        </h2>
                        <div id="flush-collapseMulti" class="accordion-collapse collapse" aria-labelledby="flush-headingMulti"
                            data-bs-parent="#jawaban">
                            <div class="accordion-body">
                                <!-- start pgmulti -->
                                <div class="soal-pgmulti">
                                    <template v-if="soal.ready">
                                        <div v-for="(soal_data,index) in soal.pgmulti.data.soal">
                                            <div class="row m-0">
                                                <div class="col-md-6 soal-area d-flex">
                                                    <b>{{index+1}}.</b>
                                                    <h3 v-html="soal_data.question"></h3>
                                                </div>
                                                <div class="col-md-6 opsi-area d-flex">
                                                    <div class="row m-0">
                                                        <template
                                                            v-for="opsi in soal.pgmulti.data.opsi.filter(v=>v.soal_id==soal_data.soal_id)">
                                                            <div class="col-lg-6 col-sm-12">
                                                                <div class="form-check">
                                                                    <input
                                                                        :checked="(soal_data.opsi||'').split(',').indexOf(opsi.id)!=-1"
                                                                        @click="pgmulti_check(index,opsi.id)"
                                                                        class="form-check-input"
                                                                        :title="opsi.is_key==1?'Jawaban Benar':''"
                                                                        :class="opsi.is_key==1?'bg-success':'bg-danger'"
                                                                        :name="'opsi-pgmulti-'+soal_data.soal_id" type="checkbox">
                                                                    <label class="form-check-label" v-html="opsi.body"></label>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr v-if="index<soal.pgmulti.data.soal.length-1">
                                        </div>
                                    </template>
                                </div>
                                <!-- end pgmulti -->
                            </div>
                        </div>
                    </div>
                    <!-- end pgtf -->


                    <!-- start pgtf -->
                    <div class="accordion-item" v-if="pgtf_exists">
                        <h2 class="accordion-header" id="flush-headingTF">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseTF" aria-expanded="false" aria-controls="flush-collapseTF">
                                Pilihan Ganda True False
                            </button>
                        </h2>
                        <div id="flush-collapseTF" class="accordion-collapse collapse" aria-labelledby="flush-headingTF"
                            data-bs-parent="#jawaban">
                            <div class="accordion-body">
                                <!-- start pgtf -->
                                <div class="soal-pgtf">
                                    <template v-if="soal.ready">
                                        <div v-for="(soal_data,index) in soal.pgtf.data.soal">
                                            <div class="row m-0">
                                                <div class="col-md-6 soal-area d-flex">
                                                    <b>{{index+1}}.</b>
                                                    <h3 v-html="soal_data.question"></h3>
                                                </div>
                                                <div class="col-md-6 opsi-area d-flex">
                                                    <div class="row m-0">
                                                        <template v-for="(opsi,oi) in soal.pgtf.data.opsi.filter(v=>v.soal_id==soal_data.soal_id)">
                                                            <div class="col-12">
                                                                <div class="d-none d-sm-block">
                                                                    <div class="d-flex">
                                                                        <div class="d-block">
                                                                            <div class="form-check">
                                                                                <input :checked="(soal_data.opsi||'').split(',').indexOf(opsi.id+'-1')!=-1" title="Benar" class="form-check-input" :class="opsi.is_key==1?'bg-success':''" :id="opsi.id+'smt'+oi" :name="'opsi-smtf'+opsi.id+''+oi" @input="pgtf_check(1,index,opsi.id)" type="radio">
                                                                                <label :for="opsi.id+'smt'+oi" class="form-check-label">
                                                                                    Benar
                                                                                </label>
                                                                            </div>
                                                                            <div class="form-check">
                                                                                <input :checked="(soal_data.opsi||'').split(',').indexOf(opsi.id+'-0')!=-1" title="Salah" class="form-check-input" :class="opsi.is_key==0?'bg-danger':''" :id="opsi.id+'smf'+oi" :name="'opsi-smtf'+opsi.id+''+oi" @input="pgtf_check(0,index,opsi.id)" type="radio">
                                                                                <label :for="opsi.id+'smf'+oi" class="form-check-label">
                                                                                    Salah
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                        <div style="margin-left:5px" v-html="opsi.body">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="d-block d-sm-none">
                                                                    <div class="d-flex justify-content-evenly">
                                                                        <div class="form-check">
                                                                            <input :checked="(soal_data.opsi||'').split(',').indexOf(opsi.id+'-1')!=-1" title="Benar" class="form-check-input" :class="opsi.is_key==1?'bg-success':''" :id="opsi.id+'xst'+oi" :name="'opsi-xstf'+opsi.id+''+oi" @input="pgtf_check(1,index,opsi.id)" type="radio">
                                                                            <label :for="opsi.id+'xst'+oi" class="form-check-label">
                                                                                Benar
                                                                            </label>
                                                                        </div>
                                                                        <div class="form-check">
                                                                            <input :checked="(soal_data.opsi||'').split(',').indexOf(opsi.id+'-0')!=-1" title="Salah" class="form-check-input" :class="opsi.is_key==0?'bg-danger':''" :id="opsi.id+'xsf'+oi" :name="'opsi-xstf'+opsi.id+''+oi" @input="pgtf_check(0,index,opsi.id)" type="radio">
                                                                            <label :for="opsi.id+'xsf'+oi" class="form-check-label">
                                                                                Salah
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                    <div style="margin-left:5px" v-html="opsi.body">
                                                                    </div>
                                                                </div>

                                                                <hr>
                                                            </div>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr v-if="index<soal.pgtf.data.soal.length-1">
                                        </div>
                                    </template>
                                </div>
                                <!-- end pgtf -->
                            </div>
                        </div>
                    </div>
                    <!-- end pgtf -->
        
                    <!-- start pgcouple -->
                    <div class="accordion-item" v-if="pgcouple_exists">
                        <h2 class="accordion-header" id="flush-headingCouple">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseCouple" aria-expanded="false"
                                aria-controls="flush-collapseCouple">
                                Pilihan Ganda Pasangan
                            </button>
                        </h2>
                        <div id="flush-collapseCouple" class="accordion-collapse collapse" aria-labelledby="flush-headingCouple"
                            data-bs-parent="#jawaban">
                            <div class="accordion-body">
                                <!-- start pgcouple -->
                                <div class="soal-pgcouple">
                                    <template v-if="soal.ready">
                                        <div v-for="(soal_data,index) in soal.pgcouple.data.soal">
                                            <b>{{index+1}}.</b>
                                            <h3 v-html="soal_data.question"></h3>
                                            <hr v-if="index<soal.pgcouple.data.soal.length-1">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="row my-1">
                                                        <div class="col-6">
                                                            <label>Pertanyaan</label>
                                                        </div>
                                                    </div>
                                                    <div class="accordion" id="accordion-questions">
                                                        <div v-for="(question,i) in coupleQuestions(soal_data.soal_id)"
                                                            class="accordion-item">
                                                            <h2 class="accordion-header" :id="'questions-heading'+i">
                                                                <button
                                                                    :class="(question.coupled&&soal_data.opsi&&question.color?'bg-'+question.color+' text-white':'')"
                                                                    class="accordion-button" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    :data-bs-target="'#questions-collapse'+i"
                                                                    aria-expanded="false"
                                                                    :aria-controls="'questions-collapse'+i">
                                                                    Pertanyaan {{i+1}}
                                                                </button>
                                                            </h2>
                                                            <div :id="'questions-collapse'+i"
                                                                class="accordion-collapse collapse show"
                                                                :aria-labelledby="'questions-heading'+i">
                                                                <div class="accordion-body">
                                                                    <div class="row">
                                                                        <div class="col-6">
                                                                            <button v-if="!question_selected"
                                                                                @click="question_selected=question.id"
                                                                                class="btn btn-success rounded-full btn-hover">Pilih</button>
                                                                            <button v-else-if="question_selected==question.id"
                                                                                @click="question_selected=null"
                                                                                class="btn btn-danger rounded-full btn-hover">Batal</button>
                                                                        </div>
                                                                        <div class="col-6 text-end">
                                                                        </div>
                                                                    </div>
                                                                    <br>
                                                                    <div class="questions-body unselectable"
                                                                        v-html="question.body">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="row my-1">
                                                        <div class="col-6">
                                                            <label>Jawaban</label>
                                                        </div>
                                                    </div>
                                                    <div class="accordion" id="accordion-options">
                                                        <div v-for="(opsi,i) in coupleOptions(soal_data.soal_id)"
                                                            class="accordion-item">
                                                            <h2 class="accordion-header" :id="'option-heading'+i">
                                                                <button
                                                                    :class="(opsi.coupled&&soal_data.opsi&&opsi.color?'bg-'+opsi.color+' text-white':'')"
                                                                    class="accordion-button" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    :data-bs-target="'#option-collapse'+i" aria-expanded="false"
                                                                    :aria-controls="'option-collapse'+i">
                                                                    Jawaban {{i+1}}
                                                                </button>
                                                            </h2>
                                                            <div :id="'option-collapse'+i"
                                                                class="accordion-collapse collapse show"
                                                                :aria-labelledby="'option-heading'+i">
                                                                <div class="accordion-body">
                                                                    <div class="row">
                                                                        <div class="col-6">
                                                                            <button
                                                                                v-if="question_selected&&coupled(soal_data.soal_id,question_selected,opsi.id)==-1"
                                                                                @click="coupleOptionSelected(opsi.soal_id,opsi.id)"
                                                                                class="btn btn-success rounded-full btn-hover">Pilih</button>
                                                                            <button
                                                                                v-else-if="soal_data.opsi&&((!question_selected&&opsi.coupled)||(question_selected&&coupled(soal_data.soal_id,question_selected,opsi.id)!=-1))"
                                                                                @click="releaseCoupleOption(opsi.soal_id,opsi.id)"
                                                                                class="btn btn-danger rounded-full btn-hover">Lepaskan</button>
                                                                        </div>
                                                                        <div class="col-6 text-end">
                                                                        </div>
                                                                    </div>
                                                                    <br>
        
                                                                    <div class="options-body unselectable" v-html="opsi.body">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
        
        
                                        </div>
                                    </template>
                                </div>
                                <!-- end pgcouple -->
                            </div>
                        </div>
                    </div>
                    <!-- end pgcouple -->
        
                    <!-- start shortentry -->
                    <div class="accordion-item" v-if="shortentry_exists">
                        <h2 class="accordion-header" id="flush-headingShortEntry">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseShortEntry" aria-expanded="false"
                                aria-controls="flush-collapseShortEntry">
                                Isian Singkat
                            </button>
                        </h2>
                        <div id="flush-collapseShortEntry" class="accordion-collapse collapse"
                            aria-labelledby="flush-headingShortEntry" data-bs-parent="#jawaban">
                            <div class="accordion-body">
        
                                <!-- start short entry -->
                                <div class="soal-short-entry">
                                    <template v-if="soal.ready">
                                        <div v-for="(soal_data,index) in soal.shortentry.data.soal">
                                            <div class="row m-0">
                                                <div class="col-md-6 soal-area d-flex">
                                                    <b>{{index+1}}.</b>
                                                    <div class="w-100">
                                                        <h3 v-html="soal_data.question"></h3>
                                                        <hr>
                                                        <div class="d-flex justify-content-between">
                                                            <pre>{{soal_data.correct_answer}}</pre>
                                                            <div v-if="!correct_answer(soal_data.respond,soal_data.correct_answer)" @click="soal_data.respond=soal_data.correct_answer" title="Benarkan Jawaban" style="cursor:pointer"><i class="far fa-check-square"></i></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 shortentry-jawaban-area">
                                                    <div class="input-style-1 w-100">
                                                        <label>Jawaban</label>
                                                        <input :style="'border:1px solid '+(correct_answer(soal_data.respond,soal_data.correct_answer)?'green':'red')" type="text" class="form-control" v-model="soal_data.respond">
                                                    </div>
                                                </div>
                                            </div>
                                            <hr v-if="index<soal.shortentry.data.soal.length-1">
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end short entry -->
        
                    <!-- start esai -->
                    <div class="accordion-item" v-if="esai_exists">
                        <h2 class="accordion-header" id="flush-headingEsai">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseEsai" aria-expanded="false" aria-controls="flush-collapseEsai">
                                Esai
                            </button>
                        </h2>
                        <div id="flush-collapseEsai" class="accordion-collapse collapse" aria-labelledby="flush-headingEsai"
                            data-bs-parent="#jawaban">
                            <div class="accordion-body">
        
                                <!-- start esai -->
                                <div class="soal-esai">
                                    <template v-if="soal.ready">
                                        <div v-for="(soal_data,index) in soal.esai.data.soal">
                                            <div class="row m-0">
                                                <div class="col-md-6 soal-area d-flex">
                                                    <b>{{index+1}}.</b>
                                                    <h3 v-html="soal_data.question"></h3>
                                                </div>
                                                <div class="col-md-6 esai-jawaban-area">
                                                    <div class="input-style-1 w-100">
                                                        <label>Jawaban</label>
                                                        <editor
                                                            :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'"
                                                            v-model="soal_data.esai" :init="tinymce.init" />
                                                    </div>
                                                    <br>
                                                    <div class="input-style-1 w-100">
                                                    <label class="form-label" :for="'customRange'+soal_data.id">Nilai</label>
                                                    <div class="d-flex flex-wrap">
                                                        
                                                        <div class="range py-2">
                                                            <input type="range" v-model="soal_data.nilai" class="form-range" min="0" :max="100/soal.esai.data.soal.length" :id="'customRange'+soal_data.id" style="width:200px" />
                                                        </div>
                                                        &nbsp;&nbsp;
                                                        <div>
                                                        <input type="text" class="form-control" style="width:80px"
                                                            v-model="soal_data.nilai">
                                                            </div>
                                                    </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr v-if="index<soal.esai.data.soal.length-1">
                                        </div>
                                    </template>
                                </div>
                                <!-- end esai -->
                            </div>
                        </div>
                    </div>
                    <!-- end esai -->
                </div>
            </template>
        
        </div>

            </div>
            <div class="modal-footer">
                <div class="action d-flex flex-wrap justify-content-end">
                    <button type="button" @click="save()" :disabled="mdl.loading||!hasResponds" 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>
                        Simpan
                    </template>
                    </button>
                </div>
            </div>
          </div>
        </div>
    </div>
    `;
    return {
        template: vp_template,

        name: "jawaban-correction",
        data() {
            return {
                mdl: {},

                ujian_id: null,
                question_selected: null,
                soal: {
                    ready: false,
                    error: false,
                    pg: {
                        ready: false,
                        error: false,
                        data: {
                            soal: [],
                            opsi: [],
                        },
                    },
                    pgmulti: {
                        ready: false,
                        error: false,
                        data: {
                            soal: [],
                            opsi: [],
                        },
                    },
                    pgtf: {
                        ready: false,
                        error: false,
                        data: {
                            soal: [],
                            opsi: [],
                        },
                    },
                    pgcouple: {
                        ready: false,
                        error: false,
                        data: {
                            soal: [],
                        },
                    },
                    esai: {
                        ready: false,
                        error: false,
                        data: {
                            soal: [],
                        },
                    },
                    shortentry: {
                        ready: false,
                        error: false,
                        data: {
                            soal: [],
                        },
                    },
                },
                tinymce: {
                    init: {
                        images_upload_handler: this.images_upload_handler,
                        plugins: [
                            'advlist autolink lists link charmap print anchor',
                            'searchreplace visualblocks fullscreen',
                            'insertdatetime media table paste code'
                        ],
                        toolbar:
                            "bold italic strikethrough link numlist bullist blockquote emoticons",
                    },
                },

            }
        },
        mounted() {
        },
        methods: {
            correct_answer(s1, s2) {
                s1 = (s1 || '').replaceAll(' ', '').toLowerCase();
                s2 = (s2 || '').replaceAll(' ', '').toLowerCase();
                return s1 == s2;
            },
            save() {
                this.mdl.loading = true;
                let jawaban = {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                };
                jawaban.pg = this.soal.pg.data.soal.map(v => {
                    return {
                        ujian_id: v.id,
                        soal_id: v.soal_id,
                        opsi_id: v.opsi_id,
                    }
                }) || [];
                jawaban.pgmulti = this.soal.pgmulti.data.soal.map(v => {
                    return {
                        ujian_id: v.id,
                        soal_id: v.soal_id,
                        opsi: (v.opsi || '').split(','),
                    }
                }) || [];
                jawaban.pgtf = this.soal.pgtf.data.soal.map(v => {
                    return {
                        ujian_id: v.id,
                        soal_id: v.soal_id,
                        opsi: (v.opsi || '').split(','),
                    }
                }) || [];
                jawaban.pgcouple = this.soal.pgcouple.data.soal.map(v => {
                    return {
                        ujian_id: v.id,
                        soal_id: v.soal_id,
                        opsi: (v.opsi || '').split(','),
                    }
                })
                jawaban.shortentry = this.soal.shortentry.data.soal.map(v => {
                    return {
                        ujian_id: v.id,
                        respond: v.respond,
                        soal_id: v.soal_id,
                    }
                }) || [];
                jawaban.esai = this.soal.esai.data.soal.map(v => {
                    return {
                        ujian_id: v.id,
                        esai: v.esai,
                        soal_id: v.soal_id,
                        nilai: v.nilai,
                    }
                }) || [];
                axios({
                    method: 'put',
                    data: jawaban,
                    url: `${window.location.href}/jawaban/${this.ujian_id}`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                }, (err) => {
                    Swal.fire('Gagal', gaem(err), 'error')
                    if (!err) return;
                    try {
                        this.$store.state.config.csrf.value = err.response.data.messages.csrf;
                    } catch (error) {

                    }
                }).finally(() => this.mdl.loading = false);
            },
            nilai(index) {
                let nilai = parseFloat(this.soal.esai.data.soal[index].nilai);
                nilai = (nilai > 100 ? 100 : nilai).toFixed(2);
                this.soal.esai.data.soal[index].nilai = nilai;
            },
            loadJawaban(id_ujian) {
                this.ujian_id = id_ujian;
                this.soal.ready = false;
                this.soal.error = false;
                axios({
                    method: 'get',
                    url: `${window.location.href}/jawaban/${this.ujian_id}`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.parseJawabanPG(response.data.jawaban.pg);
                    this.parseJawabanPGMulti(response.data.jawaban.pgmulti);
                    this.parseJawabanPGTF(response.data.jawaban.pgtf);
                    this.parseJawabanPGCouple(response.data.jawaban.pgcouple);
                    this.parseJawabanShortEntry(response.data.jawaban.shortentry);
                    this.parseJawabanEsai(response.data.jawaban.esai);
                    this.soal.ready = true;
                    this.soal.error = false;
                }, (error) => {
                    this.soal.ready = false;
                    this.soal.error = true;
                });
                this.modal("show");
            },
            parseJawabanPG(data) {
                this.soal.pg.data.soal = data.soal;
                this.soal.pg.data.opsi = data.opsi;
            },
            parseJawabanPGMulti(data) {
                this.soal.pgmulti.data.soal = data.soal;
                this.soal.pgmulti.data.opsi = data.opsi;
            },
            parseJawabanPGTF(data) {
                this.soal.pgtf.data.soal = data.soal;
                this.soal.pgtf.data.opsi = data.opsi;
            },
            parseJawabanPGCouple(data) {
                this.soal.pgcouple.data.soal = data.soal.map(v => {
                    v.opsi_data = data.opsi.filter(vo => vo.soal_id == v.soal_id);
                    v.couple_data = data.couple.filter(vo => vo.soal_id == v.soal_id);
                    return v;
                });
            },
            parseJawabanEsai(data) {
                this.soal.esai.data.soal = data.soal.map(v => {
                    if (v.esai) v.esai = v.esai.replace('../assets/img/jawaban', '../../../assets/img/jawaban');
                    return v;
                });
            },
            parseJawabanShortEntry(data) {
                this.soal.shortentry.data.soal = data.soal.map(v => {
                    if (v.shortentry) {
                        v.shortentry = v.shortentry.replace('../assets/img/jawaban', '../../../assets/img/jawaban');
                    }
                    return v;
                });
            },
            pgtf_check(state, index, opsi_id) {
                let opsi_selected = (this.soal.pgtf.data.soal[index].opsi || '').split(',');
                opsi_selected = opsi_selected.filter(v => v.split('-')[0] != opsi_id);
                opsi_selected.push(`${opsi_id}-${state}`);
                this.soal.pgtf.data.soal[index].opsi = opsi_selected.join(',');
            },
            pgmulti_check(index, opsi_id) {
                let opsi_selected = (this.soal.pgmulti.data.soal[index].opsi || '').split(',');
                let is_exist = opsi_selected.indexOf(opsi_id);
                if (is_exist > -1) {
                    opsi_selected.splice(is_exist, 1);
                } else {
                    opsi_selected.push(opsi_id);
                }
                this.soal.pgmulti.data.soal[index].opsi = opsi_selected.join(',');
            },
            modal(e = 'show') {
                if (!this.mdl.instance) {
                    this.mdl.instance = new bootstrap.Modal(this.$refs.modal);
                }
                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;
                }
            },
            releaseCoupleOption(soal_id, id) {
                let soal = this.soalData(soal_id);
                let opsi = soal.opsi.split(',').filter(el => {
                    return el.split('-')[1] != id;
                }).join(',');
                soal.opsi = opsi;
                this.question_selected = null;
            },
            coupleOptionSelected(soal_id, opsi_id) {
                let soal = this.soalData(soal_id);
                let nopsi_id = [`${this.question_selected}-${opsi_id}`];
                let opsi = [];
                if (soal.opsi) {
                    opsi = soal.opsi.split(',');
                }
                opsi.forEach(el => {
                    let e = el.split('-');
                    if (e[0] == this.question_selected) return;
                    nopsi_id.push(e.join('-'));
                });
                soal.opsi = '';
                soal.opsi = nopsi_id.join(',');
                this.question_selected = null;
            },
            coupleQuestions(soal_id) {
                let colors = ['primary', 'success', 'info', 'warning', 'danger'];
                let soal = this.soalData(soal_id);
                return soal.couple_data.map((v, i) => {
                    if (!soal.opsi) return v;
                    let coupled = soal.opsi.split(',').map(v2 => v2.split('-')).findIndex(v2 => v2[0] == v.id);
                    v.coupled = coupled != -1;
                    v.color = v.coupled ? colors[coupled] : null;
                    return v
                });
            },
            soalData(soal_id) {
                return this.soal.pgcouple.data.soal[this.soal.pgcouple.data.soal.findIndex(v => v.soal_id == soal_id)];
            },
            coupled(soal_id, qid, oid) {
                let opsi = this.soalData(soal_id).opsi || '';
                return opsi.split(',').map(v2 => v2.split('-')).findIndex(v2 => v2[0] == qid && v2[1] == oid)
            },
            coupleOptions(soal_id) {
                let colors = ['primary', 'success', 'info', 'warning', 'danger'];
                let soal = this.soalData(soal_id);
                return soal.opsi_data.map((v, i) => {
                    if (!soal.opsi) return v;
                    let coupled = soal.opsi.split(',').map(v2 => v2.split('-')).findIndex(v2 => v2[1] == v.id);
                    v.coupled = coupled != -1;
                    v.color = v.coupled ? colors[coupled] : null;
                    return v
                });
            },
        },
        computed: {
            esai_exists() {
                return this.soal.esai.data.soal.length > 0 && this.soal.ready;
            },
            shortentry_exists() {
                return this.soal.shortentry.data.soal.length > 0 && this.soal.ready;
            },
            pg_exists() {
                return this.soal.pg.data.soal.length > 0 && this.soal.ready;
            },
            pgmulti_exists() {
                return this.soal.pgmulti.data.soal.length > 0 && this.soal.ready;
            },
            pgtf_exists() {
                return this.soal.pgtf.data.soal.length > 0 && this.soal.ready;
            },
            pgcouple_exists() {
                return this.soal.pgcouple.data.soal.length > 0 && this.soal.ready;
            },
            hasResponds() {
                return this.pg_exists || this.pgmulti_exists || this.pgtf_exists || this.pgcouple_exists || this.shortentry_exists || this.esai_exists
            }
        }
    }
})();
