var VPLeggerNilai = (function () {
    let vp_template = `
    <div class="card-style">
        <div style="text-align:right">
            <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>Tingkat</th>
                        <th>Jurusan</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
        <div class="modal fade" ref="modalExports"  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">Export Nilai Kelas</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="exportNilai">
                  <div class="my-4">
                    <label>Tahun</label>
                    <tomselect id="tahun"  :options="tahun.options" :value="tahun.value" @changed="tahun.value=$event" placeholder="Pilih Tahun Pelajaran"  eltype="select" style="width: 100%;">
                        </tomselect>
                  </div>
                  <div class="my-4">
                    <label>Jenis Ujian</label>
                    <tomselect id="jenis-ujian"  :options="jenis.options" :value="jenis.value" @changed="jenis.value=$event" placeholder="Pilih Jenis Ujian"  eltype="select" style="width: 100%;">
                    </tomselect>
                  </div>
                  <div class="action d-flex flex-wrap justify-content-end">
                        <button @click="preview" type="button" :disabled="!kelas_id||!tahun.value||!jenis.value||loading" class="main-btn btn-sm primary-btn btn-hover">
                            <template v-if="loading"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            </template>
                            <template v-else>
                                Preview
                            </template>
                        </button>
                        &nbsp;
                        <button type="submit" :disabled="!kelas_id||!tahun.value||!jenis.value" class="main-btn btn-sm primary-btn btn-hover">
                            Export
                        </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal fade" ref="modalPreviews"  tabindex="-1" aria-hidden="true">
          <div class="modal-dialog modal-fullscreen modal-dialog-centered">
            <div class="modal-content card-style">
              <div class="modal-header px-0 border-0">
                <h5 class="text-bold">Preview Nilai Kelas</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 v-if="previewData.headerTable.length>0" class="card p-3 my-1">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped table-bordered">
                                <thead>
                                    <tr>
                                    <th v-for="(ht,i) in previewData.headerTable" style="font-size:13px" class="text-center" >{{ht}}</th>
                                    </tr>
                                    <!-- end table row-->
                                </thead>
                                <tbody>
                                    <tr v-for="dt in previewData.dataTable">
                                        <td v-for="(sdt,i) in dt" class="m-0 p-1" style="font-size:13px" ><div class="align-self-center">{{sdt}}</div></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="action d-flex flex-wrap justify-content-end">
                        <button @click="exportNilai" type="button" :disabled="!kelas_id||!tahun.value||!jenis.value" class="main-btn btn-sm primary-btn btn-hover">
                            Export
                        </button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        `
    return {
        name: "legger-nilai",
        template: vp_template,
        data() {
            return {
                errMsg: '',
                kelas_id: null,
                loading: false,
                modalPreviews: null,
                modalExports: null,
                tahun: {
                    value: '',
                    options: []
                },
                jenis: {
                    value: '',
                    options: []
                },
                previewData: {
                    headersText: [],
                    headerTable: [],
                    dataTable: []
                },
            }
        },
        mounted() {
            this.renderTable();
            this.loadTahunPelajaran();
            this.loadJenisUjian();
            this.eventListener();
        },
        computed: {
            parsedURL() {
                return this.$store.state.config.base_url + "/panel/ujian/legger-nilai/export?kelas=" + this.kelas_id + "&tahun-pelajaran=" + this.tahun.value + "&jenis-ujian=" + this.jenis.value;
            }
        },
        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/ujian/legger-nilai/all',
                        dataSrc: (data) => {
                            this.data = data.data;
                            return data.data
                        },
                        beforeSend: function (request) {
                            request.setRequestHeader("X-Requested-With", 'XMLHttpRequest');
                        }
                    },
                    columnDefs: [
                        {
                            target: 3, visible: true, render: function (data, type, row) {
                                if (data.kode_jurusan == null && data.nama_jurusan == null) return `<span class="badge bg-primary">Tidak Ada</span>`;
                                if (data.kode_jurusan == null) data.kode_jurusan = "Tidak Ada";
                                if (data.nama_jurusan == null) data.nama_jurusan = "Tidak Ada";
                                return `<span class="badge bg-primary">${data.kode_jurusan} - ${data.nama_jurusan}</span>`;
                            }
                        },
                        {
                            target: 4, visible: true,
                            render: function (data, type, row) {
                                let btn = `<div class="d-flex justify-content-evenly">`;
                                btn += `<button title="Export Nilai" class="btn btn-success rounded-md" id="export-nilai" data-id="${data.id}"><i id="export-nilai" data-id="${data.id}" class="fas fa-file-excel"></i></button>`;
                                btn += '</div>';
                                return btn;
                            }
                        }
                    ],
                    columns: [
                        { data: 'kode' },
                        { data: 'nama' },
                        { data: 'kode_tingkat' },
                        { data: null },
                        { data: null },
                    ]
                });
            },
            eventListener() {
                document.addEventListener('click', (e) => {
                    if (e.target && e.target.id == 'export-nilai') {
                        this.kelas_id = e.target.dataset.id;
                        this.modalExport('show');
                    }
                });
                this.$refs.modalExports.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;
                })
                this.$refs.modalPreviews.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;
                })
            },
            exportNilai() {
                if (!this.kelas_id || !this.tahun.value || !this.jenis.value) return;
                window.open(this.parsedURL, '_blank');
            },
            preview() {
                showDismisableLoading();
                this.loading = true;
                this.modalExport('close');
                axios({
                    method: 'get',
                    url: this.parsedURL.replace('export', 'preview'),
                }).then((response) => {
                    Swal.close()
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.previewData.headerTable = response.data.data.find((v, i) => i == 3);
                    this.previewData.dataTable = response.data.data.filter((v, i) => i > 3);
                    this.modalPreview('show');
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Mengambil Data Rekap'), 'error')
                }).finally(() => this.loading = false);
            },
            loadTahunPelajaran() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + "/panel/ujian/legger-nilai/tahun-pelajaran",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.tahun.options = response.data.data.map(e => {
                        return { value: e.id, text: `${e.kode} - ${e.nama} - ${e.semester}` }
                    });
                }, (error) => {
                });
            },
            loadJenisUjian() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + "/panel/ujian/legger-nilai/jenis-ujian",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.jenis.options = response.data.data.map(e => {
                        return { value: e.id, text: e.nama }
                    });
                }, (error) => {
                });
            },
            modalPreview(e = 'show') {
                if (!this.modalPreviews) {
                    this.modalPreviews = new bootstrap.Modal(this.$refs.modalPreviews);
                }
                switch (e) {
                    case "hide":
                        this.modalPreviews.hide();
                        break;
                    case "show":
                        this.modalPreviews.show();
                        break;
                    case "toggle":
                        this.modalPreviews.toggle();
                        break;
                    case "dispose":
                        this.modalPreviews.dispose();
                        break;
                }
            },
            modalExport(e = 'show') {
                if (!this.modalExports) {
                    this.modalExports = new bootstrap.Modal(this.$refs.modalExports);
                }
                switch (e) {
                    case "hide":
                        this.modalExports.hide();
                        break;
                    case "show":
                        this.modalExports.show();
                        break;
                    case "toggle":
                        this.modalExports.toggle();
                        break;
                    case "dispose":
                        this.modalExports.dispose();
                        break;
                }
            }
        },
    }
})();
