<template>
    <div class="container">
        <div class="card">
            <div class="form">
                <div class="left-side">
                    <div class="left-heading">
                        <h3>{{appName}}</h3>
                    </div>
                    <Step step="2"/>
                </div>
                <div class="right-side">
                    <form @submit.prevent="makePayment" autocomplete="off"
                          class="form-element was-validated form-element--login" method="post"
                          novalidate="novalidate">
                        <div class="main active">
                            <TopArea :is_show_login="false"/>
                            <div class="text">
                                <h2> {{company_Name}}
                                    <span v-if="reportProvider==='3'"> Partnered with {{reportProviders.labels[reportProvider]}}</span>
                                    <span v-if="reportProvider==='1'"> Powerful Software System </span>
                                </h2>
                                <p>Let's start with some basic info.</p>
                            </div>
                            <SmartCreditLogo :package_id="formData.package_id" />
<!--                            <SmartCreditLogo :package_id="formData.package_id" v-if="reportProvider==='3'"/>-->
<!--                            <IdentityIqLogo :package_id="formData.package_id" v-if="reportProvider==='1'"/>-->
                            <div class="text" v-if="isButtonDisabled">
                                <p style="color:red;text-align:center">All fields are required</p>
                            </div>
                            <div class="text" v-if="message">
                                <p style="color:red;text-align:center">{{ message[0] }}</p>
                            </div>
                            <div class="input-text">
                                <div class="input-div">
                                    <p class="edit-text">
                                        <a href="#" @click.prevent="toggle('first_name')">Edit</a>
                                    </p>
                                    <input
                                        ref="first_name"
                                        autocomplete="off"
                                        :class="{'warning':v$.formData.first_name.$errors.length}"
                                        placeholder="First Name"
                                        type="text"
                                        v-model="formData.first_name"
                                        :readonly="disabled == 1"
                                    />
                                    <ValidationError :backend="errors.first_name"
                                                     :msg="v$.formData.first_name.$errors"/>
                                </div>
                                <div class="input-div">
                                    <p class="edit-text">
                                        <a href="#" @click.prevent="toggle('last_name')">Edit</a>
                                    </p>
                                    <input
                                        ref="last_name"
                                        autocomplete="off"
                                        :class="{'warning':v$.formData.last_name.$errors.length}"
                                        placeholder="Last Name"
                                        type="text"
                                        v-model="v$.formData.last_name.$model"
                                        :readonly="disabled == 1"
                                    />
                                    <ValidationError :backend="errors.last_name" :msg="v$.formData.last_name.$errors"/>
                                </div>
                            </div>
                            <div class="input-text">
                                <div class="input-div">
                                    <p class="edit-text">
                                        <a href="#" @click.prevent="toggle('email')">Edit</a>
                                    </p>
                                    <input
                                        ref="email"
                                        autocomplete="off"
                                        :class="{'warning':errors.email}"
                                        placeholder="Email"
                                        type="text"
                                        v-model="v$.formData.email.$model"
                                        :readonly="disabled == 1"
                                    />
                                    <ValidationError :backend="errors.email" :msg="v$.formData.email.$errors"/>
                                </div>
                            </div>
                            <div class="input-text">
                                <div class="input-div">
                                    <p class="edit-text">
                                        <a href="#" @click.prevent="toggle('password')">Edit</a>
                                    </p>
                                    <input
                                        ref="password"
                                        autocomplete="off"
                                        :class="{'warning':errors.password}"
                                        placeholder="Password"
                                        type="password"
                                        v-model="v$.formData.password.$model"
                                        :readonly="disabled == 1"
                                    />
                                    <ValidationError :backend="errors.password" :msg="v$.formData.password.$errors"/>
                                </div>
                                <div class="input-div" style="margin-top: 20px">
                                    <input
                                        ref="phone"
                                        autocomplete="off"
                                        :class="{'warning':errors.phone}"
                                        placeholder="Phone, e,g. 954-604-4220"
                                        type="text"
                                        v-model="v$.formData.phone.$model"
                                    />
                                    <ValidationError :backend="errors.phone" :msg="v$.formData.phone.$errors"/>
                                </div>
                            </div>
                            <div class="input-text">
                                <div class="input-div">
                                    <input
                                        ref="full_ssn"
                                        autocomplete="off"
                                        :class="{'warning':errors.full_ssn}"
                                        placeholder="Last 4 digit of SSN"
                                        type="text"
                                        @keyup.prevent="ssnCompleted($event)"
                                        v-model="v$.formData.full_ssn.$model"
                                        :maxlength="min"
                                    />
                                    <ValidationError :backend="errors.full_ssn" :msg="v$.formData.full_ssn.$errors"/>
                                </div>
                                <div class="input-div">
                                    <input
                                        ref="full_ssn"
                                        autocomplete="off"
                                        :class="{'warning':errors.birth_date}"
                                        placeholder="Birth Date e.g, mm/dd/yyyy"
                                        type="text"
                                        v-model="v$.formData.birth_date.$model"
                                        @keyup.prevent="birthDateCompleted($event)"
                                        :maxlength="10"
                                    />
                                    <ValidationError :backend="errors.birth_date" :msg="v$.formData.birth_date.$errors"/>
                                </div>
                            </div>
                            <div class="input-text">
                                <div class="input-div">
                                    <input
                                        ref="street_no"
                                        autocomplete="off"
                                        :class="{'warning':errors.street_no}"
                                        placeholder="Street No."
                                        type="text"
                                        v-model="v$.formData.street_no.$model"
                                    />
                                    <ValidationError :backend="errors.street_no" :msg="v$.formData.street_no.$errors"/>
                                </div>
                                <div class="input-div">
                                    <input
                                        ref="street_name"
                                        autocomplete="off"
                                        :class="{'warning':errors.street_name}"
                                        placeholder="Street Name"
                                        type="text"
                                        v-model="v$.formData.street_name.$model"

                                    />
                                    <ValidationError :backend="errors.street_name"
                                                     :msg="v$.formData.street_name.$errors"/>
                                </div>
                            </div>
                            <div class="input-text">
                                <div class="input-div">
                                    <input
                                        ref="city"
                                        autocomplete="off"
                                        :class="{'warning':errors.city}"
                                        placeholder="City"
                                        type="text"
                                        v-model="v$.formData.city.$model"
                                    />
                                    <ValidationError :backend="errors.city" :msg="v$.formData.city.$errors"/>
                                </div>
                                <div class="input-div">
                                    <select ref="state" v-model="v$.formData.state.$model" >
                                        <option value="">Please select state</option>
                                        <option :key="item.id" v-for="item in stateList" :value="item.id">
                                            {{ item.value }}
                                        </option>
                                    </select>
                                    <ValidationError :backend="errors.state" :msg="v$.formData.state.$errors"/>
                                </div>

                            </div>
                            <div class="input-text">
                                <div class="input-div">

                                    <input
                                        ref="zip_code"
                                        autocomplete="off"
                                        :class="{'warning':errors.zip_code}"
                                        placeholder="Zip Code"
                                        type="text"
                                        v-model="v$.formData.zip_code.$model"

                                    />
                                    <ValidationError :backend="errors.zip_code" :msg="v$.formData.zip_code.$errors"/>
                                </div>
                                <div class="input-div">
                                    <input
                                        ref="ssn"
                                        autocomplete="off"
                                        :class="{'warning':errors.ssn}"
                                        placeholder="Last 4 digit of SSN"
                                        type="text"
                                        v-model="v$.formData.ssn.$model"
                                        :maxlength="4"
                                        @keyup.prevent="ssnCompleted($event)"
                                    />
                                    <ValidationError :backend="errors.ssn" :msg="v$.formData.ssn.$errors"/>
                                </div>
                            </div>
                            <div class="input-text" >
                                <div class="input-div buttons" style="text-align: left">
                                    <button  type="button" value="Back" class="back_button" @click.prevent="backToProfile" >
                                        Back
                                    </button>
                                </div>
                                <div class="input-div buttons" style="text-align: left">
                                    <button :disabled="v$.formData.$invalid"  type="submit" value="Next" class="next_button" >
                                        Next Step
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                    <SmartCreditPkg :package_id="formData.package_id" v-if="reportProvider === '3'"  />

                    <IdentityIQPkg :package_id="formData.package_id" v-if="reportProvider === '1'" />

            </div>
        </div>

        <PaymentModal @close="closeModal" :data="prepareformData" v-if="isModalVisible" />

        <modal :questionAnswer="questionList" v-if="isQuestionModalVisible && reportProvider === '3' " />
    </div>
    <Footer/>
</template>

<script>
import useVuelidate from '@vuelidate/core'
import {required, email, integer,minLength} from '@vuelidate/validators'
import register from "./../../Api/register";
import {
    getFormData,
    setCustomerToken,
    setFormData,
    setReferenceNumber,
    setStep,
    setTrackingToken,
    getLocalStorage,
    setLocalStorage,
    unsetLocalStorage
} from "../../helper";
import router from "../../router";
import state from "../../helper/state";
import pkg from "../../helper/package";
import SmartCreditLogo from "./SmartCreditLogo";
import SmartCreditPkg from "./SmartCreditPkg";
import modal from "./modal";
import PaymentModal from "./PaymentModal.vue";
import store from "../../store";
import Footer from "./Footer.vue";
import IdentityIQPkg from "./IdentityIQPkg";
import reportProviders from "../../helper/report_provider"
import IdentityIqLogo from "./IdentityIqLogo.vue";

export default {
    components: {IdentityIqLogo, SmartCreditPkg, SmartCreditLogo,PaymentModal,modal,Footer,IdentityIQPkg },
    setup() {
        return {v$: useVuelidate()}
    },
    data() {
        return {
            reportProvider: REPORT_PROVIDER,
            prepareformData:{},
            formData: {
                full_name:"",
                first_name: "",
                last_name: "",
                email: "",
                password: "",
                street_no: "",
                street_name: "",
                city: "",
                ssn: "",
                state: "",
                zip_code: "",
                phone: "",
                full_ssn:"",
                package_id: 0,
                birth_date:"",
                amount:0,
                question_id:"",
                answer:"",
                address:"",
                card_number:"",
                expiry:"",
                cvv_no:"",
                is_authorized:false,
                is_free:IS_FREE,
            },
            stateList: state,
            errors:{},
            message: [
                "All fields are required"
            ],
            isButtonDisabled:false,
            disabled: 1,
            package: pkg,
            reportProviders:reportProviders,
            value: null,
            roleOptions:[],
            isOpen: false,
            min:4,
            isModalVisible: false,
            isQuestionModalVisible:false,
            questionList:null,
            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;
            this.formData.package_id = userData.package_id;
            this.formData.amount = userData.amount;
            this.formData.street_no= userData.street_no;
            this.formData.street_name=userData.street_name;
            this.formData.city=userData.city;
            this.formData.ssn=userData.ssn;
            this.formData.full_ssn= userData.full_ssn;
            this.formData.state=userData.state??'';
            this.formData.zip_code=userData.zip_code;
            this.formData.phone=userData.phone;
            this.formData.package_id=2;
            this.formData.birth_date=userData.birth_date;
            this.formData.amount = pkg.prices[this.formData.package_id];
    },
    methods: {
        async makePayment() {

            if(this.formData.is_free === "1") {
                const data = await register.customerCreateAndUpdate(this.formData);
                if (data.status_code == "100") {
                    unsetLocalStorage('formData');
                    setStep(6);
                    router.push({name: "success"});
                }else{
                    this.message = [data.message];
                    this.errors = data.data
                }

            }else {

                const data = await register.verifyProfile(this.formData);
                if (data.status_code == "100") {

                    this.formData.full_name = this.formData.first_name + ' ' + this.formData.last_name;
                    this.formData.address = this.formData.street_no + ' ' + this.formData.street_name;
                    this.prepareformData = this.formData;
                    setLocalStorage('formData', JSON.stringify(this.formData));
                    this.errors = {};
                    this.showModal();

                }else{
                    this.message = [data.message];
                    this.errors = data.data
                }
            }




        },
        toggle: function (refId) {
            let attribute = "readonly"
            if (refId === "state") {
                attribute = "disabled"
            }
            this.$refs[refId].toggleAttribute(attribute)
        },
        backToProfile:function (){
            setStep(1);
            router.push({name: 'create-account'});
        },
        checkTermsAndService(e){
            if(e.target.checked){
                this.formData.is_authorized=e.target.checked;
            }
            else {
                this.formData.is_authorized=null;
            }
        },
        ssnCompleted(e) {
            // if(this.formData.full_ssn.length === 3 || this.formData.full_ssn.length === 6) {
            //     this.formData.full_ssn += '-';
            // }
            // if(this.formData.full_ssn.length === 11){
            //     this.formData.ssn = this.formData.full_ssn.substring( 7, 11 );
            // }

            if(this.formData.full_ssn.length === 4){
                this.formData.ssn = this.formData.full_ssn;
            }
        },
        birthDateCompleted(e) {
            if(this.formData.birth_date.length===2 || this.formData.birth_date.length===5){
                this.formData.birth_date+='/';
            }
        },
        showModal() {
            this.isModalVisible = true;
        },
        closeModal(data) {
            this.isModalVisible = false;
            if(typeof(data.order_id) !== "undefined") {
                this.showQuestionModal(data);
            }

        },
        showQuestionModal(data)
        {
            this.questionList = data;
            this.isQuestionModalVisible = true;
        },
        closeQuestionModal()
        {
            this.isQuestionModalVisible = false;
        }
    },
    validations() {
        return {
            formData: {
                first_name: {required},
                last_name: {required},
                email: {required, email},
                password: {required},
                street_no: {required},
                street_name: {required},
                city: {required},
                ssn: {required,minLength:minLength(4)},
                state: {required},
                zip_code: {required},
                phone: {required},
                full_ssn: {required,minLength:minLength(this.min)},
                birth_date: {required},
            }
        }
    }
}
</script>

<style scoped>
.container .card {
    width: 1300px;
}

.input-text {
    margin: 15px 0;
    display: flex;
    gap: 20px;
}

.container .card .form {
    background-image: unset;
}

.container .card .left-side {
    width: 25%;
    background-image: -webkit-linear-gradient(-90deg, #54c7dc 0%, #4361c2 100%);
}

.container .card .right-side {
    width: 50%;
}

@media (max-width: 750px) {
    .container .card .right-side {
        width: 100%;
        border-bottom-left-radius: 20px !important;
        border-top-right-radius: 0px !important;
    }
    .container .card .left-side {
        display: block;
        width: 100%;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
    .container .card .form {
        display: block;
    }
    .smart-credit-pkg {
             width: 100%;
             padding-top: 1%;
             padding-right: 0px;
    }

}

</style>
