var VPLogin = (function () {
    let vt_template = `

    <div class="row g-0 auth-row">
        <div class="d-none d-md-block col-md-6">
            <div class="auth-cover-wrapper bg-primary-100">
                <div class="auth-cover">
                    <div class="title text-center">
                        <h1 class="text-primary mb-10">Selamat Datang</h1>
                        <p class="text-medium">
                            Masuk untuk melanjutkan
                        </p>
                    </div>
                    <div class="cover-image">
                        <img src="/vendors/plainadmin/assets/images/auth/signin-image.svg" alt="" />
                    </div>
                    <div class="shape-image">
                        <img src="/vendors/plainadmin/assets/images/auth/shape.svg" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <!-- end col -->
        <div class="col-md-6">
            <div class="signin-wrapper" style="padding:10px 40px 40px 40px">
                <div class="form-wrapper">
                    <div class="text-center">
                       
                        <img style="width:200px" :src="ls" alt="" />
                        
                        <h2 class="mb-15">{{namasekolah}}</h2>
                    </div>
                    
                    <div v-show="errorMessage" class="alert-box danger-alert ">
                        <div class="alert">
                            <p class="text-medium">
                                {{errorMessage}}
                            </p>
                        </div>
                    </div>

                    <p class="text-sm mb-25">
                    </p>
                    <form action="" @submit.prevent="login">
                        <slot></slot>
                        <div class="row">
                            <div class="col-12">
                                <div class="input-style-1">
                                    <label>Username</label>
                                    <input autofocus v-model="username" required type="text" placeholder="Masukan Username" />
                                </div>
                            </div>
                            <!-- end col -->
                            <div class="col-12">
                                <div class="input-style-2">
                                    <label>Password</label>
                                    <input v-model="password" required :type="passoff?'text':'password'" placeholder="Masukan Password" />
                                    <span style="cursor:pointer" @click="passoff=!passoff" class="icon"> <i :class="passoff?'mdi-eye-off-outline':'mdi-eye-outline'" class="mdi"></i> </span>
                                </div>
                            </div>
                            <!-- end col -->
                            <div class="col-12">
                                <div class="
                        button-group
                        d-flex
                        justify-content-center
                        flex-wrap
                      ">
                                    <button :disabled="loading" class="
                          main-btn
                          primary-btn
                          btn-hover
                          w-100
                          text-center
                        ">
                                        <template v-if="loading">
                                            <div class="spinner-border" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </template>
                                        <template v-else>
                                            Masuk
                                        </template>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->
                    </form>
                    <div class="singin-option pt-30">
                    <p class="text-sm text-medium text-dark text-center">
                      CopyRight <i class="fa fa-copyright" aria-hidden="true"></i> {{ new Date().getFullYear() }} Candy School
                      <br>PHP Version {{phpv}} | App Version {{appv}}
                      
                    </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->
`;

    return {
        name: "login-page",
        template: vt_template,
        props:['namasekolah','ls','phpv','appv'],
        data() {
            return {

                errorMessage: '',
                loading: false,
                passoff: false,
                username: null,
                password: null,
            }
        },
        mounted() {

        },
        methods: {
            login() {
                this.errorMessage = '';
                this.loading = true;
                let data = {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                    username: this.username,
                    password: this.password
                };
                axios({
                    method: 'POST',
                    data: data,
                    url: window.location.href,
                }).then((response) => {
                    if (!isObject(response.data)) return this.errorMessage = gaem({ response }, response.data);
                    window.location.href = response.data.redirect_url;
                }, (error) => {
                    this.errorMessage = gaem(error);
                    try {
                        if (typeof error.response.data.messages.csrf != 'undefined') this.$store.state.config.csrf.value = error.response.data.messages.csrf;
                    } catch (error) {

                    }
                }).finally(() => this.loading = false);
            }
        }
    }
})();
