<template>
    <div class="container">
        <div class="card">
            <div class="form">
                <div class="left-side">
                    <div class="left-heading">
                        <h3>Creditzombies</h3>
                    </div>
                    <Step step="3"/>
                </div>
                <div class="right-side">
                    <div class="main active" style="padding: 30px 40px 0px 20px">
                        <TopArea/>
                    </div>
                    <div class="row" style="padding:10px 20px">
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                            <div @click="getPackage(1)" class="listing listing-radius listing-primary package-1" :class="{'listing-highlight':is_highlight1}">
                                <div class="shape">
                                    <div class="shape-text">Best offer</div>
                                </div>
                                <div class="listing-content">
                                    <h3 class="lead text-white text-bold">SmartCredit</h3>
                                    <p class="text-white text-bold">${{ package.prices[1] }} (Basic)</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                            <div @mouseover="toggleClassForPackage" @click="getPackage(2)" class="listing listing-radius listing-success">
                                <div class="shape">
                                    <div class="shape-text">50%</div>
                                </div>
                                <div class="listing-content">
                                    <h3 class="lead text-success text-bold">SmartCredit</h3>
                                    <p class="text-success text-bold">${{ package.prices[2] }} (Premium)</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                            <div @mouseover="toggleClassForPackage" @click="getPackage(3)" class="listing listing-danger listing-radius">
                                <div class="shape">
                                    <div class="shape-text">hot</div>
                                </div>
                                <div class="listing-content">
                                    <h3 class="lead text-danger text-bold">Identity IQ</h3>
                                    <p class="text-danger text-bold">Unavailable at this time
                                        </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
import pkg from "../../helper/package";
import {setAmount, setPackageId, setStep} from "../../helper";
import router from "../../router";

export default {
    setup() {
    },
    data(){
        return {
            package:pkg,
            is_highlight1:true
        }
    },
    methods:{
        toggleClassForPackage(){
            this.is_highlight1 = false
        },
        conditionalAlert(message,package_id){
            this.$swal({
                title: 'Warning',
                text: message,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    setStep(5);
                    setPackageId(package_id)
                    setAmount(this.package.prices[package_id])
                    router.push({name: 'make-payment'})
                }
            });
        },
        getPackage(package_id) {
            if(package_id == 3){
                this.$swal(
                    "Currently this package is not available",
                    "",
                    "warning"
                )
            }else {
                this.conditionalAlert("Are you sure want to take the $"+this.package.prices[package_id]+ ' ('+this.package.labels[package_id]+") package?", package_id);
            }
        }
    }
}
</script>

<style scoped>
   @import '../../../css/credit_report.css';

   .container .card {
       height: 600px;
   }

   .listing{
       font-family: "Lato", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   }
   .text-white{
       color: white;
   }
   .package-1{
       background-color: #FF440A;
   }

   .listing-highlight{
       -webkit-transform: scale(1.1);
       transition: all 0.4s ease-in-out;
   }
   .package-1 .shape {
       border-style: solid;
       border-width: 0 100px 55px 0;
       float: right;
       height: 0;
       width: 0;
       transform: rotate(360deg);
   }

   .package-1 .shape-text {
       color: #FF440A;
       font-size: 12px;
       font-weight: bold;
       position: relative;
       right: -45px;
       top: -2px;
       white-space: nowrap;
       transform: rotate(28deg);
   }

   .package-1.listing-primary .shape{
       border-color: transparent #fff transparent transparent;
   }
</style>
