var VPGeneralSetting = (function () {
    let vt_template = `
    <div class="card p-4">
        <div v-if="!data" class="text-center my-5">
            <span class="spinner-grow spinner-grow" role="status" aria-hidden="true"></span>
        </div>
        <form v-if="data" @submit.prevent="saveData">
            <div class="row">
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Nama Aplikasi</label>
                        <input required v-model="data.appname" type="text" placeholder="Nama Aplikasi">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="select-style-1">
                        <label>Waktu Server</label>
                        <div class="select-position">
                            <select v-model="data.timezones.state" required>
                                <option>-- Pilih Waktu Server --</option>
                                <option v-for="(timezone, index) in data.timezones.options" :value="timezone">{{ timezone }}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="input-style-1">
                        <label>Nama Sekolah</label>
                        <input v-model="data.nama_sekolah" readonly type="text" placeholder="Nama Sekolah">
                    </div>
                </div>
                <div class="col-6">
                    <div class="input-style-1">
                        <label>NPSN</label>
                        <input v-model="data.npsn" readonly type="text" placeholder="NPSN">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Kepala Sekolah</label>
                        <input v-model="data.nama_kepala_sekolah" type="text" placeholder="Nama Kepala Sekolah">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>NIP Kepala Sekolah</label>
                        <input v-model="data.nip_kepala_sekolah"  type="text" placeholder="NIP Kepala Sekolah">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Alamat</label>
                        <textarea rows="3" v-model="data.alamat"></textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Kecamatan</label>
                        <input v-model="data.kecamatan"  type="text" placeholder="Kecamatan">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Kota/Kabupatan</label>
                        <input v-model="data.kota" type="text" placeholder="Kota/Kabupatan">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Email</label>
                        <input type="email" v-model="data.email"  placeholder="Email">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Telepon</label>
                        <input v-model="data.telp" type="text" placeholder="Telepon">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Website</label>
                        <input v-model="data.website" type="text" placeholder="Website">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Link Video Display</label>
                        <input v-model="data.display_video" type="text" placeholder="Link Video Display">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Berita Berjalan</label>
                        <input v-model="data.display_news" type="text" placeholder="Berita Berjalan">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex">
                        <div class="input-style-1">
                            <label>Masa Aktif Sesi Akun Panel</label>
                            <input v-model="data.panel_session_timeout" min="1" type="number" placeholder="Masa Aktif Sesi Akun">
                        </div>
                        &nbsp;
                        <div class="select-style-1">
                            <label>Satuan</label>
                            <div class="select-position">
                                <select v-model="data.panel_session_unit" class="mx-2">
                                    <option value="minutes">Menit</option>
                                    <option value="hours">Jam</option>
                                    <option value="days">Hari</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex">
                        <div class="input-style-1">
                            <label>Masa Aktif Sesi Akun Mobile</label>
                            <input v-model="data.mobile_session_timeout" min="1" type="number" placeholder="Masa Aktif Sesi Akun">
                        </div>
                        &nbsp;
                        <div class="select-style-1">
                            <label>Satuan</label>
                            <div class="select-position">
                                <select v-model="data.mobile_session_unit" class="mx-2">
                                    <option value="minutes">Menit</option>
                                    <option value="hours">Jam</option>
                                    <option value="days">Hari</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="logo">
                        <img @click="$refs.logo.click()" :src="data.logoTemp||data.logo" style="max-width:20%;cursor:pointer" alt="Logo">
                        <input ref="logo" @change="imageReady($event,'logo')" class="d-none" type="file">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="logo">
                        <img @click="$refs.kementrian.click()" :src="data.kementrianTemp||data.kementrian_image" style="max-width:20%;cursor:pointer" alt="Kementrian">
                        <input ref="kementrian" @change="imageReady($event,'kementrian')" class="d-none" type="file">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="logo">
                        <img @click="$refs.ttd.click()" :src="data.ttdTemp||data.ttd_image" style="max-width:20%;cursor:pointer" alt="Tanda Tangan">
                        <input ref="ttd" @change="imageReady($event,'ttd')" class="d-none" type="file">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-check form-switch">
                        <input class="form-check-input" :checked="data.maintenance" @change="data.maintenance=!data.maintenance" type="checkbox" id="maintenance">
                        <label class="form-check-label" for="maintenance">Maintenance</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" :checked="data.chat" @change="data.chat=!data.chat" type="checkbox" id="chat">
                        <label class="form-check-label" for="chat">Chat</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" :checked="data.dev_mode" @change="data.dev_mode=!data.dev_mode" type="checkbox" id="dev_mode">
                        <label class="form-check-label" for="dev_mode">Dev Mode</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" :checked="data.el_mode" @change="data.el_mode=!data.el_mode" type="checkbox" id="el_mode">
                        <label class="form-check-label" for="el_mode">Elearning</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" :checked="data.browserCheck" @change="data.browserCheck=!data.browserCheck" type="checkbox" id="browserCheck">
                        <label class="form-check-label" for="browserCheck">Browser Check</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" :checked="data.strict_browser" @change="data.strict_browser=!data.strict_browser" type="checkbox" id="strict_browser">
                        <label class="form-check-label" for="strict_browser">Strict Browser</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div id="cpbg">
                        <label>Background PWA Color</label>
                    </div>
                    <div id="ctbg">
                        <label>Theme PWA Color</label>
                    </div>
                </div>
            </div>
            <button class="btn btn-sm btn-success my-2" type="submit">Simpan</button>
        </form>
    </div>
`;

    return {
        name: "general-setting",
        template: vt_template,

        data() {
            return {

                errMsg: '',
                data: null,
            }
        },
        mounted() {
            this.loadData()
            document.addEventListener('change', (e) => {
                if (e.target.id == 'pbg') this.data.background_color = e.target.value;
                if (e.target.id == 'tbg') this.data.theme_color = e.target.value;
            })
        },
        methods: {
            setJSPicker(container, id, color) {
                let c = document.getElementById(container);
                if (!c) return setTimeout(() => this.setJSPicker(container, id, color), 10);
                try {
                    document.getElementById(id).remove();
                } catch (error) {
                }
                let input = document.createElement('input');
                input.id = id;
                let picker = new JSColor(input, { backgroundColor: '#333' }); // 'JSColor' is an alias to 'jscolor'
                picker.fromString(color)
                c.appendChild(input);
            },
            loadData() {
                axios.get(`${this.$store.state.config.base_url}/panel/app/settings/general/data`).then(res => {
                    this.data = res.data.data;
                    this.$store.state.config.csrf.value = res.data.csrf;
                    this.setJSPicker('cpbg', 'pbg', this.data.background_color);
                    this.setJSPicker('ctbg', 'tbg', this.data.theme_color);
                }).catch(err => {
                    if (typeof err.response == 'undefined') return;
                    Swal.fire('Error', gaem(err), 'error')
                });
            },
            imageReady(e, type) {
                let [file] = e.target.files;
                switch (type) {
                    case 'logo':
                        if (!file) return this.data.logoTemp = null;
                        this.data.logoTemp = URL.createObjectURL(file);
                        break;
                    case 'kementrian':
                        if (!file) return this.data.kementrianTemp = null;
                        this.data.kementrianTemp = URL.createObjectURL(file);
                        break;
                    case 'ttd':
                        if (!file) return this.data.ttdTemp = null;
                        this.data.ttdTemp = URL.createObjectURL(file);
                        break;
                }
            },
            saveData() {
                const formData = new FormData();
                formData.append([this.$store.state.config.csrf.name], this.$store.state.config.csrf.value);
                formData.append('appname', this.data.appname);
                formData.append('alamat', this.data.alamat);
                formData.append('telp', this.data.telp);
                formData.append('panel_session_timeout', this.data.panel_session_timeout);
                formData.append('mobile_session_timeout', this.data.mobile_session_timeout);
                formData.append('panel_session_unit', this.data.panel_session_unit);
                formData.append('mobile_session_unit', this.data.mobile_session_unit);
                formData.append('el_mode', this.data.el_mode ? 'on' : 'off');
                formData.append('browserCheck', this.data.browserCheck ? 'on' : 'off');
                formData.append('strict_browser', this.data.strict_browser ? 'on' : 'off');
                formData.append('dev_mode', this.data.dev_mode ? 'on' : 'off');
                formData.append('maintenance', this.data.maintenance ? 'on' : 'off');
                formData.append('chat', this.data.chat ? 'on' : 'off');
                formData.append('kecamatan', this.data.kecamatan);
                formData.append('website', this.data.website);
                formData.append('display_video', this.data.display_video);
                formData.append('display_news', this.data.display_news);
                formData.append('kota', this.data.kota);
                formData.append('nip_kepala_sekolah', this.data.nip_kepala_sekolah);
                formData.append('email', this.data.email);
                formData.append('nama_kepala_sekolah', this.data.nama_kepala_sekolah);
                formData.append('background_color', this.data.background_color);
                formData.append('theme_color', this.data.theme_color);
                formData.append('timezone', this.data.timezones.state);
                let [logo] = this.$refs.logo.files;
                let [kementrian] = this.$refs.kementrian.files;
                let [ttd] = this.$refs.ttd.files;
                if (logo) formData.append('logo', logo);
                if (kementrian) formData.append('kementrian_image', kementrian);
                if (ttd) formData.append('ttd_image', ttd);
                showDismisableLoading();
                axios({
                    method: 'POST',
                    data: formData,
                    url: `${this.$store.state.config.base_url}/panel/app/settings/general/data`,
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Success', response.data.message, 'success')
                    this.$store.commit('config/timezone', this.data.timezones.state);
                    if (logo) {
                        let plogo = URL.createObjectURL(logo);
                        this.$store.commit('config/favicon', plogo);
                        let link = document.querySelector("link[rel~='icon']");
                        if (!link) {
                            link = document.createElement('link');
                            link.rel = 'icon';
                            document.getElementsByTagName('head')[0].appendChild(link);
                        }
                        link.href = plogo;
                    }
                    this.$root.$refs.sidebar.loadData();
                    let debuger = document.getElementById('toolbarContainer');
                    if (debuger && this.data.dev_mode) debuger.classList.remove('d-none');
                    if (debuger && !this.data.dev_mode) debuger.classList.add('d-none');
                }, (error) => {
                    if (typeof error.response == 'undefined') return;
                    Swal.fire('Error', gaem(error), 'error')
                });
            }
        }
    }
})();
