var VPWASetting = (function () {
    let vp_template = `
  <div class="card">
    <div class="card-body">
        <div v-if="errMsg" class="alert-box danger-alert ">
            <div class="alert">
                <p class="text-medium">
                    {{errMsg}}
                </p>
            </div>
        </div>
    <template v-if="ready">
        <form @submit.prevent="simpan()">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="row">
                                <div class="col-8">
                                    <label>Pesan Presensi Masuk Siswa</label> 
                                </div>
                                <div class="col-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" v-model="siswa_presensi_masuk" type="checkbox" >
                                        <label @click="siswa_presensi_masuk=!siswa_presensi_masuk" class="form-check-label">Aktif</label>
                                    </div>
                                </div>
                            </div>
                            <div class="input-style-1">
                                <textarea v-model="message_siswa_presensi_masuk" placeholder="Masukkan template pesan"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="row">
                                <div class="col-8">
                                    <label>Pesan Presensi Keluar Siswa</label> 
                                </div>
                                <div class="col-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" v-model="siswa_presensi_keluar" type="checkbox" >
                                        <label @click="siswa_presensi_keluar=!siswa_presensi_keluar" class="form-check-label">Aktif</label>
                                    </div>
                                </div>
                            </div>
                            <div class="input-style-1">
                                <textarea v-model="message_siswa_presensi_keluar" placeholder="Masukkan template pesan"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" v-model="randomize" type="checkbox" >
                                <label @click="randomize=!randomize" class="form-check-label">Acak Nomor</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="input-style-2">
                    <label>WebHook</label>
                    <input readonly :type="webhookon?'text':'password'" v-model="webhook" placeholder="WebHook">
                    <span style="cursor:pointer" @click="webhookon=!webhookon" class="icon"> <i :class="webhookon?'mdi-eye-off-outline':'mdi-eye-outline'" class="mdi"></i> </span>
                </div>
            </div>
            <button class="btn btn-primary">Simpan</button>
        </form>
    </template>
    <template v-else>
        <div class="text-center">
            <div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
        </div>
    </template>
    </div>
  </div>

`

    return {
        name: "wasetting",
        template: vp_template,

        data() {
            return {
                errMsg: '',
                webhook: '',
                webhookon: false,
                ready: false,
                message_siswa_presensi_masuk: '',
                message_siswa_presensi_keluar: '',
                siswa_presensi_masuk: false,
                siswa_presensi_keluar: false,
                randomize: false,
            }
        },
        mounted() {
            // this.eventListener();
            this.loadData();
        },
        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)
                    }
                });
                this.$refs[this.mdl.common.ref].addEventListener('hide.bs.modal', (e) => {
                    this.mdl.common.id = null
                })
            },
            simpan() {
                let data = {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                    message_siswa_presensi_masuk: this.message_siswa_presensi_masuk,
                    message_siswa_presensi_keluar: this.message_siswa_presensi_keluar,
                    siswa_presensi_masuk: this.siswa_presensi_masuk,
                    siswa_presensi_keluar: this.siswa_presensi_keluar,
                    randomize: this.randomize,
                };
                this.errMsg = '';
                showDismisableLoading();
                axios({
                    method: 'POST',
                    data: data,
                    url: this.$store.state.config.base_url + "/panel/whatsapp/settings",
                }).then((response) => {
                    Swal.close()
                    if (!isObject(response.data)) return this.errMsg = gaem({ response }, response.data);
                    Swal.fire('Berhasil', response.data.message, 'success');
                    this.errMsg = '';
                }, (error) => {
                    Swal.close();
                    if (typeof error.response == 'undefined') return this.errMsg = "Koneksi Bermasalah";
                    return Swal.fire('Gagal', errMsg, 'error')
                });
            },
            loadData() {
                axios({
                    method: 'GET',
                    url: this.$store.state.config.base_url + "/panel/whatsapp/settings/data",
                }).then((response) => {
                    if (!isObject(response.data)) return this.errMsg = gaem({ response }, response.data);
                    this.ready = true;
                    this.errMsg = '';
                    this.webhook = response.data.webhook;
                    this.message_siswa_presensi_masuk = response.data.message_siswa_presensi_masuk;
                    this.message_siswa_presensi_keluar = response.data.message_siswa_presensi_keluar;
                    this.siswa_presensi_masuk = response.data.siswa_presensi_masuk;
                    this.siswa_presensi_keluar = response.data.siswa_presensi_keluar;
                    this.randomize = response.data.randomize;
                }, (error) => {
                    if (typeof error.response == 'undefined') return this.errMsg = "Koneksi Bermasalah";
                    this.errMsg = gaem(error);
                    setTimeout(() => this.loadData, 500);
                });
            },
        },
    }
})();
