<template>
    <div class="container">
        <div class="card">
            <div class="form">
                <div class="left-side">
                    <div class="left-heading">
                        <h3>{{ company_Name }}</h3>
                    </div>
                    <div class="steps-content">
                        <h3>Step <span class="step-number">3</span></h3>
                        <p class="step-number-content active">Enter your personal information to get closer to
                            companies.</p>
                        <p class="step-number-content d-none">Get to know better by adding your diploma,certificate and
                            education life.</p>
                        <p class="step-number-content d-none">Help companies get to know you better by telling then about
                            your past experiences.</p>
                        <p class="step-number-content d-none">Add your profile picture and let companies find youy
                            fast.</p>
                    </div>
                    <ul class="progress-bar">
                        <li class="active">Create Account</li>
                        <li class="active">Add Profile</li>
                        <li class="active">Credit Report</li>
                    </ul>
                </div>
                <div class="right-side">
                    <div class="main active">
                        <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                            <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
                            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                        </svg>

                        <div class="text congrats">
                            <h2 style="color:purple">Congratulations!</h2>
                            <p style="color:purple">On your sign up, please allow 24 hours or less for Admin to check your email and name to turn you on appropriately. </p>

                        </div>

                        <div class="input-text">

                            <div class="input-div buttons" style="text-align: center" >
                                <button @click.prevent="makePayment"  type="submit" value="Next" class="next_button">
                                   Get Started
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<Footer/>
</template>
<script>
import pkg from "../../helper/package";
import {onMounted} from 'vue';
import {
    unsetStep,
    getPackageId,
    getUserId
} from "../../helper";
import register from "../../Api/register";
import router from "../../router";
import Footer from "./Footer.vue";

export default {
    components: {Footer},
    setup() {
        onMounted(()=>{
            unsetStep()
        })
        return {APP_URL};
    },
    data(){
        return {
            package_id:0,
            package:pkg,
            app_base_url: APP_URL,
            company_Name:COMPANY_NAME
        }
    },
    async mounted() {
        this.package_id = getPackageId();
    },
    created() {
        this.fbEvents();
    },
    methods:{
        fbEvents(){
            window.fbq('init', '450475028484130');
            window.fbq('track', 'PageView');
            window.fbq('track', 'Purchase');
        },
        async makePayment() {
            localStorage.removeItem('formData');
            window.location.href = `${this.app_base_url}/login`;
            // const userData = JSON.parse(localStorage.getItem('formData')) || [];
            // this.errors = {}
            // let formData= {'user_id': getUserId(),'email':userData.email,'card_number':userData.card_number, 'expiry':userData.expiry,'amount':userData.amount,'full_ssn':userData.full_ssn,'phone':userData.phone ,'zip_code':userData.zip_code};
            // const data = await register.makePayments(formData);
            // if (data.status_code == "100") {
            //     localStorage.removeItem('formData');
            //     this.isOpen=false;
            //     this.isView=false;
            //     window.location.href = `${APP_URL}/login`;
            // } else if (data.status_code == "402") {
            //     this.errors = data.data;
            // } else {
            //     this.message[0] = data.message;
            // }
        },
    }
}



</script>
<style scoped>
   @import '../../../css/credit_report.css';
   .container .card {
       height: 550px;
   }
   @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;
       }
   }
</style>
