var VPMe = (function () {
    let vt_template = `
    <div class="profile-wrapper mb-30">
        <div v-if="errInit" class="text-center profile-cover py-5">
            <span>{{errMsg}}</span>
            <br>
            <button @click="loadData" class="main-btn btn-small p-2 light-btn-outline btn-hover">Retry</button>
        </div>
        <div v-else-if="!ready" class="text-center profile-cover py-5">
            <div class="spinner-grow" role="status"><span class="visually-hidden">Loading...</span></div>
        </div>
        <div v-else >
            <div class="profile-cover">
                <div v-if="cover.errMsg" class="text-center py-5">
                    <span>{{cover.errMsg}}</span>
                    <br>
                    <button @click="saveCover" class="main-btn btn-small p-2 mx-1 light-btn-outline btn-hover">Retry</button>
                    <button @click="cover.errMsg=null,cover.file=null" class="main-btn btn-small p-2 mx-1 light-btn-outline btn-hover"><i class="fas fa-times"></i></button>
                    </div>
                <div v-else>
                    <img :src="$store.state.config.person.cover" alt="cover-image">
                        <div class="update-image">
                            <input @change="coverChange" style="z-index:1" :disabled="cover.loading" type="file">
                            <label v-if="cover.loading" for="">
                                <i class="fas fa-spin fa-sync"></i>
                                Loading...
                            </label>
                            <label v-else for="">
                                <i class="lni lni-camera"></i>
                                Edit Cover Photo
                            </label>
                        </div>
                </div>
            </div>
            <div class="d-md-flex">
                <div class="profile-photo" style="max-width:unset">
                    <div class="image">
                        <div v-if="photo.errMsg" class="text-center py-5">
                            <span class="text-danger">{{photo.errMsg}}</span>
                            <br>
                            <button @click="savePhoto" class="main-btn btn-small p-2 mx-1 light-btn-outline btn-hover">Retry</button>
                            <button @click="photo.errMsg=null,photo.file=null" class="main-btn btn-small p-2 mx-1 light-btn-outline btn-hover"><i class="fas fa-times"></i></button>
                        </div>
                        <div v-else >
                            <img :src="$store.state.config.person.photo" :onerror="$store.state.config.onerrorAvatar" :alt="'Foto '+$store.state.config.person.name" alt="profile">
                                <div class="update-image">
                                    <input @change="photoChange" :disabled="photo.loading"  type="file">
                                    <label v-if="photo.loading" for="">
                                        <i class="fas fa-spin fa-sync"></i>
                                    </label>
                                    <label v-else for="">
                                        <i class="lni lni-camera"></i>
                                    </label>
                                </div>
                        </div>
                    </div>
                    <div class="profile-meta pt-25">
                        <div class="row">
                            <div class="col-md-6">
                                <div v-if="name.editMode" class="input-style-2">
                                    <input required @change="saveName" v-once :value="$store.state.config.person.name" placeholder="Nama">
                                    <span @click="name.loading?name.cancelToken.cancel():''" :style="name.loading?'cursor:pointer':''" class="icon">
                                    <i v-if="name.changed" class="fas text-success fa-check">
                                    </i>
                                    <i v-else-if="name.loading" class="fas fa-spin fa-sync">
                                    </i>
                                    </span>
                                </div>
                                <h5 v-else style="cursor:pointer" @click="name.editMode=true" class="text-bold mb-10">{{$store.state.config.person.name}}</h5>
                            </div>
                            <div class="col-md-6">
                                <div v-if="password.editMode" class="input-style-2">
                                    <input required @change="savePassword" placeholder="Kata Sandi" type="password">
                                    <span @click="password.loading?password.cancelToken.cancel():''" :style="password.loading?'cursor:pointer':''" class="icon">
                                        <i v-if="password.changed" class="fas text-success fa-check">
                                        </i>
                                        <i v-else-if="password.loading" class="fas fa-spin fa-sync">
                                        </i>
                                    </span>
                                </div>
                                <h5 v-else style="cursor:pointer" @click="password.editMode=true" class="text-bold mb-10">********</h5>
                            </div>
                        </div>
                        <p v-if="$store.state.config.person.nomor_induk" class="text-sm">Nomor Induk {{$store.state.config.person.nomor_induk}}</p>
                        <p v-if="$store.state.config.person.wali_kelas" class="text-sm">Wali Kelas {{$store.state.config.person.wali_kelas}}</p>
                    </div>
                </div>
                <div v-if="false" class="profiles-activities w-100 pt-30">
                    <ul style="list-style-type: none;" class="d-flex align-items-center">
                        <li class="mr-30">
                            <p><strong>234</strong> Posts</p>
                        </li>
                        <li class="mr-30">
                            <p><strong>34K</strong> Followers</p>
                        </li>
                        <li class="mr-30">
                            <p><strong>4K</strong> Following</p>
                        </li>
                        <li class="ms-auto">
                            <div class="more-btn-wrapper">
                                <button class="more-btn dropdown-toggle" id="moreAction" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="lni lni-more-alt"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="moreAction">
                                    <li class="dropdown-item">
                                        <a href="#0" class="text-gray">Add All</a>
                                    </li>
                                    <li class="dropdown-item">
                                        <a href="#0" class="text-gray">Remove All</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="profile-info">
                <h5 class="text-bold mb-15">Tentang Saya</h5>
                <p class="text-sm mb-30">
                    <editor @change="saveAboutMe" :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="$store.state.config.person.about_me"  :api-key="tinymcekey" :init="tinymce" />
                </p>

                <ul v-if="false" style="list-style-type: none;" class="socials">
                    <li>
                        <a href="#0"><i class="lni lni-facebook-filled"></i></a>
                    </li>
                    <li>
                        <a href="#0"><i class="lni lni-twitter-filled"></i></a>
                    </li>
                    <li>
                        <a href="#0"><i class="lni lni-instagram-filled"></i></a>
                    </li>
                    <li>
                        <a href="#0"><i class="lni lni-behance-original"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    `;

    return {
        name: "me",
        template: vt_template,
        props: ['tinymcekey'],
        data() {
            return {
                cancelToken: axios.CancelToken,
                tinymce: {
                    plugins: [
                        'advlist autolink lists link charmap print preview anchor',
                        'searchreplace visualblocks code fullscreen',
                        'insertdatetime table powerpaste hr help wordcount'
                    ],
                    menubar: false,
                    inline: true,
                    toolbar: "bold italic strikethrough link numlist bullist blockquote",
                },

                errMsg: '',
                data: {},
                errInit: false,
                ready: false,
                about_me: {
                    counter: 0,
                },
                name: {
                    editMode: false,
                    cancelToken: null,
                    counter: 0,
                    changed: false,
                    loading: false,
                },
                password: {
                    editMode: false,
                    cancelToken: null,
                    counter: 0,
                    changed: false,
                    loading: false,
                },
                cover: {
                    cancelToken: null,
                    loading: false,
                    file: null,
                    errMsg: '',
                },
                photo: {
                    cancelToken: null,
                    loading: false,
                    file: null,
                    errMsg: '',
                }
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            coverChange(e) {
                let [cover] = e.target.files;
                if (!cover) return this.cover.file = null;
                this.cover.file = cover;
                this.saveCover();
            },
            photoChange(e) {
                let [photo] = e.target.files;
                if (!photo) return this.photo.file = null;
                this.photo.file = photo;
                this.savePhoto();
            },
            savePhoto() {
                this.photo.loading = true;
                this.photo.errMsg = '';
                let formData = new FormData();
                formData.append('image', this.photo.file);
                formData.append([this.$store.state.config.csrf.name], this.$store.state.config.csrf.value);
                axios.post(this.$store.state.config.base_url + '/panel/profile/me/photo', formData)
                    .then(res => {
                        this.$store.state.config.person.photo = res.data.location;
                        this.photo.loading = false;
                        this.photo.file = null;
                    }
                    ).catch(err => {
                        this.photo.loading = false;
                        this.photo.errMsg = gaem(err);
                    }
                    );

            },
            saveCover() {
                this.cover.loading = true;
                this.cover.errMsg = '';
                let formData = new FormData();
                formData.append('image', this.cover.file);
                formData.append([this.$store.state.config.csrf.name], this.$store.state.config.csrf.value);
                axios.post(this.$store.state.config.base_url + '/panel/profile/me/cover', formData)
                    .then(res => {
                        this.$store.state.config.person.cover = res.data.location;
                        this.cover.loading = false;
                        this.cover.file = null;
                    }
                    ).catch(err => {
                        this.cover.loading = false;
                        this.cover.errMsg = gaem(err);
                    }
                    );

            },
            saveName(e) {
                if (!e.target.value) return;
                this.name.changed = false;
                this.name.loading = true;
                if (this.name.cancelToken) this.name.cancelToken.cancel();
                this.name.cancelToken = this.cancelToken.source();
                let data = {
                    name: e.target.value,
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                };
                axios({
                    cancelToken: this.name.cancelToken.token,
                    method: 'PUT',
                    data,
                    url: this.$store.state.config.base_url + '/panel/profile/me/name',
                }).then((response) => {
                    if (!isObject(response.data)) return setTimeout(() => this.saveName(e), 1000);
                    this.name.counter = 0;
                    this.name.changed = true;
                    this.name.loading = false;
                    this.$store.state.config.person.name = data.name;
                }, (err) => {
                    this.name.counter++;
                    this.name.changed = false;
                    this.name.loading = false;
                    if (!err.response) return;
                    try {
                        if (typeof err.response.data.messages.csrf != 'undefined') this.$store.state.config.csrf.value = err.response.data.messages.csrf;
                    } catch (err) {
                    }
                    if (this.name.counter < 10 && err.response.status != 400) return setTimeout(this.saveAboutMe, 100 * this.name.counter);
                    Swal.fire('Error', gaem(err, 'Gagal Mengubah Nama Saya'), 'error');
                });
            },
            savePassword(e) {
                if (!e.target.value) return;
                this.password.changed = false;
                this.password.loading = true;
                if (this.password.cancelToken) this.password.cancelToken.cancel();
                this.password.cancelToken = this.cancelToken.source();
                let data = {
                    password: e.target.value,
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                };
                axios({
                    cancelToken: this.password.cancelToken.token,
                    method: 'PUT',
                    data,
                    url: this.$store.state.config.base_url + '/panel/profile/me/password',
                }).then((response) => {
                    if (!isObject(response.data)) return setTimeout(() => this.savePassword(e), 1000);
                    this.password.counter = 0;
                    this.password.changed = true;
                    this.password.loading = false;
                }, (err) => {
                    this.password.counter++;
                    this.password.changed = false;
                    this.password.loading = false;
                    if (!err.response) return;
                    try {
                        if (typeof err.response.data.messages.csrf != 'undefined') this.$store.state.config.csrf.value = err.response.data.messages.csrf;
                    } catch (err) {
                    }
                    if (this.password.counter < 10 && err.response.status != 400) return setTimeout(this.savePassword, 100 * this.password.counter);
                    Swal.fire('Error', gaem(err, 'Gagal Mengubah Password Saya'), 'error');
                });
            },
            saveAboutMe() {
                axios({
                    method: 'PUT',
                    data: {
                        [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                        about_me: this.$store.state.config.person.about_me
                    },
                    url: this.$store.state.config.base_url + '/panel/profile/me/about',
                }).then((response) => {
                    if (!isObject(response.data)) return setTimeout(() => this.saveAboutMe(), 1000);
                    this.about_me.counter = 0;
                }, (err) => {
                    this.about_me.counter++;
                    try {
                        if (typeof err.response.data.messages.csrf != 'undefined') this.$store.state.config.csrf.value = err.response.data.messages.csrf;
                    } catch (err) {
                    }
                    if (this.about_me.counter < 10) {
                        setTimeout(this.saveName, 100 * this.about_me.counter);
                    } else {
                        Swal.fire('Error', gaem(err, 'Gagal Mengubah Tentang Saya'), 'error');
                    }
                });
            },
            loadData() {
                this.errInit = false;
                this.errMsg = '';
                axios({
                    method: 'GET',
                    url: this.$store.state.config.base_url + '/panel/profile/me',
                }).then((response) => {
                    if (!isObject(response.data)) return setTimeout(() => this.loadData(), 1000);
                    this.$store.commit('config/person', response.data.data);
                    this.ready = true;
                }, (err) => {
                    this.errInit = true;
                    this.errMsg = gaem(err);
                    try {
                        if (typeof err.response.data.messages.csrf != 'undefined') this.$store.state.config.csrf.value = err.response.data.messages.csrf;
                    } catch (err) {

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



