<template>
    <div class="container">
        <div class="card">
            <div class="form">
                <div class="left-side">
                    <div class="left-heading">
                        <h3>{{company_Name}}</h3>
                    </div>
                    <Step step="1"/>
                </div>
                <div class="right-side">
                    <form @submit.prevent="createAccount" autocomplete="off" class="form-element was-validated form-element--login" method="post" id="createAccountForm"
                          novalidate="novalidate">
                        <div class="main active">
                            <TopArea/>
                            <div class="text">
                                <h3>Creating your account only takes a few seconds.</h3>
                                <p>Let's start with some basic info.</p>
                            </div>
                            <div class="text" v-if="isButtonDisabled">
                                <p class="error-text">All fields are required</p>
                            </div>
                            <div class="text" v-else-if="errorMsg.message">
                                <p class="error-text">{{errorMsg.message[0]}}</p>
                            </div>
                            <div class="input-text">
                                <input
                                    type="text"
                                    placeholder="First Name"
                                    name="first_name"
                                    :backend="errors.first_name"
                                    :errors="v$.formData.first_name.$errors"
                                    v-model="formData.first_name"
                                    :rules="['required']"
                                    :className="{'warning':errors.first_name}"
                                />
                                <input
                                    type="text"
                                    placeholder="Last Name"
                                    name="last_name"
                                    :backend="errors.last_name"
                                    v-model="formData.last_name"
                                    :errors="v$.formData.last_name.$errors"
                                    :rules="['required']"
                                    :className="{'warning':errors.last_name}"
                                />
                            </div>
                            <div class="input-text">
                                <input
                                    type="text"
                                    placeholder="Email"
                                    v-model="formData.email"
                                    :errors="v$.formData.email.$errors"
                                    :rules="['required','email']"
                                    :className="{'warning':errors.email}"
                                />
                            </div>
                            <div class="input-text">
                                <input
                                    type="password"
                                    placeholder="Password"
                                    :backend="errors.password"
                                    v-model="formData.password"
                                    :errors="v$.formData.password.$errors"
                                    :rules="['required','password']"
                                    :className="{'warning':errors.password}"
                                />
                            </div>
                            <div class="input-text">
                                <VueRecaptcha
                                    :sitekey="siteKey"
                                    :load-recaptcha-script="true"
                                    @verify="handleSuccess"
                                    @error="handleError"
                                />

                            </div>
                            <div class="input-text">
                                <input type="checkbox" v-model="formData.is_click_acknowledge"  @change.prevent="checkClickAcknowledge($event)">
                                <span style="font-weight:bold;color:purple;font-size: 12px;margin-top:5px">
                                    By clicking on the "Next " button on the left, I acknowledge that I have read the Service Agreement, <a href="/terms-of-service" target="_blank">Terms of Use</a> and <a href="/terms-of-service" target="_blank">Privacy Policy</a> , and that I agree to their terms.
                                </span>
                            </div>
                            <div class="buttons">
                                <button :disabled="v$.formData.$invalid" type="submit" value="Next" class="next_button">Next Step</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
<Footer/>
</template>
<script>
import register from "@/Api/register";
import {
    setStep,
    setUserEmail,
    setUserId,
    setSecurityKey,
    setPackageId,
    setAmount,
    setUserLastName,
    getPackageId,
    setUserFirstName,
    setUserPassword,
    getUserFirstName,
    getUserLastName,
    getUserPassword,
    getUserEmail,
    getUserId, getLocalStorage,setLocalStorage
} from "../../helper";
import router from "../../router";
import { VueRecaptcha } from 'vue-recaptcha';
import useVuelidate from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'
import { GOOGLE_CAPTCHA_SITEKEY } from "../../config/constants";
import pkg from "../../helper/package";
import Footer from "./Footer.vue";

export default {
    components: {VueRecaptcha,Footer},
    setup() {
        return {v$: useVuelidate()};
    },
    data(){
        return {
            formData:{
                first_name: "",
                last_name: "",
                email: "",
                password: "",
                captcha:"",
                is_click_acknowledge:null
            },
            siteKey:GOOGLE_CAPTCHA_SITEKEY,
            message:"",
            errors:{},
            errorMsg:{},
            isButtonDisabled:true,
            package:pkg,
            appName : APP_NAME,
            company_Name: COMPANY_NAME
        }
    },
    async mounted() {
                const userData = JSON.parse(getLocalStorage('formData'))|| [];
                this.formData.first_name = userData.first_name;
                this.formData.last_name = userData.last_name;
                this.formData.email = userData.email;
                this.formData.password = userData.password;
    },

    methods:{

        handleSuccess(response){
            if(response) {
                this.formData.captcha = response;
            }
        },
        handleError(){
            this.formData.captcha = "";
        },
        async createAccount(){
            const result = await register.createAccount(this.formData);
            this.errors = {};
            this.errorMsg = {};
            if (result.status_code == 100) {
                setLocalStorage('formData', JSON.stringify(this.formData));
                setStep(2);
                router.push({name: 'add-profile'});
            } else {
                this.errors = result.data

                if(result.status_code == 400)
                {
                    this.errorMsg.message = [result.message];
                }else {
                    if (this.errors?.email) {
                        this.errorMsg.message = this.errors?.email;
                    }else if (this.errors?.password) {
                        this.errorMsg.message = this.errors?.password;
                    } else {
                        this.errorMsg.message = this.errors?.captcha;
                    }
                }
                if (this.errorMsg.message){
                    this.isButtonDisabled = false
                }
            }
        },
        checkClickAcknowledge(e){
            if(e.target.checked){
                this.formData.is_click_acknowledge=e.target.checked;
            }
            else {
                this.formData.is_click_acknowledge=null;
            }
        },
    },

    validations () {
        this.errors = {};
        return {
            formData: {
                first_name: {required},
                last_name: {required},
                email:{required,email},
                password:{required},
                is_click_acknowledge:{required}
            }
        }
    }
}
</script>
<style scoped>
@media (max-width: 750px) {
    .container .card .right-side {
        width: 100%;
        border-radius: 0 !important;
    }
    .container .card .left-side {
        display: block;
        width: 100%;
        border-radius: 0 !important;
    }
    .container .card .form {
        display: block;
    }
}
.error-text {
    color: red;
    text-align: center
}
</style>


