var VPBerita = (function () {
    let vp_template = `
    
  <div class="card-style">
  <div style="text-align:right">
    <button  class="main-btn btn-sm primary-btn rounded-md btn-hover" @click="modal('show')">
        <i class="lni lni-plus"></i>
    </button>
    &nbsp;
    <button class="main-btn btn-sm success-btn rounded-md btn-hover" @click="$refs[grid.ref].reload()" >
        <i class="lni lni-reload"></i>
    </button>
  </div>

  <div class="table-responsive">
   <grid :id="grid.id" :limits="true" :url="grid.url" :ref="grid.ref" :columns="grid.columns" :ondataload="ondataload"></grid>
  </div>
</div>

<div class="modal fade" :ref="mdl.ref"  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">Berita Acara</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="add()">
          <div class="my-3">
            <label for="jadwal">Jadwal Ujian</label>
            <tomselect id="jadwal" :options="mdl.jadwal.options" :value="mdl.jadwal.value" @changed="mdl.jadwal.value=$event" placeholder="Pilih Jadwal"  eltype="select" style="width: 100%;">
            </tomselect>
          </div>
          <div class="info my-2" v-if="jadwal">
            <h5>Detail Jadwal</h5>
            <div>
              Ruang <span> : {{jadwal.kode_ruang}} - {{jadwal.nama_ruang}}</span>
            </div>
            <div>
                Waktu  : 
                <span v-if="jadwal.startDate==jadwal.endDate">{{jadwal.startDate}} {{jadwal.startTime}} s/d {{jadwal.endTime}}</span>
                <span v-else>{{jadwal.startDate}} {{jadwal.startTime}} s/d {{jadwal.endDate}} {{jadwal.endTime}}</span>
            </div>
            <div>
                Hadir : <span>{{jadwal.siswa_hadir}} Peserta</span>
            </div>
            <div>
                Tidak Hadir : <span>{{jadwal.tidak_hadir}} Peserta</span>
            </div>
            <div>
                Nomor Induk Pengawas : <span>{{jadwal.nomor_induk_pengawas}}</span>
            </div>
            <div>
                Nama Pengawas : <span>{{jadwal.nama_pengawas}}</span>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <div class="input-style-1">
                <label>Nomor Induk Proktor</label>
                <input required v-model="mdl.proktor.nomor_induk" type="text" placeholder="Nomor Induk Proktor">
              </div>
            </div>
            <div class="col-6">
              <div class="input-style-1">
                  <label>Nama Proktor</label>
                  <input required v-model="mdl.proktor.nama" type="text" placeholder="Nama Proktor">
              </div>
              </div>
          </div>
          <div class="input-style-1">
              <label>Catatan</label>
              <textarea v-model="mdl.catatan"  placeholder="Catatan"></textarea>
          </div>

          <div class="action d-flex flex-wrap justify-content-end">
            <button type="submit" :disabled="mdl.loading" class="main-btn btn-sm primary-btn btn-hover">

              <template v-if="mdl.loading"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              </template>
              <template v-else>
                {{mdl.id?'Simpan':'Tambah'}}
              </template>
            </button>
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
    `;
    let gridConf = {
        ready: false,
        data: [],
        id: "berita-table",
        ref: "berita-table",
        url: window.location.href + "/all",
        columns: [
            {
                id: "id", name: "Mata Pelajaran",
                formatter: (_, row) => {
                    let k = `<span class="badge bg-primary">${row.cells[row.cells.length - 1].data}</span>`;
                    k += `<span class="badge bg-danger">${row.cells[row.cells.length - 2].data}</span>`;
                    return gridjs.html(k);
                }
            },
            {
                id: "kelas", name: "Kelas",
                formatter: (_, row) => {
                    let k = "";
                    (row.cells[1].data || '').split(',').forEach(v => {
                        k += `<span class="badge bg-primary mx-1">${v}</span>`;
                    })
                    return gridjs.html(k);
                }
            },
            {
                id: "nama_ruang", name: "Ruang",
                formatter: (_, row) => {
                    let k = `<span class="badge bg-primary">${row.cells[2].data}</span>`;
                    return gridjs.html(k);
                }
            },
            {
                id: "siswa_hadir", name: "Hadir",
                formatter: (_, row) => {
                    let k = `<span class="badge bg-primary">${row.cells[3].data}</span>`;
                    return gridjs.html(k);
                }
            },
            {
                id: "tidak_hadir", name: "Tidak Hadir",
                formatter: (_, row) => {
                    let k = `<span class="badge bg-primary">${row.cells[4].data}</span>`;
                    return gridjs.html(k);
                }
            },
            {
                id: "startTime",
                name: 'Mulai',
                formatter: (_, row) => {
                    let k = "";
                    if (row.cells[row.cells.length - 3].data != row.cells[row.cells.length - 4].data) {
                        k += `${row.cells[row.cells.length - 4].data} `;
                    }
                    k += `${row.cells[5].data} `;
                    return gridjs.html(k);
                },
            },
            {
                id: "endTime",
                name: 'Selesai',
                formatter: (_, row) => {
                    let k = "";
                    if (row.cells[row.cells.length - 3].data != row.cells[row.cells.length - 4].data) {
                        k += `${row.cells[row.cells.length - 3].data} `;
                    }
                    k += `${row.cells[6].data} `;
                    return gridjs.html(k);
                },
            },
            {
                id: 'nama_pengawas',
                name: 'Pengawas',
            },
            {
                name: 'Aksi',
                formatter: (_, row) => {
                    let btn = "";
                    btn += "<div class='d-flex'>";
                    btn += `<button class="btn btn-primary rounded-md" onclick="window.open('${window.location.href}/print/${row.cells[0].data}')"><i class='lni lni-printer'></i></button>`;
                    btn += `&nbsp;<button class="btn btn-danger rounded-md" id="trigger-delete" data-id="${row.cells[0].data}"><i id="trigger-delete" data-id="${row.cells[0].data}" class='lni lni-trash-can'></i></button>`;
                    btn += "</div>";
                    return gridjs.html(btn);
                }
            },
            {
                id: "startDate",
                hidden: true
            },
            {
                id: "endDate",
                hidden: true
            },
            {
                id: "kode_jenis",
                hidden: true
            },
            {
                id: "nama_mapel",
                hidden: true
            },
        ]
    };
    return {
        name: "berita-acara",
        template: vp_template,
        data() {
            return {
                grid: gridConf,

                mdl: {
                    ref: "modal",
                    jadwal: {
                        value: null,
                        options: [],
                        raw: [],
                    },
                    catatan: '',
                    proktor: {
                        nama: '',
                        nomor_induk: ''
                    }
                },
            }
        },
        mounted() {
            this.loadJadwal();
            this.eventListener();
        },
        methods: {
            eventListener() {
                document.addEventListener('click', (e) => {
                    if (e.target && e.target.id == 'trigger-delete') {
                        this.delete(e.target.dataset.id)
                    }
                });
            },
            loadJadwal() {
                axios({
                    url: this.$store.state.config.base_url + `/panel/ujian/jadwal/all`,
                    method: 'get',
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.mdl.jadwal.raw = response.data.data;
                    this.mdl.jadwal.options = response.data.data.map((v, i) => {
                        if (i == 0) this.mdl.jadwal.value = v.id;
                        return { value: v.id, text: `${v.nama_draft} - ${v.kode_jenis} - ${v.nama_ruang}` };
                    })
                }, (error) => {
                    Swal.fire('Error', gaem(error), 'error')
                });
            },
            add() {
                let data = {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                    jadwal_id: this.mdl.jadwal.value,
                    nomor_induk_proktor: this.mdl.proktor.nomor_induk,
                    nama_proktor: this.mdl.proktor.nama,
                    catatan: this.mdl.catatan,
                }
                showDismisableLoading();
                this.mdl.loading = true;
                axios({
                    method: 'POST',
                    data: data,
                    url: window.location.href + "/add",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Berhasil', response.data.message, 'success')
                    this.modal("hide");
                    this.$refs[this.grid.ref].reload();
                }, (error) => {
                    if (typeof error.response == 'undefined') return;
                    Swal.fire('Error', gaem(error), 'error')
                }).finally(() => this.mdl.loading = false);
            },
            delete(id) {
                SwalDelete({
                    confirmed: () => {
                        showDismisableLoading();
                        axios({
                            method: 'delete',
                            data: { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value, },
                            url: window.location.href + "/delete/" + id,
                        }).then((response) => {
                            Swal.close();
                            if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                            this.$refs[this.grid.ref].reload();
                            Swal.fire(response.data.deleted ? 'Berhasil' : 'Gagal', response.data.message, response.data.deleted ? 'success' : 'error')
                        }, (error) => {
                            Swal.fire('Error', gaem(error), 'error')
                        });
                    }
                });
            },
            ondataload(data) {
                this.grid.data = data.data.map(v => {
                    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');
                    return v;
                });
                this.grid.ready = true;
                return data.data;
            },
            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: {
            jadwal() {
                let jadwal = this.mdl.jadwal.raw.find(v => v.id == this.mdl.jadwal.value);
                if (!jadwal) return null;
                let sdt = mm({ unix: jadwal.startDateTime });
                let edt = mm({ unix: jadwal.endDateTime });
                jadwal.startDate = sdt.format('YYYY-MM-DD');
                jadwal.startTime = sdt.format('HH:mm');
                jadwal.endDate = edt.format('YYYY-MM-DD');
                jadwal.endTime = edt.format('HH:mm');
                return jadwal;
            }
        }
    }
})();
