var VPClearRespond = (function () {
  let template = `
    <div class="modal fade" :ref="mdl.ref"  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">Bersihkan Jawaban Ujian</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">
                <div v-show="errorMsg" class="alert custom-alert-2 alert-danger alert-dismissible fade show" role="alert"><i class="bi bi-x-circle"></i>{{errorMsg}}
                    <button class="btn btn-close btn-close-white position-relative p-1 ms-auto" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <div class="row">
                  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                    <span>PG Biasa</span>
                    <div class="form-check form-switch">
                      <input class="form-check-input" v-model="pg_common" type="checkbox" >
                      <label @click="pg_common=!pg_common" class="form-check-label">{{pg_common?'Bersihkan':'Simpan'}}</label>
                    </div>
                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                    <span>PG Multi</span>
                    <div class="form-check form-switch">
                      <input class="form-check-input" v-model="pg_multi" type="checkbox" >
                      <label @click="pg_multi=!pg_multi" class="form-check-label">{{pg_multi?'Bersihkan':'Simpan'}}</label>
                    </div>
                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                    <span>PG Pasangan</span>
                    <div class="form-check form-switch">
                      <input class="form-check-input" v-model="pg_couple" type="checkbox" >
                      <label @click="pg_couple=!pg_couple" class="form-check-label">{{pg_couple?'Bersihkan':'Simpan'}}</label>
                    </div>
                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                    <span>PG True False</span>
                    <div class="form-check form-switch">
                      <input class="form-check-input" v-model="pg_tf" type="checkbox" >
                      <label @click="pg_tf=!pg_tf" class="form-check-label">{{pg_tf?'Bersihkan':'Simpan'}}</label>
                    </div>
                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                    <span>Isian Singkat</span>
                    <div class="form-check form-switch">
                      <input class="form-check-input" v-model="shortentry" type="checkbox" >
                      <label @click="shortentry=!shortentry" class="form-check-label">{{shortentry?'Bersihkan':'Simpan'}}</label>
                    </div>
                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                    <span>Esai</span>
                    <div class="form-check form-switch">
                      <input class="form-check-input" v-model="esai" type="checkbox" >
                      <label @click="esai=!esai" class="form-check-label">{{esai?'Bersihkan':'Simpan'}}</label>
                    </div>
                  </div>
                </div>
                  <template v-if="query">
                  Jadwal {{filteredJadwal.length}} dari {{jadwalUjian.length}} 
                  </template>
                  <template v-else>
                  Jadwal : {{filteredJadwal.length}}
                  </template>
                    <div class="input-style-1 my-1">
                        <input type="text" v-model="query" placeholder="Cari Jadwal">
                    </div>
                    <div class="siswa-list overflow-auto">
                      <template v-if="filteredJadwal.length">
                        <div v-for="j in filteredJadwal" :title="j.selected?'Jadwal Sudah Dipilih':'Pilih Jadwal'" @click="j.selected=!j.selected" :class="j.selected?'text-white bg-primary':''" class="border border-light shadow-sm rounded px-1 siswa-item" style="cursor:pointer;">{{j.nama}}</div>
                      </template>
                      <template v-else>
                        <div class="text-center my-2">
                          <span v-if="loading" class="text-bold">Sedang Memuat...</span>
                          <span v-else class="text-bold">Tidak Ada Jadwal</span>
                        </div>
                      </template>
                    </div>
                </div>

            </div>
            
            <div class="modal-footer px-0">
                <button v-if="jadwalUjian.filter(v=>v.selected).length>0" type="button" @click="simpanWaktu" :disabled="loading" class="main-btn btn-sm success-btn btn-hover">
                    <template v-if="loading"> 
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    </template>
                    <template v-else>
                        Simpan
                    </template>
                </button>
            </div>

          </div>
        </div>
    </div>`;
  return {
    name: "clear-respond",
    template: template,
    data() {
      return {
        errorMsg: '',
        mdl: {
          ref: 'modal',
        },

        loading: false,
        query: '',
        jadwal: [],
        pg_common: false,
        pg_multi: false,
        pg_couple: false,
        pg_tf: false,
        shortentry: false,
        esai: false,
      }
    },
    mounted() {
      this.eventListener();
    },
    methods: {
      init(refresh = false) {
        if (refresh || this.jadwal.length < 1) this.loadJadwal();
        this.modal('show');
      },
      loadJadwal() {
        this.loading = true;
        axios({
          method: 'get',
          url: window.location.href + "/all",
        }).then((response) => {
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          this.jadwal = response.data.data
        }, (error) => {
          if (typeof error.response == 'undefined') return;
          Swal.fire('Gagal', gaem(error), 'error')
        }).finally(() => this.loading = false);
      },
      simpanWaktu() {
        if (this.loading) return;
        let data = {
          [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
          id: this.jadwalUjian.filter(v => v.selected).map(v => v.id),
          pg_common: this.pg_common,
          pg_multi: this.pg_multi,
          pg_couple: this.pg_couple,
          pg_tf: this.pg_tf,
          shortentry: this.shortentry,
          esai: this.esai,
        }
        this.errorMsg = '';
        this.loading = true;
        axios({
          method: 'put',
          data,
          url: this.$store.state.config.base_url + "/panel/ujian/jadwal/clear/respond",
        }).then((response) => {
          if (!isObject(response.data)) return Swal.fire('Gagal', gaem({ response }, response.data), 'error');
          return Swal.fire('Berhasil', 'Data berhasil dihapus', 'success');
        }, (error) => {
          if (typeof error.response == 'undefined') return;
          Swal.fire('Gagal', gaem(error), 'error')
        }).finally(() => this.loading = false);
      },
      eventListener() {
        this.$refs[this.mdl.ref].addEventListener('hide.bs.modal', (e) => {
          this.loading = false;
        })
      },
      modal(e = 'show') {
        if (!this.mdl.instance) {
          this.mdl.instance = new bootstrap.Modal(this.$refs[this.mdl.ref]);
        }
        switch (e) {
          case "hide":
            this.mdl.instance.hide();
            break;
          case "show":
            this.mdl.instance.show();
            break;
          case "toggle":
            this.mdl.instance.toggle();
            break;
          case "dispose":
            this.mdl.instance.dispose();
            break;
        }
      }
    },
    computed: {
      filteredJadwal() {
        if (!this.query) return this.jadwalUjian;
        return this.jadwalUjian.filter(v => {
          return v.nama_draft.toLowerCase().includes(this.query.toLowerCase()) || v.nama.toLowerCase().includes(this.query.toLowerCase());
        })
      },
      jadwalUjian() {
        return this.jadwal.map(v => {
          v.selected = false;
          v.nama = `${v.nama} - ${v.nama_draft} - `;
          let sdt = mm({ unix: v.startDateTime });
          let edt = mm({ unix: v.endDateTime });
          v.startDate = sdt.format('YYYY-MM-DD');
          v.startTime = sdt.format('HH:mm');
          v.endDate = edt.format('YYYY-MM-DD');
          v.endTime = edt.format('HH:mm');
          if (v.startDate == v.endDate) {
            v.nama += `${v.startDate} ${v.startTime} s/d ${v.endTime}`;
          } else {
            v.nama += `${v.startDate} ${v.startTime} s/d ${v.endDate}  ${v.endTime}`;
          }
          return v;
        })
      },
    }
  }
})();
