<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" v-if="is_free !== '1'">
                            <h2 style="color:purple">Congratulations!</h2>
                            <p style="color:purple">Your purchase for ${{ package.prices[package_id] }}({{ package.labels[package_id] }}) went though. </p>
                            <p style="color:purple">This is a reoccurring payment that you authorized.</p>
                            <p style="color:purple">Important you will see a charge form <span style="font-size: large !important;"> Clickletters LLC </span>  </p>
                            <p style="color:purple">on your bank statement each month or until you cancel.</p>
                        </div>
                        <div class="text congrats" v-if="is_free === '1'">
                            <h2 style="color:purple">Congratulations!</h2>
                        </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 {
            is_free: IS_FREE,
            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`;
        },
    }
}



</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>
