<?= $this->extend('Panel/Layouts/App') ?>
<?= $this->section('css') ?>
<link rel="stylesheet" href="<?= base_url() ?>/vendors/toastr/toastr.css">
<?= $this->endSection() ?>
<?= $this->section('content') ?>
<div class="m-2">
  <div class="col-md-12">
    <div class="title mb-20">
      <h2><i class="lni lni-book"></i> <?= $page_title ?></h2>
    </div>
  </div>
  <banksoal :isguru="<?= !user()->hasRole('admin') ? 'true' : 'false' ?>"></banksoal>
</div>
<?= $this->endSection() ?>
<?= $this->section('js') ?>
<script id="main-template" type="text/x-template">
  <input type="file" ref="fileImport" @change="importSoal" accept="application/zip,application/x-zip-compressed,multipart/x-zip,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document" class="d-none">
  <div class="card-style">
    <div class="card-header">
      <div class="row">
        <div class="col-md-4">
          <input type="text" v-model="query" class="form-control" placeholder="Cari...">
        </div>
        <div class="col-md-8 text-end">
         
          <button @click="addSoalTemp()" class="main-btn primary-btn-outline rounded-full btn-hover btn-sm mt-1" title="Tambah Bank Soal"><i class="fas fa-plus"></i> <span class="d-none d-md-inline">Tambah</span></button>
          &nbsp;
          <button @click="hapusTerpilih()" class="main-btn danger-btn-outline rounded-full btn-hover btn-sm mt-1" title="Hapus Terpilih"><i class="fas fa-trash-alt"></i> <span class="d-none d-md-inline">Hapus Terpilih</span></button>
          &nbsp;
          <button data-bs-toggle="modal" data-bs-target="#modal-template" class="main-btn success-btn-outline rounded-full btn-hover btn-sm mt-1" title="Template Soal"><i class="fas fa-download"></i> <span class="d-none d-md-inline">Template</span></button>
          &nbsp;
          <button @click="loadSoals()" class="main-btn dark-btn-outline rounded-full btn-hover btn-sm mt-1" title="Perbarui"><i class="fas fa-sync"></i> </button>
          
        </div>
      </div>
    </div>
    <div class="card-body">
      <template v-if="soals.loading&&!soals.errMsg">
          <div class="text-center">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
            <p>Memuat Data...</p>
          </div>
      </template>
      <template v-else-if="soals.errMsg">
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
          {{soals.errMsg}}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      </template>
      <template v-else-if="parsedSoals.length>0">
        <div class="soals row">
          <template v-for="soal in parsedSoals">
              <div :id="'soal-'+soal.id" :style="soal.loading?'filter:blur(1px)':''" class="col-md-4 p-2">
                <div class="card-style p-0">
                  <div class="card-header" style="cursor:pointer" @click="soal.checked=!soal.checked" :class="soal.checked?'bg-primary':'bg-secondary'">
                      <div class="d-flex justify-content-between">
                          <div class="w-100">
                            <template v-if="soal.editmode">
                              <div class="input-style-1">
                                <span style="cursor:text" class="form-control" :ref="'kode-input-'+soal.id" @input="soal.kode=$refs['kode-input-' + soal.id][0].innerText" contenteditable placeholder="Kode Bank">{{soal.kode}}</span>
                              </div>
                            </template>
                            <template v-else>
                              <div class="text-center">
                                <p class="uppercase text-light fw-bold text-break">{{soal.kode}}</p>
                              </div>
                            </template>
                          </div>  
                          
                      </div>
                  </div>
                  
                  <div class="card-body">
                      <template v-if="soal.editmode&&!isguru">
                        <div class="select-style-2 p-0 m-0">
                          <div class="select-position">
                            <select v-model="soal.user_id">
                              <option disabled value="">Pilih Guru</option>
                              <option v-for="g in guru.data" :value="g.value">{{g.text}}</option>
                            </select>
                          </div>
                        </div>
                      </template>
                      <template v-else>
                        <div class="text-center">
                          
                          <p class="text-bold text-dark ">{{soal.created_by}}</p>
                          
                        </div>
                      </template>
                    <template v-if="!soal.editmode">
                      <hr class="m-1">
                      <div class="d-flex justify-content-between">
                        <p>Jumlah Soal</p>
                        <template v-if="parseInt(soal.total_pg) + parseInt(soal.count_soal_esai) + parseInt(soal.count_soal_shortentry) == NaN">
                          <p class="text-bold text-dark">0</p>
                        </template>
                        <template v-else>
                          <p class="text-bold text-dark">{{parseInt(soal.total_pg) + parseInt(soal.count_soal_esai) + parseInt(soal.count_soal_shortentry)}}</p>
                        </template>
                      </div>
                    </template>
                    <template v-if="!soal.editmode">
                      <hr class="m-1">
                      <div class="d-flex justify-content-between">
                        <p>Dibuat</p>
                        <p class="text-bold text-dark">{{soal.created_at}}</p>
                      </div>
                    </template>
                      <hr class="m-1">
                      <template v-if="soal.editmode">
                        <div class="input-style-1">
                          <label>Deskripsi</label>
                          <textarea placeholder="Deskripsi" v-model="soal.deskripsi" rows="3"></textarea>
                        </div>
                      </template>
                      <template v-else>
                        <div class="d-flex justify-content-between">
                          <p>Deskripsi</p>
                          <p class="text-bold text-dark">{{soal.deskripsi}}</p>
                        </div>
                      </template>
                  </div>

                  <div class="card-footer">
                    <div class="d-flex justify-content-between">
                      <template v-if="!soal.isnew">
                        <template v-if="soal.importSoal.status==0">
                          <button @click="$refs.fileImport.dataset.id=soal.id,$refs.fileImport.click()" title="Unggah Soal" class="main-btn light-btn-outline rounded-full btn-sm btn-hover" ><i class="fas fa-upload"></i> </button>
                        </template>
                        <template v-else-if="soal.importSoal.status==1">
                          <button @click="soal.importSoal.source.cancel()" style="cursor:pointer" title="Batalkan Unggahan" class="main-btn light-btn-outline rounded-full btn-sm btn-hover blink_me">{{soal.importSoal.percent}}%</button>
                        </template>
                        <template v-else-if="soal.importSoal.status==2">
                          <button title="Berhasil Unggah" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-upload"></i> <span class="d-none d-md-inline"><i class="fas fa-check"></i></span></button>
                        </template>
                        <template v-else-if="soal.importSoal.status==3">
                          <button title="Gagal Unggah" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-times"></i> </button>
                        </template>
                      </template>
                      <a v-if="!soal.isnew" title="Lihat" :href="$store.state.config.base_url+'/panel/bank-soal/editor/'+soal.id" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-eye"></i> </a>
                      <button title="Hapus" @click="hapus(soal.id)" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-trash-alt"></i></button>
                      <template v-if="soal.editmode">
                          <button title="Simpan" @click="simpan(soal.id),soal.checked=!soal.checked" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-check"></i></button>
                      </template>
                      <template v-else>
                          <button title="Ubah" @click="soal.editmode=!soal.editmode,soal.checked=!soal.checked" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-pencil-alt"></i></button>
                      </template>
                      <template v-if="!soal.isnew">
                        <a v-if="(parseInt(soal.total_pg) + parseInt(soal.count_soal_esai) + parseInt(soal.count_soal_shortentry))>0" title="Unduh Soal" :href="$store.state.config.base_url+'/panel/bank-soal/export/'+soal.id"  target="_blank" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-download"></i></a>
                        <a v-else disabled href="javascript:void(0)" title="Download Soal" class="main-btn light-btn-outline rounded-full btn-sm btn-hover"><i class="fas fa-download"></i></a>
                      </template>
                    </div>
                  </div>
                  
                </div>
              </div>  
          </template>
        </div> 
      </template>
      <template v-else-if="parsedSoals.length==0&&query">
        <div class="text-center">
          <strong>Tidak Ada Hasil Untuk Pencarian "{{query}}"</strong>
        </div>
      </template>
      <template v-else>
        <div class="text-center">
          <strong>Tidak Ada Data, Tambahkan Sekarang</strong>
        </div>
      </template>
    </div>
  </div>  
  <div class="modal fade" id="modal-template"  tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content card-style">
        <div class="modal-header px-0 border-0">
          <h5 class="text-bold">Template</h5>
          <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
            <i class="lni lni-cross-circle"></i>
          </button>
        </div>
        <div class="modal-body px-0">
          <div class="content">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
              Download template zip <a :href="$store.state.config.base_url+'/panel/bank-soal/example/zip'">Disini</a>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
              Download template excel <a :href="$store.state.config.base_url+'/panel/bank-soal/example/excel'">Disini</a>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
              Download template docx <a :href="$store.state.config.base_url+'/panel/bank-soal/example/docx'">Disini</a>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
</script>
<script src="<?= base_url() ?>/panel/assets/js/pages/banksoal/index.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/toastr/toastr.js?v=<?= versioningjs() ?>"></script>
<script>
  VAPP.component(VPBankSoal.name, VPBankSoal);
</script>
<?= $this->endSection() ?>