<?= $this->extend('Panel/Layouts/App') ?>
<?= $this->section('css') ?>
<link rel="stylesheet" href="<?= base_url() ?>/vendors/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="<?= base_url() ?>/vendors/toastr/toastr.css">
<link rel="stylesheet" href="<?= base_url() ?>/panel/assets/css/BankSoal/editor.css">
<?= $this->endSection() ?>
<?= $this->section('content') ?>

<div class="m-2">
  <editor-soal bankid="<?= $bank['id'] ?>" tinymcekey="<?= options('tinymcekey') ?>"></editor-soal>
</div>
<?= $this->endSection() ?>
<?= $this->section('js') ?>
<script id="main-template" type="text/x-template">
  <div class="d-flex align-items-center justify-content-between">
    <div class="title mb-20">
      <h2><i class="lni lni-book"></i> Editor Soal - <?= $bank['kode'] ?></h2>
    </div>
  </div>

  <div class="d-flex align-items-center justify-content-between">
    <div >
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" v-model="autoSave" id="autoSave">
        <label class="form-check-label" for="autoSave">Auto Save</label>
      </div>
    </div>
    <div >
    <a href="javascript:void(0)" @click="saveToLocal();saveSoals(true)" class="main-btn success-btn-outline rounded-full btn-sm btn-hover" title="Simpan"><i class="fas fa-file"></i><span class="d-none d-md-inline"> Simpan</span></a>
    &nbsp;
    <a href="javascript:void(0)" @click="cariBankSoal()" class="main-btn dark-btn-outline rounded-full btn-sm btn-hover" title="Cari Soal"><i class="fas fa-search"></i><span class="d-none d-md-inline"> Cari Soal</span></a>
    </div>
  </div>
  <br>

  <input class="d-none" type="file" :accept="fileMime.join(',')" ref="fileInput" @change="addAttachment">
  <template v-if="soals.loading&&soalsParsed.length==0">
      <div class="card-style-1">
        <div class="card-body">
          <div class="text-center">
            <div class="spinner-border" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>

      <template v-if="soalsParsed.length>0">
        <div id="soal-wrap"  ref="soalWrap">
          <template v-for="(soal,i) in soalsParsed" :key="soal.id">
            <template v-if="soal.jenis_soal=='1'">
              <!-- contoh soal pilhan ganda -->
                <div @click="soalActive=soal.id" :id="'soal-'+soal.id" :ref="'soal-'+soal.id" :data-id="soal.id" class="card-style card-soal mb-3 " :class="soal.id==soalActive?'active':''">
                  <div class="title d-flex flex-wrap align-items-center justify-content-between">
                    <div class="left">
                      <h6 class="text-medium mb-2 soal-number">No. {{i+1}}</h6>
                    </div>
                    
                    <div class="right">
                      <!-- <span class="badge bg-danger">Kategori Sulit</span>
                      <span class="badge bg-success">Kategori Mudah</span> -->
                      <span class="badge bg-primary"><i class="fas fa-check"></i> PG</span>&nbsp;
                      <span class="badge bg-warning">{{soal.terpakai||0}} Soal Terpakai</span>
                      
                    </div>
                  </div>
                  <div  class="card-content soal-body px-4">
                    <template v-for="(task,ti) in files">
                      <div v-if="task.soal_id==soal.id" class="file-progress my-2">
                          <div class="row m-0">
                              <div class="col-10 p-0">
                                  <span>{{task.name}}</span> <span v-if="task.msg" class="text-danger">{{task.msg}}</span>
                                  <div class="progress bg-success-100">
                                    <div :class="task.status==0?'primary-bg blink_me':(task.status==1?'success-bg':'danger-bg')" class="progress-bar" role="progressbar" :style="'width: '+task.percent+'%;'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                  </div>
                              </div>
                              <div class="col-2 p-0 d-flex justify-content-center">
                                  <button v-if="task.status==2||task.status==1" @click="delete files[ti]" title="Hapus" class="btn btn-danger"><i class="lni lni-trash-can"></i></button>
                                  <button v-if="task.status==0" @click="task.source.cancel()" title="Batal" class="btn btn-danger"><i class="fas fa-times"></i></button>
                              </div>
                          </div>
                      </div>
                    </template>
                    <div class="mb-2" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                        <editor @focus="editorID={id:soal.id,type:1}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Pertanyaan" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="soal.question"  :api-key="tinymcekey" :init="tinymce" />
                    </div>
                    <div v-for="(opsi,oi) in soal.options" class="form-check radio-style">
                      <input class="form-check-input mt-3" :checked="opsi.is_key==1" @click="soal.options.map(v=>{v.is_key=0;return v;}),opsi.is_key=1,saveToLocal()" type="radio" :id="'radio-'+(oi+1)">
                      <div class="d-flex flex-row">
                        <div class="col-sm-9 col-md-9">
                          <div class="mb-2 pt-3 " style="min-width:200px" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                            <editor @focus="editorID={id:opsi.id,type:2}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Opsi" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="opsi.body"  :api-key="tinymcekey" :init="tinymce" />
                          </div>
                        </div>
                        <div style="cursor:pointer" class="col-sm-1 ml-5" @click="soal.options.splice(oi,1)">
                          <i class="fas fa-times my-3 ml-5"></i>
                        </div>
                      </div>
                    </div>
                    <a href="javascript:void(0)" v-if="soal.options.length<5" @click="soal.options.push(opsiPG(soal.id))" title="Tambah Opsi" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-plus"></i> Tambah Opsi</a>
                    <!-- end radio -->
                    <hr>
                    <div class="d-flex flex-row justify-content-between">
                      <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                        <input @change="soal.updated_at=timestamp(),saveToLocal()" type="number" style="padding: .375rem !important;border-color: green;" v-model="soal.true_default_point" placeholder="Poin Benar">
                      </div>&nbsp;
                      <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                        <input @change="soal.updated_at=timestamp(),saveToLocal()" type="number" style="padding: .375rem !important;border-color: red;" v-model="soal.false_default_point" placeholder="Poin Salah">
                      </div>&nbsp;
                      <a href="javascript:void(0)" @click="swalConfirm(()=>{soalsParsed.splice(i,1),soal.updated_at=timestamp(),saveToLocal(),hapus(soal.id)})" title="Hapus" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-trash"></i><span class="d-none d-md-inline"> Hapus</span></a>&nbsp;
                      <a v-if="!soal.isnew" href="javascript:void(0)" @click="duplikat(soal)" class="main-btn light-btn-outline rounded-full btn-sm btn-hover" title="Duplikat"><i class="fas fa-copy"></i><span class="d-none d-md-inline"> Duplikat</span></a>
                    </div>
                  </div>
                </div>
            </template>
            <template v-else-if="soal.jenis_soal=='3'">
              <!-- contoh soal pilhan ganda Multi -->
              <div @click="soalActive=soal.id" :id="'soal-'+soal.id" :ref="'soal-'+soal.id" :data-id="soal.id" class="card-style card-soal mb-3" :class="soal.id==soalActive?'active':''">
                <div class="title d-flex flex-wrap align-items-center justify-content-between">
                  <div class="left">
                    <h6 class="text-medium mb-2 soal-number">No. {{i+1}}</h6>
                  </div>

                    <div class="center">

                    </div>
                  <div class="right">
                    <span class="badge bg-primary"><i class="fas fa-check-double"></i> PG Multi</span>&nbsp;
                    <span class="badge bg-warning">{{soal.terpakai||0}} Soal Terpakai</span>
                  </div>
                </div>
                <div  class="card-content soal-body px-4">
                  <template v-for="(task,ti) in files">  
                    <div v-if="task.soal_id==soal.id" class="file-progress my-2">
                          <div class="row m-0">
                              <div class="col-10 p-0">
                                  <span>{{task.name}}</span> <span v-if="task.msg" class="text-danger">{{task.msg}}</span>
                                  <div class="progress bg-success-100">
                                    <div :class="task.status==0?'primary-bg blink_me':(task.status==1?'success-bg':'danger-bg')" class="progress-bar" role="progressbar" :style="'width: '+task.percent+'%;'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                  </div>
                              </div>
                              <div class="col-2 p-0 d-flex justify-content-center">
                                  <button v-if="task.status==2||task.status==1" @click="delete files[ti]" title="Hapus" class="btn btn-danger"><i class="lni lni-trash-can"></i></button>
                                  <button v-if="task.status==0" @click="task.source.cancel()" title="Batal" class="btn btn-danger"><i class="fas fa-times"></i></button>
                              </div>
                          </div>
                      </div>
                    </template>
                    <div class="mb-2" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                        <editor @focus="editorID={id:soal.id,type:1}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Pertanyaan" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="soal.question"  :api-key="tinymcekey" :init="tinymce" />
                    </div>
                    <div v-for="(opsi,oi) in soal.options" class="form-check checkbox-style">
                      <input @change="soal.updated_at=timestamp(),saveToLocal()" class="form-check-input mt-3" @click="opsi.is_key=opsi.is_key==1?0:1,saveToLocal()" :checked="opsi.is_key==1" type="checkbox" value="" :id="'checkbox-'+(oi+1)">
                      <!-- <label class="form-check-label" for="checkbox-1">
                      Default checkbox</label> -->
                      <div class="d-flex flex-row">
                        <div class="col-sm-9">
                          <div class="mb-2 pt-3 " style="min-width:200px" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                            <editor @focus="editorID={id:opsi.id,type:2}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Opsi" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="opsi.body"  :api-key="tinymcekey" :init="tinymce" />
                          </div>
                        </div>
                        <div style="cursor:pointer" class="col-sm-1 ml-5" @click="soal.options.splice(oi,1)">
                          <i class="fas fa-times my-3 ml-5"></i>
                        </div>
                      </div>
                    </div>
                    <a href="javascript:void(0)" v-if="soal.options.length<5" @click="soal.options.push(opsiPG(soal.id)),saveToLocal()" title="Tambah Opsi" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-plus"></i> Tambah Opsi</a>
                    <!-- end checkbox -->
                  <hr>
                  <div class="d-flex flex-row justify-content-between">
                    <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                      <input @change="soal.updated_at=timestamp(),saveToLocal()" type="number" style="padding: .375rem !important;border-color: green;" v-model="soal.true_default_point" placeholder="Poin Benar">
                    </div>&nbsp;
                    <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                      <input @change="soal.updated_at=timestamp(),saveToLocal()" type="number" style="padding: .375rem !important;border-color: red;" v-model="soal.false_default_point" placeholder="Poin Salah">
                    </div>&nbsp;
                    <a href="javascript:void(0)" @click="swalConfirm(()=>{soalsParsed.splice(i,1),soal.updated_at=timestamp(),saveToLocal(),hapus(soal.id)})" title="Hapus" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-trash"></i> <span class="d-none d-md-inline">Hapus</span></a>&nbsp;
                    <a v-if="!soal.isnew" href="javascript:void(0)" @click="duplikat(soal)" class="main-btn light-btn-outline rounded-full btn-sm btn-hover" title="Duplikat"><i class="fas fa-copy"></i><span class="d-none d-md-inline"> Duplikat</span></a>
                  </div>
                </div>
              </div>
            </template>
            <template v-else-if="soal.jenis_soal=='4'">

              <!-- contoh soal menjodohkan-->
              <div @click="soalActive=soal.id" :id="'soal-'+soal.id" :ref="'soal-'+soal.id" :data-id="soal.id" class="card-style card-soal mb-3" :class="soal.id==soalActive?'active':''">
                <div class="title d-flex flex-wrap align-items-center justify-content-between">
                  <div class="left">
                    <h6 class="text-medium mb-2 soal-number">No. {{i+1}}</h6>
                  </div>

                    <div class="center">

                    </div>
                  <div class="right">
                    <span class="badge bg-primary"><i class="fas fa-link"></i> Menjodohkan</span>&nbsp;
                    <span class="badge bg-warning">{{soal.terpakai||0}} Soal Terpakai</span>
                  </div>
                </div>
                <div  class="card-content soal-body px-4">
                  <template v-for="(task,ti) in files">  
                    <div v-if="task.soal_id==soal.id" class="file-progress my-2">
                          <div class="row m-0">
                              <div class="col-10 p-0">
                                  <span>{{task.name}}</span> <span v-if="task.msg" class="text-danger">{{task.msg}}</span>
                                  <div class="progress bg-success-100">
                                    <div :class="task.status==0?'primary-bg blink_me':(task.status==1?'success-bg':'danger-bg')" class="progress-bar" role="progressbar" :style="'width: '+task.percent+'%;'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                  </div>
                              </div>
                              <div class="col-2 p-0 d-flex justify-content-center">
                                  <button v-if="task.status==2||task.status==1" @click="delete files[ti]" title="Hapus" class="btn btn-danger"><i class="lni lni-trash-can"></i></button>
                                  <button v-if="task.status==0" @click="task.source.cancel()" title="Batal" class="btn btn-danger"><i class="fas fa-times"></i></button>
                              </div>
                          </div>
                      </div>
                    </template>
                  <div class="mb-2" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                      <editor @focus="editorID={id:soal.id,type:1}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Deskripsi" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="soal.question"  :api-key="tinymcekey" :init="tinymce" />
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div v-for="(opsi,oi) in soal.options" class="d-flex flex-row mb-3">
                        <div class="col-md-1 ml-5 text-center" style="cursor:pointer" @click="soal.options.splice(oi,1)">
                          <i class="fas fa-times my-2"></i>
                        </div>
                        &nbsp;
                        <div class="input-style-3 col-md-7" style="min-width:200px;margin-bottom: 0;" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                          <editor @focus="editorID={id:opsi.id,type:2}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Pertanyaan" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="opsi.body"  :api-key="tinymcekey" :init="tinymce" />
                        </div>
                        &nbsp;
                        <div class="col-md-4">
                          <template v-if="opsi.soal_couple_id">
                            <div @click="optionPGCClick(soal.id,opsi.id)" class="btn btn-sm" title="Terhubung" :class="(soal.couple_selected?' blink_me ':'')+('btn-'+coupleColors[oi])">
                              <i class="fas fa-solid fa-link"></i>
                            </div>
                            </template>
                            <template v-else>
                              <div @click="optionPGCClick(soal.id,opsi.id)" class="btn btn-sm btn-secondary" title="Hubungkan" :class="soal.couple_selected?' blink_me ':''">
                                <i class="fas fa-solid fa-unlink"></i>
                              </div>
                          </template>
                        </div>

                      </div>
                    </div>
                    <div class="col-md-6">
                      <div v-for="(couple,ci) in soal.couples" class="d-flex  flex-row mb-3">
                        <div class="col-md-4 text-end">
                          <template v-if="soal.options.find(v=>v.soal_couple_id==couple.id)">
                            <div @click="couplePGCClick(soal.id,couple.id)" class="btn btn-sm" title="Terhubung" :class="(soal.option_selected?' blink_me ':'')+('btn-'+coupleColors[soal.options.findIndex(v=>v.soal_couple_id==couple.id)])">
                              <i class="fas fa-solid fa-link"></i>
                            </div>
                          </template>
                          <template v-else>
                            <div @click="couplePGCClick(soal.id,couple.id)" class="btn btn-sm btn-secondary" title="Hubungkan" :class="soal.option_selected?' blink_me ':''">
                              <i class="fas fa-solid fa-unlink"></i>
                            </div>
                          </template>
                        </div>
                        &nbsp;
                        <div class="input-style-3 col-md-7" style="min-width:200px;margin-bottom: 0;" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                          <editor @focus="editorID={id:couple.id,type:3}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Jawaban" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="couple.body"  :api-key="tinymcekey" :init="tinymce" />
                        </div>
                        &nbsp;
                        <div class="col-md-1 ml-5" style="cursor:pointer" @click="soal.couples.splice(ci,1),soal.options.map(v=>{v.soal_couple_id=v.soal_couple_id==couple.id?null:v.soal_couple_id;return v})">
                          <i class="fas fa-times my-2"></i>
                        </div>

                      </div>
                    </div>
                  </div>

                  <div class="d-flex justify-content-evenly">
                      <a href="javascript:void(0)" @click="soal.options.push(questionPGC(soal.id)),soal.updated_at=timestamp(),saveToLocal()" title="Tambah Pertanyaan" class="main-btn light-btn-outline rounded-full btn-sm btn-hover mb-3"><i class="fas fa-plus"></i> Pertanyaan</a>
                      <a href="javascript:void(0)" @click="soal.couples.push(answerPGC(soal.id)),soal.updated_at=timestamp(),saveToLocal()" title="Tambah Jawaban" class="main-btn light-btn-outline rounded-full btn-sm btn-hover mb-3"><i class="fas fa-plus"></i> Jawaban</a>
                    </div>
                  <hr>
                  <div class="d-flex flex-row justify-content-between">
                    <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                      <input type="number" style="padding: .375rem !important;border-color: green;" v-model="soal.true_default_point" placeholder="Poin Benar">
                    </div>&nbsp;
                    <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                      <input type="number" style="padding: .375rem !important;border-color: red;" v-model="soal.false_default_point" placeholder="Poin Salah">
                    </div>&nbsp;
                    <a href="javascript:void(0)" @click="swalConfirm(()=>{soalsParsed.splice(i,1),soal.updated_at=timestamp(),saveToLocal(),hapus(soal.id)})" title="Hapus" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-trash"></i> <span class="d-none d-md-inline">Hapus</span></a>&nbsp;
                    <a v-if="!soal.isnew" href="javascript:void(0)" @click="duplikat(soal)" class="main-btn light-btn-outline rounded-full btn-sm btn-hover" title="Duplikat"><i class="fas fa-copy"></i><span class="d-none d-md-inline"> Duplikat</span></a>
                  </div>
                </div>
              </div>
            </template>
            <template v-else-if="soal.jenis_soal=='6'">
              <!-- contoh soal benar salah-->
              <div @click="soalActive=soal.id" :id="'soal-'+soal.id" :ref="'soal-'+soal.id" :data-id="soal.id" class="card-style card-soal mb-3" :class="soal.id==soalActive?'active':''">
                <div class="title d-flex flex-wrap align-items-center justify-content-between">
                  <div class="left">
                    <h6 class="text-medium mb-2 soal-number">No. {{i+1}}</h6>
                  </div>

                    <div class="center">
                    </div>
                  <div class="right">
                    <span class="badge bg-primary"><i class="fas fa-times"></i> Benar Salah</span>&nbsp;
                    <span class="badge bg-warning">{{soal.terpakai||0}} Soal Terpakai</span>
                  </div>
                </div>
                <div  class="card-content soal-body px-4">
                  <template v-for="(task,ti) in files">  
                    <div v-if="task.soal_id==soal.id" class="file-progress my-2">
                          <div class="row m-0">
                              <div class="col-10 p-0">
                                  <span>{{task.name}}</span> <span v-if="task.msg" class="text-danger">{{task.msg}}</span>
                                  <div class="progress bg-success-100">
                                    <div :class="task.status==0?'primary-bg blink_me':(task.status==1?'success-bg':'danger-bg')" class="progress-bar" role="progressbar" :style="'width: '+task.percent+'%;'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                  </div>
                              </div>
                              <div class="col-2 p-0 d-flex justify-content-center">
                                  <button v-if="task.status==2||task.status==1" @click="delete files[ti]" title="Hapus" class="btn btn-danger"><i class="lni lni-trash-can"></i></button>
                                  <button v-if="task.status==0" @click="task.source.cancel()" title="Batal" class="btn btn-danger"><i class="fas fa-times"></i></button>
                              </div>
                          </div>
                      </div>
                    </template>
                  <div class="mb-2" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                      <editor @focus="editorID={id:soal.id,type:1}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Deskripsi" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="soal.question"  :api-key="tinymcekey" :init="tinymce" />
                  </div>
                  <div v-for="(opsi,oi) in soal.options" class="row">
                    <div class="col-md-6">
                      <div class="d-flex flex-row mb-3">
                        <div class="input-style-3 col-md-11" style="min-width:200px;margin-bottom: 0;">
                          <editor @focus="editorID={id:soal.id,type:2}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Pertanyaan" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="opsi.body"  :api-key="tinymcekey" :init="tinymce" />
                        </div>&nbsp;
                        <div class="col-md-1 ml-5">
                          <i class="fas fa-times my-2"></i>
                        </div>

                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="d-flex  flex-row mb-3 justify-content-evenly">
                        <div class="form-check radio-style mb-20">
                          <input @change="soal.updated_at=timestamp(),saveToLocal()" class="form-check-input" :checked="opsi.is_key==1" @click="opsi.is_key=1" type="radio" value="" :id="'radio-'+opsi.id">
                          <label class="form-check-label" :for="'radio-'+opsi.id">Benar</label>
                        </div>&nbsp;
                        <div class="form-check radio-style mb-20">
                          <input @change="soal.updated_at=timestamp(),saveToLocal()" class="form-check-input" :checked="opsi.is_key!=1" @click="opsi.is_key=0" type="radio" value="" :id="'radio-'+opsi.id">
                          <label class="form-check-label" :for="'radio-'+opsi.id">Salah</label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <a href="javascript:void(0)" v-if="soal.options.length<5" @click="soal.options.push(opsiPG(soal.id))" title="Tambah Pertanyaan" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-plus"></i> Tambah Pertanyaan</a>

                  <hr>
                  <div class="d-flex flex-row justify-content-between">
                    <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                      <input @change="soal.updated_at=timestamp(),saveToLocal()" type="number" style="padding: .375rem !important;border-color: green;" v-model="soal.true_default_point" placeholder="Poin Benar">
                    </div>&nbsp;
                    <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                      <input @change="soal.updated_at=timestamp(),saveToLocal()" type="number" style="padding: .375rem !important;border-color: red;" v-model="soal.false_default_point" placeholder="Poin Salah">
                    </div>&nbsp;
                    <a href="javascript:void(0)" @click="swalConfirm(()=>{soalsParsed.splice(i,1),soal.updated_at=timestamp(),saveToLocal(),hapus(soal.id)})" title="Hapus" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-trash"></i> <span class="d-none d-md-inline">Hapus</span></a>&nbsp;
                    <a v-if="!soal.isnew" href="javascript:void(0)" @click="duplikat(soal)" class="main-btn light-btn-outline rounded-full btn-sm btn-hover" title="Duplikat"><i class="fas fa-copy"></i><span class="d-none d-md-inline"> Duplikat</span></a>
                  </div>
                </div>
              </div>
            </template>
            <template v-else-if="soal.jenis_soal=='5'">

              <!-- contoh soal Isian Singkat -->
              <div @click="soalActive=soal.id" :id="'soal-'+soal.id" :ref="'soal-'+soal.id" :data-id="soal.id" class="card-style card-soal mb-3" :class="soal.id==soalActive?'active':''">
                <div class="title d-flex flex-wrap align-items-center justify-content-between">
                  <div class="left">
                    <h6 class="text-medium mb-2 soal-number">No. {{i+1}}</h6>
                  </div>

                    <div class="center">

                    </div>
                  <div class="right">
                    <span class="badge bg-primary"><i class="fas fa-align-left"></i> Isian Singkat</span>&nbsp;
                    <span class="badge bg-warning">{{soal.terpakai||0}} Soal Terpakai</span>
                  </div>
                </div>
                <div  class="card-content soal-body px-4">
                  <template v-for="(task,ti) in files">  
                    <div v-if="task.soal_id==soal.id" class="file-progress my-2">
                          <div class="row m-0">
                              <div class="col-10 p-0">
                                  <span>{{task.name}}</span> <span v-if="task.msg" class="text-danger">{{task.msg}}</span>
                                  <div class="progress bg-success-100">
                                    <div :class="task.status==0?'primary-bg blink_me':(task.status==1?'success-bg':'danger-bg')" class="progress-bar" role="progressbar" :style="'width: '+task.percent+'%;'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                  </div>
                              </div>
                              <div class="col-2 p-0 d-flex justify-content-center">
                                  <button v-if="task.status==2||task.status==1" @click="delete files[ti]" class="btn btn-danger" title="Hapus"><i class="lni lni-trash-can"></i></button>
                                  <button v-if="task.status==0" @click="task.source.cancel()"  class="btn btn-danger" title="Batal"><i class="fas fa-times"></i></button>
                              </div>
                          </div>
                      </div>
                    </template>
                  <div class="mb-2" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                      <editor @focus="editorID={id:soal.id,type:1}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Pertanyaan" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="soal.question"  :api-key="tinymcekey" :init="tinymce" />
                  </div>
                  <div class="d-flex flex-row mb-3">
                    <div class="input-style-1 col-12" style="margin-bottom: 0;">
                      <input @change="soal.updated_at=timestamp(),saveToLocal()" v-model="soal.shortentry" type="text" class="form-control w-100">
                    </div>
                  </div>
                  <hr>
                  <div class="d-flex flex-row justify-content-between">
                    <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                      <input @change="soal.updated_at=timestamp(),saveToLocal()" type="number" style="padding: .375rem !important;border-color: green;" v-model="soal.true_default_point" placeholder="Poin Benar">
                    </div>&nbsp;
                    <div class="input-style-3 col-md-2" style="margin-bottom: 0;">
                      <input @change="soal.updated_at=timestamp(),saveToLocal()" type="number" style="padding: .375rem !important;border-color: red;" v-model="soal.false_default_point" placeholder="Poin Salah">
                    </div>&nbsp;
                    <a href="javascript:void(0)" @click="swalConfirm(()=>{soalsParsed.splice(i,1),soal.updated_at=timestamp(),saveToLocal(),hapus(soal.id)})" title="Hapus" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-trash"></i> <span class="d-none d-md-inline">Hapus</span></a>&nbsp;
                    <a v-if="!soal.isnew" href="javascript:void(0)" @click="duplikat(soal)" class="main-btn light-btn-outline rounded-full btn-sm btn-hover" title="Duplikat"><i class="fas fa-copy"></i><span class="d-none d-md-inline"> Duplikat</span></a>
                  </div>
                </div>
              </div>
            </template>
            <template v-else-if="soal.jenis_soal=='2'">

              <!-- contoh soal essai -->
              <div @click="soalActive=soal.id" :id="'soal-'+soal.id" :ref="'soal-'+soal.id" :data-id="soal.id" class="card-style card-soal mb-3" :class="soal.id==soalActive?'active':''">
                <div class="title d-flex flex-wrap align-items-center justify-content-between">
                  <div class="left">
                    <h6 class="text-medium mb-2 soal-number">No. {{i+1}}</h6>
                  </div>

                    <div class="center">

                    </div>
                  <div class="right">
                    <span class="badge bg-primary"><i class="fas fa-file-signature"></i> Essai</span>&nbsp;
                    <span class="badge bg-warning">{{soal.terpakai||0}} Soal Terpakai</span>

                  </div>
                </div>
                <div  class="card-content soal-body px-4">
                  <div class="mb-2" :style="soal.id==soalActive?'border-bottom:.0625rem solid black':''">
                      <editor @focus="editorID={id:soal.id,type:1}" @change="soal.updated_at=timestamp(),saveToLocal()" placeholder="Pertanyaan" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="soal.question"  :api-key="tinymcekey" :init="tinymce" />
                  </div>
                  <div class="d-flex flex-row justify-content-evenly">
                    <a href="javascript:void(0)" @click="swalConfirm(()=>{soalsParsed.splice(i,1),soal.updated_at=timestamp(),saveToLocal(),hapus(soal.id)})" title="Hapus" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-trash"></i> <span class="d-none d-md-inline">Hapus</span></a>&nbsp;
                    <a v-if="!soal.isnew" href="javascript:void(0)" @click="duplikat(soal)" class="main-btn light-btn-outline rounded-full btn-sm btn-hover" title="Duplikat"><i class="fas fa-copy"></i><span class="d-none d-md-inline"> Duplikat</span></a>
                  </div>
                </div>
              </div>
            </template>

            <template v-if="soals.loading & i==soals.data.length-1">
              
              <div class="card-style card-soal mb-3 shimmer">
                <div class="title d-flex flex-wrap align-items-center justify-content-between">
                  <div class="left ">
                    <h6 class="text-medium mb-2 soal-number"> No.  </h6>
                  </div>

                    <div class="center ">

                    </div>
                  <div class="right ">
                    <h6 class="text-medium mb-2"><i class="fas fa-th-large"></i></h6>
                  </div>
                </div>
                <div  class="card-content soal-body px-4 ">
                  <div class="mb-2 " >
                    <span>Pertanyaan</span>
                  </div>
                  <div class="d-flex flex-row justify-content-evenly ">
                  </div>
                </div>
              </div>

            </template>
          
          </template>

        </div>
      </template>
      
      <template v-else>
        <div class="card-style-1">
          <div class="card-body">
            <div   class="text-center">
              <strong>Belum ada data, silahkan tambahkan</strong>
            </div>
          </div>
        </div>
      </template>

    </template>
  <div class="fabs" @mouseover="fabs=true" @mouseout="fabs=false">
    <a v-show="fabs" href="javascript:void(0)" @click="addSoal('1')" class="fab indigo" tooltip="Soal PG"><i class="fas fa-check"></i></a>
    <a v-show="fabs" href="javascript:void(0)" @click="addSoal('3')" class="fab light-blue" tooltip="PG Multi"><i class="fas fa-check-double"></i></a>
    <a v-show="fabs" href="javascript:void(0)" @click="addSoal('4')" class="fab amber" tooltip="Menjodohkan"><i class="fas fa-link"></i></a>
    <a v-show="fabs" href="javascript:void(0)" @click="addSoal('6')" class="fab pink" tooltip="Benar Salah"><i class="fas fa-times-circle"></i></a>
    <a v-show="fabs" href="javascript:void(0)" @click="addSoal('5')" class="fab green" tooltip="Isian Singkat"><i class="fas fa-align-left"></i></a>
    <a v-show="fabs" href="javascript:void(0)" @click="addSoal('2')" class="fab light-green" tooltip="Essai"><i class="fas fa-file-signature"></i></a>
    <a v-show="fabs" href="javascript:void(0)" @click="showPreview()" class="fab light-blue" tooltip="Preview"><i class="fas fa-print"></i></a>
    <a v-show="fabs" href="javascript:void(0)" @click="saveToLocal();saveSoals(true)" class="fab light-green" tooltip="Simpan"><i class="fas fa-file" ></i></a>
    <a class="fab red main-fab" :class="fabs?'active':''" tooltip="Tambah Soal"><i class="fas" :class="fabs?'fa-minus':'fa-plus'"></i></a>
  </div>



  <div class="modal fade" id="mdl-bank-soal" ref="mdl-bank-soal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen">
        <div class="modal-content card-style">
            <div class="modal-header px-0 border-0">
                <div>
                  <h5 class="text-bold">Bank Soal</h5>
                </div> 
                <div>
                  <div class="input-style-1 mb-1"><input v-model="banksSoal.soals.query" type="text" placeholder="Cari Soal"></div>
                </div>
            </div>
            <div class="modal-body px-0">
                <div class="content">
                  <div v-if="banksSoal.loading" class="text-center">
                    <div class="spinner-border" role="status">
                      <span class="visually-hidden">Loading...</span>
                    </div>
                  </div>
                  <div v-else >
                    <template v-for="(bank,si) in banksSoalParsed">
                      <div  :id="'bank-'+bank.id" :data-id="bank.id" class="card-style my-2 soal-item p-3 text-dark">
                        <div class="title d-flex flex-wrap align-items-center justify-content-between">
                          <div class="left">
                            <h6 class="text-medium mb-2 soal-number text-dark">
                              <strong>{{bank.kode}}</strong>
                            </h6>
                          </div>
                          <div class="right">
                            <div class="d-flex justify-content-between">
                              <i title="Lihat" style="cursor:pointer" @click=" cariBankSoalList(bank.id)" class="fas fa-search"></i> &nbsp; 
                            </div>
                          </div>
                        </div>
                        <div class="card-content">{{bank.deskripsi}}</div>
                      </div>
                    </template>
                  </div>
                </div>
            </div>
            <div class="modal-footer">
              <button data-bs-dismiss="modal" ref="mdl-btn-close-banksoal" class="main-btn primary-btn btn-hover m-1">Tutup</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="mdl-bank-soal-list" ref="mdl-bank-soal-list" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen">
        <div class="modal-content card-style">
            <div class="modal-header px-0 border-0">
                <div>
                  <h5 class="text-bold">Soal</h5>
                </div> 
                <div>
                  <div class="input-style-1 mb-1"><input v-model="banksSoal.listSoals.query" type="text" placeholder="Cari Soal"></div>
                </div>
            </div>
            <div class="modal-body px-0">
                <div class="content">
                  <div v-if="banksSoal.loading" class="text-center">
                    <div class="spinner-border" role="status">
                      <span class="visually-hidden">Loading...</span>
                    </div>
                  </div>
                  <div v-else >
                    <template v-for="(soal,si) in banksSoalListParsed">
                      <div :class="soal.selected?'bg-primary text-white':''" style="cursor:pointer" @click="soal.selected=!soal.selected" :id="'bank-soal-'+soal.id" :data-id="soal.id" class="card-style my-2 soal-item p-3 text-dark">
                        <div class="title d-flex flex-wrap align-items-center justify-content-between">
                          <div class="left">
                            <h6  class="text-medium mb-2 soal-number text-dark">
                              <span :class="soal.selected?'text-white':''" v-if="soal.jenis_soal==1">Pilihan Ganda</span>
                              <span :class="soal.selected?'text-white':''" v-else-if="soal.jenis_soal==2" >Essai</span>
                              <span :class="soal.selected?'text-white':''" v-else-if="soal.jenis_soal==3">PG Multi</span>
                              <span :class="soal.selected?'text-white':''" v-else-if="soal.jenis_soal==4">Menjodohkan</span>
                              <span :class="soal.selected?'text-white':''" v-else-if="soal.jenis_soal==5">Isian Singkat</span>
                              <span :class="soal.selected?'text-white':''" v-else-if="soal.jenis_soal==6">Benar Salah</span>
                            </h6>
                          </div>
                          <div class="right">
                            <div class="d-flex justify-content-between">
                              <a v-if="soal.selected" href="javascript:void(0)" @click="duplikat(soal);" data-bs-dismiss="modal" class="main-btn dark-btn-outline rounded-full btn-sm btn-hover" title="Tambah"><i class="fas fa-plus"></i><span class="d-none d-md-inline"> Tambahkan</span></a>
                              <a v-else href="javascript:void(0)" @click="duplikat(soal);" data-bs-dismiss="modal" class="main-btn success-btn-outline rounded-full btn-sm btn-hover" title="Tambah"><i class="fas fa-plus"></i><span class="d-none d-md-inline"> Tambahkan</span></a>
                            </div>
                          </div>
                        </div>
                        <div class="card-content">
                          <div :class="soal.selected?'text-white':''"  v-html="soal.question"></div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
            </div>
            <div class="modal-footer">
            
              <button v-if="banksSoal.listSoals.data.filter(v=>v.selected).length>0"  data-bs-dismiss="modal"  @click="duplikatBank(banksSoal.listSoals.data.filter(v=>v.selected))" class="main-btn primary-btn btn-hover m-1">Tambahkan</button>
              <button data-bs-dismiss="modal" @click="cariBankSoal()" class="main-btn primary-btn btn-hover m-1">Kembali</button>
              <button data-bs-dismiss="modal" ref="mdl-btn-close-banksoal-list" class="main-btn primary-btn btn-hover m-1">Tutup</button>
            </div>
        </div>
    </div>
</div>

</script>

<script src="<?= base_url() ?>/panel/assets/js/pages/banksoal/editor.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/toastr/toastr.js?v=<?= versioningjs() ?>"></script>
<script>
  VAPP.component(VPEditor.name, VPEditor);
</script>
<?= $this->endSection() ?>