<!DOCTYPE html>
<html lang="en" class="loanbook">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sign Up</title>
    <base href="/register/">
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/png" />

    <link rel="stylesheet" href="assets/components/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/style.min.css" />

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>

<body class="page auth">
    <header class="header">
        <div class="logo">
            <a href="/">
                <img class="large" src="assets/img/logo-white.png" alt="Lendastack Logo">
                <img class="small" src="assets/img/logo-white.png" alt="Lendastack Logo">
            </a>
        </div>
        <div class="actions">
            <p>Already have an account?</p>
            <a class="btn btn-light" id="portalUrl">Login to dashboard</a>
        </div>
    </header>
    <main class="main content">
        <div class="banner">
            <div class="info">
                <p>In making sure you have a fair chance, we'll loan you a hand</p>


            </div>

        </div>


        <div class="form">

            <div class="card mt-20">
                <div class="card-body" id="app">


                    <div v-cloak>
                        <div class="box-header" v-cloak v-show="appOwnerName != ''">
                            <div class="header-container">
                                <div class="icon-container">
                                    <img class="icon-head" id="logoUrl" alt="icon"><br /><br />
                                    <div class="">
                                        <h5 class=""> {{ appOwnerName }}</h5>
                                        <p class=""><i class="fa fa-envelope-open"></i> &nbsp; {{appOwnerEmail}} </p>
                                    </div>

                                </div>
                                <hr style="border-top: 1px dashed rgba(0,0,0,.1);" />

                            </div>
                        </div>

                        <div class="text-center">
                            <div class="lds-ripple" v-show="showLoader">
                                <div></div>
                                <div></div>
                            </div>
                        </div>

                        <validation-observer v-slot="{ invalid }" ref="applicationForm">
                            <form @submit.prevent="saveApplicationForm" class="loanForm" method="POST"
                                v-show="showApplicationForm">
                                <div class="form-group">
                                    <label for="Outlet">Select Preferred Branch / Outlet</label>
                                    <validation-provider name="Outlet" rules="required" v-slot="{ errors }">
                                        <select v-model="applicationForm.branchId" class="form-control" id="Outlet"
                                            @change="getLoansByBranch">
                                            <option v-for="option in outlets" v-bind:value="option.branchId">
                                                {{ option.branchName }}
                                            </option>
                                        </select>
                                        <span class="text-danger">{{ errors[0] }}</span>
                                    </validation-provider>
                                </div>
                                <div v-show="branchSelected">
                                    <div class="form-group">
                                        <label for="Product">Select one of our loan products</label>
                                        <validation-provider name="Loan product" rules="required" v-slot="{ errors }">
                                            <select v-model="applicationForm.loanTypeId" @change="sortLoanInformation"
                                                class="form-control" id="Product">
                                                <option v-for="option in loanProduct" v-bind:value="option.loanTypeId">
                                                    {{ option.loanName }}
                                                </option>
                                            </select>
                                            <span class="text-danger">{{ errors[0] }}</span>
                                        </validation-provider>
                                    </div>
                                    <div v-show="loanTypeSelected" class="form-group row">


                                        <div class="col-md-6">
                                            <label for="LoanAmount">How much do you need? </label>
                                            <validation-provider name="Loan amount"
                                                rules="required|positive_price|rangeAmount" v-slot="{ errors }">
                                                <input @change="getLoanCalculationParameters"
                                                    v-mask="{alias: 'currency', prefix: '₦ ', rightAlign: false}"
                                                    v-model="applicationForm.loanAmount" type="text"
                                                    class="form-control" id="LoanAmount" />

                                                &nbsp;<span style="color: indianred;"> {{ minimumLoanTypeAmount |
                                                    toCurrency }} - {{ maximumLoanTypeAmount | toCurrency }}
                                                </span><br />
                                                <span class="text-danger">{{ errors[0] }}</span>

                                            </validation-provider>
                                        </div>

                                        <div class="col-md-6">

                                            <label for="NetIncome">What's your monthly net income?</label>
                                            <validation-provider name="Net income" rules="required|positive_price"
                                                v-slot="{ errors }">
                                                <input v-mask="{alias: 'currency', prefix: '₦ ', rightAlign: false}"
                                                    v-model="applicationForm.netIncome" type="text" class="form-control"
                                                    id="NetIncome" />
                                                <span class="text-danger">{{ errors[0] }}</span>
                                            </validation-provider>

                                        </div>

                                    </div>
                                    <div v-show="parametersRetrieved" class="form-group row">


                                        <div class="col-md-6">

                                            <label for="Tenor">For how long (Loan Tenor)? </label>
                                            <validation-provider name="Tenor" rules="required" v-slot="{ errors }">
                                                <select v-model="applicationForm.tenor" class="form-control" id="Tenor">
                                                    <option v-for="option in tenorArray" v-bind:value="option">
                                                        {{ option }}
                                                    </option>
                                                </select>
                                                <span class="text-danger">{{ errors[0] }}</span>
                                            </validation-provider>
                                        </div>

                                        <div class="col-md-6" v-show="parametersRetrieved" style="text-align: center;">
                                            <a href="javascript:void(0)" v-on:click="calculateRepayment()"
                                                class="btn btn-small-calculate">Calculate <i
                                                    class="fa fa-arrow-circle-right"></i> </a>
                                        </div>


                                    </div>





                                    <div v-show="repaymentsRetrieved" class="box right">
                                        <hr style="border-top: 1px dotted rgba(0,0,0,.1);">
                                        <h6>Your {{ repaymentPeriodType }} Repayment</h6>
                                        <div class="d-flex">
                                            <h1> {{ periodicRepayment | toCurrency}}</h1>
                                        </div>
                                        <hr>
                                        <div class="info">
                                            <h6>Total Payback Amount</h6>
                                            <h5>{{ totalRepayment | toCurrency}}</h5>
                                        </div>
                                    </div>



                                    <div v-show="repaymentsRetrieved" class="form-group">
                                        <button type="submit" class="btn btn-success btn-light">Proceed</button>
                                    </div>
                                </div>
                            </form>
                        </validation-observer>
                    </div>
                    <div v-cloak>
                        <validation-observer v-slot="{ invalid }" ref="registerForm">
                            <form @submit.prevent="saveRegisterForm" class="registerForm" method="POST"
                                v-show="showRegisterForm">

                                <div class="text-center" v-show="isUniqueIdButBvnPartnerNotActive">
                                    <br />

                                    <i class="fa fa-exclamation-circle text-danger"
                                        aria-hidden="true"></i>&nbsp;Registration cannot be completed now.
                                    <br />Please contact <a :href="'mailto:'+appOwnerEmail">{{appOwnerEmail}}</a>

                                    <br /><br />
                                </div>

                                <div v-show="!isUniqueIdButBvnPartnerNotActive">
                                    <div v-show="!noBvn && isDefaultBvnValidationPartnerActive && (appOwnerLoanOriginationId == 'UNIQUE_ID_OR_EMAIL_ADDRESS' || appOwnerLoanOriginationId == 'UNIQUE_ID' )"
                                        class="form-group">
                                        <label for="Bvn">Enter Bank Verification Number <Small>
                                                <a v-show="appOwnerLoanOriginationId != 'UNIQUE_ID' || appOwnerLoanOriginationId == 'UNIQUE_ID_OR_EMAIL_ADDRESS' "
                                                    style="color: chocolate;" href="javascript:void(0)"
                                                    @click="noBvn = !noBvn">&nbsp;...Click here to register without your
                                                    BVN</a></Small> </label>
                                        <validation-provider name="Bvn"
                                            :rules="`${!noBvn ? 'required|integer|digits' : 'integer|digits'}`"
                                            v-slot="{ errors }">
                                            <input type="text" v-model="registerForm.bvn" class="form-control" id="Bvn"
                                                @change="getBvnNumber(registerForm.bvn)">
                                            <span class="text-danger">{{ errors[0] }}</span>
                                        </validation-provider>
                                        <div class="text-center">
                                            <a href="javascript:void(0)" v-on:click="getBvnNumber(registerForm.bvn)"
                                                v-show="(appOwnerLoanOriginationId == 'UNIQUE_ID' || appOwnerLoanOriginationId == 'UNIQUE_ID_OR_EMAIL_ADDRESS') && !bvnDetails && !showLoader"
                                                class="btn external-link ">Verify <i
                                                    class="fa fa-arrow-circle-right"></i></a>
                                        </div>
                                    </div>

                                    <div v-show="!noBvn && bvnDetails" class="col-sm-12 mb-3 text-center"
                                        style="background: beige;border-radius: 10px;">
                                        <br />
                                        <p>Name: <b class="text-light-gray">{{ registerForm.firstName }} {{
                                                registerForm.lastName }}</b></p>
                                        <p>Phone Number: <b class="text-light-gray">{{ registerForm.phoneNumber }}</b>
                                        </p>
                                        <p>Date of birth: <b class="text-light-gray">{{ registerForm.dob }}</b> </p>
                                        <br />
                                    </div>

                                    <div v-show="noBvn || appOwnerLoanOriginationId == 'EMAIL_ADDRESS'">
                                        <div v-show="isDefaultBvnValidationPartnerActive && (appOwnerLoanOriginationId == 'UNIQUE_ID' || appOwnerLoanOriginationId == 'UNIQUE_ID_OR_EMAIL_ADDRESS')"
                                            style="text-align: center;">
                                            <a style="color: chocolate;" href="javascript:void(0)"
                                                @click="noBvn = !noBvn">Sign up with your
                                                BVN instead</a></Small>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-md-6">
                                                <label for="FirstName">Enter your first name</label>
                                                <validation-provider name="First name"
                                                    :rules="`${noBvn ? 'required' : ''}`" v-slot="{ errors }">
                                                    <input type="text" v-model="registerForm.firstName"
                                                        class="form-control" id="FirstName">
                                                    <span class="text-danger">{{ errors[0] }}</span>
                                                </validation-provider>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="LastName">Enter your last name</label>
                                                <validation-provider name="Last name"
                                                    :rules="`${noBvn ? 'required' : ''}`" v-slot="{ errors }">
                                                    <input type="text" v-model="registerForm.lastName"
                                                        class="form-control" id="LastName">
                                                    <span class="text-danger">{{ errors[0] }}</span>
                                                </validation-provider>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-md-6">
                                                <label for="PhoneNumber">Enter your phone number</label>
                                                <validation-provider name="Phone number"
                                                    :rules="`${noBvn && isPhoneRequired ? 'required|integer' : 'integer'}`"
                                                    v-slot="{ errors }">
                                                    <input type="text" v-model="registerForm.phoneNumber"
                                                        class="form-control" id="PhoneNumber">
                                                    <span class="text-danger">{{ errors[0] }}</span>
                                                </validation-provider>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="DOB">Date of birth</label>
                                                <validation-provider name="Date of birth"
                                                    :rules="`${noBvn ? 'required' : ''}`" v-slot="{ errors }">
                                                    <input type="date" v-model="registerForm.dob" class="form-control"
                                                        id="DOB">
                                                    <span class="text-danger">{{ errors[0] }}</span>
                                                </validation-provider>
                                            </div>
                                        </div>
                                    </div>




                                    <div
                                        v-show="(appOwnerLoanOriginationId == 'EMAIL_ADDRESS' ) || (noBvn && appOwnerLoanOriginationId == 'UNIQUE_ID_OR_EMAIL_ADDRESS' ) || (!noBvn && bvnDetails)">
                                        <hr style="border-top: 1px dotted rgba(0,0,0,.1);" />
                                        <div class="form-group row">


                                            <div class="col-md-6">
                                                <label for="Email">Enter your email address</label>
                                                <validation-provider name="Email address" rules="required"
                                                    v-slot="{ errors }">
                                                    <input type="email" v-model="registerForm.emailAddress"
                                                        class="form-control" id="Email">
                                                    <span class="text-danger">{{ errors[0] }}</span>
                                                </validation-provider>
                                            </div>



                                            <div class="col-md-6"><label for="Email">Enter your BVN</label>
                                                <validation-provider name="Bvn"
                                                    :rules="`${isUniqueIdRequired ? 'required|integer|digits' : 'integer|digits'}`"
                                                    v-slot="{ errors }">
                                                    <input type="text" v-model="registerForm.bvn" class="form-control"
                                                        id="Bvn" @change="getBvnNumber(registerForm.bvn)">
                                                    <span class="text-danger">{{ errors[0] }}</span>
                                                </validation-provider>
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <div class="col-md-6">
                                                <label for="Password">Enter your password</label>
                                                <validation-provider name="Password" rules="required"
                                                    v-slot="{ errors }">
                                                    <input type="password" v-model="registerForm.password"
                                                        class="form-control" id="Password" placeholder="**************">
                                                    <span class="text-danger">{{ errors[0] }}</span>
                                                </validation-provider>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="ConfirmPassword">Confirm your password</label>
                                                <validation-provider name="Confirm password" rules="required|confirmed"
                                                    v-slot="{ errors }">
                                                    <input type="password" v-model="registerForm.confirmPassword"
                                                        class="form-control" id="ConfirmPassword"
                                                        placeholder="**************">
                                                    <span class="text-danger">{{ errors[0] }}</span>
                                                </validation-provider>
                                            </div>

                                        </div>



                                    </div>

                                    <div>
                                        <br />
                                        <div class="help-block centered">Your Information is safe with us!</div>
                                        <p class="centered small-text"><i class="fa fa-info-circle"></i> By clicking on
                                            <b>Finish</b>, you accept our <a class="external-link "
                                                href="javascript:void(0)">Subscription
                                                Agreement </a> and <a class="external-link "
                                                href="javascript:void(0)">Privacy Policy </a>
                                        </p>
                                    </div>


                                    <div class="form-group clearfix row">
                                        <div class="col-md-6">
                                            <button type="button" @click="goBack" class="btn "><i
                                                    class="fa fa-arrow-circle-left"></i> Back </button>
                                        </div>
                                        <div class="col-md-6">
                                            <button type="submit" class="btn btn btn-finish ">Finish <i
                                                    class="fa fa-arrow-circle-right"></i></button>
                                        </div>


                                    </div>
                                </div>
                            </form>
                        </validation-observer>
                    </div>
                    <div class="alert alert-warning" v-cloak v-show="notificationMessage != ''" v-html="renderHTMLText(notificationMessage)">
                        
                    </div>

                    <div v-cloak v-show="processComplete">
                        <img class="success-img" style="width: 50%" src="assets/img/svg/message.svg" alt="icon"><br />
                        <p>We have sent a verification link to {{ recipientEmail }}. <br /> Kindly verify your account
                            to manage your loan application.</p>
                    </div>


                </div>
            </div>

        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"
        integrity="sha256-T/f7Sju1ZfNNfBh7skWn0idlCBcI3RwdLSS4/I7NQKQ=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/vee-validate@<3.0.0/dist/vee-validate.js"></script>
    <!-- <script src="https://unpkg.com/vee-validate@latest"></script> -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-toast-notification"></script> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vue-toast-notification/dist/theme-default.css" rel="stylesheet"> -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css"
        integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />



    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/dependencyLibs/inputmask.dependencyLib.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.js"></script>

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.numeric.extensions.min.js"></script>
    <script src="assets/components/jquery/jquery.min.js">
    </script>
    <script src="assets/components/bootstrap/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"
        integrity="sha512-nOQuvD9nKirvxDdvQ9OMqe2dgapbPB7vYAMrzJihw5m+aNcf0dX53m6YxM4LgA9u8e9eg9QX+/+mPu8kCNpV2A=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>

        // please leave the productionEnvironment variable the way it is when pushing to source control, the pipeline will take care of it 
        // var alternateUrl = 'http://localhost:5000';

        var alternateUrl = 'https://abiolasoft.dev.lenda.ng';

        var productionEnvironment = true;
        var locationUrl = (productionEnvironment == false) ? alternateUrl : window.location.origin;
        var baseUrl = locationUrl + '/api/';


        Vue.directive('mask', {
            bind: function (el, binding) {
                var maskOpts = binding.value;
                maskOpts.showMaskOnHover = false;
                maskOpts.autoUnmask = true;
                maskOpts.clearIncomplete = true;
                Inputmask(maskOpts).mask(el);
            },
            unbind: function (el) {
                Inputmask.remove(el);
            }
        });
        // Add a rule.
        
        Vue.filter('toCurrency', function (value) {
            if (typeof value !== "number") {
                return value;
            }
            var formatter = new Intl.NumberFormat('en-NG', {
                style: 'currency',
                currency: 'NGN',
                minimumFractionDigits: 2
            });
            return formatter.format(value);
        });
        // Register the component globally.
        
        Vue.component('ValidationObserver', VeeValidate.ValidationObserver);
        Vue.component('ValidationProvider', VeeValidate.ValidationProvider);
        //Vue.use(VueToast);
        
        Vue.use(VeeValidate);

        var app = new Vue({
            el: '#app',
            data: {
                //  isMultitenant: true,
                //     customPublicKey: 'la43f567',
                url: baseUrl,
                publicKey: getKey(),
                appOwnerKey: '',
                noBvn: false,
                noBvnSwitch: false,
                bvnDetails: false,
                showApplicationForm: false,
                showLoader: true,
                branchSelected: false,
                parametersRetrieved: false,
                loanTypeSelected: false,
                repaymentsRetrieved: false,
                appOwnerName: '',
                appOwnerEmail: '',
                outlets: [],
                loanProduct: [],
                notificationMessage: '',
                applicationForm: {},
                loanProductSelected: {},
                minimumLoanTypeAmount: 0,
                maximumLoanTypeAmount: 0,
                loanTypeRepaymentCycle: '',
                maximumTenor: 0,
                repaymentPeriodType: '',
                tenorArray: [],
                showRegisterForm: false,
                processComplete: false,
                registerForm: {},
                periodicRepayment: '---',
                totalRepayment: '----',
                recipientEmail: '',
                isDefaultBvnValidationPartnerActive: false,
                logoUrl: 'assets/img/company.png',
                appOwnerLoanOriginationId: '',
                isUniqueIdRequired: false,
                isPhoneRequired: false,
                isEmailRequired: false,
                isUniqueIdButBvnPartnerNotActive: false,
            },
            mounted() {
                //  if ((this.publicKey === null || this.publicKey === '') && this.isMultitenant == true) {
                if ((this.publicKey === null || this.publicKey === '')) {
                    this.showLoader = false;
                    this.notificationMessage = "Business identification key not supplied";

                } else {
                    //  this.publicKey = (this.isMultitenant)? this.publicKey : this.customPublicKey;
                    axios.get(this.url + "register/" + this.publicKey)
                        .then(response => {
                            this.showApplicationForm = true;
                            this.showLoader = false;
                            this.outlets = response.data.data.branches;
                            this.appOwnerName = response.data.data.appInformationToReturn.appOwnerName;
                            this.appOwnerEmail = response.data.data.appInformationToReturn.appOwnerEmail;
                            this.appOwnerKey = response.data.data.appInformationToReturn.appOwnerKey;
                            this.isDefaultBvnValidationPartnerActive = response.data.data.appInformationToReturn.isDefaultBvnValidationPartnerActive;
                            this.logoUrl = (response.data.data.appInformationToReturn.logoUrl == '' || response.data.data.appInformationToReturn.logoUrl == null) ? this.logoUrl : response.data.data.appInformationToReturn.logoUrl;
                            this.noBvn = (this.isDefaultBvnValidationPartnerActive) ? false : true;
                            this.appOwnerLoanOriginationId = response.data.data.appInformationToReturn.appOwnerLoanOriginationId;
                            this.uniqueIdInformation = response.data.data.appInformationToReturn.uniqueIdInformation


                            //alternative process required fields settings
                            this.isUniqueIdRequired = this.isFieldRequired('UniqueId');
                            this.isPhoneRequired = this.isFieldRequired('Phone');
                            //this.isEmailRequired = this.isFieldRequired('Email');

                            this.isUniqueIdButBvnPartnerNotActive = (this.appOwnerLoanOriginationId == 'UNIQUE_ID' && !this.isDefaultBvnValidationPartnerActive);


                            var a = document.getElementById('logoUrl');
                            a.src = this.logoUrl;

                            let appOwnerCustomColors = response.data.data.appInformationToReturn.appOwnerCustomColors;
                            
                            if(appOwnerCustomColors != null){
                                this.setThemeColors(appOwnerCustomColors);
                            }
                        })
                        .catch(error => {

                            if (this.publicKey == null) {
                                this.showLoader = false;
                                this.notificationMessage = "Business Identification key not supplied";
                                this.displayToaster(this.notificationMessage, "error")
                            }
                            else if (!error.response.data.status) {
                                this.showLoader = false;
                                this.notificationMessage = error.response.data.Message;
                            } else {

                                this.displayToaster(error.response.data.message, "error")
                            }




                        })
                        .finally(() => this.showLoader = false)
                }



            },
            methods: {
                setThemeColors(appOwnerCustomColors){
                    appOwnerCustomColors = JSON.stringify(appOwnerCustomColors);
                    localStorage.setItem('appOwnerCustomColors',appOwnerCustomColors);

                    let appRootStyle = document.querySelector(':root');
                    appOwnerCustomColors = JSON.parse(appOwnerCustomColors)
                    appRootStyle.style.setProperty('--primary-color',appOwnerCustomColors.primaryColor);
                    appRootStyle.style.setProperty('--secondary-color',appOwnerCustomColors.secondaryColor);
                },
                renderHTMLText(text) {
                    return `<span>${text}</span>`
                },

                displayToaster(message, type) {


                    toastr.options.positionClass = "toast-bottom-right";
                    toastr.options.progressBar = true;
                    toastr.options.newestOnTop = true;

                    if (type == "success") {
                        toastr.success(message)
                    } else if (type == "error") {
                        toastr.error(message);
                    } else {
                        toastr.info(message);
                    }

                },

                getLoansByBranch(ev) {
                    const branchId = ev.target.value;
                    this.showLoader = true;
                    axios.get(this.url + 'register/' + this.appOwnerKey + '/' + branchId)
                        .then(response => {
                            this.showLoader = false;
                            this.loanProduct = response.data.data;
                            this.branchSelected = true;


                        })
                        .catch(error => {
                            this.showLoader = false;
                        })
                },

                isFieldRequired(fieldName) {


                    return !!this.uniqueIdInformation.find(i => i.itemName == fieldName);
                },



                getBvnNumber(ev) {

                    const bvn = ev;
                    if (bvn == null || bvn == "") {
                        handleError("Please enter your BVN to proceed");
                    } else
                        if (bvn.length == 11) {

                            this.showLoader = true;
                            axios.get(this.url + 'register/verify_bvn/' + this.appOwnerKey + '/' + bvn)
                                .then(response => {


                                    document.getElementById("Bvn").disabled = true;

                                    this.showLoader = false;
                                    this.showApplicationForm = false;
                                    this.showRegisterForm = true;
                                    this.bvnDetails = true;
                                    const responseData = response.data;
                                    this.registerForm.firstName = responseData.data.first_name
                                    this.registerForm.lastName = responseData.data.last_name
                                    this.registerForm.phoneNumber = responseData.data.mobile
                                    this.registerForm.dob = stripDate(responseData.data.dob, 4)
                                })
                                .catch(error => {
                                    this.showLoader = false;
                                    this.showRegisterForm = true;
                                    this.bvnDetails = false;
                                    handleError(error.response.data.message);

                                })
                        }
                },
                sortLoanInformation(ev) {
                    const loanTypeId = ev.target.value;
                    this.loanProduct.forEach(x => {
                        if (x.loanTypeId == loanTypeId) {
                            this.loanTypeSelected = true;
                            this.loanProductSelected = x;
                            this.minimumLoanTypeAmount = x.minAmount;
                            this.maximumLoanTypeAmount = x.maxAmount;



                        }


                    });
                },
                getLoanCalculationParameters(ev) {


                    if (this.applicationForm.loanAmount != 0.00 && (this.applicationForm.loanAmount >= app.$data.minimumLoanTypeAmount && this.applicationForm.loanAmount <= app.$data.maximumLoanTypeAmount)) {

                        this.showLoader = true;
                        axios.post(this.url + 'register/getloancalculationparameters' + '/' + this.appOwnerKey, { 'LoanAmount': this.applicationForm.loanAmount, 'LoanTypeId': this.applicationForm.loanTypeId })
                            .then(response => {
                                this.showLoader = false;
                                this.parametersRetrieved = true;

                                this.repaymentPeriodType = response.data.repaymentType + 'ly';
                                this.maximumTenor = response.data.tenorAllowable;
                                this.tenorArray = createLoanArray(response.data.tenorAllowable);

                            })
                            .catch(error => {
                                this.showLoader = false;
                            })
                    }



                },
                calculateRepayment() {

                    this.$refs.applicationForm.validate().then(valid => {
                        if (valid) {
                            this.showLoader = true;
                            axios.post(this.url + 'register/fetch_repayment/' + this.appOwnerKey, { 'Amount': this.applicationForm.loanAmount, 'Duration': this.applicationForm.tenor, 'LoanType': this.applicationForm.loanTypeId, 'NetIncome': this.applicationForm.netIncome })
                                .then(response => {
                                    this.showLoader = false;
                                    this.repaymentsRetrieved = true;
                                    this.periodicRepayment = response.data.repaymentCalculate;
                                    this.totalRepayment = (response.data.repaymentCalculate * this.applicationForm.tenor);

                                    // Vue.$toast.success("Successful", {
                                    //     position: 'bottom',
                                    //     duration: 2000
                                    // });

                                    this.displayToaster("Successful", "success")

                                })
                                .catch(error => {
                                    this.showLoader = false;
                                    this.showApplicationForm = true;
                                    handleError(error.response.data);
                                })
                        }
                    });


                },
                saveApplicationForm(scope) {
                    this.$refs.applicationForm.validate().then(valid => {
                        if (valid) {

                            this.showApplicationForm = false;
                            this.showRegisterForm = true;

                        }
                    });
                },
                saveRegisterForm(scope) {

                    this.$refs.registerForm.validate().then(valid => {

                        if (valid) {
                            this.showLoader = true;
                            this.showApplicationForm = false;
                            this.notificationMessage = '';
                            this.recipientEmail = this.registerForm.emailAddress;
                            const dataToSave = {
                                Firstname: this.registerForm.firstName,
                                Lastname: this.registerForm.lastName,
                                EmailAddress: this.registerForm.emailAddress,
                                PhoneNumber: this.registerForm.phoneNumber,
                                Password: this.encryption(this.registerForm.password),
                                ConfirmPassword: this.encryption(this.registerForm.confirmPassword),
                                DateOfBirth: this.registerForm.dob,
                                Bvn: this.registerForm.bvn,
                                LoanAmount: this.applicationForm.loanAmount,
                                LoanTypeId: this.applicationForm.loanTypeId,
                                Tenor: this.applicationForm.tenor,
                                NetIncome: this.applicationForm.netIncome,
                                AppOwnerKey: this.appOwnerKey,
                                BranchId: this.applicationForm.branchId,
                            };
                            axios.post(this.url + 'register/customer_registration', dataToSave)
                                .then(response => {
                                    this.showLoader = false;
                                    this.showApplicationForm = false;
                                    this.showRegisterForm = false;
                                    this.processComplete = true;

                                    // Vue.$toast.success('Your account was successfuly created.', {
                                    //     // override the global option
                                    //     position: 'bottom',
                                    //     duration: 50000
                                    // });

                                    this.displayToaster("Your account was successfully created.", "success")
                                })
                                .catch(error => {
                                    this.showLoader = false;
                                    this.showApplicationForm = false;
                                    this.showRegisterForm = true;
                                    this.notificationMessage = error.response.data.message;
                                    //   handleError(error.response.data.message);

                                })
                        }
                    });
                },
                encryption(text) {
                    const key = CryptoJS.enc.Utf8.parse('4512631236589784');
                    const iv = CryptoJS.enc.Utf8.parse('4512631236589784');
                    let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(text), key, {
                        keySize: 128 / 8,
                        iv: iv,
                        mode: CryptoJS.mode.CBC,
                        padding: CryptoJS.pad.Pkcs7
                    });
                    return encrypted.toString();
                },
                getPublicKey() {
                    return getKey();

                },
                goBack() {
                    this.showApplicationForm = true;
                    this.showRegisterForm = false;

                }
            },
            created() {
                this.publicKey = this.getPublicKey();
            }
        });
        VeeValidate.Validator.extend('required', {
            validate(value) {
                return {
                    required: true,
                    valid: ['', null, undefined].indexOf(value) === -1,
                };
            },
            message: '{_field_} is required.',
            computesRequired: true
        });
        VeeValidate.Validator.extend('integer', value => {
            if (isNaN(value)) {
                return '{_field_} must be an integer';
            }
            return true;
        });
        VeeValidate.Validator.extend('digits', value => {
            if (value.length != 11) {
                return '{_field_} must be 11 digits';
            }
            return true;
        });
        VeeValidate.Validator.extend('min', value => {
            if (value <= 0) {
                return '{_field_} must be greater than zero';
            }
            return true;
        });
        
        VeeValidate.Validator.extend('positive_price', value => {
            if (value > 0) {
                return true;
            }
            return '{_field_} must be a positive number.';
        });
        

        VeeValidate.Validator.extend('confirmed', value => {
            if (value != app.$data.registerForm.password) {
                return '{_field_} does not match password field.';
            }
            return true;
        });
        VeeValidate.Validator.extend('rangeAmount', value => {
            if (value < app.$data.minimumLoanTypeAmount || value > app.$data.maximumLoanTypeAmount) {

                return '{_field_} must be within range set for the product selected';
            }
            return true;
        });

        var a = document.getElementById('portalUrl');
        a.href = window.location.origin + '/portal';

        function createLoanArray(loanTenor) {
            var arr = [];
            for (i = 0; i < loanTenor; i++) {
                arr.push(i + 1);
            }
            return arr;
        }

        function handleError(fullErrorMessage) {


            // Vue.$toast.error(fullErrorMessage, {
            //     position: 'bottom',
            //     duration: 10000
            // });
            toastr.options.positionClass = "toast-bottom-right";
                    toastr.options.progressBar = true;
                    toastr.options.newestOnTop = true;

            toastr.error(fullErrorMessage);

            // this.displayToaster(fullErrorMessage, "error")

        }

        function stripDate(dateTimeInput, expectedOutput) {

            var date = new Date(dateTimeInput),
                year = date.getFullYear(),
                monthFigure = addZero(date.getMonth() + 1),
                day = addZero(date.getDate());

            if (expectedOutput == 1) {
                return day + '/' + monthFigure + '/' + year;
            } else if (expectedOutput == 2) {
                // not implemented yet
            } else {

                return year + '-' + monthFigure + '-' + day;
            }
        }

        function addZero(v) {
            if (v < 10) return '0' + v;
            return v;
        }

        function getKey() {

            var usableKey = "";


            var host = window.location.host
            // host = 'abiolasoft.dev.lenda.ng'
            var subdomain = host.split('.')[0];



            if (subdomain != "" && subdomain != "dev" && subdomain != "test" && subdomain != "www") {
                usableKey = subdomain;
            }
            else {

                const queryString = window.location.search;
                var appOwnerKeyIdentifier = "key";
                var appOwnerKeyIdentifierInitCapped = "Key";
                const urlParams = new URLSearchParams(queryString);

                usableKey = urlParams.get(appOwnerKeyIdentifier) || urlParams.get(appOwnerKeyIdentifierInitCapped);

            }


            return usableKey;
        }
    </script>
</body>

</html>
