<script type="text/x-template" id="login-form-component-template">
    <div class="login-form">
        <div class="sign-up-title">
            <span>{{ ucfirst(__('shop::app.customer.login-form.title')) }}</span>
            <div class="sign-up-exit-img" @click="close()">
                <img src="{{ bagisto_asset('icons/cancel.svg') }}" alt="exit">
            </div>
        </div>
        <form class="sign-up-content" @submit.prevent="validateLoginForm('login')" data-vv-scope="login" autocomplete="on">
            <span class="control-error" v-if="errors.has('login.login')">@{{ errors.first('login.login') }}</span>
            <div class="sign-up-input">
                <span>{{ ucfirst(__('shop::app.customer.account.address.create.phone')) }}</span>
                <div class="dif-input">
                    <span class="pointer-ev-none">+993</span>
                    <input class="abs-input" type="text" v-model="phone" name="phone" v-validate="'required|numeric|digits:8'"
                           autocomplete="on"
                           data-vv-as="&quot;{{ ucfirst(__('shop::app.customer.account.address.create.phone')) }}&quot;" value="{{ old('phone') }}">
                    <span class="control-error" v-if="errors.has('login.phone')">@{{ errors.first('login.phone') }}</span>
                </div>
            </div>
            <div class="sign-up-input">
                <span>{{ ucfirst(__('shop::app.customer.signup-form.password')) }}</span>
                <div class="dif-input">
                    <input type="password" name="password" v-validate="'required|min:6'" v-model="password"
                           autocomplete="off"
                           data-vv-as="&quot;{{ ucfirst(__('shop::app.customer.signup-form.password')) }}&quot;">
                    <span class="control-error" v-if="errors.has('login.password')">@{{ errors.first('login.password') }}</span>
                </div>
            </div>
            <span class="forgot-pass" @click="forgotPassword()">{{__('shop::app.customer.login-form.forgot_pass')}}</span>
            <button type="submit" class="log-in" :disabled="disable_button">{{__('shop::app.customer.login-form.button-title')}}</button>
            <div class="sign-up-footer">
                <span>{{__('shop::app.customer.signup-form.dont-have-account')}}</span>
                <a href="#" class="sign-up-btn" @click="signup()">{{__('shop::app.customer.signup-form.title')}}</a>
            </div>
        </form>
    </div>
</script>
<script>
    Vue.component('login-form-component', {
        template: '#login-form-component-template',

        inject: ['$validator'],

        data: function() {
            return {
                phone: '',

                password: "",

                error_message: '',

                disable_button: false
            }
        },

        watch: {
            phone: function (value) {
                if (value != '') {
                    this.error_message = '';
                }
            }
        },

        methods: {
            validateLoginForm(scope){
                let self = this;

                self.error_message = null;

                self.disable_button = true;

                this.$validator.validateAll(scope).then(result => {
                    if (result) {
                        axios.post('{{ route('customer.session.create') }}', {phone: self.phone,password:self.password})
                            .then(function(response) {
                                // console.log(response.data);
                                if (response.data.success) {

                                    if(response.data.message){

                                        window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];
                                        self.$root.addFlashMessages();
                                    }
                                    window.location.href = response.data.redirect;
                                } else {
                                    self.error_message = response.data.message;

                                }

                                self.disable_button = false;
                            })
                            .catch(function(error) {
                                self.error_message = error.response.data.message;
                                self.disable_button = false;
                                let errorFields = Object.keys(error.response.data.errors);

                                errorFields.map(field => {
                                    let errorString = error.response.data.errors[field].join(', ');
                                    self.$validator.errors.add({
                                        field:field,
                                        msg: errorString,
                                        scope:scope
                                    });
                                });
                            });
                    } else {
                        self.disable_button = false;
                        eventBus.$emit('onFormError')
                    }
                });

            },
            forgotPassword(){
                let loginForm = document.querySelector('.login-form');
                let resetForm = document.querySelector('.reset-password');
                loginForm.style.display = 'none';
                resetForm.style.display = 'block';
            },
            signup(){
                let loginForm = document.querySelector('.login-form');
                let signupForm = document.querySelector('.signup-form');
                loginForm.style.display = 'none';
                signupForm.style.display = 'block';
            },
            close(){
                let loginForm = document.querySelector('.login-form');
                loginForm.style.display = 'none';
            }

        }
    });
</script>
