var VPJMAbsensi = (function () {
    let vp_template = `
    <div class="d-flex justify-content-end">
        <div class="input-style-1">
            <input type="text" v-model="query" placeholder="Cari">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-sm-4">
            <div class="card p-2 mb-1">
                <small style="cursor:pointer" @click="query='Belum Hadir'">Belum Hadir <small class="badge bg-danger">{{absensi.filter(v=>v.keterangan==0).length}}</small></small> 
            </div>
        </div>
        <div class="col-md-2 col-sm-4">
            <div class="card p-2 mb-1">
                <small  style="cursor:pointer" @click="query='Hadir'">Hadir <small class="badge bg-success">{{absensi.filter(v=>v.keterangan==1).length}}</small></small> 
            </div>
        </div>
        <div class="col-md-2 col-sm-4">
            <div class="card p-2 mb-1">
                <small  style="cursor:pointer" @click="query='Alpa'">Alpa <small class="badge bg-warning">{{absensi.filter(v=>v.keterangan==2).length}}</small></small> 
            </div>
        </div>
        <div class="col-md-2 col-sm-4">
            <div class="card p-2 mb-1">
                <small  style="cursor:pointer" @click="query='Sakit'">Sakit <small class="badge bg-secondary">{{absensi.filter(v=>v.keterangan==3).length}}</small></small> 
            </div>
        </div>
        <div class="col-md-2 col-sm-4">
            <div class="card p-2 mb-1">
                <small  style="cursor:pointer" @click="query='Izin'">Izin <small class="badge bg-info">{{absensi.filter(v=>v.keterangan==4).length}}</small></small> 
            </div>
        </div>
        <div v-if="absensi.filter(v=>v.keterangan==1).length!=absensi.length" class="col-md-2 col-sm-4">
            <div class="card p-2 mb-1 ">
                <small style="cursor:pointer" @click="allIn">Semua Masuk</small> 
            </div>
        </div>
    </div>
    <div class="card">
        <div class="d-flex bg-success text-white ">
            <div class="p-2 my-auto text-center" style="min-width:50px">#</div>
            <div class="p-2 ">Siswa/Siswi</div>
            <div class="ms-auto p-2 px-5">Status</div>
        </div>
        <div v-if="sortedAbsensi.length<=0" class="text-center my-3">
            <strong>Tidak Ada Data</strong>
        </div>
        <template v-for="(a,i) in sortedAbsensi">
            <div class="d-flex">
                <div class="p-2 my-auto text-center" style="min-width:50px">{{i+1}}</div>
                <div class="p-2 "><span>{{a.nama}}</span><br><small>{{a.nomor_induk}}</small></div>
                <div class="ms-auto p-2 ">
                    <div class="select-style-1 m-0">
                        <div class="select-position">
                        <select style="margin-right:25px" @change="update(a.siswa_id,a.keterangan)" v-model="a.keterangan">
                            <option value="0">Belum Hadir</option>
                            <option value="1">Hadir</option>
                            <option value="2">Alpa</option>
                            <option value="3">Sakit</option>
                            <option value="4">Izin</option>
                        </select>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="m-0">
        </template>
    </div>
    `;
    return {
        name: "jadwal-absensi",
        template: vp_template,

        data() {
            return {
                query: '',

                absensi: [],
            }
        },
        mounted() {

            this.loadAbsensi();
        },
        methods: {
            loadAbsensi() {
                axios({
                    method: 'get',
                    url: window.location.href + "/absensi",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.absensi = response.data;
                }, (error) => {

                    return Swal.fire('Error', gaem(error, "Terjadi Kesalahan Saat Memuat Data Presensi"), 'error')
                });
            },
            update(id, ket) {
                axios({
                    method: 'patch',
                    data: {
                        [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                        'siswa_id': id,
                        'keterangan': ket,
                    },
                    url: window.location.href + "/absensi",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');

                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Update Data Presensi'), 'error')
                });
            },
            allIn() {
                showDismisableLoading();
                axios({
                    method: 'put',
                    data: { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value },
                    url: window.location.href + "/absensi",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.loadAbsensi();
                    Swal.fire('Berhasil', 'Berhasil Update Presensi', 'success')
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Update Data Presensi'), 'error')
                });
            }
        },
        computed: {
            sortedAbsensi() {
                if (this.query.length <= 0) return this.absensi;
                let q = this.query.toLowerCase();
                return this.absensi.filter(v => {
                    if (v.nomor_induk.includes(q)) return true;
                    if (v.nama.toLowerCase().includes(q)) return true;
                    let k = v.keterangan;
                    switch (q) {
                        case "belum hadir":
                            if (k == 0) return true;
                            break;
                        case "hadir":
                            if (k == 1) return true;
                            break;
                        case "alpa":
                            if (k == 2) return true;
                            break;
                        case "sakit":
                            if (k == 3) return true;
                            break;
                        case "izin":
                            if (k == 4) return true;
                            break;
                    }
                    return false;
                })
            }
        }
    }
})();
