﻿<!doctype html>
<html class="no-js" lang="en">
    <head>
        <!-- title -->
        <title>Lenda | Home</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
        <meta name="author" content="ArkDvlprs">
        <!-- description -->
        <meta name="description" content="">
        <!-- keywords -->
        <meta name="keywords" content="">
        <!-- favicon -->
        <link rel="shortcut icon" href="home/images/logo-blue.png">
        <link rel="apple-touch-icon" href="home/images/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="72x72" href="home/images/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="home/images/apple-touch-icon-114x114.png">
        <!-- animation -->
        <link rel="stylesheet" href="home/css/animate.css" />
        <!-- bootstrap -->
        <link rel="stylesheet" href="home/css/bootstrap.min.css" />
        <!-- et line icon --> 
        <link rel="stylesheet" href="home/css/et-line-icons.css" />
        <!-- font-awesome icon -->
        <link rel="stylesheet" href="home/css/font-awesome.min.css" />
        <!-- themify icon -->
        <link rel="stylesheet" href="home/css/themify-icons.css">
        <!-- swiper carousel -->
        <link rel="stylesheet" href="home/css/swiper.min.css">
        <!-- justified gallery  -->
        <link rel="stylesheet" href="home/css/justified-gallery.min.css">
        <!-- magnific popup -->
        <link rel="stylesheet" href="home/css/magnific-popup.css" />
        <!-- bootsnav -->
        <link rel="stylesheet" href="home/css/bootsnav.css">
        <!-- style -->
        <link rel="stylesheet" href="home/css/style.css" />
        <!-- responsive css -->
        <link rel="stylesheet" href="home/css/responsive.css" />
        <!--[if IE]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->
    </head>
    <body>
        <div id="app">
            <!-- start header -->
            <header>
                <!-- start navigation -->
                <nav class="navbar navbar-default bootsnav navbar-top header-light background-transparent nav-box-width white-link navbar-expand-lg">
                    <div class="container-fluid nav-header-container">
                        <!-- start logo -->
                        <div class="col-auto pl-0">
                            <a href="/#" title="Pofo" class="logo">
                                <img src="home/images/logo-white.png" data-rjs="home/images/logo@2x.png" class="logo-dark" alt="Pofo">
                                <img src="home/images/logo-white.png" data-rjs="home/images/logo-white@2x.png" alt="Pofo" class="logo-light default"></a>
                        </div>
                        <!-- end logo -->
                        <div class="col accordion-menu pr-0 pr-md-3">
                            <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar-collapse-toggle-1">
                                <span class="sr-only">toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <div class="navbar-collapse collapse justify-content-end" id="navbar-collapse-toggle-1">
                                <ul id="accordion" class="nav navbar-nav navbar-left no-margin alt-font text-normal" data-in="fadeIn" data-out="fadeOut">
                                    <li class="dropdown megamenu-fw sm-pd">
                                        <a href="faq">FAQ</a><i class="fas fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-hidden="true"></i>  
                                    </li>
                                    <li class="dropdown megamenu-fw wow fadeIn">
                                        <a href="#contact-form" class="btn wow fadeInDown popup-with-move-anim">Login</a><i class="fas fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-hidden="true"></i>
                                        <!-- start sub menu -->
                                        <!-- start form -->
                                        <form id="contact-form" @submit.prevent="onLogin" data-vv-scope="login" v-cloak class="zoom-anim-dialog white-popup-block mfp-hide col-lg-5 p-0 mx-auto">
                                            <div class="padding-five-half-all bg-white border-radius-6 lg-padding-seven-all">
                                                <div class="text-center margin-20px-bottom">
                                                    <img src="home/images/logo-white.png" class="resized" alt="LoanBook">
                                                </div>
                                                <div class="text-center text-extra-dark-gray alt-font text-large font-weight-600 margin-10px-bottom">Welcome Back! <br><span class="login_title">Please log in to your account</span></div> 
                                                <div>
                                                    <div id="success-contact-form" class="mx-0"></div>
                                                    <div class="form-grup hide_after" v-show="!questions">
                                                        <h6 class="font-weight-300 text-extra-dark-gray smaller margin-two-top mb-0">BVN</h6>
                                                        <input v-validate :data-vv-rules="`required|numeric`" type="text" name="bvn" id="bvn" v-model="login.bvn" placeholder="Bvn*" @keyup="clearError" class="input-bg form-control">
                                                        <span class="text-danger form-text" v-show="errors.has('login.bvn')">{{ errors.first('login.bvn') }}</span>
                                                        <span class="text-danger form-text" v-if="!errors.has('login.bvn') && error != ''">{{error}}</span>
                                                        <br/>
                                                        <div class="text-center">
                                                            <button v-if="!loading" type="button" :disabled="login.bvn == null || errors.has('login.bvn')" class="btn btn-success btn-small text-extra-small border-radius-4" @click="validateBVN"><i class="fas fa-arrow-right icon-very-small margin-5px-right ml-0" aria-hidden="true"></i> Proceed</button>
                                                            <button v-if="loading" type="button" :disabled="true" class="btn btn-success btn-small text-extra-small border-radius-4"><i class="fas fa-arrow-right icon-very-small margin-5px-right ml-0" aria-hidden="true"></i> Validating... <i class="fa fa-spinner fa-pulse"></i></button>
                                                        </div>
                                                    </div>
                                                    <div class="form-grup hide_me" v-show="questions">
                                                        <h6 class="font-weight-300 text-extra-dark-gray smaller margin-four-top mb-0">Please select a security question</h6>
                                                        <div class="form-group">
                                                            <select v-model="login.securityQuestion" v-validate :data-vv-rules="`required`" name="question" id="slct" class="form-control">
                                                                <option v-for="qtn in securityQuestion" v-bind:value="qtn.securityQuestionsID">{{ qtn.question }}</option>
                                                            </select>
                                                            <span class="text-danger form-text" v-show="errors.has('login.question')">{{ errors.first('login.question') }}</span>                                                      
                                                        </div>
                                                        <div class="form-group">
                                                            <input v-model="login.securityAnswer" type="text" v-validate :data-vv-rules="`required`" name="answer" id="scrty_aswr" placeholder="Security answer*" class="input-bg margin-two-half-top form-control">
                                                            <span class="text-danger form-text" v-show="errors.has('login.answer')">{{ errors.first('login.answer') }}</span>
                                                            <span class="text-danger form-text" v-if="!errors.has('login.answer') && error != ''">{{error}}</span>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="custom-control custom-checkbox mb-6 mb-lg-8">
                                                                <input v-model="login.remember" class="custom-control-input" type="checkbox" id="checkbox-1">
                                                                <label class="custom-control-label margin-three-bottom" for="checkbox-1">Remember me?</label>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="text-center">
                                                                <button v-if="!loading" :disabled="login.securityAnswer == null || login.securityQuestion == null || errors.has('login.answer') || errors.has('login.question')" type="submit" id="contact-us-button" class="btn btn-success btn-small text-extra-small border-radius-4"><i class="fas fa-check icon-very-small margin-5px-right ml-0" aria-hidden="true"></i> Login</button>
                                                                <button v-if="loading" type="button" :disabled="true" class="btn btn-success btn-small text-extra-small border-radius-4"><i class="fas fa-arrow-right icon-very-small margin-5px-right ml-0" aria-hidden="true"></i> Validating... <i class="fa fa-spinner fa-pulse"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p class="text-center margin-five-top">Forgot recovery questions? <a href="#" class="reset">Reset</a></p>
                                                    <p class="text-center" style="position: relative; bottom: -1px;">By signing up, you accept our <a href="javascript:void(0)" class="reset">Terms &amp; Condition</a></p>
                                                </div>
                                            </div>
                                        </form>
                                        <!-- end form -->
                                    </li>
                                </ul>
                            </div>
                        </div>                        
                    </div>
                </nav>
                <!-- end navigation --> 
            </header>
            <!-- end header -->
            <!-- start slider -->
            <section class="wow fadeIn p-0 main-slider mobile-height slant">
                <div class="swiper-full-screen swiper-container w-100 white-move">
                        <!-- start slider item -->
                        <div class="swiper-slide cover-background" style="background-image:url('home/images/guy.jpg');">
                            <div class="opacity-extra-medium bg-extra-dark-gray"></div>
                            <div class="container position-relative one-fourth-screen sm-height-400px">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="slider-typography text-container">
                                            <div class="slider-text-middle-main">
                                                <div class="slider-text-middle">
                                                    <h5 class="text-extra-large text-very-light-gray font-weight-500 sm-width-95 mx-auto margin-25px-bottom d-block sm-margin-15px-bottom">In making sure you have a fair chance,</span>
                                                    <h2 class="alt-font text-uppercase text-white-2 font-weight-700  width-100 sm-width-95 mx-auto margin-35px-bottom sm-margin-15px-bottom">We'll Loan You A Hand.</h2>
                                                    <span class="text-extra-large text-very-light-gray font-weight-500 orange sm-width-95 mx-auto margin-25px-bottom d-block sm-margin-15px-bottom">Use the slider to get started.</span>
                                                    <!-- <div class="btn-dual"><a href="" class="btn btn-white btn-rounded btn-medium sm-margin-two-all" data-toggle="modal" data-target="#modalLRForm">Apply for a loan</a></div> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 index-front">
                                        <div class="container form-container" >
                                                <div class="registration">
                                                    <div class="form-title">
                                                        <h6 class="nav nav-tabs md-tabs tabs-2 light-blue darken-3 form-header"><i class="fas fa-money-bill mr-1"></i> Apply for a loan</h6>
                                                    </div>
                                                    <form @submit.prevent="onSubmit" v-cloak data-vv-scope="application">
                                                        <div class="row">
                                                            <div class="col-md-12" v-if="errorText != ''">
                                                                <div class="form-group" style="margin: 1rem">
                                                                    <div class="alert alert-danger alert-dismissible fade show">
                                                                        <span v-text="errorText"></span>
                                                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12">
                                                                <div class="form-body">
                                                                    <label class="font-weight-300 text-extra-dark-gray mb-0 smaller">Preferred Outlet:</label>
                                                                    <select  v-validate :data-vv-rules="`required`" name="outlet" @change="fetchLoanByBranch" id="outlet" class="form-control custom-select" v-model="form.outlet">
                                                                        <option v-for="option in outlet" v-bind:value="option.branchId">{{ option.branchName }}</option>
                                                                    </select>
                                                                    <span class="text-danger form-text">{{ errors.first('application.outlet') }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-body margin-one-top">
                                                                    <label class="font-weight-300 text-extra-dark-gray smaller">Please select a loan type <a href="#" class="small-text extra-info-text" data-toggle="modal" data-target="#loantypemodal"><i class="fas fa-question-circle"></i></a></label>
                                                                    <!-- <div class="select"> -->
                                                                        <select  v-validate :data-vv-rules="`required`" name="loantype" @change="updateLoanInfo" class="form-control custom-select" v-model="form.loanType">
                                                                            <!-- <option :selected>Choose Loan Type</option> -->
                                                                            <option v-for="option in loanType" v-bind:value="option.loanTypeId">{{ option.loanName }}</option>
                                                                        </select>
                                                                        <span class="text-danger form-text">{{ errors.first('application.loantype') }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-body margin-one-top">
                                                                    <label class="font-weight-300 text-extra-dark-gray smaller">Monthly Net Income</label>
                                                                    <input class="form-control" v-mask="{alias: 'currency', prefix: '₦ ', rightAlign: false}" type="text" name="netincome" v-model="form.netIncome" v-validate :data-vv-rules="`required`" placeholder="Enter your monthly net pay"/>
                                                                    <span class="text-danger form-text ">{{ errors.first('application.netincome') }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="uk-margin form-group margin-one-top" style="padding: 5px 15px; position: relative">
                                                                    <label class="font-weight-300 mb-0">Use slider to select amount and duration</label>
                                                                    <div class="uk-width-1-3 font-weight-300 text-extra-dark-gray mb-0 smaller" style="clear: both">
                                                                        <p style="float: left">Amount: (₦{{minAmount.toLocaleString()}} - ₦{{maxAmount.toLocaleString()}}) </p>
                                                                        <span style="float: right">
                                                                            <input  type="text" data-vv-as="Loan amount" name="amount" v-mask="{alias: 'currency', prefix: '₦ ', rightAlign: false}" v-validate :data-vv-rules="`required|check_amount`"  @change="changeAmount" class="form-control form-control-sm" v-model="form.loanAmount" />
                                                                        </span>
                                                                    </div>                                                                
                                                                    <input id="range" style="width: 100%; padding: 0" class="uk-range uk-width-2-3" type="range" name="amount" v-model.lazy="form.loanAmount"  @change="changeAmount" v-bind:min="minAmount" v-bind:max="maxAmount" step="500"/>
                                                                    <span class="text-danger form-text">{{ errors.first('application.amount') }}</span>
                                                                    <!-- <div class="small-textholder" style="clear: both; position: absolute; top: 48px; width: 94%">
                                                                        <div class="small-text" style="float: left">
                                                                            <span>₦{{minAmount.toLocaleString()}}</span>
                                                                        </div>
                                                                        <div class="small-text" style="float: right">
                                                                            <span>₦{{maxAmount.toLocaleString()}}</span>
                                                                        </div>
                                                                    </div> -->
                                                                </div>
                                                            </div>
                                                        </div>                                                    
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="uk-margin form-group" style="padding: 5px 15px; position: relative">
                                                                    <label class="uk-width-1-3 font-weight-300 text-extra-dark-gray mb-0 smaller" style="clear: both; width: 100%">
                                                                        <span style="float: left">
                                                                            How many months? ({{minMonth.toLocaleString()}} - {{maxMonth.toLocaleString()}})
                                                                        </span>
                                                                        <span class="uk-badge uk-label-danger" id="rangeValue2" style="float: right; margin: 0">
                                                                            {{ showMonth }} months
                                                                        </span>
                                                                    </label>
                                                                    
                                                                    <!-- <div class="small-textholder" style="clear: both; position: absolute; top: 28px; width: 94%">
                                                                        <div class="small-text" style="float: left">
                                                                            <span>{{minMonth.toLocaleString()}}</span>
                                                                        </div>
                                                                        <div class="small-text" style="float: right">
                                                                            <span>{{maxMonth.toLocaleString()}}</span>
                                                                        </div>
                                                                    </div> -->
                                                                    <input id="range" class="uk-range uk-width-2-3" style="width: 100%; padding: 0; margin-top: 10px" type="range" v-model="form.loanMonth" v-bind:min="minMonth" v-bind:max="maxMonth" @change="changeMonth" step="1" />
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="row">
                                                            <div class="col-md-12">                                                   
                                                                <div class="mt-2 form-group" style="padding: 5px 15px; position: relative">
                                                                    <div class="">
                                                                        <!-- data-toggle="modal" data-target="#myModal2" -->
                                                                        <button type="button" @click="openModal" class="btn btn-transparent-purple btn-small mg text-extra-small border-radius-4 modal-body">
                                                                            <i class="fas fa-money-check icon-very-small margin-5px-right ml-0" aria-hidden="true"></i> 
                                                                            View Repayment Schedule
                                                                        </button>
                                                                        <button type="submit" class="btn btn-dark-gray btn-small mg text-extra-small border-radius-4">
                                                                            <i class="fas fa-check icon-very-small margin-5px-right ml-0" aria-hidden="true"></i> 
                                                                            Apply For Loan
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                    
                                                </div>
                                        </div>
                                    </div>    
                                </div>
                            </div>
                        </div>
                        <!-- end slider item -->
                
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-white swiper-full-screen-pagination"></div>
                    <div class="swiper-button-next swiper-button-black-highlight d-none"></div>
                    <div class="swiper-button-prev swiper-button-black-highlight d-none"></div>
                </div>
            </section>
            <!-- end slider -->
            <!-- Modal -->
            <div class="modal fade" id="loantypemodal" tabindex="-1" role="dialog" aria-labelledby="loantypemodalTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header colored">
                        <h6 class="modal-title text-large text-white-2" id="loantypemodalTitle">Loan Type Offers</h6>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="loan_product_area">
                            <div class="container">
                                <div class="row">
                                    <div class=" d-flex align-items-center">
                                        <div class="loan_product_content">
                                            <h6 class="smaller wow fadeInUp" data-wow-delay="0.2s">Switch between tabs to navigate</h6>
                                            <ul class="nav nav-tabs develor_tab mb-30" id="myTab2" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" id="loan1-tab" data-toggle="tab" href="#loan1" role="tab" aria-controls="loan1" aria-selected="true">Personal </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" id="loan2-tab" data-toggle="tab" href="#loan2" role="tab" aria-controls="loan2" aria-selected="false"> Business</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" id="loan3-tab" data-toggle="tab" href="#loan3" role="tab" aria-controls="loan3" aria-selected="true">Parfait</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" id="loan4-tab" data-toggle="tab" href="#loan4" role="tab" aria-controls="loan4" aria-selected="false">Pizza</a>
                                                </li>
                                            </ul>
                                            <div class="tab-content loan_tab_content">
                                                <div class="tab-pane fade show active" id="loan1" role="tabpanel" aria-labelledby="loan1-tab">
                                                    <p class="mb_40">Tickety-boo cheers plastered twit chimney pot off his nut hotpot spend a penny have it, so I said squiffy A bit of how's your father mufty pukka knees up absolutely bladdered brown bread, James Bond boot spiffing ummm I'm telling vagabond arse over tit burke. He lost his bottle mush old spend a penny wellies gormless bite.!</p>
                                                    <!-- <a href="#" class="details_btn">API Documentation</a> -->
                                                </div>
                                                <div class="tab-pane fade" id="loan2" role="tabpanel" aria-labelledby="loan2-tab">
                                                    <p class="mb_40">Cheers plastered twit chimney pot off his nut hotpot spend a penny have it, so I said squiffy A bit of how's your father mufty pukka knees up absolutely bladdered brown bread, James Bond boot spiffing ummm I'm telling vagabond arse over tit burke. He lost his bottle mush old spend a penny wellies gormless bite.!</p>
                                                    <!-- <a href="#" class="details_btn">API Documentation</a> -->
                                                </div>
                                                <div class="tab-pane fade" id="loan3" role="tabpanel" aria-labelledby="loan3-tab">
                                                    <p class="mb_40">Tickety-boo cheers plastered twit chimney pot off his nut hotpot spend a penny have it, so I said squiffy A bit of how's your father mufty pukka knees up absolutely bladdered brown bread, James Bond boot spiffing ummm I'm telling vagabond arse over tit burke. He lost his bottle mush old spend a penny wellies gormless bite.!</p>
                                                    <!-- <a href="#" class="details_btn">API Documentation</a> -->
                                                </div>
                                                <div class="tab-pane fade" id="loan4" role="tabpanel" aria-labelledby="loan4-tab">
                                                    <p class="mb_40">Tickety-boo cheers plastered twit chimney pot off his nut hotpot spend a penny have it, so I said squiffy A bit of how's your father mufty pukka knees up absolutely bladdered brown bread, James Bond boot spiffing ummm I'm telling vagabond arse over tit burke. He lost his bottle mush old spend a penny wellies gormless bite.!</p>
                                                    <!-- <a href="#" class="details_btn">API Documentation</a> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="col-lg-6">
                                        <img class="img-fluid wow fadeInRight" data-wow-delay="0.4s" src="img/home5/php.jpg" alt="">
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger btn-small text-extra-small border-radius-4 margin-20px-top" data-dismiss="modal">
                        Close
                        </button>
                    </div>
                    </div>
                </div>
            </div>

            <!-- repayment modal popup  -->
            <div id="myModal2" class="modal fade" ref="myModal2">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title sm-14">Repayment Schedule</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" class="white-text">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col pt-3">
                                <button class="btn btn-xs btn-light" @click="toggleChange">Change Date</button>
                            </div>
                            <div class="col pt-3" v-show="repaymentDate.show">
                                <input @change="openModal" placeholder="Select date" type="date" class="form-control" v-model="repaymentDate.date"/>
                            </div>
                        </div>
                            <table class="table table-striped">
                                    <thead>
                                        <tr>
                                        <th>s/n</th>
                                        <th>Start Period</th>
                                        <th>Installments</th>
                                        </tr>
                                    </thead>
                                    <tbody id="schedule">
                                        
                                    </tbody>
                            </table>
                    </div>
                    <div class="text-right mt-2">
                        <button type="button" class="btn btn-danger btn-small text-extra-small border-radius-4 margin-two-bottom margin-two-right" data-dismiss="modal">
                        Close
                        </button>
                    </div>
                    </div>
                </div>
            </div>

            <!-- <div id="repayment-form" action="javascript:void(0)" class="zoom-anim-dialog white-popup-block mfp-hide col-lg-5 p-0 mx-auto" ref="myModal2">
                <div class="padding-five-half-all bg-white border-radius-6 lg-padding-seven-all">
                    <h3 class="sm-14">Repayment Schedule</h3>
            
                    <table class="table table-striped">
                            <thead>
                                <tr>
                                <th scope="col">s/n</th>
                                <th scope="col">Start Period</th>
                                <th scope="col">Installments</th>
                                </tr>
                            </thead>
                            <tbody id="schedule">
                                
                            </tbody>
                        </table>
            
                        <div class="text-right mt-2">
                            <a href="#repayment-form" class="btn btn-dark-gray btn-small text-extra-small border-radius-4 margin-20px-top modal-body extra-margin"><i class="fas fa-check icon-very-small margin-5px-right ml-0" aria-hidden="true"></i>Apply for loan</a>
                            
                        </div>
            
                </div>
            </div> -->
            <!-- end repayment modal -->

            <!-- start section -->
            <section class="wow fadeIn reducedpadding">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-12 col-lg-6 md-margin-30px-bottom wow fadeInLeft">
                            <img src="home/images/img3.svg" class="w-100" alt="" />
                        </div>
                        <div class="col-12 col-xl-5 col-lg-6 offset-xl-1 wow fadeInRight">
                            <h5 class="alt-font text-extra-dark-gray font-weight-600 margin-30px-bottom">Loans for people with a plan!</h5>
                            <ul class="p-0 list-style-4">
                                <li>Click apply button</li>
                                <li>Upload necessary documents</li>
                                <li>Get verified</li>
                                <li>Get funded within minutes</li>
                                <!-- <li>Unlimited power and customization possibilities</li>  -->
                            </ul>
                            <a href="#" class="btn btn-dark-gray btn-small text-extra-small border-radius-4 margin-20px-top"><i class="fas fa-play-circle icon-very-small margin-5px-right ml-0" aria-hidden="true"></i> View More Details</a>
                        </div>
                    </div>
                </div>
            </section>
            <!-- end section -->
            <!-- start about agency -->
            <!-- <section class="wow fadeIn bg-light-gray">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-8 col-md-11 text-center wow fadeInUp margin-eight-bottom">
                            <div class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">Products</div>
                            <h6 class="font-weight-300 text-extra-dark-gray mb-0">Choose from different <strong class="font-weight-400">loan options</strong> to accomodate your needs. Get loan up to <strong class="font-weight-400">N1,000,000</strong> in 24 Hours.</h6>
                        </div>
                    </div>
                    <div class="row">                   

                        <div class="col-12 col-md-4 sm-margin-30px-bottom wow fadeInUp">
                            <div class="bg-white text-center h-100">
                                <a href="#"><img src="images/photo5.jpg" alt=""></a>
                                <div class="padding-45px-all md-padding-15px-all">
                                    <span class="text-extra-dark-gray font-weight-600 d-block alt-font margin-10px-bottom">Personal Loan</span>
                                    <p>Running low on cash to take care of important bills or need a salary advance to meet up with needs?.</p>
                                    <a href="#" class="btn btn-small btn-rounded btn-transparent-dark-gray">Learn More <i class="ti-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-4 sm-margin-30px-bottom wow fadeInUp" data-wow-delay="0.2s">
                            <div class="bg-white text-center h-100">
                                <a href="#"><img src="images/photo1.jpg" alt=""></a>
                                <div class="padding-45px-all md-padding-15px-all">
                                    <span class="text-extra-dark-gray font-weight-600 d-block alt-font margin-10px-bottom">Business Loan</span>
                                    <p>Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p>
                                    <a href="#" class="btn btn-small btn-rounded btn-transparent-dark-gray">Learn More <i class="ti-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-4 wow fadeInUp" data-wow-delay="0.4s">
                            <div class="bg-white text-center h-100">
                                <a href="#"><img src="images/latest-blog7.jpg" alt=""></a>
                                <div class="padding-45px-all md-padding-15px-all">
                                    <span class="text-extra-dark-gray font-weight-600 d-block alt-font margin-10px-bottom">Lease</span>
                                    <p>Apply for a lease with us, ranging from Vehicles, Tricycles, Buildings etc</p>
                                    <a href="#" class="btn btn-small btn-rounded btn-transparent-dark-gray">Learn More <i class="ti-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section> -->
            <!-- end about agency section -->
            <!-- start explore work section -->
            <!-- <section class="p-0 wow fadeIn bg-extra-dark-gray" id="services">
                <div class="container-fluid p-0">
                    <div class="row">
                        <div class="col-12 col-lg-6 position-relative md-height-550px sm-height-350px cover-background wow slideInLeft" data-wow-duration="900ms" style="background-image: url('images/photo7.jpg');"></div>
                        <div class="col-12 col-lg-6 padding-seven-tb padding-eight-lr md-padding-nine-tb md-padding-twelve-lr sm-padding-30px-tb sm-padding-50px-lr text-center text-lg-left wow slideInRight last-paragraph-no-margin" data-wow-duration="900ms">
                            <span class="text-medium margin-20px-bottom md-margin-15px-bottom d-block alt-font sm-margin-15px-bottom">Don't wait until the bills eat you up.</span>
                            <h4 class="alt-font text-light-gray">Get up to 1 Million Naira instant loan.</h4>
                            <p class="width-80 lg-width-100">We make access to credits very easily and seamlessly. You can apply at any time and get funded within minutes. Early repayment allows for higher loans.</p>
                            <a href="#" class="btn btn-small btn-white btn-rounded margin-35px-top md-margin-25px-top">request for loan</a>
                        </div>
                    </div>
                </div>
            </section> -->
            <!-- end explore work section -->
            <!-- start call to action section -->
            <!-- <section class="wow fadeIn padding-60px-tb md-padding-40px-tb bg-deep-pink">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 position-relative text-center">
                            <span class="text-extra-large text-white-2 alt-font d-inline-block margin-5px-top margin-30px-right sm-no-margin-right sm-no-margin-top sm-margin-15px-bottom sm-width-100">Create a free account and unlock different loan offers within minutes.</span>
                            <a href="#" target="_blank" class="btn btn-white btn-medium align-top sm-no-margin-right btn-rounded">Create Account <i class="fas fa-arrow-right"></i></a>
                        </div>                    
                    </div>
                </div>
            </section> -->
            <!-- end call to action section -->
            <!-- start footer --> 
            <footer class="footer-standard-dark bg-extra-dark-gray"> 
                <!-- <div class="footer-widget-area padding-five-tb sm-padding-30px-tb">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-3 col-md-6 widget border-right border-color-medium-dark-gray md-no-border-right md-margin-30px-bottom sm-text-center">

                                <a href="index.html" class="margin-20px-bottom d-inline-block"><img class="footer-logo" src="images/logo-white.png" data-rjs="images/logo-white@2x.png" alt=""></a>

                                <p class="text-small width-95 sm-width-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                                <div class="social-icon-style-8 d-inline-block vertical-align-middle">
                                    <ul class="small-icon no-margin-bottom">
                                        <li><a class="facebook text-white-2" href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
                                        <li><a class="twitter text-white-2" href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                        <li><a class="google text-white-2" href="https://plus.google.com/" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
                                        <li><a class="instagram text-white-2" href="https://instagram.com/" target="_blank"><i class="fab fa-instagram no-margin-right" aria-hidden="true"></i></a></li>
                                    </ul>
                                </div>

                            </div>

                            <div class="col-lg-3 col-md-6 widget border-right border-color-medium-dark-gray padding-45px-left md-padding-15px-left md-no-border-right md-margin-30px-bottom text-center text-md-left">
                                <div class="widget-title alt-font text-small text-medium-gray text-uppercase margin-10px-bottom font-weight-600">Company</div>
                                <ul class="list-unstyled">
                                    <li><a class="text-small" href="product.html">Products</a></li>
                                    <li><a class="text-small" href="#">Apply for a loan</a></li>
                                    
                                    <li><a class="text-small" href="#">Terms & Condition</a></li>
                                    <li><a class="text-small" href="#">Privacy Policy</a></li>
                                </ul>
                            </div>

                            <div class="col-lg-3 col-md-6 widget border-right border-color-medium-dark-gray padding-45px-left md-padding-15px-left md-no-border-right md-margin-30px-bottom text-center text-md-left">
                                <div class="widget-title alt-font text-small text-medium-gray text-uppercase margin-10px-bottom font-weight-600">Help & Support</div>
                                <ul class="list-unstyled">
                                    <li><a class="text-small" href="faq.html">FAQ</a></li>
                                    <li><a class="text-small" href="about.html">About</a></li>
                                    <li><a class="text-small" href="contact.html">Contact</a></li>
                                    
                                </ul>
                            </div>

                            <div class="col-lg-3 col-md-6 widget border-right border-color-medium-dark-gray padding-45px-left md-padding-15px-left md-clear-both md-no-border-right sm-margin-30px-bottom text-center text-md-left">
                                <div class="widget-title alt-font text-small text-medium-gray text-uppercase margin-10px-bottom font-weight-600">Contact Info</div>
                                <p class="text-small d-block margin-15px-bottom width-80 sm-width-100">LoanBook Agency<br> Lagos, Nigeria.</p>
                                <div class="text-small">Email: <a href="mailto:sales@domain.com">email@loanbook.com</a></div>
                                <div class="text-small">Phone: +23490123456789</div>
                                <a href="contact.html" class="text-small text-uppercase text-decoration-underline">Speak with us!</a>
                            </div>

                        </div>
                    </div>
                </div> -->
                <div class="bg-dark-footer padding-50px-tb text-center sm-padding-30px-tb">
                    <div class="container">
                        <div class="row">

                            <div class="col-md-6 text-md-left text-small text-center">&copy; 2019 LoanBook Finance Ltd<a href="#" target="_blank" class="text-dark-gray"></a></div>
                            <div class="col-md-6 text-md-right text-small text-center">
                                <a href="javascript:void(0);" class="text-dark-gray">Term and Condition</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="javascript:void(0);" class="text-dark-gray">Privacy Policy</a>
                            </div>

                        </div>
                    </div>
                </div>
            </footer>
            <!-- end footer -->
        </div>
        <!-- start scroll to top -->
        <a class="scroll-top-arrow" href="javascript:void(0);"><i class="ti-arrow-up"></i></a>
        <!-- end scroll to top  -->
        <!-- javascript libraries -->
        
        <script type="text/javascript" src="home/js/jquery.js"></script>
        <script type="text/javascript" src="home/js/modernizr.js"></script>
        <script type="text/javascript" src="home/js/bootstrap.bundle.js"></script>
        <script type="text/javascript" src="home/js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="home/js/skrollr.min.js"></script>
        <script type="text/javascript" src="home/js/smooth-scroll.js"></script>
        <script type="text/javascript" src="home/js/jquery.appear.js"></script>
        <script type="text/javascript" src="home/moment-develop/moment.js"></script>
        <!-- <script src="https://unpkg.com/moment"></script> -->
        <!-- magnific popup -->
        <script type="text/javascript" src="home/js/jquery.magnific-popup.min.js"></script>
        <!-- menu navigation -->
        <!-- setting -->
        <script type="text/javascript" src="home/js/main.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script>
        <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
        <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="https://cdn.jsdelivr.net/npm/vee-validate@2.2.0/dist/vee-validate.js"></script>
        <script>
            /*window.addEventListener("load", function(event) {
                import Vue from 'vue';
                import VeeValidate from 'vee-validate';*/

                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);
                    }
                });
                Vue.use(VeeValidate, {
                    events: 'change|blur|keyup'
                });
                var app = new Vue({
                el: '#app',
                data: function() {
                    return {
                         url: 'api/',
                      //  url: 'http://lendaxloanbookinstance-prod.eu-west-2.elasticbeanstalk.com/api/',
                        errorText: '',
                        form: {},
                        login: {},
                        loanDuration: {},
                        minAmount: 10000,
                        maxAmount: 1000000,
                        repaymentType: 'months',
                        minMonth: 1,
                        maxMonth: 0,
                        showAmount: 0,
                        showMonth: 0,
                        appOwnerKey: '',
                        appOwnerPublicKey: 'la43f567',
                        loanType: [],
                        repaymentDate: {
                            show: false,
                        },
                        outlet: [],
                        securityQuestion: [],
                        error: '',
                        loading: false,
                        questions: false,
                        validations: {
                            amount: {  }
                        },
                        money: {
                            decimal: '.',
                            thousands: ',',
                            prefix: '₦ ',
                            precision: 2,
                            masked: false,
                        }
                    }
                },
                methods: {
                    clearError() {
                        if (this.error != '')
                            this.error = '';
                    },
                    getLoanDurationParameters() {
                        axios.post(this.url + 'register/getloancalculationparameters', this.loanDuration)
                        .then(response => {
                            // console.log(response.data);
                            this.maxMonth = response.data.tenorAllowable;
                            this.repaymentType = (response.data.repaymentType).toLowerCase();
                        })
                        .catch(error => {
                            console.log(error)
                        });
                    },
                    toggleChange() {
                        this.repaymentDate.show = !this.repaymentDate.show;
                    },
                    changeAmount(evt) {
                        this.showAmount = (parseInt(evt.target.value,0)).toLocaleString();
                        this.loanDuration.LoanAmount = evt.target.value;
                        this.maxMonth = 0;
                        this.showMonth = 0;
                        this.form.loanMonth = 1;
                        this.getLoanDurationParameters();
                        this.$forceUpdate();
                    },
                    changeMonth(evt) {
                        this.showMonth = (parseInt(evt.target.value,0)).toLocaleString();evt.target.value;
                        this.$forceUpdate();
                    },
                    validateBVN () {
                        this.loading = true;
                        this.error = '';
                        axios.get(this.url + 'auth/bvn/' + this.login.bvn)
                        .then(
                            res => {
                                this.securityQuestion = res.data;
                                this.questions = true;
                                this.loading = false;                                  
                            }                            
                        ).catch(err => {
                            this.error = err.response.data;
                            this.loading = false;
                        })
                    },
                    onLogin (scope) {
                        this.loading = true;
                        this.error = '';
                        // console.log(scope, this.$validator);
                        this.$validator.validateAll('login').then(valid => {
                            if (valid) {
                                axios.post(this.url + 'auth/customer', {'Remember': this.login.remember, 'BVN': this.login.bvn, 'SecurityQuestion': this.login.securityQuestion, 'SecurityAnswer': this.login.securityAnswer})
                                .then(response => {
                                    // this.loading = false;
                                    localStorage.setItem("customer_token", response.data.customer_token);
                                    window.location.reload();
                                }).catch(err => {
                                    this.error = err.response.data;
                                    this.loading = false;
                                }); 
                            }
                        })
                    },
                    onSubmit (scope) {
                        // console.log(this.$validator, scope);
                        this.errorText = '';
                        this.$validator.validateAll('application').then(valid => {
                            // console.log(valid);
                            if (valid) {
                                axios.post(this.url + 'register/fetch_repayment', {'Amount': this.form.loanAmount, 'Duration': this.form.loanMonth, 'LoanType': this.form.loanType, 'NetIncome': this.form.netIncome})
                                .then(response => {
                                    var data = response.data;
                                    if ( data.repaymentCalculate > data.repaymentNetIncome ) {
                                        this.errorText = "Your net income is too low for this loan type, consider changing the loan type or extending the loan tenor.";
                                    } else {
                                        localStorage.removeItem("loanbook");
                                        var dataToSave = {
                                            NetIncome: this.form.netIncome,
                                            LoanAmount: this.form.loanAmount,
                                            LoanDuration: this.form.loanMonth,
                                            LoanType: this.form.loanType,
                                            Outlet: this.form.outlet
                                        }
                                        localStorage.setItem("loanbook", JSON.stringify(dataToSave));
                                        window.location.replace("/register/");
                                    }
                                })
                                .catch(error => {
                                    console.log(error)
                                })
                            }
                        });
                    },
                    openModal (scope) {
                        this.errorText = '';
                        // console.log(this.$validator, scope);
                        this.$validator.validateAll('application').then(valid => {
                            // console.log(valid);
                            if (valid) {
                                axios.post(this.url + 'register/fetch_repayment', {'Amount': this.form.loanAmount, 'Duration': this.form.loanMonth, 'LoanType': this.form.loanType, 'NetIncome': this.form.netIncome})
                                .then(response => {
                                    var data = response.data;
                                    if ( data.repaymentCalculate > data.repaymentNetIncome ) {
                                        this.errorText = "Your net income is too low for this loan type, consider changing the loan type or extending the loan tenor.";
                                    } else {
                                        var val = '';
                                        for (var i = 1; i <= this.form.loanMonth; i++) {
                                            val += `<tr>
                                                    <td>${i}</td>
                                                    <td>
                                                    ${ 
                                                        (i == 1) 
                                                        ? 
                                                            (this.repaymentDate.date) 
                                                            ? 
                                                                moment(this.repaymentDate.date).format('ll') 
                                                            : 
                                                                moment().format('ll') 
                                                        : 
                                                            (this.repaymentDate.date) 
                                                            ? 
                                                                moment(this.repaymentDate.date).add(i-1, this.repaymentType).format('ll') 
                                                            :
                                                                moment().add(i-1, this.repaymentType).format('ll') 
                                                    }
                                                    </td>
                                                    <td>₦${data.repaymentCalculate.toLocaleString()}</td>
                                                </tr>`;
                                        }

                                        $("#schedule").html(val);
                                        $("#myModal2").modal("show");
                                    }
                                })
                                .catch(error => {
                                    console.log(error)
                                })
                            }
                        })
                    },
                    updateLoanInfo (evt) {
                        // console.log(evt.target.value);
                        this.loanDuration.LoanTypeId = evt.target.value;
                        this.loanType.forEach(key => {
                            if (key.loanTypeId == evt.target.value) {
                                this.minAmount = key.minAmount;
                                this.maxAmount = key.maxAmount;
                                this.maxMonth = key.loanTypeTenor;
                                this.loanDuration.LoanAmount = key.minAmount;
                                this.form.loanAmount = key.minAmount;
                                this.showMonth = 0;
                                this.form.loanMonth = 1;
                                this.$forceUpdate();
                                return;
                            }
                        });
                        this.getLoanDurationParameters();
                    },
                    fetchLoanByBranch (evt) {
                        const val = evt.target.value;
                        axios.get(this.url + 'register/fetchloantypebybranch/' + val)
                        .then(response => {
                            this.loanType = response.data;
                        })
                        .catch(error => {
                            console.log(error)
                        })
                    },
                    fetchSetup(key) {
                        axios.get(this.url + 'register/fetch_setup?appOwnerKey=' + key)
                            .then(response => {
                        // console.log(response.data);
                        //this.loanType = response.data.loanTypes;
                        this.outlet = response.data.branch;
                        this.minAmount = 0;
                        this.form.loanAmount = 0;
                        this.showAmount = (this.minAmount).toLocaleString();
                        this.maxAmount = 0;
                        // this.form.loanType = this.loanType[0].loanTypeID;
                        this.form.loanMonth = 1;
                        this.minMonth = 1;
                        // this.maxMonth = this.loanType[0].loanTypeTenor;
                        this.showMonth = 1;
                        this.$forceUpdate();
                        this.loading = false
                    })
                    .catch(error => {
                        console.log(error)
                    })
                    }
                },
                mounted: function() {

                    axios.get(this.url + 'register/' + this.appOwnerPublicKey)
                        .then(res => {
                            
                            this.appOwnerKey = res.data.data.appInformationToReturn.appOwnerKey;
                            this.fetchSetup(this.appOwnerKey);
                            // console.log(res.data.data);
                        }).catch(err => {
                            console.log(err);
                        })
                    
                    
                },
                created: function() {
                    VeeValidate.Validator.extend('check_amount', {
                        // Custom validation message
                        getMessage: (field) => `Loan amount must be between ₦${this.minAmount.toLocaleString()} and ₦${this.maxAmount.toLocaleString()}.`,
                        // Custom validation rule
                        validate: (value) => new Promise(resolve => {
                            resolve({
                                valid: (value >= this.minAmount && value <= this.maxAmount)
                            });
                        })
                    });
                }
            })
            //})
        </script>
    
    </body>
</html>
