var VPRekapBelajar = (function () {
    let vp_template = `
    <div class="card p-3 my-1">
        <h3>Rekap Belajar Siswa</h3>
            <div class="row mt-4">
                <div class="col-lg-4" >
                     <div class="input-style-2">
                        <label>Tahun Pelajaran</label>
                        <tomselect id="rekap-tahun" :options="thn.options" :value="thn.value" @changed="thn.value=$event" placeholder="Pilih Tahun Pelajaran"  eltype="select" style="width: 100%;">
                        </tomselect>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="input-style-2">
                        <label>Tanggal Awal</label>
                        <input required type="date" min="1978" v-model="startDate" placeholder="Tanggal Awal">
                        <span class="icon">
                            <i class="far fa-calendar-alt">
                            </i>
                        </span>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="input-style-2">
                        <label>Tanggal Akhir</label>
                        <input required type="date" v-model="endDate" placeholder="Tanggal Akhir">
                        <span class="icon">
                            <i class="far fa-calendar-alt">
                            </i>
                        </span>
                    </div>
                </div>
            </div>   
            <div class="row">
                <div class="col-lg-6" >
                    <div class="input-style-2">
                        <label>Mata Pelajaran</label>
                        <tomselect id="rekap-mapel" :options="mapel.options" :value="mapel.value" @changed="mapel.value=$event" placeholder="Pilih Mata Pelajaran"  eltype="select" style="width: 100%;">
                        </tomselect>
                    </div> 
                </div>
                <div class="col-lg-6" >
                    <div class="input-style-2">
                        <label>Kelas</label>
                        <tomselect id="rekap-kelas" :options="kelas.options" :value="kelas.value" @changed="kelas.value=$event" placeholder="Pilih Kelas"  eltype="select" style="width: 100%;">
                        </tomselect>
                    </div>
                </div>
            </div>
            <div class="action d-flex flex-wrap justify-content-end my-1">
            &nbsp;<a v-if="downloadAble" @click="preview" class="main-btn btn-sm primary-btn btn-hover" href="javascript:void(0)">Preview</a>
            &nbsp;<a v-if="downloadAble" download class="main-btn btn-sm success-btn btn-hover" :href="downloadAble?urlRekap:''">Rekap</a>
            </div>
    </div>

    <div v-if="rekapData.headerTable.length>0" class="card p-3 my-1">
        <h3 v-for="h in rekapData.headersText">{{h}}</h3>
        <div class="table-responsive">
            <table class="table table-hover table-striped table-bordered">
            <thead>
                <tr>
                  <th v-for="(ht,i) in rekapData.headerTable" class="text-center"><h6>{{ht}}</h6></th>
                </tr>
                <!-- end table row-->
                </thead>
                <tbody>
                <tr v-for="dt in rekapData.dataTable">
                  <td v-for="(sdt,i) in dt" :class="i!=2?'text-center':'px-1'" ><h6>{{sdt}}</h6></td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
    `;
    return {
        template: vp_template,
        name: "rekap-belajar",
        data() {
            return {
                startDate: '',
                endDate: '',
                thn: {
                    value: null,
                    options: [],
                    raw: []
                },
                mapel: {
                    value: null,
                    options: [],
                    raw: []
                },
                kelas: {
                    value: null,
                    options: [],
                    raw: []
                },
                rekapData: {
                    headersText: [],
                    headerTable: [],
                    dataTable: []
                },
            }
        },
        mounted() {
            this.loadTahun();
            this.loadMapel();
            this.loadKelas();
        },
        methods: {
            loadTahun() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + `/panel/e-learning/tahun-pelajaran/all`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.thn.options = response.data.data.map((v, i) => {
                        if (i == 0) this.thn.value = v.id;
                        return { value: v.id, text: `${v.kode} - ${v.nama} - ${v.semester} | ${v.is_active == 1 ? 'Aktif' : 'Tidak Aktif'}` }
                    });
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Mengambil Data Tahun Pelajaran'), 'error')
                });
            },
            loadKelas() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + `/panel/e-learning/rekap/siswa/kelas`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.kelas.options = response.data.data.map((e, i) => {
                        if (i == 0) this.kelas.value = 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: e.id, text: k }
                    });
                }, (error) => {
                });
            },
            loadMapel() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + `/panel/e-learning/rekap/siswa/mapel`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.mapel.raw = response.data.data;
                    this.mapel.options = response.data.data.map((v, i) => {
                        if (i == 0) this.mapel.value = v.id;
                        return { value: v.id, text: `${v.kode} - ${v.nama}` };
                    })
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Mengambil Data Mata Pelajaran'), 'error')
                });
            },
            preview() {
                showDismisableLoading();
                axios({
                    method: 'get',
                    url: this.urlPreview
                }).then((response) => {
                    Swal.close()
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.rekapData.headersText = response.data.absensi.filter((v, i) => i < 5).map(v => v[0]);
                    this.rekapData.headerTable = response.data.absensi.filter((v, i) => i == 5)[0];
                    this.rekapData.dataTable = response.data.absensi.filter((v, i) => i > 5);
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Mengambil Data Rekap'), 'error')
                });
            },
        },
        computed: {
            downloadAble() {
                return this.thn.value && this.startDate && this.endDate && this.kelas.value && this.mapel.value;
            },
            urlPreview() {
                let sdtm = moment(this.startDate).hours(0).minutes(0).seconds(0).unix();
                let edtm = moment(this.endDate).hours(23).minutes(59).seconds(59).unix();
                return `${window.location.href}/preview?startDate=${sdtm}&endDate=${edtm}&mapel_id=${this.mapel.value}&kelas_id=${this.kelas.value}&tahun_id=${this.thn.value}`;
            },
            urlRekap() {
                let sdtm = moment(this.startDate).hours(0).minutes(0).seconds(0).unix();
                let edtm = moment(this.endDate).hours(23).minutes(59).seconds(59).unix();
                return `${window.location.href}/export?startDate=${sdtm}&endDate=${edtm}&mapel_id=${this.mapel.value}&kelas_id=${this.kelas.value}&tahun_id=${this.thn.value}`;
            },
        }
    }
})();
