var VPSiswa = (function () {
  let vp_template = `<div class="card-style">
  <div style="text-align:right">
  <button title="Upload Foto Peserta" class="main-btn btn-sm primary-btn rounded-md btn-hover" data-bs-toggle="modal" data-bs-target="#modal-foto">
     <i class="fas fa-image"></i>
     </button>
     &nbsp;
     <button title="Filter" class="main-btn btn-sm primary-btn rounded-md btn-hover" data-bs-toggle="modal" data-bs-target="#modal-filter">
     <i class="fas fa-filter"></i>
     </button>
     &nbsp;
     <button title="Ubah Data" class="main-btn btn-sm success-btn rounded-md btn-hover" data-bs-toggle="modal" data-bs-target="#modal-change-data">
     <i class="fas fa-file"></i>
     </button>
     &nbsp;
     <button title="Penempatan Ruang Siswa" class="main-btn btn-sm primary-btn rounded-md btn-hover" @click="modalPlacementRuang('show')">
     <i class="lni lni-school-bench"></i>
     </button>
     &nbsp;
     <button title="Penempatan Kelas Siswa" class="main-btn btn-sm success-btn rounded-md btn-hover" @click="modalPlacementKelas('show')">
     <i class="lni lni-school-bench-alt"></i>
     </button>
     &nbsp;
     <button title="Tambah Siswa" class="main-btn btn-sm primary-btn rounded-md btn-hover" @click="modal('show')">
     <i class="lni lni-plus"></i>
     </button>
     &nbsp;
     <button title="Segarkan" class="main-btn btn-sm success-btn rounded-md btn-hover" @click="tbl.ajax.reload(null, false)" >
     <i class="lni lni-reload"></i>
     </button>
  </div>
  <div class="table-responsive">
     <table class="table table-striped table-hover w-100" id="tbl">
        <thead>
           <tr>
              <th>Photo</th>
              <th>Nomor Induk</th>
              <th>Nama</th>
              <th>Kelas</th>
              <th>Tingkat</th>
              <th>Ruang</th>
              <th>Status</th>
              <th>Aksi</th>
           </tr>
        </thead>
     </table>
  </div>
</div>
<div class="modal fade" ref="modal"  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">{{siswaMdl.id?'Ubah':'Tambah'}} Siswa</h5>
           <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
           <i class="lni lni-cross-circle"></i>
           </button>
        </div>
        <div class="modal-body px-0">
           <div class="content">
              <form @submit.prevent="siswaMdl.id?edit():add()">
                 <div class="input-style-1">
                    <label>Nama Siswa</label>
                    <input required v-model="siswaMdl.nama" type="text" placeholder="Nama Siswa">
                 </div>
                 <div class="input-style-1">
                    <label>Nomor Induk</label>
                    <input required v-model="siswaMdl.nomor_induk" type="text" placeholder="Nomor Induk">
                 </div>
                 <div class="select-style-1">
                    <label>Jenis Kelamin</label>
                    <div class="select-position">
                       <select required v-model="siswaMdl.jenis_kelamin">
                          <option value="L">Laki-Laki</option>
                          <option value="P">Perempuan</option>
                       </select>
                    </div>
                  </div>
                  <div class="input-style-1">
                     <label>Tempat Lahir</label>
                     <input v-model="siswaMdl.tempat_lahir" type="text" placeholder="Tempat Lahir">
                  </div>
                  <div class="input-style-1">
                     <label>Tanggal Lahir</label>
                     <input v-model="siswaMdl.tanggal_lahir" type="date" placeholder="Tanggal Lahir">
                  </div>
                  <div class="input-style-1">
                     <label>Alamat</label>
                     <textarea v-model="siswaMdl.alamat" placeholder="Alamat"></textarea>
                  </div>
                 <div class="input-style-2">
                    <label>RFID</label>
                    <input v-model="siswaMdl.rfid" type="text" placeholder="RFID">
                    <span style="cursor:pointer" @click="listening=true,listen_rf(true)" class="icon"> <i @click="listening=true,listen_rf(true)" title="Klik untuk scan" class="fas fa-id-card-alt"></i> </span>
                 </div>
                 <div class="input-style-2">
                    <label>Solution ID</label>
                    <input v-model="siswaMdl.attendance_solution_id" type="text" placeholder="Solution ID">
                 </div>
                 <div class="input-style-1">
                    <label>Email</label>
                    <input v-model="siswaMdl.email" type="email" placeholder="Email">
                 </div>
                 <div class="select-style-1">
                    <label>Agama</label>
                    <div class="select-position">
                       <select required v-model="siswaMdl.agama">
                          <option value="islam">Islam</option>
                          <option value="katolik">Katolik</option>
                          <option value="protestan">Protestan</option>
                          <option value="hindu">Hindu</option>
                          <option value="buddha">Buddha</option>
                          <option value="konghucu">Konghucu</option>
                       </select>
                    </div>
                 </div>
                 <div class="input-style-1">
                    <label>Phone</label>
                    <input v-model="siswaMdl.phone" type="phone" placeholder="Nomor Handphone">
                 </div>
                 <div class="input-style-2">
                    <label>Kata Sandi</label>
                    <input :required="!siswaMdl.id" v-model="siswaMdl.password" :type="siswaMdl.passoff?'text':'password'" placeholder="Kata Sandi">
                    <span style="cursor:pointer" @click="siswaMdl.passoff=!siswaMdl.passoff" class="icon"> <i :class="siswaMdl.passoff?'mdi-eye-outline':'mdi-eye-off-outline'" class="mdi"></i> </span>
                 </div>
                 <div class="my-3">
                    <label>Kelas</label>
                    <tomselect id="kelas"  :options="kelas.options" :value="kelas.value" @changed="kelas.value=$event" placeholder="Pilih Kelas"  eltype="select" style="width: 100%;">
                    </tomselect>
                 </div>
                 <div class="my-3">
                    <label>Ruang Ujian</label>
                    <tomselect id="ruang"  :options="ruang.options" :value="ruang.value" @changed="ruang.value=$event" placeholder="Pilih Ruang Ujian"  eltype="select" style="width: 100%;">
                    </tomselect>
                 </div>
                 <div class="select-style-1">
                    <label>Status</label>
                    <div class="select-position">
                       <select required v-model="siswaMdl.status">
                          <option value="1">Aktif</option>
                          <option value="0">Tidak Aktif</option>
                       </select>
                    </div>
                 </div>
                 <div class="action d-flex flex-wrap justify-content-end">
                    <button type="submit" :disabled="siswaMdl.loading" class="main-btn btn-sm primary-btn btn-hover">
                       <template v-if="siswaMdl.loading"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                       </template>
                       <template v-else>
                          {{siswaMdl.id?'Simpan':'Tambah'}}
                       </template>
                    </button>
                 </div>
              </form>
           </div>
        </div>
     </div>
  </div>
</div>
<div class="modal fade" ref="mdlKelas"  tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
     <div class="modal-content card-style">
        <div class="modal-header px-0 border-0">
           <h4 class="text-bold">Penempatan Kelas Siswa</h4>
           <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="kelas.options">
                 <div class="row">
                    <div class="col-md-5">
                       <div class="select-style-1">
                          <label>Kelas Kiri</label>
                          <div class="select-position">
                             <select required v-model="kelasMdl.selector.left">
                                <option value="0">Belum Ada Kelas</option>
                                <option v-for="kelas in kelas.options" :value="kelas.value" v-show="kelas.value!=kelasMdl.selector.right">{{kelas.text}}</option>
                             </select>
                          </div>
                       </div>
                    </div>
                    <div class="col-md-5">
                       <div class="select-style-1">
                          <label>Kelas Kanan</label>
                          <div class="select-position">
                             <select required v-model="kelasMdl.selector.right">
                                <option value="0">Belum Ada Kelas</option>
                                <option v-for="kelas in kelas.options" :value="kelas.value" v-show="kelas.value!=kelasMdl.selector.left">{{kelas.text}}</option>
                             </select>
                          </div>
                       </div>
                    </div>
                    <div class="col-md-2 my-auto">
                       <button v-show="this.kelasMdl.selector.left!=this.kelasMdl.selector.right" @click="loadKelasConverter" class="btn btn-primary">Query</button>
                    </div>
                 </div>
                 <template v-if="!kelasMdl.loading">
                    <div class="row">
                       <div v-show="kelasMdl.kelasLeft.ready" class="col-md-6 my-1">
                          <h6 v-if="kelasMdl.kelasLeft.kelas.id==0">
                             Siswa Belum Mempunyai Kelas
                          </h6>
                          <h6 v-else>
                             {{kelasMdl.kelasLeft.kelas.fullname}}
                          </h6>
                          <small v-if="kelasMdl.kelasLeft.siswa.length>0">
                          Jumlah Siswa : {{kelasMdl.kelasLeft.siswa.length}}
                          </small>
                          <small v-else>
                          Tidak ada data siswa
                          </small>
                          <div class="input-style-1 mb-1">
                             <input type="text" v-model="kelasMdl.kelasLeft.query" placeholder="Filter">
                          </div>
                          <div @click="moveAllSiswaKelas('left')" style="cursor:pointer" class="border border-light shadow-sm rounded-top p-2 text-center">
                             <i class="mdi mdi-arrow-right-bold"></i>
                             <i class="mdi mdi-arrow-right-bold"></i>
                          </div>
                          <div class="siswa-list overflow-auto">
                             <template v-if="kelasMdl.kelasLeft.siswa.length">
                                <div v-for="(siswa,i) in kelasMdl.kelasLeft.siswa" @click="moveSiswaKelas('left',i)" class="border border-light shadow-sm rounded px-1 siswa-item" style="cursor:pointer;" v-show="isInclude(kelasMdl.kelasLeft.query,siswa.nomor_induk+'/'+siswa.nama)">{{siswa.nomor_induk+"/"+siswa.nama}}</div>
                             </template>
                             <template v-else>
                                <div class="text-center my-2">
                                   <span class="text-bold">Tidak Ada Siswa</span>
                                </div>
                             </template>
                          </div>
                       </div>
                       <div v-show="kelasMdl.kelasRight.ready" class="col-md-6 my-1">
                          <h6 v-if="kelasMdl.kelasRight.kelas.id==0">
                             Siswa Belum Mempunyai Kelas
                          </h6>
                          <h6 v-else>
                             {{kelasMdl.kelasRight.kelas.fullname}}
                          </h6>
                          <small v-if="kelasMdl.kelasRight.siswa.length>0">
                          Jumlah Siswa : {{kelasMdl.kelasRight.siswa.length}}
                          </small>
                          <small v-else>
                          Tidak ada data siswa
                          </small>
                          <div class="input-style-1 mb-1">
                             <input type="text" v-model="kelasMdl.kelasRight.query" placeholder="Filter">
                          </div>
                          <div @click="moveAllSiswaKelas('right')" style="cursor:pointer" class="border border-light shadow-sm rounded-top p-2 text-center">
                             <i class="mdi mdi-arrow-left-bold"></i>
                             <i class="mdi mdi-arrow-left-bold"></i>
                          </div>
                          <div class="siswa-list overflow-auto">
                             <template v-if="kelasMdl.kelasRight.siswa.length">
                                <div v-for="(siswa,i) in kelasMdl.kelasRight.siswa" @click="moveSiswaKelas('right',i)" class="border border-light shadow-sm rounded px-1 siswa-item" style="cursor:pointer;"  v-show="isInclude(kelasMdl.kelasRight.query,siswa.nomor_induk+'/'+siswa.nama)">{{siswa.nomor_induk+"/"+siswa.nama}}</div>
                             </template>
                             <template v-else>
                                <div class="text-center my-2">
                                   <span class="text-bold">Tidak Ada Siswa</span>
                                </div>
                             </template>
                          </div>
                       </div>
                    </div>
                    <div v-if="kelasMdl.kelasRight.ready&&kelasMdl.kelasLeft.ready" class="text-end">
                       <button @click="simpanKelas" class="btn btn-primary">Simpan</button>
                    </div>
                 </template>
                 <template v-else>
                    <div class="text-center">
                       <div class="spinner-grow" role="status">
                          <span class="visually-hidden">Loading...</span>
                       </div>
                    </div>
                 </template>
              </template>
              <template v-else>
                 <div class="text-center">
                    <h5>Silahkan Tambahkan Kelas <a :href="this.$store.state.config.base_url+'panel/md/kelas'">Disini</a></h5>
                 </div>
              </template>
           </div>
        </div>
     </div>
  </div>
</div>
<div class="modal fade" ref="mdlRuang"  tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
     <div class="modal-content card-style">
        <div class="modal-header px-0 border-0">
           <h4 class="text-bold">Penempatan Ruang Siswa</h4>
           <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="ruang.options">
                 <div class="row">
                    <div class="col-md-5">
                       <div class="select-style-1">
                          <label>Ruang Kiri</label>
                          <div class="select-position">
                             <select required v-model="ruangMdl.selector.left">
                                <option value="0">Belum Ada Ruang</option>
                                <option v-for="ruang in ruang.options" :value="ruang.value" v-show="ruang.value!=ruangMdl.selector.right">{{ruang.text}}</option>
                             </select>
                          </div>
                       </div>
                    </div>
                    <div class="col-md-5">
                       <div class="select-style-1">
                          <label>Ruang Kanan</label>
                          <div class="select-position">
                             <select required v-model="ruangMdl.selector.right">
                                <option value="0">Belum Ada Ruang</option>
                                <option v-for="ruang in ruang.options" :value="ruang.value" v-show="ruang.value!=ruangMdl.selector.left">{{ruang.text}}</option>
                             </select>
                          </div>
                       </div>
                    </div>
                    <div class="col-md-2 my-auto">
                       <button v-show="this.ruangMdl.selector.left!=this.ruangMdl.selector.right" @click="loadRuangConverter" class="btn btn-primary">Query</button>
                    </div>
                 </div>
                 <template v-if="!ruangMdl.loading">
                    <div class="row">
                       <div v-show="ruangMdl.ruangLeft.ready" class="col-md-6 my-1">
                          <h6 v-if="ruangMdl.ruangLeft.ruang.id==0">
                             Siswa Belum Mempunyai Ruang
                          </h6>
                          <h6 v-else>
                             {{ruangMdl.ruangLeft.ruang.fullname}}
                          </h6>
                          <small v-if="ruangMdl.ruangLeft.siswa.length>0">
                          Jumlah Siswa : {{ruangMdl.ruangLeft.siswa.length}}
                          </small>
                          <small v-else>
                          Tidak ada data siswa
                          </small>
                          <div class="input-style-1 mb-1">
                             <input type="text" v-model="ruangMdl.ruangLeft.query" placeholder="Filter">
                          </div>
                          <div @click="moveAllSiswaRuang('left')" style="cursor:pointer" class="border border-light shadow-sm rounded-top p-2 text-center">
                             <i class="mdi mdi-arrow-right-bold"></i>
                             <i class="mdi mdi-arrow-right-bold"></i>
                          </div>
                          <div class="siswa-list overflow-auto">
                             <template v-if="ruangMdl.ruangLeft.siswa.length">
                                <div v-for="(siswa,i) in ruangMdl.ruangLeft.siswa" @click="moveSiswaRuang('left',i)" class="border border-light shadow-sm rounded px-1 siswa-item" style="cursor:pointer;" v-show="isInclude(ruangMdl.ruangLeft.query,siswa.nomor_induk+'/'+siswa.nama)">{{siswa.nomor_induk+"/"+siswa.nama}}</div>
                             </template>
                             <template v-else>
                                <div class="text-center my-2">
                                   <span class="text-bold">Tidak Ada Siswa</span>
                                </div>
                             </template>
                          </div>
                       </div>
                       <div v-show="ruangMdl.ruangRight.ready" class="col-md-6 my-1">
                          <h6 v-if="ruangMdl.ruangRight.ruang.id==0">
                             Siswa Belum Mempunyai Ruang
                          </h6>
                          <h6 v-else>
                             {{ruangMdl.ruangRight.ruang.fullname}}
                          </h6>
                          <small v-if="ruangMdl.ruangRight.siswa.length>0">
                          Jumlah Siswa : {{ruangMdl.ruangRight.siswa.length}}
                          </small>
                          <small v-else>
                          Tidak ada data siswa
                          </small>
                          <div class="input-style-1 mb-1">
                             <input type="text" v-model="ruangMdl.ruangRight.query" placeholder="Filter">
                          </div>
                          <div @click="moveAllSiswaRuang('right')" style="cursor:pointer" class="border border-light shadow-sm rounded-top p-2 text-center">
                             <i class="mdi mdi-arrow-left-bold"></i>
                             <i class="mdi mdi-arrow-left-bold"></i>
                          </div>
                          <div class="siswa-list overflow-auto">
                             <template v-if="ruangMdl.ruangRight.siswa.length">
                                <div v-for="(siswa,i) in ruangMdl.ruangRight.siswa" @click="moveSiswaRuang('right',i)" class="border border-light shadow-sm rounded px-1 siswa-item" style="cursor:pointer;"  v-show="isInclude(ruangMdl.ruangRight.query,siswa.nomor_induk+'/'+siswa.nama)">{{siswa.nomor_induk+"/"+siswa.nama}}</div>
                             </template>
                             <template v-else>
                                <div class="text-center my-2">
                                   <span class="text-bold">Tidak Ada Siswa</span>
                                </div>
                             </template>
                          </div>
                       </div>
                    </div>
                    <div v-if="ruangMdl.ruangRight.ready&&ruangMdl.ruangLeft.ready" class="text-end">
                       <button @click="simpanRuang" class="btn btn-primary">Simpan</button>
                    </div>
                 </template>
                 <template v-else>
                    <div class="text-center">
                       <div class="spinner-grow" role="status">
                          <span class="visually-hidden">Loading...</span>
                       </div>
                    </div>
                 </template>
              </template>
              <template v-else>
                 <div class="text-center">
                    <h5>Silahkan Tambahkan Ruang <a :href="this.$store.state.config.base_url+'panel/md/ruang'">Disini</a></h5>
                 </div>
              </template>
           </div>
        </div>
     </div>
  </div>
</div>
<div class="modal fade" id="modal-foto" 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">Upload Foto Peserta</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 contoh Zip <a :href="exampleLinkPhoto">Disini</a>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div v-show="photoMdl.errMsg" class="alert-box danger-alert ">
              <div class="alert">
                <p class="text-medium">
                  {{photoMdl.errMsg}}
                </p>
              </div>
            </div>
            <div v-show="photoMdl.succMsg" class="alert-box success-alert ">
              <div class="alert">
                <p class="text-medium">
                  {{photoMdl.succMsg}}
                </p>
              </div>
            </div>
            <div class="container-wrapper p-3">
              <div v-if="photoMdl.loading" class="text-center m-1">
                <span v-if="photoMdl.percent<100" class="text-white">Mengirim {{photoMdl.percent}}%</span>
                <span v-else class="text-white">Memproses Data</span>
              </div>
              <div v-if="!photoMdl.loading" class="stady-wrapper bg-primary">
                <div class="file-upload">
                  <input @change="photoReady" accept="zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed" type="file" />
                  <i class="fa fa-arrow-up"></i>
                </div>
              </div>
              <div v-else class="loading-wrapper">
                <div class="file-upload" :style="photoBG">
                  <i class="fa fa-arrow-up blink_me"></i>
                </div>
              </div>
              <div class="text-center my-1">
                <button v-show="!photoMdl.loading&&photoMdl.file" @click="uploadPhoto" class="btn btn-sm btn-success rounded-md"><i class="lni lni-database"></i>Import</button>
                <button v-show="photoMdl.loading&&photoMdl.percent<100" @click="cancelUploadPhoto" class="btn btn-sm btn-danger rounded-md"><i class="lni lni-close"></i>Batal</button>
              </div>

            </div>
           </div>
        </div>
     </div>
  </div>
</div>
<div class="modal fade" id="modal-filter" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
     <div class="modal-content card-style">
        <div class="modal-header px-0 border-0">
           <h5 class="text-bold">Filter</h5>
           <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
           <i class="lni lni-cross-circle"></i>
           </button>
        </div>
        <div class="modal-body px-0">
           <div class="content">
              <div class="select-style-1">
                 <label>Kelas</label>
                 <tomselect id="filter-kelas" required :options="[{'text': 'Semua', 'value': 'all' }, ...kelas.options]" :value="filter.kelas" @changed="filter.kelas=$event" placeholder="Pilih Kelas"  eltype="select" style="width: 100%;"></tomselect>
              </div>
              <div class="select-style-1">
                 <label>Ruang</label>
                 <tomselect id="filter-ruang" required :options="[{'text': 'Semua', 'value': 'all' }, ...ruang.options]" :value="filter.ruang" @changed="filter.ruang=$event" placeholder="Pilih Ruang"  eltype="select" style="width: 100%;"></tomselect>
              </div>
              <div class="select-style-1">
                 <label>Agama</label>
                 <div class="select-position">
                    <select required v-model="filter.agama">
                       <option value="all">Semua</option>
                       <option value="islam">Islam</option>
                       <option value="katolik">Katolik</option>
                       <option value="protestan">Protestan</option>
                       <option value="hindu">Hindu</option>
                       <option value="buddha">Buddha</option>
                       <option value="konghucu">Konghucu</option>
                    </select>
                 </div>
              </div>
              <div class="select-style-1">
                 <label>Status</label>
                 <div class="select-position">
                    <select required v-model="filter.status">
                       <option value="all">Semua</option>
                       <option value="1">Aktif</option>
                       <option value="0">Tidak Aktif</option>
                    </select>
                 </div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>
<div class="modal fade" id="modal-change-data" 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">Ubah Data</h5>
           <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
           <i class="lni lni-cross-circle"></i>
           </button>
        </div>
        <div class="modal-body px-0">
           <div class="content">
              <div class="select-style-1">
                 <label>Kelas</label>
                 <tomselect id="change-data-kelas" required :options="[{'text': 'Semua', 'value': 'all' }, ...kelas.options]" :value="changeData.kelas" @changed="changeData.kelas=$event" placeholder="Pilih Kelas"  eltype="select" style="width: 100%;"></tomselect>
              </div>
              <div class="select-style-1">
                 <label>Ruang</label>
                 <tomselect id="change-data-ruang" required :options="[{'text': 'Semua', 'value': 'all' }, ...ruang.options]" :value="changeData.ruang" @changed="changeData.ruang=$event" placeholder="Pilih Ruang"  eltype="select" style="width: 100%;"></tomselect>
              </div>
              <div class="select-style-1">
                 <label>Agama</label>
                 <div class="select-position">
                    <select required v-model="changeData.agama">
                       <option value="all">Semua</option>
                       <option value="islam">Islam</option>
                       <option value="katolik">Katolik</option>
                       <option value="protestan">Protestan</option>
                       <option value="hindu">Hindu</option>
                       <option value="buddha">Buddha</option>
                       <option value="konghucu">Konghucu</option>
                    </select>
                 </div>
              </div>
              <div class="select-style-1">
                 <label>Status</label>
                 <div class="select-position">
                    <select required v-model="changeData.status">
                       <option value="all">Semua</option>
                       <option value="1">Aktif</option>
                       <option value="0">Tidak Aktif</option>
                    </select>
                 </div>
              </div>
              <input ref="PFI" accept=".csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" type="file" class="d-none" id="change-data-file">
           </div>
        </div>
        <div class="modal-footer d-flex justify-content-between">
          <button @click="downloadChangeDataTemplate()" class="btn btn-primary"><i class="fas fa-download"></i></button>
          <button @click="$refs.PFI.value='',$refs.PFI.click()" class="btn btn-primary"><i class="fas fa-upload"></i></button>
        </div>
     </div>
  </div>

</div>
    `;
  return {
    name: "siswa",
    template: vp_template,

    data() {
      return {

        listening: false,
        errorMessage: '',
        siswaMdl: {
          agama: 'islam',
          status: 1,
        },
        photoMdl: {
          errMsg: '',
          succMsg: '',
          loading: false,
          file: null,
          percent: 0,
          cancelToken: axios.CancelToken,
          source: null,
        },
        kelasMdl: {
          selector: {
            left: 0,
            right: 0
          },
          loading: false,
          kelasLeft: {
            ready: false,
            query: '',
            kelas: {},
            siswa: []
          },
          kelasRight: {
            ready: false,
            query: '',
            kelas: {},
            siswa: []
          }
        }, ruangMdl: {
          selector: {
            left: 0,
            right: 0
          },
          loading: false,
          ruangLeft: {
            ready: false,
            query: '',
            ruang: {},
            siswa: []
          },
          ruangRight: {
            ready: false,
            query: '',
            ruang: {},
            siswa: []
          }
        },
        kelas: {
          value: '',
          options: []
        },
        ruang: {
          value: '',
          options: []
        },

        filter: {
          agama: 'all',
          kelas: 'all',
          ruang: 'all',
          status: 'all',
        },
        changeData: {
          agama: 'all',
          kelas: 'all',
          ruang: 'all',
          status: 'all',
        },
      }
    },
    mounted() {
      this.renderTable();
      this.loadKelas();
      this.loadRuang();
      this.eventListener();
      this.photoMdl.source = this.photoMdl.cancelToken.source()
    },
    methods: {
      photoReady(e) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) return this.photoMdl.file = null;
        this.photoMdl.file = files[0];
      },
      cancelUploadPhoto() {
        this.photoMdl.source.cancel();
        this.photoMdl.errMsg = "";
      },
      uploadPhoto() {
        if (this.photoMdl.loading) return
        let onUploadProgress = event => {
          const percentCompleted = Math.round((event.loaded * 100) / event.total);
          this.photoMdl.percent = percentCompleted;
        }
        this.photoMdl.succMsg = '';
        this.photoMdl.errMsg = '';
        this.photoMdl.loading = true;
        const formData = new FormData();
        formData.append([this.$store.state.config.csrf.name], this.$store.state.config.csrf.value);
        formData.append('file', this.photoMdl.file);
        axios({
          method: 'POST',
          data: formData,
          url: window.location.href + '/uploadPhoto',
          cancelToken: this.photoMdl.source.token,
          onUploadProgress
        }).then((response) => {
          if (!isObject(response.data)) return this.photoMdl.errMsg = gaem({ response }, response.data);
          this.photoMdl.succMsg = response.data.message || 'Data Berhasil Di Import';
        }, (error) => {
          if (typeof error.response == 'undefined') return;
          this.photoMdl.errMsg = gaem(error);
          try {
            if (typeof error.response.data.messages.csrf != 'undefined') this.$store.state.config.csrf.value = error.response.data.messages.csrf;
          } catch (error) {

          }
        }).finally(() => this.photoMdl.loading = false)
      },
      renderTable() {
        if (!this.tbl) this.tbl = $('#tbl').DataTable({
          dom: 'Blfrtip',
          colReorder: true,
          buttons: [
            'copy', 'excel', 'pdf', 'print'
          ],
          processing: true,
          responsive: true,
          // serverSide: true,
          ajax: {
            url: this.siswaURL,
            dataSrc: 'data',
            beforeSend: function (request) {
              request.setRequestHeader("X-Requested-With", 'XMLHttpRequest');
            }
          },
          columnDefs: [
            {
              targets: 0, visible: true,
              render: (data, type, row) => {
                let altImg = this.$store.state.config.base_url + "/assets/img/users/profile-photo.png";
                let photo = `
                <div style="max-width: 60px;" class="employee-image mx-auto">
                    <img onerror="this.onerror=null,this.src='${altImg}'" class="w-100" src="${data.photo}" alt="">
                </div>`
                return photo;
              }
            },
            {
              targets: 1, visible: true,
              render: (data, type, row) => {
                let onclick = `if(document.getElementById('pw-${data.nomor_induk}').innerText==strtostar('${data.password_hash}')){document.getElementById('pw-${data.nomor_induk}').innerText='${data.password_hash}',this.classList.toggle('fa-eye'),this.classList.toggle('fa-eye-slash')}else{document.getElementById('pw-${data.nomor_induk}').innerText=strtostar('${data.password_hash}'),this.classList.toggle('fa-eye-slash'),this.classList.toggle('fa-eye')}`
                let str = "<div>";
                str += data.nomor_induk;
                str += "<br>";
                str += "<div>";
                str += `<strong id="pw-${data.nomor_induk}">${strtostar(data.password_hash)}</strong> <i onclick="${onclick}" class="fas fa-eye" title="Lihat Password"></i>`;
                str += "</div>";
                str += "</div>";
                return str;
              }
            },
            {
              targets: 3, visible: true,
              render: (data, type, row) => {

                let k = "Tidak Ada";
                if (data.nama_kelas) {
                  k = "";
                  if (data.kode_kelas) {
                    k += data.kode_kelas + " - ";
                  }
                  k += data.nama_kelas;
                  if (data.kode_jurusan) {
                    k += " - " + data.kode_jurusan;
                  }
                }
                return `<span class="badge bg-primary">${k}</span>`;
              }
            },
            {
              targets: 4, visible: true,
              render: (data, type, row) => {
                return `<span class="badge bg-primary">${data.kode_tingkat || 'Tidak Ada'}</span>`
              }
            },
            {
              targets: 5, visible: true,
              render: (data, type, row) => {
                return `<span class="badge bg-primary">${data.kode_ruang || 'Tidak Ada'}</span>`
              }
            },
            {
              targets: 6, visible: true,
              render: (data, type, row) => {
                return `<span class="badge bg-${data.status == 1 ? 'success' : 'danger'}">${data.status == 1 ? 'Aktif' : 'Tidak Aktif'}</span>`;
              }
            },

            {
              targets: 7, visible: true,
              render: function (data, type, row) {
                let btn = `<div class="d-flex justify-content-evenly">`;
                if (data.editable == "1") btn += `&nbsp;<button title="Ubah Siswa" class="btn btn-primary rounded-md" id="trigger-edit" data-id="${data.id}"><i id="trigger-edit" data-id="${data.id}" class='lni lni-pencil-alt'></i></button>`;
                if (data.deleteable == "1") btn += `&nbsp;<button title="Hapus Siswa" class="btn btn-danger rounded-md" id="trigger-delete" data-id="${data.id}"><i id="trigger-delete" data-id="${data.id}" class='lni lni-trash-can'></i></button>`;
                if (data.stealthable == "1") btn += `&nbsp;<button title="Masuk Akun" class="btn btn-success rounded-md" id="user-trigger-login" data-id="${data.id}"><i class='fas fa-user-ninja'></i></button>`;
                btn += "</div>";
                return btn;
              },
            }
          ],
          columns: [
            { data: null },
            { data: null },
            { data: 'nama' },
            { data: null },
            { data: null },
            { data: null },
            { data: null },
            { data: null },
          ]
        });
      },
      eventListener() {
        document.addEventListener('click', (e) => {
          if (e.target && e.target.id == 'trigger-edit') {
            this.detail(e.target.dataset.id)
          }
          if (e.target && e.target.id == 'trigger-delete') {
            this.delete(e.target.dataset.id)
          }
          if (e.target && e.target.id == 'user-trigger-login') {
            window.open(`${this.$store.state.config.base_url}/panel/auth/switch/${btoa(2)}/${btoa(e.target.dataset.id)}`);
          }
        });
        this.$refs.modal.addEventListener('hide.bs.modal', (e) => {
          let dummysiswaMdl = {};
          for (let key in this.siswaMdl) {
            if (!this.siswaMdl.hasOwnProperty(key)) continue;
            dummysiswaMdl[key] = null;
          }
          this.siswaMdl = dummysiswaMdl;
        });
        let filePass = document.getElementById('change-data-file');
        filePass.addEventListener('change', this.confirmChangeData);
      },
      loadRuang() {
        axios({
          method: 'get',
          url: this.$store.state.config.base_url + "/panel/md/ruang-ujian/all",
        }).then((response) => {
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          this.ruang.options = response.data.data.map(e => {
            let k = e.kode + " - " + e.nama;
            return { value: e.id, text: k }
          });
        }, (error) => {
        });
      },
      loadKelas() {
        axios({
          method: 'get',
          url: this.$store.state.config.base_url + "/panel/md/kelas/all",
        }).then((response) => {
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          this.kelas.raw = response.data.data;
          this.kelas.options = response.data.data.map((e, i) => {
            if (i == 0) this.kelas.value = parseInt(e.id);
            let k = e.kode + " - " + e.nama;
            if (e.kode_tingkat) {
              k += " | " + e.kode_tingkat
            }
            if (e.kode_jurusan) {
              k += " | " + e.kode_jurusan
            }
            return { value: parseInt(e.id), text: k }
          });
        }, (error) => {
        });
      },
      delete(id) {
        SwalDelete({
          confirmed: () => {
            showDismisableLoading();
            axios({
              method: 'delete',
              data: { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value, },
              url: this.$store.state.config.base_url + "/panel/md/siswa/delete/" + id,
            }).then((response) => {
              Swal.close();
              if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
              this.tbl.ajax.reload(null, false);
              Swal.fire(response.data.deleted ? 'Berhasil' : 'Gagal', response.data.message, response.data.deleted ? 'success' : 'error');
            }, (error) => {
              Swal.fire('Gagal', gaem(error), 'error')
            });
          }
        });
      },
      detail(id) {
        showDismisableLoading();
        axios({
          method: 'get',
          url: this.$store.state.config.base_url + "/panel/md/siswa/detail/" + id,
        }).then((response) => {
          Swal.close();
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          this.siswaMdl.id = response.data.data.id;
          this.siswaMdl.nomor_induk = response.data.data.nomor_induk;
          this.siswaMdl.rfid = response.data.data.rfid;
          this.siswaMdl.email = response.data.data.email;
          this.siswaMdl.jenis_kelamin = response.data.data.jenis_kelamin;
          this.siswaMdl.tempat_lahir = response.data.data.tempat_lahir;
          this.siswaMdl.tanggal_lahir = response.data.data.tanggal_lahir;
          this.siswaMdl.alamat = response.data.data.alamat;
          this.siswaMdl.phone = response.data.data.phone;
          this.siswaMdl.nama = response.data.data.nama;
          this.siswaMdl.agama = response.data.data.agama;
          this.siswaMdl.status = response.data.data.status;
          this.siswaMdl.attendance_solution_id = response.data.data.attendance_solution_id;
          this.kelas.value = response.data.data.kelas_id;
          this.ruang.value = response.data.data.ruang_id;
          this.modal("show")
        }, (error) => {
          Swal.fire('Gagal', gaem(error), 'error')
        });
      },
      add() {
        let data = {
          [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
          nomor_induk: this.siswaMdl.nomor_induk,
          rfid: this.siswaMdl.rfid,
          nama: this.siswaMdl.nama,
          agama: this.siswaMdl.agama,
          jenis_kelamin: this.siswaMdl.jenis_kelamin,
          tempat_lahir: this.siswaMdl.tempat_lahir,
          tanggal_lahir: this.siswaMdl.tanggal_lahir,
          alamat: this.siswaMdl.alamat,
          email: this.siswaMdl.email,
          phone: this.siswaMdl.phone,
          status: this.siswaMdl.status,
          attendance_solution_id: this.siswaMdl.attendance_solution_id,
          password: this.siswaMdl.password,
          ruang_id: this.ruang.value,
          kelas_id: this.kelas.value,
        };
        this.siswaMdl.loading = true;
        let url = this.$store.state.config.base_url + "/panel/md/siswa/add"
        axios({
          method: 'POST',
          data: data,
          url: url,
        }).then((response) => {
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          Swal.fire('Success', response.data.message, 'success')
          this.modal("hide");
          this.tbl.ajax.reload(null, false)
        }, (error) => {
          if (typeof error.response == 'undefined') return;
          Swal.fire('Gagal', gaem(error), 'error')
        }).finally(() => this.siswaMdl.loading = false);
      },
      edit() {
        let data = {
          [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
          nomor_induk: this.siswaMdl.nomor_induk,
          nama: this.siswaMdl.nama,
          agama: this.siswaMdl.agama,
          jenis_kelamin: this.siswaMdl.jenis_kelamin,
          tempat_lahir: this.siswaMdl.tempat_lahir,
          tanggal_lahir: this.siswaMdl.tanggal_lahir,
          alamat: this.siswaMdl.alamat,
          rfid: this.siswaMdl.rfid,
          email: this.siswaMdl.email,
          phone: this.siswaMdl.phone,
          attendance_solution_id: this.siswaMdl.attendance_solution_id,
          status: this.siswaMdl.status,
          password: this.siswaMdl.password,
          kelas_id: this.kelas.value,
          ruang_id: this.ruang.value,
        };
        this.siswaMdl.loading = true;
        let url = this.$store.state.config.base_url + "/panel/md/siswa/edit/" + this.siswaMdl.id
        axios({
          method: 'PATCH',
          data: data,
          url: url,
        }).then((response) => {
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          Swal.fire('Success', response.data.message, 'success')
          this.modal("hide");
          this.tbl.ajax.reload(null, false)
        }, (error) => {
          if (typeof error.response == 'undefined') return;
          Swal.fire('Gagal', gaem(error), 'error')
        }).finally(() => this.siswaMdl.loading = false);
      },
      simpanRuang() {
        let siswa = [];
        this.ruangMdl.ruangRight.siswa.forEach(v => {
          v.ruang_id = this.ruangMdl.ruangRight.ruang.id == 0 ? null : this.ruangMdl.ruangRight.ruang.id;
          delete v.password_hash;
          siswa.push(v);
        });
        this.ruangMdl.ruangLeft.siswa.forEach(v => {
          v.ruang_id = this.ruangMdl.ruangLeft.ruang.id == 0 ? null : this.ruangMdl.ruangLeft.ruang.id;
          delete v.password_hash;
          siswa.push(v);
        });
        this.ruangMdl.loading = true;
        axios({
          method: 'PUT',
          data: { siswa, [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
          url: `${this.$store.state.config.base_url}/panel/md/siswa/ruang/pindah`,
        }).then((response) => {
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          Swal.fire('Berhasil', response.message, 'success')
          this.loadRuangConverter();
        }, (error) => {
          if (typeof error.response == 'undefined') return;
          Swal.fire('Gagal', gaem(error), 'error')
        }).finally(() => this.ruangMdl.loading = true);
      },
      simpanKelas() {
        let siswa = [];
        this.kelasMdl.kelasRight.siswa.forEach(v => {
          v.kelas_id = this.kelasMdl.kelasRight.kelas.id == 0 ? null : this.kelasMdl.kelasRight.kelas.id;
          delete v.password_hash;
          siswa.push(v);
        });
        this.kelasMdl.kelasLeft.siswa.forEach(v => {
          v.kelas_id = this.kelasMdl.kelasLeft.kelas.id == 0 ? null : this.kelasMdl.kelasLeft.kelas.id;
          delete v.password_hash;
          siswa.push(v);
        });
        this.kelasMdl.loading = true;
        axios({
          method: 'PUT',
          data: { siswa, [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
          url: `${this.$store.state.config.base_url}/panel/md/siswa/kelas/pindah`,
        }).then((response) => {
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          Swal.fire('Berhasil', response.message, 'success')
          this.loadKelasConverter();
        }, (error) => {
          if (typeof error.response == 'undefined') return;
          Swal.fire('Gagal', gaem(error), 'error')
        }).finally(() => this.kelasMdl.loading = true);
      },
      loadRuangConverter() {
        // use promise
        this.ruangMdl.loading = true;
        this.ruangMdl.ruangRight.ready = false;
        this.ruangMdl.ruangLeft.ready = false;
        let leftData = this.loadRuangSiswa(this.ruangMdl.selector.left)
        let rightData = this.loadRuangSiswa(this.ruangMdl.selector.right)
        Promise.all([leftData, rightData]).then(values => {
          values[0].data.siswa.map(v => {
            delete v.email;
            delete v.password_hash;
            return v;
          })
          values[1].data.siswa.map(v => {
            delete v.email;
            delete v.password_hash;
            return v;
          })
          this.ruangMdl.ruangLeft = values[0].data;
          this.ruangMdl.ruangRight = values[1].data;
          this.ruangMdl.loading = false;
          this.ruangMdl.ruangRight.ready = true;
          this.ruangMdl.ruangLeft.ready = true;
        });
      },
      loadRuangSiswa(id) {
        return new Promise((resolve, reject) => {
          axios({
            method: 'GET',
            url: `${this.$store.state.config.base_url}/panel/md/siswa/ruang/${id}/siswa`,
          }).then((response) => {
            if (!isObject(response.data)) return reject({ response });
            if (response.data.data.ruang.id == 0) {
              response.data.data.ruang.fullname = response.data.data.ruang.nama
            } else {
              let e = response.data.data.ruang;
              response.data.data.ruang.fullname = e.kode + " - " + e.nama;
            }
            resolve(response.data);
          }, (error) => {
            reject(error)
          });
        });
      }, moveSiswaRuang(from, index) {
        if (from == 'right') {
          this.ruangMdl.ruangLeft.siswa.push(this.ruangMdl.ruangRight.siswa[index]);
          this.ruangMdl.ruangRight.siswa.splice(index, 1);
        } else if (from == 'left') {
          this.ruangMdl.ruangRight.siswa.push(this.ruangMdl.ruangLeft.siswa[index]);
          this.ruangMdl.ruangLeft.siswa.splice(index, 1);
        }
      }, moveAllSiswaRuang(from) {
        if (from == 'right') {
          this.ruangMdl.ruangRight.siswa.forEach((v, i) => {
            this.ruangMdl.ruangLeft.siswa.push(v)
          })
          this.ruangMdl.ruangRight.siswa = [];
        } else if (from == 'left') {
          this.ruangMdl.ruangLeft.siswa.forEach((v, i) => {
            this.ruangMdl.ruangRight.siswa.push(v)
          })
          this.ruangMdl.ruangLeft.siswa = [];
        }
      }, modalPlacementRuang(e) {
        if (!this.ruangMdl.instance) {
          this.ruangMdl.instance = new bootstrap.Modal(this.$refs.mdlRuang);
        }
        switch (e) {
          case "hide":
            this.ruangMdl.instance.hide();
            break;
          case "show":
            this.ruangMdl.instance.show();
            break;
          case "toggle":
            this.ruangMdl.instance.toggle();
            break;
          case "dispose":
            this.ruangMdl.instance.dispose();
            break;
        }
      },
      loadKelasConverter() {
        // use promise
        this.kelasMdl.loading = true;
        this.kelasMdl.kelasRight.ready = false;
        this.kelasMdl.kelasLeft.ready = false;
        let leftData = this.loadKelasSiswa(this.kelasMdl.selector.left)
        let rightData = this.loadKelasSiswa(this.kelasMdl.selector.right)
        Promise.all([leftData, rightData]).then(values => {
          values[0].data.siswa.map(v => {
            delete v.email;
            delete v.phone;
            delete v.password_hash;
            return v;
          })
          values[1].data.siswa.map(v => {
            delete v.email;
            delete v.phone;
            delete v.password_hash;
            return v;
          })
          this.kelasMdl.kelasLeft = values[0].data;
          this.kelasMdl.kelasRight = values[1].data;
          this.kelasMdl.loading = false;
          this.kelasMdl.kelasRight.ready = true;
          this.kelasMdl.kelasLeft.ready = true;
        });
      },
      loadKelasSiswa(id) {
        return new Promise((resolve, reject) => {
          axios({
            method: 'GET',
            url: `${this.$store.state.config.base_url}/panel/md/siswa/kelas/${id}/siswa`,
          }).then((response) => {
            if (!isObject(response.data)) return reject({ response });
            if (response.data.data.kelas.id == 0) {
              response.data.data.kelas.fullname = response.data.data.kelas.nama
            } else {
              let e = response.data.data.kelas;
              response.data.data.kelas.fullname = e.kode + " - " + e.nama;
              if (e.kode_tingkat) {
                response.data.data.kelas.fullname += " | " + e.kode_tingkat
              }
              if (e.kode_jurusan) {
                response.data.data.kelas.fullname += " | " + e.kode_jurusan
              }
            }
            resolve(response.data);
          }, (error) => {
            reject(error)
          });
        });
      },
      isInclude(src, text) {
        if (typeof src == 'undefined') return true;
        if (src.length == 0) return true;
        return text.includes(src)
      },
      moveSiswaKelas(from, index) {
        if (from == 'right') {
          this.kelasMdl.kelasLeft.siswa.push(this.kelasMdl.kelasRight.siswa[index]);
          this.kelasMdl.kelasRight.siswa.splice(index, 1);
        } else if (from == 'left') {
          this.kelasMdl.kelasRight.siswa.push(this.kelasMdl.kelasLeft.siswa[index]);
          this.kelasMdl.kelasLeft.siswa.splice(index, 1);
        }
      },
      moveAllSiswaKelas(from) {
        if (from == 'right') {
          this.kelasMdl.kelasRight.siswa.forEach((v, i) => {
            this.kelasMdl.kelasLeft.siswa.push(v)
          })
          this.kelasMdl.kelasRight.siswa = [];
        } else if (from == 'left') {
          this.kelasMdl.kelasLeft.siswa.forEach((v, i) => {
            this.kelasMdl.kelasRight.siswa.push(v)
          })
          this.kelasMdl.kelasLeft.siswa = [];
        }
      },
      modal(e = 'show') {
        if (!this.siswaMdl.instance) {
          this.siswaMdl.instance = new bootstrap.Modal(this.$refs.modal);
        }
        switch (e) {
          case "hide":
            this.siswaMdl.instance.hide();
            break;
          case "show":
            this.siswaMdl.instance.show();
            break;
          case "toggle":
            this.siswaMdl.instance.toggle();
            break;
          case "dispose":
            this.siswaMdl.instance.dispose();
            break;
        }
      },
      modalPlacementKelas(e) {
        if (!this.kelasMdl.instance) {
          this.kelasMdl.instance = new bootstrap.Modal(this.$refs.mdlKelas);
        }
        switch (e) {
          case "hide":
            this.kelasMdl.instance.hide();
            break;
          case "show":
            this.kelasMdl.instance.show();
            break;
          case "toggle":
            this.kelasMdl.instance.toggle();
            break;
          case "dispose":
            this.kelasMdl.instance.dispose();
            break;
        }
      },
      listen_rf(first = false) {
        if (!this.listening) return
        if (first) {

          Swal.fire({
            title: "Silahkan Tempelkan Kartu",
            scrollbarPadding: false,
            allowOutsideClick: false,
            allowEscapeKey: false,
            allowEnterKey: false,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Hentikan',
            html: `
              <div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
              `,
          }).then(async (result) => {
            if (result.isConfirmed) {
              this.listening = false;
              Swal.close();
            }
          });
        }
        axios.get(this.$store.state.config.base_url + '/panel/md/siswa/rfid')
          .then(response => {
            if (response.data.rfid !== '') {
              this.siswaMdl.rfid = response.data.rfid
              this.listening = false
              Swal.close();
            } else {
              setTimeout(this.listen_rf, 500)
            }
          })
          .catch(error => {
            Swal.fire('Gagal', gaem(error), 'error')
            this.listening = false
          })
      },
      confirmChangeData(e) {
        let [file] = this.$refs.PFI.files;
        if (!file) return;
        Swal.fire({
          title: 'Apakah kamu yakin?',
          text: `Berkas "${file.name}" akan di unggah untuk memperbarui data siswa!`,
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Ya, ubah!'
        }).then((result) => {
          if (!result.isConfirmed) return this.$refs.PFI.value;
          this.uploadNewData(file);
        })
      },
      uploadNewData(file) {
        showDismisableLoading();
        let data = new FormData();
        data.append('file', file);
        data.append(this.$store.state.config.csrf.name, this.$store.state.config.csrf.value);
        axios({
          method: 'POST',
          data: data,
          url: `${this.$store.state.config.base_url}/panel/md/siswa/change-data`,
        }).then((response) => {
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          Swal.fire('Success', "Berhasil", 'success');
        }, (error) => {
          return Swal.fire('Gagal', gaem(error), 'error');
        });
      },
      downloadChangeDataTemplate() {
        let url = this.$store.state.config.base_url + '/panel/md/siswa/all?';
        url += `&kelas=${this.changeData.kelas}`;
        url += `&ruang=${this.changeData.ruang}`;
        url += `&agama=${this.changeData.agama}`;
        url += `&status=${this.changeData.status}`;
        showDismisableLoading();
        axios.get(url).then(res => {
          Swal.close();
          let rows = [["No", "Nomor Induk", "Nama", "Kelas", "Jenis Kelamin", "Tempat Lahir", "Tanggal Lahir", "Alamat", "Password", "Status"]];
          res.data.data.forEach((v, i) => {
            rows.push([i + 1, v.nomor_induk, v.nama, v.nama_kelas, v.jenis_kelamin, v.tempat_lahir, v.tanggal_lahir, v.alamat, "", v.status == 1 ? 'aktif' : 'tidak aktif']);
          })
          let csv = "data:text/csv;charset=utf-8," + rows.map(e => e.join(";") + ";").join("\n");
          let link = document.createElement("a");
          link.setAttribute("href", encodeURI(csv));
          link.setAttribute("download", "siswa.csv");
          document.body.appendChild(link); // Required for FF

          link.click(); // This will download the data file named "my_data.cs
          link.remove();
        }).catch(err => {
          Swal.fire('Gagal', gaem(error), 'error')
        });
      }
    },
    watch: {
      siswaURL(v) {
        if (tbl) this.tbl.ajax.url(v).load();
      }
    },
    computed: {
      exampleLinkPhoto() {
        return window.location.href + '/examplePhoto';
      },
      photoBG() {
        let percent = 100 - this.photoMdl.percent;
        let sty = `background-position:0 -${percent}%`;
        return sty;
      },
      tingkat() {
        let data = [];
        this.kelas.raw.forEach(elem => {
          if (!elem.tingkat_id) return;
          if (data.findIndex(v => v.value == elem.tingkat_id) == -1) {
            data.push({ value: elem.tingkat_id, text: elem.kode_tingkat })
          }
        })
        return data;
      },
      siswaURL() {
        let url = this.$store.state.config.base_url + '/panel/md/siswa/all?';
        url += `&kelas=${this.filter.kelas}`;
        url += `&ruang=${this.filter.ruang}`;
        url += `&agama=${this.filter.agama}`;
        url += `&status=${this.filter.status}`;
        return url;
      },
    }
  }
})();
