<div class="col-md-12" ng-controller="EditLoanAccAppController">
<div>
    <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><a href="#/viewloanaccount/{{loanaccountinfo.id}}">{{'label.anchor.viewloanaccount' | translate}}</a></li>
        <li class="active">{{'label.anchor.modifyloanapplication' | translate}}</li>
    </ul>
</div>
<form name="editloanaccountform" novalidate="" class="well form-inline card" rc-submit="submit()">
<api-validate></api-validate>
<fieldset>
        <legend>{{ 'label.heading.editloanapplication' | translate }}</legend>
<table class="width100">
    <tr>
        <td class="width14">
            <label>{{ 'label.input.product' | translate }}<span class="required">*</span>:&nbsp;</label>
        </td>
        <td class="width36 paddedbottom10">
            <select id="productId" ng-model="formData.productId" class="form-control width170px"
                    ng-options="product.id as product.name for product in loanaccountinfo.productOptions"
                    value="{{product.id}}" ng-change="loanProductChange(formData.productId)"/>
            <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>
        </td>
        <td class="width36 paddedbottom10">
            <select ng-show="formData.productId" id="loanOfficerId" ng-model="formData.loanOfficerId" class="form-control width170px"
                    ng-options="loanOfficer.id as loanOfficer.displayName for loanOfficer in loanaccountinfo.loanOfficerOptions | orderBy:'displayName':reverse"
                    value="{{loanOfficer.id}}">
                <option value="">{{'label.selectloanofficer' | translate}}</option>
            </select>
        </td>
    </tr>
    <tr ng-show="formData.productId">
        <td>
            <label>{{ 'label.input.loanpurpose' | translate }}:&nbsp;</label>
        </td>
        <td class="paddedbottom10">
            <select chosen="loanaccountinfo.loanPurposeOptions" id="loanPurposeId" ng-model="formData.loanPurposeId" class="form-control width170px"
                    ng-options="loanPurpose.id as loanPurpose.name for loanPurpose in loanaccountinfo.loanPurposeOptions | orderBy:'name':reverse"
                    value="{{loanPurpose.id}}">
                <option value="">{{'label.selectpurpose' | translate}}</option>
            </select>
        </td>
        <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.fundId == true"><label>{{ 'label.input.fund' | translate }}:&nbsp;</label></td>
        <td class="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.fundId == true">
            <select id="fundId" ng-model="formData.fundId" class="form-control width170px"
                    ng-options="fund.id as fund.name for fund in loanaccountinfo.fundOptions" value="{{fund.id}}">
                <option value="">{{'label.selectfund' | translate}}</option>
            </select>
        </td>
    </tr>
    <tr ng-show="formData.productId">
        <td>
            <label>{{ 'label.input.submittedon' | translate }}<span class="required">*</span>:&nbsp;</label>
        </td>
        <td class="paddedbottom10">
            <input id="submittedOnDate" sort type="text" datepicker-pop="dd MMMM yyyy" class="form-control"
                   ng-model="formData.submittedOnDate" is-open="opened" min="'2000-01-01'" max="restrictDate"/>
        </td>
        <td>
            <label title="{{ 'label.input.expecteddisbursementon' | translate }}">{{ 'label.input.disbursementon' |
                translate }}<span class="required">*</span>:&nbsp;</label>
        </td>
        <td class="paddedbottom10">
            <input id="expectedDisbursementDate" type="text" datepicker-pop="dd MMMM yyyy" class="form-control"
                   ng-model="formData.expectedDisbursementDate" is-open="opened1" min="minDate" 
                   date-disabled="disabled(date, mode)" late-Validate/>
        </td>
    </tr>
    <tr ng-show="formData.productId">
        <td><label>{{ 'label.input.externalid' | translate }}</label></td>
        <td class="paddedbottom10">
            <input type="text" id="externalId" name="externalId" ng-model="formData.externalId" class="form-control"/>
        </td>
        <td></td>
        <td></td>
    </tr>
</table>
<div ng-hide="previewRepayment">
    <div ng-show="loanaccountinfo">
        <div ng-hide="loanaccountinfo.meeting == undefined">
            <hr/>
        </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">
            <hr/>
        </div>
        <div ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.linkAccountId == true && response.uiDisplayConfigurations.loanAccount.isHiddenField.createStandingInstruction == true">
        <label ng-show="loanaccountinfo"><strong>{{ 'label.heading.savingsLinkage' | translate }}</strong></label>
        </div>
        <table ng-show="loanaccountinfo" ng-hide="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 paddedbottom10" 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" 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"></label>
                </td>
            </tr>
        </table>
        <hr ng-show="loanaccountinfo"/>
        <label><strong>{{ 'label.heading.terms' | translate }}</strong></label>
        <table class="width100">
            <tr>
                <td class="width19"><label>{{ 'label.input.principal' | translate }}&nbsp;<span
                        class="required">*</span>:</label></td>
                <td class="width31 paddedbottom10">
                    <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="editloanaccountform" valattribute="principal"/>
                </td>
                <td class="width14"><label>{{ 'label.input.loanterm' | translate }}&nbsp;<span class="required">*</span>:</label>
                </td>
                <td class="width36 paddedbottom10">
                    <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-options="termFrequencyType.id as termFrequencyType.value for termFrequencyType in loanaccountinfo.termFrequencyTypeOptions"
                            value="{{termFrequencyType.id}}"/>
                    <form-validate valattributeform="editloanaccountform" 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="paddedbottom10" 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="editloanaccountform" 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="paddedbottom10" 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-disabled="!loanaccountinfo.product.allowAttributeOverrides.repaymentEvery"
                            ng-options="repaymentFrequencyType.id as repaymentFrequencyType.value for repaymentFrequencyType in loanaccountinfo.termFrequencyTypeOptions"
                            value="{{repaymentFrequencyType.id}}"/>&nbsp;
                    <select id="repaymentFrequencyNthDayType" class="form-control" ng-model="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-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="editloanaccountform" valattribute="repaidevery"/>
                </td>
            </tr>
            <tr>
                <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.repaymentsStartingFromDate == true"><label>{{ 'label.input.firstrepaymenton' | translate }}</label></td>
                <td class="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.repaymentsStartingFromDate == true">
                    <input id="repaymentsStartingFromDate" type="text" datepicker-pop="dd MMMM yyyy" class="form-control"
                           ng-model="formData.repaymentsStartingFromDate" is-open="opened3" min="minDate"
                           />
                </td>
                <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestChargedFromDate == true"><label class="control-label">{{ 'label.input.interestchargedfrom' | translate }}:</label></td>
                <td class="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestChargedFromDate == true">
                    <input id="interestChargedFromDate" type="text" datepicker-pop="dd MMMM yyyy" class="form-control"
                           ng-model="formData.interestChargedFromDate" is-open="opened2" min="minDate"
                           />
                </td>
            </tr>

            <tr ng-show="!loanaccountinfo.isLoanProductLinkedToFloatingRate">
                <td><label>{{ 'label.input.nominalinterestrate' | translate }}&nbsp;<span
                        class="required">*</span></label></td>
                <td class="paddedbottom10">
                    <input id="interestRatePerPeriod" class="form-control" type="text" name="nominalinterestrate"
                           ng-model="formData.interestRatePerPeriod" ng-disabled="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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType == true">
                     <select id="interestType" ng-model="formData.interestType" class="form-control width170px"
                            ng-options="interestType.id as interestType.value for interestType in loanaccountinfo.interestTypeOptions"
                            value="{{interestType.id}}" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.interestType"/>
                </td>
            </tr>
            <tr ng-show="loanaccountinfo.isLoanProductLinkedToFloatingRate">
                <td><label>{{ 'label.heading.floatinginterestratedifferential' | translate }}&nbsp;<span
                        class="required">*</span></label></td>
                <td class="paddedbottom10">
                    <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 paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType == true">
                    <select id="interestType" 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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.amortizationType == true">
                    <select id="amortizationType" ng-model="formData.amortizationType" class="form-control width170px"
                            ng-options="amortizationType.id as amortizationType.value for amortizationType in loanaccountinfo.amortizationTypeOptions"
                            value="{{amortizationType.id}}" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.amortizationType"/>
                </td>
                <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType == true"><label>{{ 'label.input.isequalamortization' | translate }}</label></td>
                <td class="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestType == true"> <input type="checkbox" ng-model="formData.isEqualAmortization" ng-true-value="true" ng-false-value="false">
                </td>
            </tr>
            <tr ng-show="formData.amortizationType == 0">
                <td class="form-group"  >
                    <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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.interestCalculationPeriodType == true">
                    <select id="interestCalculationPeriodType" ng-model="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"/>
                </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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.inArrearsTolerance == true">
                    <input id="inArrearsTolerance" type="text" class="form-control"
                           ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.inArrearsTolerance"
                           ng-model="formData.inArrearsTolerance" 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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnInterestCharged == true">
                    <input id="graceOnInterestCharged" type="text" class="form-control" ng-model="formData.graceOnInterestCharged">
                </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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.transactionProcessingStrategyId == true">
                    <select id="transactionProcessingStrategyId" ng-model="formData.transactionProcessingStrategyId" class="form-control width170px"
                            ng-options="transactionProcessingStrategy.id as transactionProcessingStrategy.name for transactionProcessingStrategy in loanaccountinfo.transactionProcessingStrategyOptions"
                            value="{{transactionProcessingStrategy.id}}" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.transactionProcessingStrategyId"/>
                </td>
                <td colspan=2 class="paddedbottom10">
                    <label>{{ 'label.input.grace' | translate }}&nbsp;{{'label.input.onprincipalpayment' | translate}}</label>&nbsp;<input
                            id="graceOnPrincipalPayment" class="input-mini-small" type="text"
                            ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.graceOnPrincipalAndInterestPayment"
                            ng-model="formData.graceOnPrincipalPayment">&nbsp;<label ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnInterestPayment == true">{{'label.input.oninterestpayment' |
                        translate}}</label>&nbsp;<input ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnInterestPayment == true" id="graceOnInterestPayment" type="text" class="input-mini-small"
                                                        ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.graceOnPrincipalAndInterestPayment"
                                                        ng-model="formData.graceOnInterestPayment"></label>
                </td>
            </tr>
            <tr>
                <td colspan=2 class="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.graceOnArrearsAgeing == true">
                    <label>{{ 'label.input.grace' | translate }}&nbsp;{{'label.input.onduedate' | translate}}&nbsp;
                        <input
                            id="graceOnArrearsAgeing" class="input-mini-small" type="text"
                            ng-model="formData.graceOnArrearsAgeing" ng-disabled="!loanaccountinfo.product.allowAttributeOverrides.graceOnArrearsAgeing"></label>
                </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="paddedbottom10">
                    <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 paddedbottom10" ng-show="formData.isTopup == true">
                    <select id="loanIdToClose" ng-model="formData.loanIdToClose"
                            ng-options="loanSummary.id as loanSummary.accountNo for loanSummary in loanaccountinfo.clientActiveLoanOptions" class="form-control width170px"
                            value="{{loanSummary.id}}"/>
                </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="paddedbottom10">
                    <label class="control-label">{{ loanaccountinfo.isInterestRecalculationEnabled | YesOrNo }}</label>
                </td>
                <td data-ng-show="loanaccountinfo.isInterestRecalculationEnabled">
                    <label>{{ 'label.input.daysinyears' | translate }}</label>
                </td>
                <td class="paddedbottom10">
                    <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="paddedbottom10" 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>
                </td>
                <td class="paddedbottom10" 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="paddedbottom10" 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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                    <label>{{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyType.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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                    <label>{{ loanaccountinfo.interestRecalculationData.recalculationRestFrequencyInterval}}</label>
                </td>

                <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                    <label class="control-label">{{ 'label.input.frequenc.date.for.recalculte.outstanding.principal' |
                        translate }}<span class="required">*</span></label>
                </td>
                <td class="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                    <input type="text" id="recalculationRestFrequencyDate" name="recalculationRestFrequencyDate" datepicker-pop="dd MMMM yyyy"
                           ng-model="date.recalculationRestFrequencyDate" is-open="opened" min="'2000-01-01'" max="restrictDate" class="form-control"/>
                </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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                    <label>{{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyType.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="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                    <label>{{ loanaccountinfo.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</label>
                </td>

                <td ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                    <label class="control-label">{{ 'label.input.frequenc.date.for.compounding' |
                        translate }}<span class="required">*</span></label>
                </td>
                <td class="paddedbottom10" ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.interestRecalculationSection == true">
                    <input type="text" id="recalculationCompoundingFrequencyDate" name="recalculationCompoundingFrequencyDate" datepicker-pop="dd MMMM yyyy"
                           ng-model="date.recalculationCompoundingFrequencyDate" is-open="opened" min="'2000-01-01'" max="restrictDate" class="form-control"/>
                </td>
            </tr>
        </table>
        <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 paddedbottom10">
                        <input id="maxOutstandingLoanBalance" type="text" class="form-control" ng-model="formData.maxOutstandingLoanBalance" number-format>&nbsp;
                        <a title="{{ 'label.button.addtranch' | translate }}" ng-click="addTranches()"><i
                                class="fa fa-plus "></i></a>
                    </td>
                </tr>
            </table>
            <table class="table 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" class="form-control"
                               placeholder="{{'label.input.expecteddisbursementon' | translate}}"
                               ng-model="disbursementDetail.expectedDisbursementDate" is-open="'openedtranche'+$index"
                               min="minDate" />
                    </td>
                    <td>
                        <input id="{{disbursementDetail[$index].principal}}" class="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>
        <hr/>
        <!--Rate Module-->
        <div ng-show="ratesEnabled">
        <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 class="col-md-12">
        <label><strong>{{ 'label.heading.charges' | translate }}</strong></label>
        <select ng-model="chargeFormData.chargeId" class="form-control width170px"
                ng-options="charge.id as (charge.name + ',' + charge.currency.displaySymbol) for charge in loanaccountinfo.chargeOptions|filter:loanaccountinfo.currency.code:strict"
                value="{{charge.id}}">
            <option value="">{{'label.selectcharge' | translate}}</option>
        </select>
        <a ng-click="addCharge()"><i class="fa fa-plus "></i></a>
        </div>
        <table class="table" class="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" number-format type="text" ng-model="charge.amountOrPercentage"
                           placeholder="{{'label.input.amount' | translate}}"></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="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>
        <div class="col-md-12 paddedtop" ng-hide = "response.uiDisplayConfigurations.loanAccount.isHiddenSection.collateralSection == true">
            <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>
        <div ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenSection.collateralSection == true">
            <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>
</div>
<br>

<div ng-show="loanaccountinfo">
    <span><a ng-hide="previewRepayment" ng-click="previewRepayments()">{{'label.anchor.repaymentinfo' | translate}}<i
            class="fa fa-circle-arrow-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="table 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></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>
        </tbody>
        <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>
    </table>
</div>
<div class="col-md-offset-6">
    <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
    <button id="save" type="submit" class="btn btn-primary" has-permission='UPDATE_LOAN' ng-show="loanaccountinfo">{{'label.button.save' |
        translate}}
    </button>
</div>
</fieldset>
</form>
</div>
