var VPSecretKey = (function () {
    let vt_template = `
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="card-style project-card mb-30">
                <div class="text-center">
                    <h6 class="mb-10">Lisensi</h6>
                </div>
                <div class="card-body">
                    <template v-if="license">
                        <template v-if="license.licensekey">
                            <b>
                            NPSN : <span>{{license.npsn}}</span><br>
                            Sekolah : <span>{{license.nama_sekolah}}</span><br>
                            Berlaku : <span>{{license.eatm.format('YYYY-MM-DD')}}</span> <div v-if="license.eat < mm().unix()" class="badge bg-danger">Kedaluwarsa</div><br>
                            </b>
                        </template>
                        <template v-else>
                            <div class="text-center">
                                <span class="text-danger bold">Lisensi Tidak Valid!</span>
                            </div>
                        </template>
                    </template>
                    <div v-else class="text-center my-5">
                        <span class="spinner-grow spinner-grow" role="status" aria-hidden="true"></span>
                    </div>
                </div>
            </div>
            <!-- End Card -->
        </div>
    </div>

    <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="input-style-2">
                <label>TinyMCE Key</label>

                <input :type="data.tinymcekey.on?'text':'password'" v-model="data.tinymcekey.value" placeholder="Tiny MCE Key">
                <span style="cursor:pointer" @click="data.tinymcekey.on=!data.tinymcekey.on" class="icon"> <i :class="data.tinymcekey.on?'mdi-eye-off-outline':'mdi-eye-outline'" class="mdi"></i> </span>
            </div>
            <div class="input-style-2">
                <label>OneSignal App ID</label>

                <input :type="data.osc_app_id.on?'text':'password'" v-model="data.osc_app_id.value" placeholder="OneSignal App ID">
                <span style="cursor:pointer" @click="data.osc_app_id.on=!data.osc_app_id.on" class="icon"> <i :class="data.osc_app_id.on?'mdi-eye-off-outline':'mdi-eye-outline'" class="mdi"></i> </span>
            </div>
            <div class="input-style-2">
                <label>OneSignal Safari Web ID</label>

                <input :type="data.osc_safari_web_id.on?'text':'password'" v-model="data.osc_safari_web_id.value" placeholder="OneSignal Safari Web ID">
                <span style="cursor:pointer" @click="data.osc_safari_web_id.on=!data.osc_safari_web_id.on" class="icon"> <i :class="data.osc_safari_web_id.on?'mdi-eye-off-outline':'mdi-eye-outline'" class="mdi"></i> </span>
            </div>
            <div class="input-style-2">
                <label>OneSignal Key</label>

                <input :type="data.osc_key.on?'text':'password'" v-model="data.osc_key.value"  placeholder="OneSignal Key">
                <span style="cursor:pointer" @click="data.osc_key.on=!data.osc_key.on" class="icon"> <i :class="data.osc_key.on?'mdi-eye-off-outline':'mdi-eye-outline'" class="mdi"></i> </span>
            </div>
            <div class="input-style-2">
                <label>License Key</label>

                <input required :type="data.licensekey.on?'text':'password'" v-model="data.licensekey.value" placeholder="Kode Lisensi">
                <span style="cursor:pointer" @click="data.licensekey.on=!data.licensekey.on" class="icon"> <i :class="data.licensekey.on?'mdi-eye-off-outline':'mdi-eye-outline'" class="mdi"></i> </span>
            </div>
            <div class="input-style-2">
                <label>Secret Key</label>

                <input required :type="data.sck.on?'text':'password'" v-model="data.sck.value" placeholder="Secret Key">
                <span style="cursor:pointer" @click="data.sck.on=!data.sck.on" class="icon"> <i :class="data.sck.on?'mdi-eye-off-outline':'mdi-eye-outline'" class="mdi"></i> </span>
            </div>
            <div v-if="data.npsn" class="input-style-2">
                <label>NPSN *penting</label>
                <input required v-model="data.npsn.value" placeholder="NPSN">
            </div>
            <div v-if="data.namasekolah" class="input-style-2">
                <label>Nama Sekolah *penting</label>
                <input required v-model="data.namasekolah.value" placeholder="Nama Sekolah">
            </div>
            <button class="btn btn-sm btn-success" type="submit">Simpan</button>
        </form>
    </div>
`;

    return {
        name: "secret-key",
        template: vt_template,

        data() {
            return {
                license: null,
                errMsg: '',
                data: null,
            }
        },
        mounted() {
            this.loadData()

            this.loadLicense()
        },
        methods: {
            mm() {
                return mm();
            },
            loadData() {
                axios.get(`${this.$store.state.config.base_url}/panel/app/settings/secret-key/data`).then(res => {
                    this.data = res.data.data;
                    this.$store.state.config.csrf.value = res.data.csrf;
                }).catch(err => {
                    if (typeof err.response == 'undefined') return;
                    Swal.fire('Error', gaem(err), 'error')
                });
            },
            loadLicense() {
                axios.get(`${this.$store.state.config.base_url}/panel/app/settings/secret-key/license`).then(res => {
                    res.data.data.eatm = mm({ unix: res.data.data.eat });
                    this.license = res.data.data;
                }).catch(err => {
                });
            },
            saveData() {
                let data = {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value
                }
                for (let k in this.data) {
                    if (!this.data.hasOwnProperty(k)) continue;
                    let obj = this.data[k];
                    data[k] = obj.value;
                }
                showDismisableLoading();
                axios({
                    method: 'POST',
                    data: data,
                    url: `${this.$store.state.config.base_url}/panel/app/settings/secret-key/data`,
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Success', response.data.message, 'success');
                    this.loadLicense();
                }, (error) => {
                    if (typeof error.response == 'undefined') return;
                    Swal.fire('Error', gaem(error), 'error')
                    try {
                        error.response.data.messages.requiredFields.forEach(field => this.data[field] = {})
                    } catch (error) {

                    }
                });
            }
        }
    }
})();
