<script type="text/x-template" id="signup-form-template">
    <div class="signup-form">
        <div v-if="registration" class="login-form registration-form">
            <div class="sign-up-title">
                <p>{{ ucfirst(__('shop::app.customer.signup-form.title')) }}</p>
                <div class="sign-up-exit-img">
                    <img src="{{ bagisto_asset('icons/cancel.svg') }}" alt="exit">
                </div>
            </div>
            <form class="sign-up-content" method="post" @submit.prevent="validateLSignupForm('register')" data-vv-scope="register" autocomplete="on">
                <span class="control-error" v-if="errors.has('register.register')">@{{ errors.first('register.register') }}</span>
                <h1 class="control-error" v-if="message">@{{ message }}</h1>
                <div class="sign-up-input">
                    <span>{{ ucfirst(__('shop::app.customer.signup-form.firstname') )}}</span>
                    <div class="dif-input">
                        <input type="text" name="first_name" v-model="first_name" v-validate="'required|alpha|min:3'"
                               autocomplete="on"
                               data-vv-as="&quot;{{ ucfirst(__('shop::app.customer.signup-form.firstname')) }}&quot;">
                        <span class="control-error" v-if="errors.has('register.first_name')">@{{ errors.first('register.first_name') }}</span>
                    </div>
                </div>
                <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" name="phone" v-model="phone" v-validate="'required|numeric|digits:8'"
                               autocomplete="on"
                               data-vv-as="&quot;{{ ucfirst(__('shop::app.customer.account.address.create.phone')) }}&quot;" >
                        <span class="control-error" v-if="errors.has('register.phone')">@{{ errors.first('register.phone') }}</span>
                    </div>
                </div>
                <div class="sign-up-input">
                    <span>{{ ucfirst(__('shop::app.customer.signup-form.email') )}}</span>
                    <div class="dif-input">
                        <input type="email" name="email" v-model="email">
                    </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-model="password" v-validate="'required|min:6'" ref="password"
                               autocomplete="off"
                               data-vv-as="&quot;{{ ucfirst(__('shop::app.customer.signup-form.password'))}}&quot;">
                        <span class="control-error" v-if="errors.has('register.password')">@{{ errors.first('register.password') }}</span>
                    </div>
                </div>


                <div class="agree">
                    <div class="agree-input">
                        <input id="agree" type="checkbox" name="agree" v-model="agree" v-validate="'required'"
                               autocomplete="off"
                            data-vv-as="&quot;{{ ucfirst(__('shop::app.customer.signup-form.agree')) }}&quot;">
                        <label for="agree" style="margin: 0 0 0 15px">{{ ucfirst(__('shop::app.customer.account.address.create.agree')) }}</label>
                    </div>
                    <div class="agree-error" style="display: flex;justify-content: center;">
                        <span class="control-error" v-if="errors.has('register.agree')" style="">@{{ errors.first('register.agree') }}</span>
                    </div>
                </div>



                <button type="submit" class="log-in" :disabled="disable_button" >{{ ucfirst(__('shop::app.customer.signup-form.button_title')) }}</button>
                <div class="sign-up-footer">
                    <span>{{ ucfirst(__('shop::app.customer.signup-text.account_exists')) }} </span>
                    <span class="sign-up-btn sign-up-btn-return">{{ ucfirst(__('shop::app.customer.signup-text.title')) }}</span>
                </div>
            </form>
        </div>
        @if(core()->getConfigData('customer.settings.email.verification'))
            <div v-else class="login-form password-recovery-nr" >
                <div class="sign-up-title">
                    <p>Verify phone number</p>
                    <div class="sign-up-exit-img">
                        <img src="{{bagisto_asset('icons/cancel.svg')}}" alt="exit">
                    </div>
                </div>
                <form class="sign-up-content" method="post" data-vv-scope="verification" @submit.prevent="verifyPhone('verification')">
                    <div class="sign-up-input">
                        <span>Verification code</span>
                        <div class="dif-input">
                            <input class="abs-input" type="text" name="verification" v-model="code">
                        </div>
                    </div>
                    <button type="submit" class="log-in topped sms-trigger">{{ ucfirst(__('shop::app.customer.signup-form.button_title')) }}</button>
                </form>
            </div>
        @endif
    </div>

</script>
<script>
    Vue.component('signup-form-component', {
        template: '#signup-form-template',

        inject: ['$validator'],

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

                password: "",

                first_name: '',

                email: '',

                agree: '',

                message: null,

                disable_button: false,

                registration: true,

                code:''
            }
        },
        methods: {
            validateLSignupForm(scope){
                let self = this;

                self.message = null;

                self.disable_button = true;

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

                                    window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];

                                    self.$root.addFlashMessages();

                                    // window.location.href = response.data.redirect;
                                    setTimeout(function() {
                                        // let regForm = document.querySelector('.registration-form');
                                        let loginForm = document.querySelector('.login-form');
                                        console.log(loginForm);
                                        // regForm.style.display = 'none';
                                        loginForm.style.display = 'block';
                                    }, 1500);

                                    self.registration = false;

                                }

                                self.disable_button = false;
                            })
                            .catch(function(error) {
                                self.error_message = error.response.data.message;
                                // self.$setErrorsFromResponse(error.response.data);
                                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')
                    }
                });

            },
            verifyPhone(scope){
                let self = this;
                self.message = null;
                this.$validator.validateAll(scope).then(result => {
                    if (result) {
                        axios.post('{{ route('customer.register.verify') }}', {code: self.code})
                            .then(function(response) {
                                self.message = response.data.message;
                                window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];

                                self.$root.addFlashMessages();

                                // window.location.href = response.data.redirect;
                                setTimeout(function() {
                                    let regForm = document.querySelector('.registration-form');
                                    let loginForm = document.querySelector('.login-form');
                                    regForm.style.display = 'none';
                                    loginForm.style.display = 'block';
                                }, 1500);

                                self.verification = false;
                            }).catch(function(error) {
                            self.error_message = error.response.data.message;
                            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
                                });
                            });
                        });
                    }
                });
            }
        }
    });
</script>