community-app/app/views/loans/newloanaccount.html

<div ng-controller="NewLoanAccAppController" class="content-container">
    <ul class="breadcrumb">
        <li ng-show="groupName">
            <a href="#/viewgroup/{{groupId}}">
                <strong>'{{groupName}}'</strong>
            </a>
        </li>
        <li ng-show="clientName">
            <a href="#/viewclient/{{clientId}}">
                <strong>'{{clientName}}'</strong>
            </a>
        </li>
        <li class="active">{{'label.anchor.loanapplication' | translate}}</li>
    </ul>
    <wizard current-step="step" on-finish="submit()" class="card well">
        <wz-step icon="fa fa-circle-o" wz-title="{{'label.heading.details' | translate}}">
            <form name="Details" novalidate="" ng-submit="goNext(Details)" class="form-inline">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{'label.heading.details' | translate}}</h3>-->
                    <hr>
                    <table class="" style="border-spacing: 10px; border-collapse: separate">
                        <tr>
                            <td class="width14">
                                <label>{{ 'label.input.product' | translate }}
                                    <span class="required">*</span>:&nbsp;
                                </label>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.product' | translate}}"></i>
                            </td>
                            <td class="width36 paddedbottom20">
                                <select id="productId" ng-model="formData.productId" class="form-control width170px" ng-options="product.id as product.name for product in products"
                                    value="{{product.id}}" ng-change="loanProductChange(formData.productId)" class="form-control width170px"
                                    required="required">
                                    <option style="display:none" value="">{{'label.selectloanproduct' | translate}}
                                    </option>
                                </select>
                            </td>
                            <td class="width14">
                                <label ng-show="formData.productId">{{ 'label.input.loanofficer' | translate }}:&nbsp;
                                </label>
                                <i ng-show="formData.productId" class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.loanofficer' | translate}}"></i>
                            </td>
                            <td class="width36 paddedbottom20">
                                <select ng-show="formData.productId" id="loanOfficerId" ng-model="formData.loanOfficerId" ng-change="loandetails.loanOfficerName = formValue(loanaccountinfo.loanOfficerOptions,formData.loanOfficerId,'id','displayName')"
                                    ng-options="loanOfficer.id as loanOfficer.displayName for loanOfficer in loanaccountinfo.loanOfficerOptions | orderBy:'displayName':reverse"
                                    class="form-control width170px" value="{{loanOfficer.id}}">
                                    <option value="">{{'label.selectloanofficer' | translate}}</option>
                                </select>
                            </td>
                        </tr>
                        <tr ng-show="formData.productId">
                            <td class="width14">
                                <label>{{ 'label.input.loanpurpose' | translate }}:&nbsp;</label>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.loanpurpose' | translate}}"></i>
                            </td>
                            <td class="width36 paddedbottom20">
                                <select chosen="loanaccountinfo.loanPurposeOptions" id="loanPurposeId" ng-model="formData.loanPurposeId" ng-change="loandetails.loanPurposeName = formValue(loanaccountinfo.loanPurposeOptions,formData.loanPurposeId,'id','name')"
                                    ng-options="loanPurpose.id as loanPurpose.name for loanPurpose in loanaccountinfo.loanPurposeOptions | orderBy:'name':reverse"
                                    class="form-control width170px" value="{{loanPurpose.id}}">
                                    <option value="">{{'label.selectpurpose' | translate}}</option>
                                </select>
                            </td>
                            <td class="width14" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.fundId == true">
                                <label>{{ 'label.input.fund' | translate }}:&nbsp;</label>
                            </td>
                            <td class="paddedbottom20 width36" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.fundId == true">
                                <select id="fundId" ng-model="formData.fundId" class="form-control width170px" ng-change="loandetails.fundName = formValue(loanaccountinfo.fundOptions,formData.fundId,'id','name')"
                                    ng-options="fund.id as fund.name for fund in loanaccountinfo.fundOptions" style="max-width:100px;left:0;" value="{{fund.id}}">
                                    <option value="" style="left:0;">{{'label.selectfund' | translate}}</option>
                                </select>
                            </td>
                        </tr>
                        <tr ng-show="formData.productId">
                            <td class="width14">
                                <label>{{ 'label.input.submittedon' | translate }}
                                    <span class="required">*</span>:&nbsp;
                                </label>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.submittedon' | translate}}"></i>
                            </td>
                            <td class="paddedbottom20 width36">
                                <input type="text" id="submittedOnDate" name="submittedon" datepicker-pop="dd MMMM yyyy" ng-model="date.first" is-open="opened"
                                    min="'2000-01-01'" max="restrictDate" class="form-control" />
                            </td>
                            <td class="width14">
                                <label title="{{ 'label.input.expecteddisbursementon' | translate }}">{{ 'label.input.disbursementon' | translate }}
                                    <span class="required">*</span>:&nbsp;
                                </label>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.disbursementon' | translate}}"></i>
                            </td>
                            <td class="paddedbottom20 width36">
                                <input id="expectedDisbursementDate" sort type="text" name="expecteddisbursementon" datepicker-pop="dd MMMM yyyy" ng-model="date.second"
                                    is-open="opened1" min="minDate"  class="form-control" required />
                                <form-validate valattribute="expecteddisbursementon" valattributeform="Details" />
                            </td>
                        </tr>
                        <tr ng-show="formData.productId">
                            <td class="width14">
                                <label>{{ 'label.input.externalid' | translate }}</label>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.externalid' | translate}}"></i>
                            </td>
                            <td class="paddedbottom20 width36">
                                <input type="text" id="externalId" name="externalId" ng-model="formData.externalId" class="form-control" />
                            </td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                    <div ng-hide="loanaccountinfo.calendarOptions == undefined">
                        <hr ng-show="loanaccountinfo" />
                    </div>
                    <label ng-show="loanaccountinfo.calendarOptions">
                        <i class="fa fa-calendar "></i>&nbsp;
                        <strong>{{ 'label.heading.meetingdetails' | translate }}</strong>
                    </label>
                    <table ng-show="loanaccountinfo.calendarOptions" class=" width100">
                        <tr ng-repeat="calendar in loanaccountinfo.calendarOptions">
                            <td class="width14">
                                <label>{{ 'label.heading.startdate' | translate }}:</label>
                            </td>
                            <td class="width36">{{calendar.startDate | DateFormat}}</td>
                            <td class="width14">
                                <label>{{ 'label.heading.repeatson' | translate }}:</label>
                            </td>
                            <td class="width36">{{calendar.humanReadable}}</td>
                        </tr>
                        <tr ng-repeat="calendar in loanaccountinfo.calendarOptions">
                            <td align="center">
                                <input type="checkbox" ng-model="formData.syncRepaymentsWithMeeting" ng-change="syncRepaymentsWithMeetingchange()">
                            </td>
                            <td>
                                <label>{{ 'label.input.syncrepaymentswithmeeting' | translate }}</label>
                            </td>
                            <td align="center">
                                <input type="checkbox" ng-model="formData.syncDisbursementWithMeeting" ng-change="syncDisbursementWithMeetingchange()">
                            </td>
                            <td>
                                <label>{{ 'label.input.syncdisbursementdatewithmeeting' | translate }}</label>
                            </td>
                        </tr>
                    </table>
                    <div ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.linkAccountId == true && response.uiDisplayConfigurations.loanAccount.isHiddenField.createStandingInstruction == true">
                        <h3 ng-show="loanaccountinfo">{{ 'label.heading.savingsLinkage' | translate}}</h3>
                        <hr ng-show="loanaccountinfo">
                    </div>
                    <table ng-show="loanaccountinfo && !previewRepayment" class=" width100">
                        <tr>
                            <td class="width19" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.linkAccountId == true">
                                <label>{{ 'label.input.linksavings' | translate }}:</label>
                            </td>
                            <td class="width31 paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.linkAccountId == true">
                                <select id="linkAccountId" ng-model="formData.linkAccountId" ng-options="savingaccount.id as savingaccount.productName for savingaccount in loanaccountinfo.accountLinkingOptions"
                                    ng-change="loandetails.linkAccountName = formValue(loanaccountinfo.accountLinkingOptions,formData.linkAccountId,'id','productName')"
                                    class="form-control width170px" value="{{savingaccount.id}}">
                                    <option value="">{{'label.menu.selectone' | translate}}</option>
                                </select>
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.createStandingInstruction == true">
                                <label>{{ 'label.input.createStandingInstruction' | translate }}:</label>
                            </td>
                            <td class="width31" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.createStandingInstruction == true">
                                <input id="createStandingInstruction" class="input-mini-small" type="checkbox" ng-model="formData.createStandingInstructionAtDisbursement">
                            </td>
                        </tr>
                    </table>
                    <hr>
                    <button class="btn btn-default pull-left" wz-previous disabled ng-hide="disabled"><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
                    </button>
                    <button class="btn btn-default pull-right" type="submit" ng-hide="disabled">Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
                    </button>
                    <div class="col-sm-offset-6">
                    <button class="btn btn-warning" ng-hide="!disabled" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
                    </div>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="{{ 'label.heading.terms' | translate }}" wz-disabled="{{disabled}}">
            <form name="Terms" ng-submit="goNext(Terms)" class="form-inline">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{ 'label.heading.terms' | translate }}</h3>-->
                    <hr>
                    <table ng-show="loanaccountinfo" ng-hide="previewRepayment" class=" width100">
                        <tr>
                            <td class="width19">
                                <label>{{ 'label.input.principal' | translate }}&nbsp;
                                    <span class="required">*</span>:</label>
                            </td>
                            <td class="width31 paddedbottom20">
                                <input type="text" class="form-control" id="principal" name="principal" ng-model="formData.principal" number-format required
                                    late-Validate/>&nbsp;{{loanaccountinfo.currency.displaySymbol}}
                                <form-validate valattributeform="Terms" valattribute="principal" />
                            </td>
                            <td class="width14">
                                <label>{{ 'label.input.loanterm' | translate }}&nbsp;
                                    <span class="required">*</span>:</label>
                            </td>
                            <td class="width36 paddedbottom20">
                                <input id="loanTermFrequency" class="form-control" name="loanterm" type="text" ng-model="formData.loanTermFrequency" required
                                    late-Validate/>
                                <select ng-disabled="response.uiDisplayConfigurations.loanAccount.isReadOnlyField.loanTermFrequencyType == true" id="loanTermFrequencyType"
                                    class="form-control" ng-model="formData.loanTermFrequencyType" ng-change="loandetails.loanTermFrequencyValue = formValue(loanaccountinfo.termFrequencyTypeOptions,formData.loanTermFrequencyType)"
                                    ng-options="termFrequencyType.id as termFrequencyType.value for termFrequencyType in loanaccountinfo.termFrequencyTypeOptions"
                                    value="{{termFrequencyType.id}}"></select>
                                <form-validate valattributeform="Terms" valattribute="loanterm" />
                            </td>
                        </tr>
                        <tr>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.numberOfRepayments == true">
                                <label>{{ 'label.input.numofrepayments' | translate }}&nbsp;
                                    <span class="required">*</span>
                                </label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.numberOfRepayments == true">
                                <input id="numberOfRepayments" class="form-control" name="numofrepayments" type="text" ng-model="formData.numberOfRepayments"
                                    required late-Validate>&nbsp;
                                <form-validate valattributeform="Terms" valattribute="numofrepayments" />
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.repaymentEvery == true">
                                <label>{{ 'label.input.repaidevery' | translate }}&nbsp;
                                    <span class="required">*</span>
                                </label>
                            </td>
                            <td class="paddedbottom20 width500px" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.repaymentEvery == true">

                                <input id="repaymentEvery" class="form-control" type="text" name="repaidevery" ng-model="formData.repaymentEvery" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.repaymentEvery"
                                    required late-Validate/>
                                <select id="repaymentFrequencyType" class="form-control" ng-model="formData.repaymentFrequencyType" ng-change="loandetails.repaymentFrequencyValue = formValue(loanaccountinfo.termFrequencyTypeOptions,formData.repaymentFrequencyType)"
                                    ng-options="repaymentFrequencyType.id as repaymentFrequencyType.value for repaymentFrequencyType in loanaccountinfo.termFrequencyTypeOptions"
                                    ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.repaymentEvery" value="{{repaymentFrequencyType.id}}"></select>&nbsp;
                                <span ng-show="formData.repaymentFrequencyType == 2">on</span>
                                <select id="repaymentFrequencyNthDayType" class="form-control" ng-model="formData.repaymentFrequencyNthDayType" ng-change="loandetails.repaymentFrequencyNthDayValue = formValue(loanaccountinfo.repaymentFrequencyNthDayTypeOptions,formData.repaymentFrequencyNthDayType)"
                                    ng-options="repaymentFrequencyNthDayType.id as repaymentFrequencyNthDayType.value for repaymentFrequencyNthDayType in loanaccountinfo.repaymentFrequencyNthDayTypeOptions"
                                    ng-show="formData.repaymentFrequencyType == 2" value="{{repaymentFrequencyNthDayType.id}}">
                                    <option value="">{{'label.selecton' | translate}}</option>
                                </select>&nbsp;
                                <select id="repaymentFrequencyDayOfWeekType" class="form-control" ng-model="formData.repaymentFrequencyDayOfWeekType" ng-change="loandetails.repaymentFrequencyDayOfWeekValue = formValue(loanaccountinfo.repaymentFrequencyDaysOfWeekTypeOptions,formData.repaymentFrequencyDayOfWeekType)"
                                    ng-options="repaymentFrequencyDayOfWeekType.id as repaymentFrequencyDayOfWeekType.value for repaymentFrequencyDayOfWeekType in loanaccountinfo.repaymentFrequencyDaysOfWeekTypeOptions"
                                    ng-show="formData.repaymentFrequencyType == 2" value="{{repaymentFrequencyDayOfWeekType.id}}">
                                    <option value="">{{'label.selectday' | translate}}</option>
                                </select>&nbsp;

                                <form-validate valattributeform="Terms" valattribute="repaidevery" />
                            </td>

                        </tr>
                        <tr>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.repaymentsStartingFromDate == true">
                                <label>{{ 'label.input.firstrepaymenton' | translate }}</label>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.firstrepaymenton' | translate}}"></i>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.repaymentsStartingFromDate == true">
                                <input id="repaymentsStartingFromDate" type="text" datepicker-pop="dd MMMM yyyy" ng-model="date.fourth" is-open="opened3"
                                    min="minDate"  class="form-control" />
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestChargedFromDate == true">
                                <label class="control-label">{{ 'label.input.interestchargedfrom' | translate }}:
                                </label>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestchargedfrom' | translate}}"></i>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestChargedFromDate == true">
                                <input id="interestChargedFromDate" type="text" datepicker-pop="dd MMMM yyyy" ng-model="date.third" is-open="opened2" min="minDate"
                                     class="form-control" />
                            </td>
                        </tr>
                        <tr ng-show="!loanaccountinfo.isLoanProductLinkedToFloatingRate">
                            <td>
                                <label>{{ 'label.input.nominalinterestrate' | translate }}&nbsp;
                                    <span class="required">*</span>
                                </label>
                            </td>
                            <td class="paddedbottom20">
                                <input id="interestRatePerPeriod" class="form-control" type="text" name="nominalinterestrate" ng-model="formData.interestRatePerPeriod" ng-disabled="ratesEnabled&&rateFlag"
                                />&nbsp;&nbsp;{{loanaccountinfo.interestRateFrequencyType.value}}
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType == true">
                                <label>{{ 'label.input.interestmethod' | translate }}</label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType == true">
                                <div class="width170px">
                                    <select id="interestType" ng-model="formData.interestType" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.interestType"
                                        ng-change="loandetails.interestValue = formValue(loanaccountinfo.interestTypeOptions,formData.interestType)"
                                        ng-options="interestType.id as interestType.value for interestType in loanaccountinfo.interestTypeOptions"
                                        class="form-control width170px" value="{{interestType.id}}"></select>
                                    <label class="col-sm-offset-1">{{ 'label.input.isequalamortization' | translate }}</label>
                                    <input type="checkbox" ng-model="formData.isEqualAmortization" ng-true-value="true" ng-false-value="false">
                                </div>
                            </td>
                        </tr>

                        <tr ng-show="loanaccountinfo.isLoanProductLinkedToFloatingRate">
                            <td>
                                <label>{{ 'label.heading.floatinginterestratedifferential' | translate }}&nbsp;
                                    <span class="required">*</span>
                                </label>
                            </td>
                            <td class="paddedbottom20">
                                <input id="interestratedifferential" class="form-control" type="text" name="interestratedifferential" ng-model="formData.interestRateDifferential"
                                />
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType == true">
                                <label>{{ 'label.input.interestmethod' | translate }}</label>
                            </td>
                            <td class="width36 paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType == true">
                                <select id="interestType1" ng-model="formData.interestType" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.interestType"
                                    ng-options="interestType.id as interestType.value for interestType in loanaccountinfo.interestTypeOptions"
                                    class="form-control width170px" value="{{interestType.id}}" />
                                <label>{{ 'label.input.isfloatingrate' | translate}}</label>
                                <input id="isfloatingrate" class="input-mini-small" type="checkbox" ng-model="formData.isFloatingInterestRate" />
                            </td>
                        </tr>

                        <tr>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.amortizationType == true">
                                <label>{{ 'label.input.amortization' | translate }}&nbsp;
                                    <span class="required">*</span>:</label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.amortizationType == true">
                                <select id="amortizationType" ng-model="formData.amortizationType" class="form-control width170px" ng-change="loandetails.amortizationValue = formValue(loanaccountinfo.amortizationTypeOptions,formData.amortizationType)"
                                    ng-options="amortizationType.id as amortizationType.value for amortizationType in loanaccountinfo.amortizationTypeOptions"
                                    value="{{amortizationType.id}}" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.amortizationType"></select>
                            </td>
                            <td class="form-group"  ng-show="formData.amortizationType == 0">
                                <label class="control-label">{{ 'label.input.fixed.pricipal.percentage.per.installment' | translate }}
                                    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixed.pricipal.percentage.per.installment' | translate}}"
                                       tooltip-append-to-body="true"></i>
                                </label>
                            </td>
                            <td>
                                <input id="fixedPrincipalPercentagePerInstallment" type="text" name="fixedPrincipalPercentagePerInstallment" class="form-control"
                                        ng-model="formData.fixedPrincipalPercentagePerInstallment" late-validate number>
                            </td>
                        </tr>
                        <tr>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestCalculationPeriodType == true">
                                <label>{{ 'label.input.interestcalculationperiod' | translate }}&nbsp;
                                    <span class="required">*</span>
                                </label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestCalculationPeriodType == true">
                                <select id="interestCalculationPeriodType" ng-model="formData.interestCalculationPeriodType" ng-change="loandetails.interestCalculationPeriodValue = formValue(loanaccountinfo.interestCalculationPeriodTypeOptions,formData.interestCalculationPeriodType)"
                                    ng-options="interestCalculationPeriodType.id as interestCalculationPeriodType.value for interestCalculationPeriodType in loanaccountinfo.interestCalculationPeriodTypeOptions"
                                    class="form-control width170px" value="{{interestCalculationPeriodType.id}}" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.interestCalculationPeriodType"></select>
                            </td>
                            <td colspan="2" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestCalculationPeriodType == true || formData.interestCalculationPeriodType == 0">
                                <label>{{ 'label.input.allowpartialperiodinterestcalcualtion' | translate }}&nbsp;</label>
                                <label class="checkbox control-label">
                                    <input id="allowPartialPeriodInterestCalcualtion" type="checkbox" ng-model="formData.allowPartialPeriodInterestCalcualtion"
                                        ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.interestCalculationPeriodType">
                                </label>
                            </td>

                        </tr>
                        <tr>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.inArrearsTolerance == true">
                                <label>{{ 'label.input.arearstolerance' | translate }}</label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.inArrearsTolerance == true">
                                <input id="inArrearsTolerance" type="text" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.inArrearsTolerance"
                                    ng-model="formData.inArrearsTolerance" class="form-control" number-format/>&nbsp;{{loanaccountinfo.currency.displaySymbol}}
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnInterestCharged == true">
                                <label>{{ 'label.input.interestfreeperiod' | translate }}</label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnInterestCharged == true">
                                <input id="graceOnInterestCharged" type="text" ng-model="formData.graceOnInterestCharged" class="form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.transactionProcessingStrategyId == true">
                                <label>{{ 'label.input.repaymentstrategy' | translate }}&nbsp;
                                    <span class="required">*</span>
                                </label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.transactionProcessingStrategyId == true">
                                <select id="transactionProcessingStrategyId" ng-model="formData.transactionProcessingStrategyId" ng-change="loandetails.transactionProcessingStrategyValue = formValue(loanaccountinfo.transactionProcessingStrategyOptions,formData.transactionProcessingStrategyId,'id','name')"
                                    ng-options="transactionProcessingStrategy.id as transactionProcessingStrategy.name for transactionProcessingStrategy in loanaccountinfo.transactionProcessingStrategyOptions"
                                    value="{{transactionProcessingStrategy.id}}" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.transactionProcessingStrategyId"
                                    class="form-control width170px"></select>
                            </td>
                            <td colspan=2>
                                <lable>{{'label.input.grace' | translate }}:</lable>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.moratorium' | translate}}"></i>
                                <label>{{'label.input.onprincipalpayment' | translate}}</label>
                                <input id="graceOnPrincipalPayment" type="text" class="input-mini-medium" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.graceOnPrincipalAndInterestPayment"
                                    ng-model="formData.graceOnPrincipalPayment">
                                <label ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnInterestPayment == true">{{'label.input.oninterestpayment' | translate}}</label>
                                <input ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnInterestPayment == true" id="graceOnInterestPayment"
                                    type="text" class="input-mini-medium" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.graceOnPrincipalAndInterestPayment"
                                    ng-model="formData.graceOnInterestPayment">
                                <label ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnArrearsAgeing == true">{{'label.input.onduedate' | translate}}</label>
                                <input ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnArrearsAgeing == true" id="graceOnArrearsAgeing"
                                    type="text" class="input-mini-medium" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.graceOnArrearsAgeing"
                                    ng-model="formData.graceOnArrearsAgeing">
                            </td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.canDefineInstallmentAmount">
                            <td colspan=2>
                                <label>{{ 'label.input.fixedemiamount' | translate }}:</label>&nbsp;
                                <input id="fixedEmiAmount" type="text" ng-model="formData.fixedEmiAmount" class="form-control" number-format/>&nbsp;

                            </td>
                        </tr>
                        <tr ng-show="loanaccountinfo.canUseForTopup">
                            <td>
                                <label>{{ 'label.heading.isTopup' | translate }}</label>
                            </td>
                            <td class="paddedbottom20">
                                <input type="checkbox" name="isTopup" ng-model="formData.isTopup" />
                            </td>
                            <td ng-show="formData.isTopup == true">
                                <label>{{ 'label.input.loanIdToClose' | translate }}
                                </label>
                            </td>
                            <td class="width36 paddedbottom20" ng-show="formData.isTopup == true">
                                <select id="loanIdToClose" ng-model="formData.loanIdToClose" ng-change="loandetails.loanAccountToClose= formValue(loanaccountinfo.clientActiveLoanOptions,formData.loanIdToClose,'id','accountNo')"
                                    ng-options="loanSummary.id as loanSummary.accountNo for loanSummary in loanaccountinfo.clientActiveLoanOptions"
                                    class="form-control width170px" value="{{loanSummary.id}}"></select>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <hr>
                            </td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                            <td>
                                <label class="control-label">{{ 'label.input.recalculateinterest' | translate }}</label>
                            </td>
                            <td class="paddedbottom20">
                                <label class="control-label">{{ loanaccountinfo.isInterestRecalculationEnabled | YesOrNo }}
                                </label>
                            </td>
                            <td data-ng-show="loanaccountinfo.isInterestRecalculationEnabled">
                                <label>{{ 'label.input.daysinyears' | translate }}</label>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.days' | translate}}"></i>
                            </td>
                            <td class="paddedbottom20">
                                <label>{{ loanaccountinfo.daysInYearType.value}}</label>
                            </td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled">
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ 'label.input.interest.recalculation.reschdule.strategy' | translate }}</label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ loanaccountinfo.interestRecalculationData.rescheduleStrategyType.value}}
                                </label>
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ 'label.input.daysinmonth' | translate }}</label>
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.days' | translate}}"></i>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ loanaccountinfo.daysInMonthType.value }}</label>
                            </td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled">
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label class="control-label">{{ 'label.input.interest.recalculation.compounding.method' | translate }}</label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ loanaccountinfo.interestRecalculationData.interestRecalculationCompoundingType.value}}
                                </label>
                            </td>

                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label class="control-label">{{ 'label.input.frequency.for.recalculte.outstanding.principal' | translate }}
                                    <span class="required">*</span>
                                </label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.value}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.id == 3 &&
                                            loanaccountinfo.interestRecalculationData.recalculationRestFrequencyWeekday != null">
                                    on {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyWeekday.value}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
                                            loanaccountinfo.interestRecalculationData.recalculationRestFrequencyOnDay != null">on day {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyOnDay}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
                                            loanaccountinfo.interestRecalculationData.recalculationRestFrequencyOnDay == null &&
                                            loanaccountinfo.interestRecalculationData.recalculationRestFrequencyNthDay != null">on {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyNthDay.value}}
                                    {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyWeekday.value}}
                                </label>
                            </td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled && loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.id != 1">
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label class="control-label">{{ 'label.input.frequenc.interval.for.recalculte.outstanding.principal' | translate }}
                                </label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyInterval}}
                                </label>
                            </td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled  && loanaccountinfo.interestRecalculationData.interestRecalculationCompoundingType.id != 0">
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label class="control-label">{{ 'label.input.frequency.for.compounding' | translate }}
                                    <span class="required">*</span>
                                </label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.id == 3 &&
                                            loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyWeekday != null">
                                    on {{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
                                            loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyOnDay != null">on day {{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyOnDay}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
                                            loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyOnDay == null &&
                                            loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyNthDay != null">on {{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value}}
                                    {{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
                                </label>
                            </td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled && loanaccountinfo.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label class="control-label">{{ 'label.input.frequenc.interval.for.compounding' | translate }}</label>
                            </td>
                            <td class="paddedbottom20" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyInterval}}
                                </label>
                            </td>
                        </tr>

                    </table>


                    <div ng-show="loanaccountinfo" ng-hide="previewRepayment">
                        <div ng-show="multiDisburseLoan">
                            <hr/>
                            <label>
                                <strong>{{ 'label.heading.tranchedetails' | translate }}</strong>
                            </label>
                            <table class=" width100">
                                <tr>
                                    <td class="width14">
                                        <label>{{'label.input.outstandingloanbalance' | translate}}:
                                        </label>
                                    </td>
                                    <td class="width36 paddedbottom20">
                                        <input id="maxOutstandingLoanBalance" type="text" ng-model="formData.maxOutstandingLoanBalance" class="form-control" number-format/>&nbsp;
                                        <a title="{{ 'label.button.addtranch' | translate }}" ng-click="addTranches()">
                                            <i class="fa fa-plus "></i>
                                        </a>
                                    </td>
                                </tr>
                            </table>
                            <table class=" width100" ng-show="formData.disbursementData.length>0">
                                <thead>
                                    <tr class="graybg">
                                        <th>{{'label.input.expecteddisbursementon' | translate}}</th>
                                        <th>{{'label.input.principal' | translate}}</th>
                                        <th>&nbsp;</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="disbursementDetail in formData.disbursementData">
                                        <td>
                                            <input id="disbursementDetail[{{$index}}].expectedDisbursementDate" type="text" datepicker-pop="dd MMMM yyyy" placeholder="{{'label.input.expecteddisbursementon' | translate}}"
                                                ng-model="disbursementDetail.expectedDisbursementDate" is-open="'openedtranche'+$index"
                                                min="minDate"  class="form-control" />
                                        </td>
                                        <td>
                                            <input id="{{disbursementDetail[$index].principal}}" class="input-sm form-control" number-format type="text" ng-model="disbursementDetail.principal"
                                                placeholder="{{'label.input.principal' | translate}}">
                                        </td>
                                        <td>
                                            <a ng-click="deleteTranches($index)">
                                                <i class="fa fa-times-circle fa-2x"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                      <!--Rate Module-->
                        <div ng-show="ratesEnabled">
                            <hr/>
                            <h3>{{ 'label.heading.rates' | translate }}</h3>
                            <hr>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <select id="currentRate" ng-model="currentRate" class="form-control"
                                            ng-options="rate as rate.name for rate in rateOptions"
                                            value="{{rate}}">
                                        <option class="displaynone" value="">{{'label.selectrate' | translate}}</option>
                                    </select>

                                    <button type="button" class="btn btn-primary"
                                            ng-click="rateSelected(currentRate)">{{ 'label.button.add' | translate }}
                                    </button>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <table class="table width100">
                                    <tr class="graybg">
                                        <th>{{'label.heading.name' | translate}}</th>
                                        <th>{{'label.heading.percentage' | translate}}</th>
                                        <th></th>
                                        <th>{{'label.heading.actions' | translate}}</th>

                                    </tr>
                                    <tr ng-repeat="rate in formData.rates">
                                        <td>{{rate.name}}</td>
                                        <td>{{rate.percentage | number}}</td>
                                        <td></td>
                                        <td><a ng-click="deleteRate($index)"><i class="fa fa-times icon-white"></i></a></td>
                                    </tr>
                                </table>
                             </div>
                            <!-- End -->
                        </div>
                    </div>
                    <hr>
                    <button class="btn btn-default pull-left" wz-previous>
                        <i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
                    </button>
                    <button class="btn btn-default pull-right" type="submit">Next&nbsp;&nbsp;
                        <i class="fa fa-arrow-right"></i>
                    </button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="{{ 'label.heading.charges' | translate }}" wz-disabled="{{disabled}}">
            <form name="Charges" ng-submit="goNext(Charges)" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{'label.heading.charges' | translate}}</h3>-->
                    <hr>
                    <div ng-show="loanaccountinfo" ng-hide="previewRepayment">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <select ng-model="chargeFormData.chargeId" ng-options="charge.id as (charge.name + ',' + charge.currency.displaySymbol) for charge in loanaccountinfo.chargeOptions|filter:loanaccountinfo.currency.code:strict"
                                    value="{{charge.id}}" class="form-control width170px">
                                    <option value="">{{'label.selectcharge' | translate}}</option>
                                </select>
                            </div>
                            <div class="col-sm-1">
                                <a class="btn btn-primary" ng-click="addCharge()">
                                    <i class="fa fa-plus "></i>&nbsp;Add</a>
                            </div>
                        </div>
                        <table class="table width100" ng-show="charges.length>0">
                            <tr class="graybg">
                                <th>{{'label.heading.name' | translate}}</th>
                                <th>{{'label.heading.type' | translate}}</th>
                                <th>{{'label.heading.amount' | translate}}</th>
                                <th>{{'label.heading.collectedon' | translate}}</th>
                                <th>{{'label.heading.date' | translate}}</th>
                                <th>{{'label.heading.actions' | translate}}</th>
                            </tr>
                            <tr ng-repeat="charge in charges">
                                <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
                                <td>{{charge.chargeCalculationType.value}}</td>
                                <td>
                                    <input id="{{charges[$index].amount}}" class="form-control" type="text" ng-model="charge.amount" placeholder="{{'label.input.amount' | translate}}"
                                        number-format>
                                </td>
                                <td>{{charge.chargeTimeType.value}}</td>
                                <td>
                                    <input id="charges[{{$index}}].duedate" type="text" datepicker-pop="dd MMMM yyyy" class="form-control" placeholder="{{'label.input.duedate' | translate}}"
                                        ng-model="charge.dueDate" is-open="'openedch'+$index" min="minDate" 
                                    />
                                </td>
                                <td>
                                    <a ng-click="deleteCharge($index)">
                                        <i class="fa fa-times-circle fa-2x"></i>
                                    </a>
                                </td>
                            </tr>
                        </table>
                        <div ng-show="loanaccountinfo.overdueCharges.length>0">
                            <label>
                                <strong>{{ 'label.heading.overduepenalitycharge' | translate }}</strong>
                            </label>
                            <table class="width100">
                                <tr class="graybg">
                                    <th>{{'label.heading.name' | translate}}</th>
                                    <th>{{'label.heading.type' | translate}}</th>
                                    <th>{{'label.heading.amount' | translate}}</th>
                                    <th>{{'label.heading.collectedon' | translate}}</th>
                                </tr>
                                <tr ng-repeat="charge in loanaccountinfo.overdueCharges">
                                    <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
                                    <td>{{charge.chargeCalculationType.value}}</td>
                                    <td>{{charge.amount | number}}</td>
                                    <td>{{charge.chargeTimeType.value}}</td>
                                </tr>
                            </table>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="control-label col-sm-1">
                                <strong>{{ 'label.heading.collaterals' | translate }}</strong>
                            </label>
                            <select ng-model="collateralFormData.collateralId" ng-options="collateral.collateralId as collateral.name for collateral in collateralsData"
                                value="{{collateral.collateralId}}" class="form-control width170px col-sm-2">
                            </select>&nbsp;&nbsp;
                            <div class="col-sm-2">
                                <input class="form-control" type="text" ng-model="collateralFormData.quantity" placeholder="{{'label.input.quantity' | translate}}"
                                    number-format ng-change="updateValues()">
                            </div>
                            <div class="col-sm-2">
                                <input class="form-control" type="text" ng-model="collateralFormData.total"
                                    number-format readonly>
                            </div>
                            <div class="col-sm-2">
                                <input class="form-control" type="text" ng-model="collateralFormData.totalCollateral"
                                    number-format readonly>
                            </div>
                            <div class="col-sm-1">
                                <a class="btn btn-primary" ng-click="addCollateral()" class="col-sm-1">&nbsp;
                                    <i class="fa fa-plus "></i>&nbsp;Add</a>
                            </div>
                        </div>
                        <br>
                        <div>
                            <table class="" class="width100" ng-show="collaterals.length>0">
                                <tr class="graybg">
                                    <th>{{'label.heading.id' | translate}}</th>
                                    <th>{{'label.heading.quantity' | translate}}</th>
                                    <th>{{'label.heading.totalValue' | translate}}</th>
                                    <th>{{'label.heading.totalCollateralValue' | translate}}</th>
                                </tr>
                                <tr ng-repeat="collateral in collaterals">
                                    <td>
                                        <input type="text" class="input-sm form-control" ng-model="collateral.collateralId" readonly>
                                    </td>
                                    <td>
                                        <input id="{{collaterals[$index].quantity}}" type="text" class="form-control" ng-model="collateral.quantity" readonly>
                                    </td>
                                    <td>
                                        <input id="total" type="text" class="form-control" ng-model="collateral.total">
                                    </td>
                                    <td>
                                        <input id="totalCollateral" type="text" class="form-control" ng-model="collateral.totalCollateral">
                                    </td>
                                    <td>
                                        <a ng-click="deleteCollateral($index)">
                                            <i class="fa fa-times-circle fa-2x"></i>
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <br>


                    <div ng-show="loanaccountinfo">
                        <span>
                            <a ng-hide="previewRepayment" ng-click="previewRepayments()">{{'label.anchor.repaymentinfo' | translate}}
                                <i class="fa fa-arrow-circle-right"></i>
                            </a>
                        </span>
                        <span>
                            <a ng-show="previewRepayment" ng-click="previewRepayment=!previewRepayment">
                                <i class="fa fa-circle-arrow-left">{{'label.anchor.backtoloaninfo' | translate}}</i>
                            </a>
                            <br>
                            <br>
                        </span>
                    </div>

                    <div>
                        <table class=" width100" ng-show="previewRepayment">
                            <thead>
                                <th colspan="3" scope="col"></th>
                                <th colspan="3" scope="col">{{'label.heading.loanamountandbalance' | translate}}</th>
                                <th colspan="2" scope="col">{{'label.heading.totalcostofloan' | translate}}</th>
                                <th colspan="2" scope="col"></th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>#</td>
                                    <td>{{'label.heading.date' | translate}}</td>
                                    <td>{{'label.heading.days' | translate}}</td>
                                    <td>{{'label.heading.disbursement' | translate}}</td>
                                    <td>{{'label.heading.principaldue' | translate}}</td>
                                    <td>{{'label.heading.principalbalance' | translate}}</td>
                                    <td>{{'label.heading.interestdue' | translate}}</td>
                                    <td>{{'label.heading.fees' | translate}}</td>
                                    <td>{{'label.heading.penalty' | translate}}</td>
                                    <td>{{'label.heading.due' | translate}}</td>
                                </tr>
                                <tr ng-repeat="period in repaymentscheduleinfo.periods">
                                    <td>{{period.period}}</td>
                                    <td>{{period.dueDate | DateFormat}}</td>
                                    <td>{{period.daysInPeriod}}</td>
                                    <td>{{period.principalDisbursed | number}}</td>
                                    <td>{{period.principalDue| number}}</td>
                                    <td>{{period.principalLoanBalanceOutstanding| number}}</td>
                                    <td>{{period.interestDue| number}}</td>
                                    <td>{{period.feeChargesDue| number}}</td>
                                    <td>{{period.penaltyChargesDue| number}}</td>
                                    <td>{{period.totalDueForPeriod| number}}</td>
                                </tr>
                                <tfoot class="ui-widget-header">
                                    <tr>
                                        <td colspan="2">{{'label.heading.total' | translate}}</td>
                                        <td>{{repaymentscheduleinfo.loanTermInDays}}</td>
                                        <td>{{repaymentscheduleinfo.totalPrincipalDisbursed| number}}</td>
                                        <td>{{repaymentscheduleinfo.totalPrincipalExpected| number}}</td>
                                        <td></td>
                                        <td>{{repaymentscheduleinfo.totalInterestCharged| number}}</td>
                                        <td>{{repaymentscheduleinfo.totalFeeChargesCharged| number}}</td>
                                        <td>{{repaymentscheduleinfo.totalPenaltyChargesCharged| number}}</td>
                                        <td>{{repaymentscheduleinfo.totalRepaymentExpected| number}}</td>
                                    </tr>
                                </tfoot>
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <hr>
                    <button class="btn btn-default pull-left" wz-previous>
                        <i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
                    </button>
                    <button class="btn btn-default pull-right" type="submit">Next&nbsp;&nbsp;
                        <i class="fa fa-arrow-right"></i>
                    </button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step icon="fa fa-circle-o" ng-repeat="datatable in datatables" wz-title="{{datatable.registeredTableName}}" id="dynamicSteps"
            wz-disabled="{{disabled}}">
            <form name="Datatables" class="form-horizontal" ng-submit="submit()">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3><strong>{{datatable.registeredTableName}}</strong></h3>-->
                    <hr/>
                    <div class="form-group" ng-repeat="columnHeader in datatable.columnHeaderData">
                        <label class="control-label col-sm-3">{{ columnHeader.columnName | prettifyDataTableColumn }}
                            <span ng-show="!columnHeader.isColumnNullable" class="required">*</span>
                        </label>

                        <div class="col-sm-3">
                            <input ng-show="fieldType(columnHeader.columnDisplayType) == 'TEXT'" type="text" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                class="form-control" />
                            <input ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'" type="text" datepicker-pop="dd MMMM yyyy" ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                is-open="opened{{$index}}" class="form-control" />
                            <div ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'" class="form-inline">
                                <div class="form-group">
                                    <input type="text" datepicker-pop="dd MMMM yyyy" ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].date"
                                        is-open="opened{{$index}}" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <input type="time" placeholder="HH:MM:SS" ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].time"
                                        class="form-control" />
                                </div>
                            </div>
                            <div ng-show="fieldType(columnHeader.columnDisplayType) == 'BOOLEAN'">
                                <label class="radio-inline">
                                    <input type="radio" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]" value="true"
                                    /> {{'label.input.true' | translate}}
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]" value="false"
                                    /> {{'label.input.false' | translate}}
                                </label>
                            </div>
                            <span data-ng-switch on="columnHeader.columnDisplayType">
                                <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'" data-ng-switch-when="CODELOOKUP" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                    ng-options="columnValue.id as columnValue.value for columnValue in columnHeader.columnValues"
                                    value="{{columnValue.id}}" class="form-control">
                                    <option value="">{{'label.selectone' | translate}}</option>
                                </select>
                                <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'" data-ng-switch-when="CODEVALUE" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                    ng-options="columnValue.value as columnValue.value for columnValue in columnHeader.columnValues"
                                    value="{{columnValue.id}}" class="form-control">
                                    <option value="">{{'label.selectone' | translate}}</option>
                                </select>
                            </span>
                        </div>
                    </div>
                    <!--<div class="col-md-offset-5" ng-if="$last">-->
                    <!--<button id="cancel3" type="reset" class="btn btn-default" ng-click="cancel()">-->
                    <!--{{'label.button.cancel' | translate}}-->
                    <!--</button>-->
                    <!--<button id="save3" type="submit" has-permission='CREATE_LOAN' class="btn btn-primary"-->
                    <!--ng-show="loanaccountinfo">{{'label.button.save' |-->
                    <!--translate}}-->
                    <!--</button>-->
                    <!--</div>-->
                    <hr>
                    <button class="btn btn-default pull-left" wz-previous>
                        <i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
                    </button>
                    <button class="btn btn-default pull-right" type="submit">Next&nbsp;&nbsp;
                        <i class="fa fa-arrow-right"></i>
                    </button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="Review" ng-if="!disabled">
            <form name="review" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>Review</h3>-->
                    <table width="100%">
                        <tr class="bottomborder">
                            <td colspan="7">
                                <strong>{{'label.heading.details' | translate}}</strong>
                            </td>
                        </tr>
                        <tr class="toppadding">
                            <td colspan="6">{{'label.input.product' | translate}}</td>
                            <td>{{loandetails.productName}}</td>
                        </tr>
                        <tr>
                            <td colspan="6" ng-show="formData.productId">{{ 'label.input.loanofficer' | translate }}:&nbsp;
                            </td>
                            <td>{{loandetails.loanOfficerName}}</td>
                        </tr>
                        <tr>
                            <td colspan="6">{{ 'label.input.loanpurpose' | translate }}:&nbsp</td>
                            <td>{{loandetails.loanPurposeName}}</td>
                        </tr>
                        <tr>
                            <td colspan="6" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.fundId == true">
                                {{ 'label.input.fund' | translate }}:</td>
                            <td>{{loandetails.fundName}}</td>
                        </tr>
                        <tr>
                            <td colspan="6">{{ 'label.input.submittedon' | translate }}</td>
                            <td>{{date.first | DateFormat}}</td>
                        </tr>
                        <tr>
                            <td colspan="6">{{ 'label.input.disbursementon' | translate }}</td>&nbsp;
                            <td>{{date.second | DateFormat}} </td>
                        </tr>
                        <tr>
                            <td colspan="6">{{ 'label.input.externalid' | translate }}</td>
                            <td class="">{{loandetails.externalId}}</td>
                        </tr>
                        <tr class="bottomborder toppadding">
                            <td colspan="7">
                                <strong>{{'label.heading.terms' | translate}}</strong>
                            </td>
                        </tr>
                        <tr class="toppadding">
                            <td colspan="6">{{ 'label.input.principal' | translate }}</td>
                            <td>{{loandetails.principal}} {{loanaccountinfo.currency.DisplaySymbol}}</td>
                        </tr>
                        <tr>
                            <td colspan="6">{{ 'label.input.loanterm' | translate }}</td>
                            <td>{{loandetails.loanTermFrequency}} {{loandetails.loanTermFrequencyValue}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.numberOfRepayments">
                            <td colspan="6">
                                {{ 'label.input.numofrepayments' | translate }}&nbsp;
                            </td>
                            <td>{{loandetails.numberOfRepayments}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.repaymentEvery">
                            <td colspan="6">{{ 'label.input.repaidevery' | translate }}</td>
                            <td>{{loandetails.repaymentEvery}} {{loandetails.repaymentFrequencyValue}} {{loandetails.repaymentFrequencyNthDayValue}}
                                {{loandetails.repaymentFrequencyDayOfWeekValue}}
                            </td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.repaymentsStartingFromDate">
                            <td colspan="6">{{ 'label.input.firstrepaymenton' | translate }}</td>
                            <td>{{date.fourth | DateFormat }}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestChargedFromDate">
                            <td colspan="6">{{ 'label.input.interestchargedfrom' | translate}}
                                <td>{{date.third | DateFormat}}</td>
                        </tr>
                        <tr ng-show="!loanaccountinfo.isLoanProductLinkedToFloatingRate">
                            <td colspan="6">{{ 'label.input.nominalinterestrate' | translate }}</td>
                            <td>{{loandetails.interestRatePerPeriod}}&nbsp;&nbsp;{{loanaccountinfo.interestRateFrequencyType.value}}</td>
                        </tr>
                        <tr ng-show="loanaccountinfo.isLoanProductLinkedToFloatingRate">
                            <td colspan="6">{{ 'label.heading.floatinginterestratedifferential' | translate }}</td>
                            <td>{{formData.interestRateDifferential}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType">
                            <td colspan="6">{{ 'label.input.interestmethod' | translate }}</td>
                            <td>{{loandetails.interestValue}}</td>
                        </tr>
                        <tr ng-show="loanaccountinfo.isLoanProductLinkedToFloatingRate">
                            <td colspan="6">{{ 'label.input.isfloatingrate' | translate}}</td>
                            <td>{{loandetails.isFloatingInterestRate}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType">
                            <td colspan="6">{{ 'label.input.isequalamortization' | translate }}</td>
                            <td>{{loandetails.isEqualAmortization}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.amortizationType">
                            <td colspan="6">{{ 'label.input.amortization' | translate }}&nbsp;</td>
                            <td>{{loandetails.amortizationValue}}</td>
                        </tr>
                        <tr ng-show="formData.amortizationType == 0">
                            <td colspan="6">{{ 'label.input.fixed.pricipal.percentage.per.installment' | translate }}&nbsp;</td>
                            <td>{{formData.fixedPrincipalPercentagePerInstallment}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestCalculationPeriodType">
                            <td colspan="6">{{ 'label.input.interestcalculationperiod' | translate }}&nbsp;</td>
                            <td>{{loandetails.interestCalculationPeriodValue}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestCalculationPeriodType || formData.interestCalculationPeriodType == 0">
                            <td colspan="6">{{ 'label.input.allowpartialperiodinterestcalcualtion' | translate }}&nbsp;</td>
                            <td>{{loandetails.allowPartialPeriodInterestCalcualtion}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.inArrearsTolerance">
                            <td colspan="6">{{ 'label.input.arearstolerance' | translate }}</td>
                            <td>{{loandetails.inArrearsTolerance}}&nbsp;{{loanaccountinfo.currency.displaySymbol}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnInterestCharged">
                            <td colspan="6">{{ 'label.input.interestfreeperiod' | translate }}</td>
                            <td>{{loandetails.graceOnInterestCharged}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.transactionProcessingStrategyId">
                            <td colspan="6">{{ 'label.input.repaymentstrategy' | translate }}&nbsp;</td>
                            <td>{{loandetails.transactionProcessingStrategyValue}}</td>
                        </tr>
                        <tr class="bottomborder toppadding">
                            <td colspan="7">
                                <strong>{{'label.input.grace' | translate }}</strong>
                            </td>
                        </tr>
                        <tr class="toppadding">
                            <td colspan="6">{{'label.input.onprincipalpayment' | translate}}</td>
                            <td>{{formData.graceOnPrincipalPayment}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnInterestPayment">
                            <td colspan="6">{{'label.input.oninterestpayment' | translate}}</td>
                            <td>{{formData.graceOnInterestPayment}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnArrearsAgeing">
                            <td colspan="6">{{'label.input.onduedate' | translate}}</td>
                            <td>{{formData.graceOnArrearsAgeing}}</td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.canDefineInstallmentAmount">
                            <td colspan="6">{{ 'label.input.fixedemiamount' | translate }}:</td>
                            <td>{{formData.fixedEmiAmount}}</td>
                        </tr>
                        <tr ng-show="loanaccountinfo.canUseForTopup">
                            <td colspan="6">{{ 'label.heading.isTopup' | translate }}</td>
                            <td>{{formData.isTopup}}</td>
                        </tr>
                        <tr ng-show="formData.isTopup">
                            <td colspan="6">{{ 'label.input.loanIdToClose' | translate}}</td>
                            <td>{{loandetails.loanAccountToClose}}</td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection">
                            <td colspan="6">{{ 'label.input.recalculateinterest' | translate }}</td>
                            <td>{{ loanaccountinfo.isInterestRecalculationEnabled | YesOrNo}}</td>
                        </tr>
                        <tr ng-show="loanaccountinfo.isInterestRecalculationEnabled">
                            <td colspan="6">{{ 'label.input.daysinyears' | translate }}</td>
                            <td>{{ loanaccountinfo.daysInYearType.value}}</td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled">
                            <td colspan="6" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                {{ 'label.input.interest.recalculation.reschdule.strategy' | translate }}
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                {{ loanaccountinfo.interestRecalculationData.rescheduleStrategyType.value}}
                            </td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection">
                            <td colspan="6">{{ 'label.input.daysinmonth' | translate }}</td>
                            <td>{{ loanaccountinfo.daysInMonthType.value }}</td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled">
                            <td colspan="6" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                {{ 'label.input.interest.recalculation.compounding.method'| translate }}
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                {{ loanaccountinfo.interestRecalculationData.interestRecalculationCompoundingType.value}}
                            </td>
                        </tr>
                        <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection">
                            <td colspan="6">{{ 'label.input.frequency.for.recalculte.outstanding.principal' |translate }}</td>
                            <td>
                                {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.value}}</label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.id == 3 &&
                                            loanaccountinfo.interestRecalculationData.recalculationRestFrequencyWeekday != null">
                                    on {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyWeekday.value}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
                                            loanaccountinfo.interestRecalculationData.recalculationRestFrequencyOnDay != null">on day {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyOnDay}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
                                            loanaccountinfo.interestRecalculationData.recalculationRestFrequencyOnDay == null &&
                                            loanaccountinfo.interestRecalculationData.recalculationRestFrequencyNthDay != null">on {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyNthDay.value}}
                                    {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyWeekday.value}}
                                </label>
                            </td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled && loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.id != 1">
                            <td colspan="6" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                {{ 'label.input.frequenc.interval.for.recalculte.outstanding.principal' | translate}}
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                {{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyInterval}}
                            </td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled  && loanaccountinfo.interestRecalculationData.interestRecalculationCompoundingType.id != 0">
                            <td colspan="6" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label class="control-label">{{ 'label.input.frequency.for.compounding' | translate }}</label>
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.id == 3 &&
                                            loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyWeekday != null">
                                    on {{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
                                            loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyOnDay != null">on day {{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyOnDay}}
                                </label>
                                <label data-ng-show="loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
                                            loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyOnDay == null &&
                                            loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyNthDay != null">on {{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value}}
                                    {{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
                                </label>
                            </td>
                        </tr>
                        <tr data-ng-show="loanaccountinfo.isInterestRecalculationEnabled && loanaccountinfo.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
                            <td colspan="6" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label class="control-label">{{ 'label.input.frequenc.interval.for.compounding' | translate }}</label>
                            </td>
                            <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                                <label>{{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</label>
                            </td>
                        </tr>
                        <tr class="bottomborder toppadding">
                            <td colspan="7">
                                <strong>{{'label.heading.tranchedetails' | translate}}</strong>
                            </td>
                        </tr>
                        <tr class="graybg toppadding">
                            <th colspan="4">{{'label.input.expecteddisbursementon' | translate}}</th>
                            <th colspan="3">{{'label.input.principal' | translate}}</th>
                        </tr>
                        <tr class="toppadding" ng-repeat="disbursementDetail in formData.disbursementData">
                            <td colspan="4">{{disbursementDetail.expectedDisbursementDate | DateFormat}}</td>
                            <td colspan="3">{{disbursementDetail.principal}}</td>
                        </tr>
                        <tr class="bottomborder toppadding">
                            <td colspan="7">
                                <strong>{{'label.heading.charges' | translate}}</strong>
                            </td>
                        </tr>
                        <tr class="graybg" ng-show="charges.length > 0">
                            <th colspan="2">{{'label.heading.name' | translate}}</th>
                            <th>{{'label.heading.type' | translate}}</th>
                            <th colspan="2">{{'label.heading.amount' | translate}}</th>
                            <th>{{'label.heading.collectedon' | translate}}</th>
                            <th>{{'label.heading.date' | translate}}</th>
                        </tr>
                        <tr ng-repeat="charge in charges" ng-show="charges.length>0">
                            <td colspan="2">{{charge.name}},{{charge.currency.displaySymbol}}</td>
                            <td>{{charge.chargeCalculationType.value}}</td>
                            <td colspan="2">{{charge.amount}}</td>
                            <td>{{charge.chargeTimeType.value}}</td>
                            <td>{{charge.dueDate | DateFormat}}</td>
                        </tr>
                        <tr class="graybg" ng-show="loanaccountinfo.overdueCharges.length>0">
                            <th colspan="2">{{'label.heading.name' | translate}}</th>
                            <th>{{'label.heading.type' | translate}}</th>
                            <th colspan="2">{{'label.heading.amount' | translate}}</th>
                            <th colspan="2">{{'label.heading.collectedon' | translate}}</th>
                        </tr>
                        <tr ng-repeat="charge in loanaccountinfo.overdueCharges">
                            <td colspan="2">{{charge.name}},{{charge.currency.displaySymbol}}</td>
                            <td>{{charge.chargeCalculationType.value}}</td>
                            <td colspan="2">{{charge.amount | number}}</td>
                            <td>{{charge.chargeTimeType.value}}</td>
                        </tr>
                    </table>
                    <br>
                    <table width="100%" ng-repeat="datatable in datatables">
                        <tr class="bottomborder toppadding">
                            <td colspan="7">
                                <strong>{{datatable.registeredTableName}}</strong>
                            </td>
                        </tr>
                        <tr ng-repeat="columnHeader in datatable.columnHeaderData">
                            <td colspan="6">{{ columnHeader.columnName | prettifyDataTableColumn }}</td>
                            <td ng-hide="fieldType(columnHeader.columnDisplayType) == 'DATETIME' || fieldType(columnHeader.columnDisplayType) == 'DATE'">{{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]}}</td>
                            <td ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'">{{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].date | DateFormat}}
                                {{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].time }}</td>
                            <td ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'">{{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName] | DateFormat}}</td>
                        </tr>
                    </table>
                    <br>
                    <br>
                    <div class="col-md-offset-5">
                        <button id="cancel3" type="reset" class="btn btn-default" ng-click="cancel()">
                            {{'label.button.cancel' | translate}}
                        </button>
                        <button id="save" type="submit" has-permission='CREATE_LOAN' class="btn btn-primary" ng-show="loanaccountinfo" wz-next>{{'label.button.save' | translate}}
                        </button>
                    </div>
                    <hr>
                    <button class="btn btn-default pull-left" wz-previous>
                        <i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
                    </button>
                    <button class="btn btn-default pull-right" disabled>Next&nbsp;&nbsp;
                        <i class="fa fa-arrow-right"></i>
                    </button>
                </fieldset>
            </form>
        </wz-step>
    </wizard>
</div>
</div>