var VPAssign = (function () {
    let vp_template = `
        <div class="card-style">
            <div class="content">
                <div class="row">
                    <div class="col-md-5 my-1">
                        <h6>Pengguna</h6>
                        <small> Jumlah : {{parsedUsers.length}}</small>
                        <div class="input-style-1 mb-1"><input v-model="users.query" type="text" placeholder="Filter"></div>
                        <div @click="selectAllUsers()" class="border border-light shadow-sm rounded-top p-2 text-center" style="cursor: pointer;"><i class="fas fa-check-double"></i></div>
                        <div style="min-height:200px;" class="siswa-list overflow-auto">
                            <template v-if="!users.loading&&users.errMsg">
                                <div class="text-center my-2">
                                    <span class="text-bold">{{users.errMsg}}</span>
                                    <br/>
                                    <div @click="loadUsers()" class="btn btn-warning btn-sm"><i class="fas fa-sync"></i></div>
                                </div>
                            </template>
                            <template v-else-if="parsedUsers.length<=0&&!users.loading">
                                <div class="text-center my-2">
                                    <template v-if="users.query">
                                        <span class="text-bold">Tidak Ada Pengguna "{{users.query}}"</span>
                                    </template>
                                    <template v-else>
                                        <span class="text-bold">Tidak Ada Pengguna</span>
                                    </template>
                                </div>
                            </template>
                            <template v-else-if="users.loading">
                                <div class="text-center my-2">
                                    <span class="text-bold">Loading<template v-for="ld in loadingDot">.</template></span>
                                </div>
                            </template>
                            <template v-else v-for="user in parsedUsers">
                                <div @click="user.selected=!user.selected" class="border border-light shadow-sm rounded px-1" :class="user.selected?'primary-bg text-white':'siswa-item'" style="cursor: pointer;">{{user.fullname}} </div>
                            </template>
                        </div>
                    </div>
                    <div class="col-md-2 my-1 d-flex justify-content-center">
                            <button @click="kirimData()" class="btn btn-primary align-self-center" :disabled="!readySync" :title="readySync?'Kirim Data':'Belum Bisa Kirim'">Kirim</button>
                    </div>
                    <div class="col-md-5 my-1">
                        <h6>Perangkat</h6>
                        <small> Jumlah : {{parsedDevices.length}}</small>
                        <div class="input-style-1 mb-1"><input v-model="devices.query" type="text" placeholder="Filter"></div>
                        <div @click="selectAllDevices()" class="border border-light shadow-sm rounded-top p-2 text-center" style="cursor: pointer;"><i class="fas fa-check-double"></i></div>
                        <div style="min-height:200px;" class="siswa-list overflow-auto">
                            <template v-if="!devices.loading&&devices.errMsg">
                                <div class="text-center my-2">
                                    <span class="text-bold">{{devices.errMsg}}</span>
                                    <br/>
                                    <div @click="loadDevices()" class="btn btn-warning btn-sm"><i class="fas fa-sync"></i></div>
                                </div>
                            </template>
                            <template v-else-if="parsedDevices.length<=0&&!devices.loading">
                                <div class="text-center my-2">
                                    <template v-if="devices.query">
                                        <span class="text-bold">Tidak Ada Perangkat "{{devices.query}}"</span>
                                    </template>
                                    <template v-else>
                                        <span class="text-bold">Tidak Ada Perangkat</span>
                                    </template>
                                </div>
                            </template>
                            <template v-else-if="devices.loading">
                                <div class="text-center my-2">
                                    <span class="text-bold">Loading<template v-for="ld in loadingDot">.</template></span>
                                </div>
                            </template>
                            <template v-else v-for="device in parsedDevices">
                                <div @click="device.selected=!device.selected" class="border border-light shadow-sm rounded px-1" :class="device.selected?'primary-bg text-white':'siswa-item'" style="cursor: pointer;">{{device.nama}} </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      `
    return {
        name: "assign",
        template: vp_template,
        data() {
            return {
                devices: {
                    errMsg: '',
                    query: '',
                    data: [],
                    loading: false,
                },
                loadingDot: 1,
                users: {
                    errMsg: '',
                    query: '',
                    data: [],
                    loading: false,
                },
            }
        },
        mounted() {
            setInterval(() => {
                this.loadingDot++;
                if (this.loadingDot > 4) this.loadingDot = 1;
            }, 500)
            this.loadUsers();
            this.loadDevices();
        },
        methods: {
            kirimData() {
                if (!this.readySync) return;
                let user = this.users.data.find(v => v.selected);
                Swal.close();
                showDismisableLoading("Mengirim data " + user.fullname);
                let devices = this.devices.data.filter(v => v.selected);
                axios({
                    method: 'post',
                    data: {
                        [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                        id: user.attendance_solution_id,
                        name: user.fullname,
                        devices
                    },
                    url: this.$store.state.config.base_url + "/panel/attendance-solution/assign",
                }).then((response) => {
                    Swal.close();
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    if (!response.data) return Swal.fire('Error', 'Data tidak ditemukan', 'error');
                    Swal.fire("Success", 'Berhasil mengirim data', 'success');
                    user.selected = false;
                    setTimeout(() => this.kirimData(), 100);
                }, (error) => {
                    Swal.fire('Error', 'Data tidak ditemukan', 'error');
                })
            },
            selectAllUsers() {
                let selected = this.parsedUsers.filter(u => u.selected).length;
                let count = this.parsedUsers.length;
                if (selected == count) this.parsedUsers.map(u => u.selected = false);
                else this.parsedUsers.map(u => u.selected = true);
            },
            selectAllDevices() {
                let selected = this.parsedDevices.filter(u => u.selected).length;
                let count = this.parsedDevices.length;
                if (selected == count) this.parsedDevices.map(u => u.selected = false);
                else this.parsedDevices.map(u => u.selected = true);
            },
            loadUsers() {
                if (this.users.loading) return;
                this.users.loading = true;
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + "/panel/attendance-solution/assign/users",
                }).then((response) => {
                    if (!isObject(response.data)) return this.users.errMsg = gaem({ response }, response.data);
                    if (!response.data) return this.users.errMsg = 'Data tidak ditemukan';
                    this.users.errMsg = '';
                    this.users.data = response.data.data;
                }, (error) => {
                    this.users.errMsg = gaem(error);
                }).finally(() => this.users.loading = false);
            },
            loadDevices() {
                if (this.devices.loading) return;
                this.devices.loading = true;
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + "/panel/attendance-solution/device/all",
                }).then((response) => {
                    if (!isObject(response.data)) return this.devices.errMsg = gaem({ response }, response.data);
                    if (!response.data) return this.devices.errMsg = 'Data tidak ditemukan';
                    this.devices.errMsg = '';
                    this.devices.data = response.data.data;
                }, (error) => {
                    this.devices.errMsg = gaem(error);
                }).finally(() => this.devices.loading = false);
            },
        },
        computed: {
            readySync() {
                return this.users.data.filter(v => v.selected).length > 0 && this.devices.data.filter(v => v.selected).length > 0;
            },
            parsedUsers() {
                let data = this.users.data;
                if (this.users.query) {
                    data = data.filter(u => {
                        let query = u.utype == "1" ? "Guru " : "Siswa ";
                        query += u.fullname;
                        query += u.nama_kelas;
                        return query.toLowerCase().includes(this.users.query.toLowerCase());
                    })
                }
                return data;
            },
            parsedDevices() {
                let data = this.devices.data;
                if (this.devices.query) data = data.filter(u => u.nama.toLowerCase().includes(this.devices.query.toLowerCase()));
                return data;
            },
        }
    }
})();
