var VPRuang = (function () {
    let vp_template = `
    <div class="card-style">
  <div style="text-align:right">
    <button title="Tambah Ruang Ujian" 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>Kode</th>
                    <th>Nama</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">{{mdl.id?'Ubah':'Tambah'}} Ruang Ujian</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="mdl.id?edit():add()">
                  <div class="input-style-1">
                      <label>Kode Ruang</label>
                      <input required v-model="mdl.kode" type="text" placeholder="Kode Ruang">
                  </div>
                  <div class="input-style-1">
                      <label>Nama Ruang</label>
                      <input required  v-model="mdl.nama" type="text" placeholder="Nama Ruang">
                  </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>`
    return {
        name: "ruang",
        template: vp_template,

        data() {
            return {
                errorMessage: '',
                mdl: {},
                roles: [],
            }
        },
        mounted() {
            this.renderTable();
            this.eventListener();
        },
        methods: {
            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.$store.state.config.base_url + '/panel/md/ruang-ujian/all',
                        dataSrc: 'data',
                        beforeSend: function (request) {
                            request.setRequestHeader("X-Requested-With", 'XMLHttpRequest');
                        }
                    },
                    columnDefs: [
                        {
                            targets: 2, visible: true,
                            render: function (data, type, row) {
                                let btn = `<div class="d-flex justify-content-evenly">`;
                                btn += `&nbsp;<button title="Ubah Ruang Ujian" class="btn btn-primary btn-sm rounded-md" id="trigger-edit" data-id="${data.id}"><i id="trigger-edit" data-id="${data.id}" class='lni lni-pencil-alt'></i></button>`;
                                btn += `&nbsp;<button title="Hapus Ruang Ujian" class="btn btn-danger btn-sm rounded-md" id="trigger-delete" data-id="${data.id}"><i id="trigger-delete" data-id="${data.id}" class='lni lni-trash-can'></i></button>`;
                                btn += `</div>`;
                                return btn;
                            },
                        }
                    ],
                    columns: [
                        { data: 'kode' },
                        { data: 'nama' },
                        { 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)
                    }
                });
                this.$refs.modal.addEventListener('hide.bs.modal', (e) => {
                    let dummymdl = {};
                    for (let key in this.mdl) {
                        if (!this.mdl.hasOwnProperty(key)) continue;
                        dummymdl[key] = null;
                    }
                    this.mdl = dummymdl;
                })
            },
            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/ruang-ujian/delete/" + id,
                        }).then((response) => {
                            Swal.close();
                            if (!isObject(response.data)) return Swal.fire('Error', 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/ruang-ujian/detail/" + id,
                }).then((response) => {
                    Swal.close();
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.mdl.id = response.data.data.id;
                    this.mdl.kode = response.data.data.kode;
                    this.mdl.nama = response.data.data.nama;
                    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,
                    kode: this.mdl.kode,
                    nama: this.mdl.nama,
                };
                this.mdl.loading = true;
                let url = this.$store.state.config.base_url + "/panel/md/ruang-ujian/add"
                axios({
                    method: 'POST',
                    data: data,
                    url: url,
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', 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.mdl.loading = false);
            },
            edit() {
                let data = {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                    kode: this.mdl.kode,
                    nama: this.mdl.nama,
                };
                this.mdl.loading = true;
                let url = this.$store.state.config.base_url + "/panel/md/ruang-ujian/edit/" + this.mdl.id
                axios({
                    method: 'PATCH',
                    data: data,
                    url: url,
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', 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.mdl.loading = false);
            },
            modal(e = 'show') {
                if (!this.mdl.instance) {
                    this.mdl.instance = new bootstrap.Modal(this.$refs.modal);
                }
                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;
                }
            }
        },
    }
})();
