var VPWASend = (function () {
    let vp_template = `
    <div class="card-style">
        <div class="row">
            <div class="col-md-8">
                <div class="message-area">
                    <div class="mb-1">
                        <span> Kirim ke: &nbsp;</span>
                        <template v-for="c in contact.data.filter(v=>v.selected).reverse()   "><span class="badge bg-primary">{{c.fullname}} </span>&nbsp;</template>
                    </div>
                    <textarea v-model="message" rows="10" ref="msg" class="w-100 form-control" placeholder="Masukkan pesan"></textarea>
                    Variabel : <span style="cursor:pointer;" @click="message+='{nama}',$refs.msg.focus()" class="badge bg-warning">Nama</span> <span style="cursor:pointer;" @click="message+='{kelas}',$refs.msg.focus()" class="badge bg-success">Kelas</span>
                    <button @click="send" :disabled="message.length<=0||contact.data.filter(v=>v.selected).length<=0" class="btn btn-primary w-100 mt-2">Kirim</button>
                </div>
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-3 my-auto">
                        <span>Kontak</span>
                    </div>
                    <div class="col-9">
                        <input class="form-control" v-model="query" placeholder="Cari pengguna..." >
                    </div>
                </div>
                <br>
                <div class="contact-list card overflow-auto no-scroll-bar" style="height:266px">
                    <template v-if="!contact.ready">
                        <div class="text-center mt-4">
                            <div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
                        </div>
                    </template>
                    <template v-else-if="parsedData.length>0">
                        <template v-for="c in parsedData">
                            <template v-if="!c.phone">
                                <div :title="c.fullname+' belum mempunyai nomor handphone'" style="cursor:pointer" class="border border-light shadow-sm rounded px-1 contact-item-disabled">
                                    <div class="row m-0 p-0 w-100">
                                        <div class="col-3 text-center">
                                            <img :onerror="onerrorImg" :alt="'Photo '+c.fullname" class="w-75" :src="c.photo" >
                                        </div>
                                        <div class="col-9">
                                            <strong>{{c.fullname}}</strong>
                                            <br>
                                            <span>{{c.ut}}</span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <div @click="c.selected=!c.selected" style="cursor:pointer" class="border border-light shadow-sm rounded px-1" :class="c.selected?'contact-item-selected':'contact-item'">
                                    <div class="row m-0 p-0 w-100">
                                        <div class="col-3 text-center">
                                            <img :onerror="onerrorImg" :alt="'Photo '+c.fullname" class="w-75" :src="c.photo">
                                        </div>
                                        <div class="col-9">
                                            <strong>{{c.fullname}}</strong>
                                            <br>
                                            <span>{{c.ut}}</span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </template>
                    </template>
                    <template v-else>
                        <div class="text-center mt-4" style="height:50px">
                            Tidak Ada Kontak
                        </div>
                    </template>
                </div>

            </div>
        </div>
      </div>



  
`
    return {
        name: "wasend",
        template: vp_template,

        data() {
            return {
                query: '',
                message: '',
                contact: {
                    ready: false,
                    data: [],
                },
            }
        },
        mounted() {
            this.eventListener();
            this.loadContacts();
        },
        methods: {
            eventListener() {
                document.addEventListener('click', (e) => {
                    if (e.target && e.target.id == 'trigger-edit') {
                        this.rincian(e.target.dataset.id)
                    }
                    if (e.target && e.target.id == 'trigger-delete') {
                        this.hapus(e.target.dataset.id)
                    }
                });
            },
            loadContacts() {
                axios({
                    method: 'GET',
                    url: this.$store.state.config.base_url + "/panel/whatsapp/contact-list",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.contact.data = response.data;
                    this.contact.ready = true;
                }, (error) => {
                    if (typeof error.response == 'undefined') return;
                    let errMsg = gaem(error);
                    return Swal.fire('Gagal', errMsg, 'error')
                });
            },
            send() {
                if (this.message.length <= 0) return;
                let users = this.contact.data.filter(v => v.selected);
                if (users.length <= 0) return;
                showDismisableLoading();
                users = users.map(v => { return { id: v.id, ut: v.ut } });
                axios({
                    method: 'POST',
                    data: {
                        [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                        'message': this.message,
                        'users': users
                    },
                    url: this.$store.state.config.base_url + "/panel/whatsapp/send",
                }).then((response) => {
                    Swal.close()
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    return Swal.fire('Success', response.data.message, 'success');
                }, (error) => {
                    Swal.close()
                    if (typeof error.response == 'undefined') return;
                    let errMsg = gaem(error);
                    return Swal.fire('Gagal', errMsg, 'error')
                });
            },
            ubah() {
                let data = {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                    is_default: this.mdl.common.is_default ? '1' : '0',
                    nama: this.mdl.common.nama,
                    status: this.mdl.common.status,
                };
                showDismisableLoading();
                axios({
                    method: 'PUT',
                    data: data,
                    url: this.$store.state.config.base_url + "/panel/whatsapp/devices/" + this.mdl.common.id,
                }).then((response) => {
                    Swal.close()
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Berhasil', response.data.message, 'success');
                    this.$refs[this.grid.ref].reload()
                    this.CommonModal('hide');
                }, (error) => {
                    Swal.close()
                    if (typeof error.response == 'undefined') return;
                    let errMsg = gaem(error);
                    return Swal.fire('Gagal', errMsg, 'error')
                });
            },
            rincian(id) {
                showDismisableLoading();
                axios({
                    method: 'GET',
                    url: this.$store.state.config.base_url + "/panel/whatsapp/devices/" + id,
                }).then((response) => {
                    Swal.close()
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.mdl.common.id = id;
                    this.mdl.common.device_id = response.data.device_id;
                    this.mdl.common.nama = response.data.nama;
                    this.mdl.common.is_default = response.data.is_default;
                    this.mdl.common.status = response.data.status;
                    this.CommonModal('show');
                }, (error) => {
                    this.mdl.common.id = null;
                    Swal.close()
                    if (typeof error.response == 'undefined') return;
                    let errMsg = gaem(error);
                    return Swal.fire('Gagal', errMsg, 'error')
                });
            },
            hapus(id) {
                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/whatsapp/devices/" + id,
                }).then((response) => {
                    Swal.close()
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.$refs[this.grid.ref].reload()
                    return Swal.fire('Success', response.data.message, 'success');
                }, (error) => {
                    Swal.close()
                    if (typeof error.response == 'undefined') return;
                    let errMsg = gaem(error);
                    return Swal.fire('Gagal', errMsg, 'error')
                });
            },
            tambah() {
                let data = {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                    device_id: this.mdl.common.device_id,
                    is_default: this.mdl.common.is_default ? '1' : '0',
                    nama: this.mdl.common.nama,
                    status: this.mdl.common.status,
                };
                showDismisableLoading();
                axios({
                    method: 'POST',
                    data: data,
                    url: this.$store.state.config.base_url + "/panel/whatsapp/devices",
                }).then((response) => {
                    Swal.close()
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Berhasil', response.data.message, 'success');
                    this.CommonModal('hide');
                }, (error) => {
                    Swal.close()
                    if (typeof error.response == 'undefined') return;
                    let errMsg = gaem(error);
                    return Swal.fire('Gagal', errMsg, 'error')
                });
            },
            ondataload(data) {
                this.grid.data = data.data;
                this.grid.ready = true;
                return data.data;
            },
            FilterModal(e = 'show') {
                if (!this.mdl.filter.instance) {
                    this.mdl.filter.instance = new bootstrap.Modal(this.$refs[this.mdl.filter.ref]);
                }
                switch (e) {
                    case "hide":
                        this.mdl.filter.instance.hide();
                        break;
                    case "show":
                        this.mdl.filter.instance.show();
                        break;
                    case "toggle":
                        this.mdl.filter.instance.toggle();
                        break;
                    case "dispose":
                        this.mdl.filter.instance.dispose();
                        break;
                }
            },
            CommonModal(e = 'show') {
                if (!this.mdl.common.instance) {
                    this.mdl.common.instance = new bootstrap.Modal(this.$refs[this.mdl.common.ref]);
                }
                switch (e) {
                    case "hide":
                        this.mdl.common.instance.hide();
                        break;
                    case "show":
                        this.mdl.common.instance.show();
                        break;
                    case "toggle":
                        this.mdl.common.instance.toggle();
                        break;
                    case "dispose":
                        this.mdl.common.instance.dispose();
                        break;
                }
            }
        },
        computed: {
            parsedData() {
                if (this.query.length <= 0) return this.contact.data;
                let contacts = this.contact.data.filter(v => {
                    return v.fullname.toLowerCase().includes(this.query.toLowerCase());
                });
                return contacts;

            },
            onerrorImg() {
                let err = "this.onerror=null;";
                err += "this.src='" + this.$store.state.config.base_url + "/assets/img/users/profile-photo.png';";
                return err;
            },
            parsedURL() {
                let url = window.location.href + '/all?';
                url += `&status=${this.mdl.filter.status}`;
                url += `&is_connected=${this.mdl.filter.is_connected}`;
                url += `&is_default=${this.mdl.filter.is_default}`;
                return url;
            },
        }
    }
})();
