client-ui

<div ng-init="_ctrl = loanOptionsController; _ctrl.init();" class="text-center">  <div class="alert alert-danger text-center" ng-if="_ctrl.hasError"> <span ng-bind="_ctrl.errorMessage"></span> </div> <div class="text-center alert alert-warning" ng-if="_ctrl.counterOffer"> <h6> Sorry, we are unable to offer you the amount you requested. The good news is that you do qualify for the following loan offers: </h6> </div> <div ng-if="_ctrl.totalOffers > 0"> <div ng-if="!_ctrl.hasError"> <h3 class="no-space">Congratulations! <br> You're Approved<sup class="superscript">*</sup> for up to {{_ctrl.highestOfferAmount| loanAmount}}</h3> </div> </div>  <div ng-if="!_ctrl.hasError && !_ctrl.loanOffers"> <h3>Your loan options are being generated</h3> <i class="fa fa-spinner fa-pulse fa-4x"></i> </div> <br/>  <div class="hidden-xs" ng-if="_ctrl.totalOffers > 0"> <div class="col-xs-12"> <div class="row panel-pricing-heading"> <div class="col-sm-10 col-sm-offset-2"> <div class="col-sm-3"> <h5>Loan <br>Amount</h5> </div> <div class="col-sm-2"> <h5><br>Term</h5> </div> <div class="col-sm-2"> <h5><br>Rate</h5> </div> <div class="col-sm-3"> <h5><br>APR</h5> </div> <div class="col-sm-2"> <h5>Monthly Payment</h5> </div> </div> </div> <div class="panel-pricing"> <ul class="list-group list-group-flush"> <li class="list-group-item" ng-repeat="loanOffer in _ctrl.loanOffers" ng-class="{'selected': _ctrl.isSelectedOffer(loanOffer)}"> <div class="container-fluid"> <div class="row row-eq-height large-row"> <div class="col-sm-2"> <button class="btn btn-success choosebtn" ng-disabled="_ctrl.working" ng-click="_ctrl.chooseLoanOffer(loanOffer.id); _ctrl.saveAndContinue();" >Choose</button> </div> <div class="col-sm-10 offer-text" ng-class="_ctrl.specialOfferText(loanOffer.id) ? 'highlighted-offer':'shift-text'"> <div class="row vertical-aligned-row"> <div class="container-fluid"> <div class="row"> <div class="col-sm-3"> <label name="amount" class="large-blue-text" ng-bind="loanOffer.amount | loanAmount"></label> </div> <div class="col-sm-2"> <label name="duration" ng-bind="loanOffer.duration + ' Mo.'"></label> </div> <div class="col-sm-2"> <label name="rate" ng-bind="loanOffer.rate | rateTwoDecimal"></label> </div> <div class="col-sm-3"> <label name="annualPercentageRate" ng-bind="loanOffer.annualPercentageRate | rateTwoDecimal"></label> &nbsp &nbsp <span class="primary-tooltip" data-toggle="tooltip" data-placement="top" tooltip title="This is based off of the rate of the loan, {{loanOffer.rate| rate}}, and an origination fee of {{loanOffer.originationFeeRate| rate}} ({{loanOffer.originationFee| loanAmount}}) which will be deducted from the proceeds of the loan. These numbers are an estimate."> <i class="fa fa-question-circle fa-lg"></i> </span> </div> <div class="col-sm-2"> <label name="monthlyPayment" ng-bind="loanOffer.monthlyPayment | currency"></label> </div> </div> </div> </div> <div ng-if="_ctrl.specialOfferText(loanOffer.id)" class="row"> <div class="highlighted-offer-message"> {{_ctrl.specialOfferText(loanOffer.id)}} </div> </div> </div> </div> </div> </li> </ul> </div> </div> <div> <a class="btn btn-warning large-btn" ng-if="_ctrl.counterOffer" ui-sref="sorry({reasons: ['DECLINED']})"> No Thanks </a> </div> </div> <br/>  <div class="hidden-sm hidden-md hidden-lg" ng-if="_ctrl.totalOffers > 0"> <div id="loanOptionSlider" class="carousel slide" data-interval="false" data-ride="carousel" ng-init="_ctrl.initializeMobileIndex()"> <div class="row"> <div class="col-xs-2 text-left slider-arrows"> <a href="" ng-click="_ctrl.slide('prev')"> <i class="fa fa-arrow-circle-left fa-stack-2x"></i> </a> </div> <div class="col-xs-8 no-space"> <h3> Option <span ng-bind="_ctrl.mobileIndex"></span> / {{_ctrl.totalOffers}} </h3> </div> <div class="col-xs-2 slider-arrows"> <a class="pull-right" href="" ng-click="_ctrl.slide('next')"> <i class="fa fa-arrow-circle-right fa-stack-2x"></i> </a> </div> </div> <div class="carousel-inner" role="listbox"> <div ng-repeat="mLoanOffer in _ctrl.loanOffers" class="item" ng-class="{'active': _ctrl.initialIndex === $index}"> <div class="panel-pricing" ng-swipe-right="_ctrl.slide('prev')" ng-swipe-left="_ctrl.slide('next')"> <ul class="list-group list-group-flush panel-pricing-heading"> <li class="list-group-item hidden-print"> <div class="row row-eq-height"> <div class="col-xs-6"><h5>Loan Amount</h5></div> <div class="col-xs-6"> <h5 class="large-blue-text">{{mLoanOffer.amount| loanAmount}}</h5> </div> </div> </li> <li class="list-group-item"> <div class="row row-eq-height"> <div class="col-xs-6"><h5>Monthly Payment</h5></div> <div class="col-xs-6 field-value"><label>{{mLoanOffer.monthlyPayment| payment}}</label></div> </div> </li> <li class="list-group-item"> <div class="row row-eq-height"> <div class="col-xs-6"><h5>Term</h5></div> <div class="col-xs-6 field-value"><label> {{mLoanOffer.duration}} Mo.</label></div> </div> </li> <li class="list-group-item"> <div class="row row-eq-height"> <div class="col-xs-6"><h5>Rate</h5></div> <div class="col-xs-6 field-value"><label>{{mLoanOffer.rate| rateTwoDecimal}}</label></div> </div> </li> <li class="list-group-item"> <div class="row row-eq-height"> <div class="col-xs-6"><h5>APR</h5> </div> <div class="col-xs-6 field-value"> <label class="apr-value"> {{mLoanOffer.annualPercentageRate| rateTwoDecimal}} &nbsp &nbsp <span class="primary-tooltip" data-toggle="tooltip" data-placement="top" tooltip title="This is based off of the rate of the loan, {{mLoanOffer.rate| rate}}, and an origination fee of {{mLoanOffer.originationFeeRate| rate}} ({{mLoanOffer.originationFee| loanAmount}}) which will be deducted from the proceeds of the loan. These numbers are an estimate."> <i class="fa fa-question-circle fa-lg"></i> </span> </label> </div> </div> </li> <li class="list-group-item" ng-if="_ctrl.specialOfferText(mLoanOffer.id)"> {{_ctrl.specialOfferText(mLoanOffer.id)}} </ul> </div> </div> <button class="btn btn-success large-btn word-wrap" ladda="_ctrl.working" data-style="expand-left" ng-click="_ctrl.selectAndContinue()">Select & Continue</button> <a class="btn btn-warning large-btn" ng-if="_ctrl.counterOffer" ui-sref="sorry({reasons: ['DECLINED']})"> No Thanks </a> </div> </div> </div>  <div class="disclamer text-left"> <p><br><br>*The numbers above (payment, rate, and <span class="primary-tooltip" data-toggle="tooltip" data-placement="top" tooltip title="APR stands for Annual Percentage Rate and represents the total cost of borrowing as an annual rate."><a>APR</a></span> rate plus any finance charges) are all estimated based on your stated income. If your income is verified to be less than your stated income, these numbers may change. Reviewing these numbers and selecting a loan does not commit you to a loan. </p> </div> <form id="loanAmountForm" name="loanAmountForm" ng-submit="_ctrl.formSubmit()" xt-form role="form" focus-error="true" novalidate class="box-border-sides box-border-bottom box-border-top"> <h5>Want to customize <span class="text-nowrap">your loan amount?</span></h5> <div class="col-xs-offset-1 col-xs-10 col-sm-offset-3 col-sm-6 col-md-offset-4 col-md-4"> <label class="text-ceter">Enter the loan amount you'd like:</label> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control" id="requestedAmount" name="requestedAmount" placeholder="{{config.loanMin}} - {{config.loanMax}}" ng-model="_ctrl.userInput.loan.requestedAmount" type="number" required ng-min="config.loanMin" ng-max="config.loanMax" xt-validation-tooltip msg-required="Please enter a loan amount"> </div> <button type="submit" class="btn btn-warning btn-lg ladda-button" ladda="_ctrl.working" data-style="expand-left" ng-disabled="loanAmountForm.$invalid">Change Amount</button> </div> </form> </div>