<div class="col-md-12" ng-controller="ViewLoanDetailsController">
    <div>
        <ul class="breadcrumb">
            <li ng-show="loandetails.clientName"><a
                    ng-href="#/viewclient/{{loandetails.clientId}}">{{loandetails.clientName}}</a></li>
            <li ng-show="loandetails.group"><a ng-href="#/viewgroup/{{loandetails.group.id}}">{{loandetails.group.name}}</a></li>
            <li class="active">{{loandetails.loanProductName}}({{loandetails.accountNo}})</li>
        </ul>
    </div>
    <div>
        <div class="form-horizontal" ng-show="report">

            <api-validate></api-validate>
            <div id="print">

                <h3 align="center">{{'label.heading.companyname' | translate}}</h3>
                <h3 align="center">{{'label.heading.loanrepaymentschedule' | translate}}</h3>
                <div id="branchName" align="center">
                    <h3>{{loandetails.transactions[0].officeName}}</h3>
                    <br>
                </div>

                <div id="table2" class="pull-right">
                    <table id="table2" class="table width100">
                        <tbody>
                        <tr>
                            <th>{{'label.heading.sanctiondate' | translate}}:</th>
                            <td>{{loanApprovedDate}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.sanctionamount' | translate}}:</th>
                            <td>{{loandetails.approvedPrincipal}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.disbursementdate' | translate}}:</th>
                            <td>{{dueDate}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.disbursementammount' | translate}}:</th>
                            <td>{{totalAmount}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.interesttype' | translate}}:</th>
                            <td>{{loandetails.interestType.value}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.interestperannum' | translate}}:</th>
                            <td>{{loandetails.interestRatePerPeriod}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <div id="table1">
                    <table id="table1" class="table width40" >
                        <tbody>
                        <tr>
                            <th>{{'label.heading.reportdate' | translate}}:</th>
                            <td>{{currentDate}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.customername' | translate}}:</th>
                            <td>{{loandetails.clientName}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.customerid' | translate}}:</th>
                            <td>{{loandetails.clientAccountNo}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.loanno' | translate}}:</th>
                            <td>{{loandetails.accountNo}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.centername' | translate}}:</th>
                            <td>{{loandetails.group.centerName}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.coname' | translate}}:</th>
                            <td>{{loandetails.loanOfficerName}}</td>
                        </tr>

                        <tr>
                            <th>{{'label.heading.productname' | translate}}:</th>
                            <td>{{loandetails.loanProductName}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <br>
                </div>

                <div id="table3">
                    <table class="table width100">
                        <tbody>
                        <tr>
                            <th id="heading">{{'label.heading.serialno' | translate}}</th>
                            <th id="heading">{{'label.heading.disbursaldate' | translate}}</th>
                            <th id="heading">{{'label.heading.disbursedamount' | translate}}</th>
                        </tr>
                        <tr ng-repeat="disbursed in disbursedData">
                            <td>{{$index+1}}</td>
                            <td>{{disbursed.dueDate | DateFormat}}</td>
                            <td>{{disbursed.principalDisbursed}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <br>
                </div>

                <div id="table4">
                    <table class="table width100" ng-show="previewRepayment">
                        <tbody>
                        <tr>
                            <th id="heading">{{'label.heading.serialno' | translate}}</th>
                            <th id="heading" width="=150">{{'label.heading.date' | translate}}</th>
                            <th id="heading">{{'label.heading.principaldue' | translate}}</th>
                            <th id="heading">{{'label.heading.principalbalance' | translate}}</th>
                            <th id="heading">{{'label.heading.interestdue' | translate}}</th>
                            <th id="heading">{{'label.heading.due' | translate}}</th>
                        </tr>
                        <tr ng-repeat="period in repaymentData">
                            <td>{{period.period}}</td>
                            <td width="150">{{period.dueDate | DateFormat}}</td>
                            <td>{{period.principalDue| number}}</td>
                            <td>{{period.principalLoanBalanceOutstanding| number}}</td>
                            <td>{{period.interestDue| number}}</td>
                            <td>{{period.totalDueForPeriod| number}}</td>
                        </tr>

                        <br>
                        <tr>
                            <td id="heading" colspan="2">{{'label.heading.total' | translate}}</td>
                            <td id="heading">{{repaymentscheduleinfo.totalPrincipalExpected| number}}</td>
                            <td id="heading"></td>
                            <td id="heading">{{repaymentscheduleinfo.totalInterestCharged| number}}</td>
                            <td id="heading">{{repaymentscheduleinfo.totalRepaymentExpected| number}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <button ng-click="printDiv('print');">Print Div</button>

                <span><a ng-hide="report" ng-click="previewRepayment=!previewRepayment"><i class="icon-circle-arrow-left">{{'label.anchor.backtoloaninfo'
                    | translate}}</i></a><br><br></span>

            <div class="col-md-11 center" ng-show="previewRepayment">
                <button ng-click="backToLoanDetails()" class="btn btn-default ng-binding">{{'label.button.back' | translate}} </button>
            </div>

        	<div class="form-group" ng-show="viewLoanReport">
                 <label class="control-label col-sm-2">{{'label.input.fromdate' | translate}}<span
                         class="required">*</span></label>

                 <div class="col-sm-3">
                 	<input id="startDate" class="date-disable form-control" readonly type="text"
                            datepicker-pop="{{df}}" ng-model="date.fromDate" is-open="opened" min="minDate"
                            max="restrictDate"/>
                 </div>
                 <label class="control-label col-sm-2">{{'label.input.todate' | translate}}<span
                         class="required">*</span></label>

                 <div class="col-sm-3">
                 	<input id="endDate" class="date-disable form-control" readonly type="text"
                            datepicker-pop="{{df}}" ng-model="date.toDate" is-open="opened" min="minDate"
                            max="restrictDate"/>
                 </div>
             </div>
             <div class="col-md-11 center" ng-show="viewLoanReport">
                 <button ng-click="viewLoanDetails()" class="btn btn-default ng-binding">{{'label.button.back' | translate}} </button>
                 <button ng-click="viewprintdetails()" class="btn btn-primary ng-binding">{{'label.button.viewprint' | translate}} </button>
             </div>


        </div>
        <div ng-hide="hidePentahoReport" ng-show="report" class="col-md-12 alert-block span tab-content">
            <button ng-show="printbtn" ng-click="printReport()" class="btn btn-primary">{{'label.button.print' |
                translate}}
            </button>
            <div id="printcontent">
                <iframe id="rptLoadingFrame" ng-show="viewReport" ng-src="{{viewReportDetails}}" frameborder="0" width="100%" height="800px"></iframe>
            </div>
            <div class="col-md-13 center" ng-show="viewTransactionReport">
                <button ng-click="viewLoanDetails()" class="btn btn-default ng-binding">{{'label.button.back' | translate}} </button>
            </div>
        </div>
        <div ng-hide="report">
            <div class="span gray-head" style="margin-left:0%;">
                      <span style="margin-left: 10px;font-size:20px">
                            <strong> <i ng-hide="loandetails.inArrears"
                                        class="icon-stop {{loandetails.status.code | StatusLookup}}"></i>
                                <i ng-show="loandetails.inArrears"
                                   class="icon-stop {{loandetails.status.code | StatusLookup}}overdue"></i>&nbsp;{{loandetails.loanProductName}}(#{{loandetails.accountNo}})</strong>
                      </span>
            </div>
            <div class="col-sm-12 col-md-12 primarydiv">
                <div class="pull-right">
                      <span ng-repeat="button in buttons.singlebuttons">
                          <a ng-show="button.name" ng-click="clickEvent(button.name.replace('button.',''), loandetails.id)"
                             class="btn btn-primary" has-permission='{{button.taskPermissionName}}'><i
                                  class="{{button.icon}} icon-white"></i>&nbsp;{{'label.' + button.name |
                              translate}}</a>
                      </span>
                      <span ng-show="buttons.options" class="btn-group dropdown" on-toggle="toggled(open)">
                          <a class="btn btn-primary dropdown-toggle">
                              {{ 'label.button.more' | translate}}
                              <span class="caret"></span>
                          </a>
                          <ul style='margin-left:-95px;' class="dropdown dropdown-menu">
                              <li class="{{button.icon}}" ng-repeat="button in buttons.options">
                                  <a ng-click="clickEvent(button.name.replace('button.',''), loandetails.id)"
                                     has-permission='{{button.taskPermissionName}}'>{{'label.'+
                                      button.name | translate}}</a>
                              </li>
                          </ul>
                      </span>
                </div>
            </div>

            <hr/>
            <br/>

            <div class="row span" style="margin-left:-1px;margin-top: -20px">
                <div class="col-sm-6 col-md-6">
                    <table class="table table-striped table-bordered">
                        <tr>
                            <th class="table-bold-loan">{{'label.heading.disbursementdate' | translate}}</th>
                            <td><span class="padded-td">{{loandetails.timeline.actualDisbursementDate | DateFormat}}<span
                                    data-ng-hide="loandetails.timeline.actualDisbursementDate">{{'label.heading.notavailable' | translate}}</span></span>
                            </td>
                        </tr>
                        <tr>
                            <th class="table-bold-loan">{{'label.heading.currency' | translate}}</th>
                            <td><span class="padded-td">{{loandetails.currency.name}}</span></td>
                        </tr>
                        <tr>
                            <th class="table-bold-loan">{{'label.heading.loanofficer' | translate}}</th>
                            <td><span class="padded-td"><span data-ng-hide="loandetails.loanOfficerName">{{'label.unassigned' | translate}}</span>{{loandetails.loanOfficerName}}&nbsp;
                                    <span ng-show="loandetails.loanOfficerName">
                                      <a ng-click="clickEvent('unassignloanofficer', loandetails.id)"><i
                                              class="icon-remove"></i></a>
                                    </span>
                                    </span>
                            </td>
                        </tr>
                        <tr>
                            <th class="table-bold-loan">{{'label.heading.loanexternalid' | translate}}</th>
                            <td><span class="padded-td">{{loandetails.externalId}}</span></td>
                        </tr>
                    </table>
                </div>
                <div class="col-sm-6 col-md-6">
                    <table class="table table-striped table-bordered">
                        <tr>
                            <th class="table-bold-loan">{{'label.heading.loanpurpose' | translate}}</th>
                            <td><span class="padded-td">{{loandetails.loanPurposeName}}
                                <span data-ng-hide="loandetails.loanPurposeName">{{'label.heading.notprovided' | translate}}</span></span>
                            </td>
                        </tr>
                        <tr>
                            <th class="table-bold-loan">{{'label.heading.proposedamount' | translate}}</th>
                            <td><span class="padded-td">{{loandetails.proposedPrincipal | number}}</span></td>
                        </tr>
                        <tr ng-show="showApprovedAmountBasedOnStatus()">
                            <th class="table-bold-loan">{{'label.heading.approvedamount' | translate}}</th>
                            <td><span class="padded-td">{{loandetails.approvedPrincipal | number}}</span></td>
                        </tr>
                        <tr ng-show="showDisbursedAmountBasedOnStatus()">
                            <th class="table-bold-loan">{{'label.heading.disburseamount' | translate}}</th>
                            <td><span class="padded-td">{{loandetails.principal | number}}</span></td>
                        </tr>
                        <tr>
                            <th class="table-bold-loan">{{'label.heading.arrearsby' | translate}}</th>
                            <td><span class="padded-td">{{loandetails.summary.totalOverdue | number}}<span
                                    data-ng-hide="loandetails.summary.totalOverdue>=0">{{'label.heading.notprovided' | translate}}</span></span>
                            </td>
                        </tr>
                    </table>

                </div>
            </div>
            <div class="row paddedleft">
                <hr class="marginbottom"/>
                <tabset tabset-name="loanAccountDetails">
                    <tab heading="{{'label.heading.accountdetail' | translate}}">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th class="empty"></th>
                                <th class="empty"></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>{{'label.heading.repaymentstrategy' |
                                    translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.transactionProcessingStrategyName}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.repayments' | translate}}</td>
                                <td><span class="padded-td">{{loandetails.numberOfRepayments}} every {{loandetails.repaymentEvery}}&nbsp;{{loandetails.repaymentFrequencyType.value}}</span><span ng-show="loandetails.repaymentFrequencyType.id == 2 && loandetails.repaymentFrequencyNthDayType.id != 0 && loandetails.repaymentFrequencyDayOfWeekType.id != 0">&nbsp;on&nbsp;{{loandetails.repaymentFrequencyNthDayType.value}}&nbsp;{{loandetails.repaymentFrequencyDayOfWeekType.value}}</span>
                                </td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.amortization' | translate}}</td>
                                <td><span class="padded-td">{{loandetails.amortizationType.value}}</span></td>
                            </tr>
                            <tr ng-show="!loandetails.isLoanProductLinkedToFloatingRate">
                                <td>{{'label.heading.interest' | translate}}</td>
                                <td><span class="padded-td">{{loandetails.annualInterestRate}} per annum ({{loandetails.interestRatePerPeriod}}%&nbsp; {{loandetails.interestRateFrequencyType.value}}) - {{loandetails.interestType.value}}</span>
                                </td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.graceonprincipalpayment' |
                                    translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.graceOnPrincipalPayment}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.graceoninterestpayment' |
                                    translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.graceOnInterestPayment}}</span></td>
                            </tr >
                            <tr ng-hide="response.uiDisplayConfigurations.loanAccount.isHiddenField.recurringMoratoriumOnPrincipalPeriods">
                                <td>{{'label.heading.recurringmoratoriumonprincipalperiods' |
                                    translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.recurringMoratoriumOnPrincipalPeriods}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.graceOnArrearsAgeing' |
                                    translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.graceOnArrearsAgeing}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.fundsource' | translate}}</td>
                                <td><span class="padded-td">{{loandetails.fundName}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.interestfreeperiod' |
                                    translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.graceOnInterestCharged}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.interestcalculationperiod' |
                                    translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.interestCalculationPeriodType.value}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.allowpartialperiodinterestcalcualtion' |
                                    translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.allowPartialPeriodInterestCalcualtion}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.interesttype' | translate}}</td>
                                <td><span class="padded-td">{{loandetails.interestType.value}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.submittedondate' | translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.timeline.submittedOnDate | DateFormat }}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.approvedondate' | translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.timeline.approvedOnDate | DateFormat}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.disbursedondate' | translate}}
                                </td>
                                <td><span class="padded-td">{{loandetails.timeline.actualDisbursementDate | DateFormat}}</span></td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.matureson' | translate}}</td>
                                <td><span class="padded-td">{{loandetails.timeline.expectedMaturityDate | DateFormat}}</span></td>
                            </tr>
                            <tr data-ng-show="loandetails.canDefineInstallmentAmount">
                                <td>{{'label.input.fixedemiamount' | translate}}</td>
                                <td><span class="padded-td">{{loandetails.fixedEmiAmount| number}}</span></td>
                            </tr>
                            <tr>
                                <td>{{ 'label.input.recalculateinterest' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.isInterestRecalculationEnabled | YesOrNo }}</span></td>
                            </tr>
                            <tr>
                                <td>{{ 'label.input.daysinyears' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.daysInYearType.value}}</span></td>
                            </tr>
                            <tr>
                                <td>{{ 'label.input.daysinmonth' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.daysInMonthType.value }}</span></td>
                            </tr>
                            <tr data-ng-show="loandetails.isInterestRecalculationEnabled">
                                <td>{{ 'label.input.issubsidyapplicable' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.interestRecalculationData.isSubsidyApplicable }}</span></td>
                            </tr>
                            <tr data-ng-show="loandetails.isInterestRecalculationEnabled">
                                <td>{{ 'label.input.interest.recalculation.compounding.method' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.interestRecalculationData.interestRecalculationCompoundingType.value}}</span></td>
                            </tr>
                            <tr data-ng-show="loandetails.isInterestRecalculationEnabled">
                                <td>{{ 'label.input.interest.recalculation.reschdule.strategy' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.interestRecalculationData.rescheduleStrategyType.value}}</span></td>
                            </tr>
                            <tr data-ng-show="loandetails.isInterestRecalculationEnabled">
                                <td>{{ 'label.input.frequency.for.recalculte.outstanding.principal' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.interestRecalculationData.calendarData.humanReadable}}</span></td>
                            </tr>
                            <tr data-ng-show="loandetails.isInterestRecalculationEnabled && loandetails.interestRecalculationData.interestRecalculationCompoundingType.id !=0">
                                <td>{{ 'label.input.frequency.for.compounding' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.interestRecalculationData.compoundingCalendarData.humanReadable}}</span></td>
                            </tr>
                            <tr data-ng-show="loandetails.isVariableInstallmentsAllowed">
                                <td>{{ 'label.input.variable.installments.allowed' | translate }}</td>
                                <td><span class="padded-td">{{loandetails.isVariableInstallmentsAllowed}}</span></td>
                            </tr>

                            <tr data-ng-show="loandetails.isVariableInstallmentsAllowed">
                                <td>{{'label.input.variable.installments.gap' | translate}}</td>
                                <td colspan="3">(Min:{{loandetails.minimumGap}}&nbsp;{{'label.input.days' | translate }} &nbsp;, Max:{{loandetails.maximumGap}}&nbsp;{{'label.input.days' | translate }})
                                </td>

                            <tr data-ng-show="loandetails.isInterestRecalculationEnabled && loandetails.interestRecalculationData.interestRecalculationCompoundingType.id !=0">
                                <td>{{ 'label.input.compounding.posted.as.interest' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.interestRecalculationData.isCompoundingToBePostedAsTransaction | YesOrNo }}</span></td>
                            </tr>
                            <tr ng-show="isWriteOff">
                                <td>{{ 'label.input.writeoffreason' | translate }}</td>
                                <td><span class="padded-td">{{ loandetails.summary.writeoffReason}}</span></td>
                            </tr>
                            </tbody>
                        </table>
                    </tab>
                    <tab heading="{{'label.heading.summary' | translate}}" ng-show="loandetails.summary">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th class="empty"></th>
                                <th>{{'label.heading.original' | translate}}</th>
                                <th>{{'label.heading.paid' | translate}}</th>
                                <th>{{'label.heading.waived' | translate}}</th>
                                <th>{{'label.heading.writtenoff' | translate}}</th>
                                <th>{{'label.heading.outstanding' | translate}}</th>
                                <th>{{'label.heading.overdue' | translate}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th>{{'label.heading.principal' | translate}}</th>
                                <td>{{loandetails.summary.principalDisbursed | number}}</td>
                                <td>{{loandetails.summary.principalPaid | number}}</td>
                                <td>&nbsp;</td>
                                <td>{{loandetails.summary.principalWrittenOff | number}}</td>
                                <td>{{loandetails.summary.principalOutstanding | number}}</td>
                                <td>{{loandetails.summary.principalOverdue | number}}</td>
                            </tr>
                            <tr>
                                <th>{{'label.heading.interest' | translate}}</th>
                                <td>{{loandetails.summary.interestCharged | number}}</td>
                                <td>{{loandetails.summary.interestPaid | number}}</td>
                                <td>{{loandetails.summary.interestWaived | number}}</td>
                                <td>{{loandetails.summary.interestWrittenOff | number}}</td>
                                <td>{{loandetails.summary.interestOutstanding | number}}</td>
                                <td>{{loandetails.summary.interestOverdue | number}}</td>
                            </tr>
                            <tr>
                                <th>{{'label.heading.fees' | translate}}</th>
                                <td>{{loandetails.summary.feeChargesCharged | number}}</td>
                                <td>{{loandetails.summary.feeChargesPaid | number}}</td>
                                <td>{{loandetails.summary.feeChargesWaived | number}}</td>
                                <td>{{loandetails.summary.feeChargesWrittenOff | number}}</td>
                                <td>{{loandetails.summary.feeChargesOutstanding | number}}</td>
                                <td>{{loandetails.summary.feeChargesOverdue | number}}</td>
                            </tr>

                            <tr>
                                <th>{{'label.heading.penalties' | translate}}</th>
                                <td>{{loandetails.summary.penaltyChargesCharged | number}}</td>
                                <td>{{loandetails.summary.penaltyChargesPaid | number}}</td>
                                <td>{{loandetails.summary.penaltyChargesWaived | number}}</td>
                                <td>{{loandetails.summary.penaltyChargesWrittenOff | number}}</td>
                                <td>{{loandetails.summary.penaltyChargesOutstanding | number}}</td>
                                <td>{{loandetails.summary.penaltyChargesOverdue | number}}</td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>{{'label.heading.total' | translate}}</th>
                                <th>{{loandetails.summary.totalExpectedRepayment | number}}</th>
                                <th>{{loandetails.summary.totalRepayment | number}}</th>
                                <th>{{loandetails.summary.totalWaived | number}}</th>
                                <th>{{loandetails.summary.totalWrittenOff | number}}</th>
                                <th>{{loandetails.summary.totalOutstanding | number}}</th>
                                <th>{{loandetails.summary.totalOverdue | number}}</th>
                            </tr>
                            </tfoot>
                        </table>
                    </tab>

                    <tab heading="{{'label.heading.originalschedule' | translate}}"  ng-show="loandetails.originalSchedule">

                        <table class="table table-striped .width100">
                            <colgroup span="4"></colgroup>
                            <thead>
                            <tr>
                                <th colspan="1" scope="colgroup"></th>
                                <th colspan="2" scope="colgroup">{{'label.heading.loanamountandbalance' | translate}}</th>
                                <th colspan="3" scope="colgroup">{{'label.heading.totalcostofloan' | translate}}</th>
                                <th colspan="1" scope="colgroup">{{'label.heading.installmenttotals' | translate}}</th>
                            </tr>
                            <tr>
                                <th scope="col">{{'label.heading.date' | translate}}</th>

                                <th scope="col">{{'label.heading.principaldue' | translate}}</th>
                                <th scope="col">{{'label.heading.balanceofloan' | translate}}</th>

                                <th scope="col">{{'label.heading.interest' | translate}}</th>
                                <th scope="col">{{'label.heading.fees' | translate}}</th>
                                <th scope="col">{{'label.heading.penalties' | translate}}</th>

                                <th scope="col">{{'label.heading.outstanding' | translate}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="period in loandetails.originalSchedule.periods">
                                <td>{{period.dueDate | DateFormat}}</td>

                                <td>{{period.principalDue | number}}</td>
                                <td>{{period.principalLoanBalanceOutstanding | number}}</td>
                                <td>{{period.interestOriginalDue | number}}</td>
                                <td>{{period.feeChargesDue | number}}</td>
                                <td>{{period.penaltyChargesDue | number}}</td>
                                <td>{{period.totalOutstandingForPeriod | number}}</td>
                            </tr>
                            </tbody>
                            <tfoot class="ui-widget-header">
                            <tr>
                                <th >{{'label.heading.total' | translate}}</th>
                                <th>{{loandetails.originalSchedule.totalPrincipalExpected | number}}</th>
                                <th>&nbsp;</th>
                                <th>{{loandetails.originalSchedule.totalInterestCharged | number}}</th>
                                <th>{{loandetails.originalSchedule.totalFeeChargesCharged | number}}</th>
                                <th>{{loandetails.originalSchedule.totalPenaltyChargesCharged | number}}</th>
                                <th>{{loandetails.originalSchedule.totalRepaymentExpected | number}}</th>
                            </tr>
                            </tfoot>
                        </table>

                    </tab>

                    <tab heading="{{'label.heading.repaymentschedule' | translate}}">
                        <button class="btn btn-primary pull-right" ng-show="checkStatus() && response.uiDisplayConfigurations.viewLoanAccountDetails.isHiddenFeild.viewReportButton"
                                ng-click="viewRepaymentDetails()">{{'label.button.viewReport' | translate}}</button>

                        <table class="table table-striped .width100">
                            <colgroup span="4"></colgroup>
                            <thead>
                            <tr>
                                <th colspan="5" scope="colgroup"></th>
                                <th colspan="2" scope="colgroup">{{'label.heading.loanamountandbalance' | translate}}</th>
                                <th colspan="3" scope="colgroup">{{'label.heading.totalcostofloan' | translate}}</th>
                                <th colspan="6" scope="colgroup">{{'label.heading.installmenttotals' | translate}}</th>
                            </tr>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">{{'label.heading.days' | translate}}</th>
                                <th scope="col">{{'label.heading.date' | translate}}</th>
                                <th scope="col">{{'label.heading.paiddate' | translate}}</th>
                                <th scope="col">&nbsp;</th>

                                <th scope="col">{{'label.heading.principaldue' | translate}}</th>
                                <th scope="col">{{'label.heading.balanceofloan' | translate}}</th>

                                <th scope="col">{{'label.heading.interest' | translate}}</th>
                                <th scope="col">{{'label.heading.fees' | translate}}</th>
                                <th scope="col">{{'label.heading.penalties' | translate}}</th>

                                <th scope="col">{{'label.heading.due' | translate}}</th>
                                <th scope="col">{{'label.heading.paid' | translate}}</th>
                                <th scope="col">{{'label.heading.inadvance' | translate}}</th>
                                <th scope="col">{{'label.heading.late' | translate}}</th>
                                <th scope="col" data-ng-show="isWaived">{{'label.heading.waived' | translate}}</th>
                                <th scope="col">{{'label.heading.outstanding' | translate}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="period in loandetails.repaymentSchedule.periods">
                                <td scope="row">{{period.period}}</td>
                                <td>{{period.daysInPeriod}}</td>
                                <td>{{period.dueDate | DateFormat}}</td>
                                <td>{{period.obligationsMetOnDate | DateFormat}}</td>
                                <td>
                                    <div ng-show="period.obligationsMetOnDate"><i class="icon-check icon-white"></i></div>
                                </td>

                                <td>{{period.principalDue | number}}</td>
                                <td>{{period.principalLoanBalanceOutstanding | number}}</td>
                                <td>{{period.interestOriginalDue | number}}</td>
                                <td>{{period.feeChargesDue | number}}</td>
                                <td>{{period.penaltyChargesDue | number}}</td>

                                <td>{{period.totalDueForPeriod | number}}</td>
                                <td>{{period.totalPaidForPeriod | number}}</td>
                                <td>{{period.totalPaidInAdvanceForPeriod | number}}</td>
                                <td>{{period.totalPaidLateForPeriod | number}}</td>
                                <td data-ng-show="isWaived">{{period.totalWaivedForPeriod | number}}</td>
                                <td>{{period.totalOutstandingForPeriod | number}}</td>
                            </tr>
                            </tbody>
                            <tfoot class="ui-widget-header">
                            <tr>
                                <th>&nbsp;</th>
                                <th>{{loandetails.repaymentSchedule.loanTermInDays}}</th>
                                <th colspan="3">{{'label.heading.total' | translate}}</th>

                                <th>{{loandetails.repaymentSchedule.totalPrincipalExpected | number}}</th>
                                <th>&nbsp;</th>
                                <th>{{loandetails.repaymentSchedule.totalInterestCharged | number}}</th>
                                <th>{{loandetails.repaymentSchedule.totalFeeChargesCharged | number}}</th>
                                <th>{{loandetails.repaymentSchedule.totalPenaltyChargesCharged | number}}</th>

                                <th>{{loandetails.repaymentSchedule.totalRepaymentExpected | number}}</th>
                                <th>{{loandetails.repaymentSchedule.totalRepayment | number}}</th>
                                <th>{{loandetails.repaymentSchedule.totalPaidInAdvance | number}}</th>
                                <th>{{loandetails.repaymentSchedule.totalPaidLate | number}}</th>
                                <th data-ng-show="isWaived">{{loandetails.repaymentSchedule.totalWaived | number}}</th>
                                <th>{{loandetails.repaymentSchedule.totalOutstanding | number}}</th>
                            </tr>
                            </tfoot>
                        </table>

                    </tab>

                    <tab heading="{{'label.heading.futureschedule' | translate}}"  ng-show="loandetails.repaymentSchedule.futurePeriods">

                        <table class="table table-striped .width100">
                            <colgroup span="4"></colgroup>
                            <thead>
                            <tr>
                                <th colspan="1" scope="colgroup"></th>
                                <th colspan="2" scope="colgroup">{{'label.heading.loanamountandbalance' | translate}}</th>
                                <th colspan="3" scope="colgroup">{{'label.heading.totalcostofloan' | translate}}</th>
                                <th colspan="1" scope="colgroup">{{'label.heading.installmenttotals' | translate}}</th>
                            </tr>
                            <tr>
                                <th scope="col">{{'label.heading.date' | translate}}</th>

                                <th scope="col">{{'label.heading.principaldue' | translate}}</th>
                                <th scope="col">{{'label.heading.balanceofloan' | translate}}</th>

                                <th scope="col">{{'label.heading.interest' | translate}}</th>
                                <th scope="col">{{'label.heading.fees' | translate}}</th>
                                <th scope="col">{{'label.heading.penalties' | translate}}</th>

                                <th scope="col">{{'label.heading.outstanding' | translate}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="period in loandetails.repaymentSchedule.futurePeriods">
                                <td>{{period.dueDate | DateFormat}}</td>

                                <td>{{period.principalDue | number}}</td>
                                <td>{{period.principalLoanBalanceOutstanding | number}}</td>
                                <td>{{period.interestOriginalDue | number}}</td>
                                <td>{{period.feeChargesDue | number}}</td>
                                <td>{{period.penaltyChargesDue | number}}</td>

                                <td>{{period.totalOutstandingForPeriod | number}}</td>
                            </tr>
                            </tbody>
                        </table>

                    </tab>


                    <tab heading="{{'label.heading.transactions' | translate}}" ng-show="loandetails.transactions" select="convertDateArrayToObject('date')">
                        <button class="btn btn-primary pull-right" ng-show="checkStatus()" ng-click="export()">{{'label.button.export' | translate}}</button>
                        <button class="btn btn-primary pull-right" ng-show="checkStatus()" ng-click="viewJournalEntries()" style="margin-right: 8px;">{{'label.button.viewjournalentries' | translate}}</button>
                        <div class="pull-right">
                            <input type="checkbox" data-ng-model="hideTransactions.type.accrual">&nbsp;&nbsp;
                            <label class="control-label">{{ 'label.input.hide.accrual.transactions' | translate }}</label>&nbsp;&nbsp;
                        </div>
                        <br>
                        <table class="table">
                            <colgroup span="4"></colgroup>
                            <thead>
                                <tr class="graybg">
                                    <th class="pointer" ng-click="changeTransactionSort('id')">{{'label.heading.id' | translate}}</th>
                                    <th class="pointer" ng-click="changeTransactionSort('officeName')">{{'label.heading.office' | translate}}</th>
                                    <th class="pointer" ng-click="changeTransactionSort('date')">{{'label.heading.transactiondate' | translate}}</th>
                                    <th class="pointer" ng-click="changeTransactionSort('type.value')">{{'label.heading.transactiontype' | translate}}</th>
                                    <th class="pointer" ng-click="changeTransactionSort('amount')">{{'label.heading.amount' | translate}}</th>
                                    <th ng-hide="hideTransactionDetails" class="pointer" colspan="4" scope="colgroup">{{'label.heading.breakdown' | translate}}</th>
                                    <th class="pointer" scope="colgroup">{{'label.heading.loan.balance' | translate}}</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                                <tr>
                                    <th scope="col">&nbsp;</th>
                                    <th scope="col">&nbsp;</th>
                                    <th scope="col">&nbsp;</th>
                                    <th scope="col">&nbsp;</th>
                                    <th scope="col">&nbsp;</th>
                                    <th ng-hide="hideTransactionDetails" class="pointer" scope="col" ng-click="changeTransactionSort('principalPortion')">{{'label.heading.principal' | translate}}</th>
                                    <th ng-hide="hideTransactionDetails" class="pointer" scope="col" ng-click="changeTransactionSort('interestPortion')">{{'label.heading.interest' | translate}}</th>
                                    <th ng-hide="hideTransactionDetails" class="pointer" scope="col" ng-click="changeTransactionSort('feeChargesPortion')">{{'label.heading.fees' | translate}}</th>
                                    <th ng-hide="hideTransactionDetails" class="pointer" scope="col" ng-click="changeTransactionSort('penaltyChargesPortion')">{{'label.heading.penalities' | translate}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="pointer-main" ng-class="{strikeoff : transaction.manuallyReversed==true}"
                                    ng-repeat="transaction in loandetails.transactions | filter:(!hideTransactions.type.accrual || '') && hideTransactions | orderBy:transactionSort.column:transactionSort.descending">
                                    <td class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.id}}
                                    </td>
                                    <td class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.officeName}}
                                    </td>
                                    <td class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.date | DateFormat}}
                                    </td>
                                    <td class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.type.value}}
                                    </td>
                                    <td class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.amount | number}}
                                    </td>
                                    <td ng-hide="hideTransactionDetails" class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.principalPortion | number}}
                                    </td>
                                    <td ng-hide="hideTransactionDetails" class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.interestPortion | number}}
                                    </td>
                                    <td ng-hide="hideTransactionDetails" class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.feeChargesPortion | number}}
                                    </td>
                                    <td ng-hide="hideTransactionDetails" class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.penaltyChargesPortion | number}}
                                    </td>
                                    <td class="pointer" data-ng-click="routeTo(loandetails.id,transaction.id,transaction.type.id)">
                                        {{transaction.outstandingLoanBalance | number}}
                                    </td>

                                    <td> <a tooltip="{{'label.heading.viewreceipts' | translate }}" ng-if="transaction.manuallyReversed!=true" ng-click="viewloantransactionreceipts(transaction.id)">
                                        <i class="icon-file-text icon-large"></i>
                                    </a>
                                    </td>
									 <td> <a tooltip="{{'label.anchor.viewjournalentries' | translate}}" ng-click="viewloantransactionjournalentries(transaction.id)">
                                        <i class="icon-circle-arrow-right icon-large coll"></i>
                                    </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <button ng-show="printbtn" ng-click="printReport()" class="btn btn-primary"><i class="icon-print icon-white">{{'label.button.print' |
                                translate}}
                            </i></button>
                            <div id="printreceiptcontent">
                                <iframe id="rptLoadingreceiptFrame" ng-show="viewReport" ng-src="{{viewReportDetails}}" frameborder="0" width="100%" height="800px"></iframe>
                            </div>
                        </div>
                    </tab>

                    <tab heading="{{'label.heading.loancollaterals' | translate}}" ng-show="loandetails.collateral">
                        <table class="table">
                            <thead>
                            <th>{{'label.heading.type' | translate}}</th>
                            <th>{{'label.heading.value' | translate}}</th>
                            <th>{{'label.heading.description' | translate}}</th>
                            </thead>
                            <tbody>
                            <tr ng-repeat="collateral in loandetails.collateral" class="pointer-main">
                                <td class="pointer" data-ng-click="viewLoanCollateral(collateral.id)">{{collateral.type.name}}</td>
                                <td class="pointer" data-ng-click="viewLoanCollateral(collateral.id)">{{collateral.value | number}}</td>
                                <td class="pointer" data-ng-click="viewLoanCollateral(collateral.id)">{{collateral.description}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </tab>

                    <tab ng-show="loandetails.multiDisburseLoan" heading="{{'label.heading.tranchedetails' | translate}}">
                        <table class="width100">

                            <tr>
                                <td>
                                    {{'label.input.outstandingloanbalance' | translate}} : &nbsp;{{loandetails.maxOutstandingLoanBalance| number}}&nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>{{'label.heading.tranchedetails' | translate}}</b>
                                </td>
                                <td align="right">
                                <a type="button" ng-show="showAddDeleteTrancheButtons('adddisbursedetails')" class="btn btn-primary" align="right"
                                   href="#/loandisbursedetail/{{loandetails.id}}/adddisbursedetails">
                                    <i class="icon-plus"></i>{{ 'label.button.add' | translate }}
                                </a>
                                    <a type="button" ng-show="showAddDeleteTrancheButtons('deletedisbursedetails')" class="btn btn-danger" align="right"
                                       href="#/loandisbursedetail/{{loandetails.id}}/deletedisbursedetails">
                                        <i class="icon-trash"></i>{{ 'label.button.delete' | translate }}
                                    </a>
                                </td>
                            </tr>
                        </table>
                        <table class="width100">
                            <tr class="graybg" ng-show="loandetails.disbursementDetails.length>0">
                                <th align="left">{{'label.input.expecteddisbursementon' | translate}}</th>
                                <th align="left">{{'label.input.disbursedon' | translate}}</th>
                                <th align="left">{{'label.input.principal' | translate}}</th>
                                <th align="left">&nbsp;</th>
                            </tr>
                            <tr ng-repeat="disbursementDetail in loandetails.disbursementDetails">
                                <td>{{disbursementDetail.expectedDisbursementDate | DateFormat}}</td>
                                <td>{{disbursementDetail.actualDisbursementDate | DateFormat}}</td>
                                <td>{{disbursementDetail.principal | number}}</td>
                                <td>
                                    <div ng-show="disbursementDetail.actualDisbursementDate != null"><i class="icon-check icon-white"></i>
                                    </div>
                                    <a title="{{'label.edit' | translate}}"
                                       data-ng-show="showEdit(disbursementDetail)"
                                       href="#/loandisbursedetail/{{loandetails.id}}/editdisbursedate/{{disbursementDetail.id}}"><i
                                            class="icon-pencil icon-white"></i></a>
                                </td>
                            </tr>
                        </table>

                        <table class="width100">
                            <tr>
                                <td>
                                    {{'label.input.fixedemiamountvariations' | translate}} : &nbsp;&nbsp;
                                </td>
                            </tr>
                        </table>
                        <table class="width100 table">
                            <tr class="graybg" ng-show="loandetails.emiAmountVariations.length>0">
                                <th align="left">{{'label.input.emiamoutvariationfrom' | translate}}</th>
                                <th align="left">{{'label.input.fixedemiamount' | translate}}</th>
                            </tr>
                            <tr ng-repeat="emiVariations in loandetails.emiAmountVariations">
                                <td>{{emiVariations.termVariationApplicableFrom | DateFormat}}</td>
                                <td>{{emiVariations.termValue}}</td>
                            </tr>
                        </table>
                    </tab>

                    <tab ng-show="loandetails.overdueCharges.length>0" heading="{{'label.heading.overduepenalitycharge' | translate}}">
                        <table class="table 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 loandetails.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>
                    </tab>

                    <tab ng-show="loandetails.isLoanProductLinkedToFloatingRate" heading="{{'label.heading.floatinginterestrates' | translate}}">
                        <table class="table width100">
                            <tr class="graybg">
                                <th>{{'label.heading.fromdate' | translate}}</th>
                                <th>{{'label.heading.interestrate' | translate}}</th>
                            </tr>
                            <tr ng-repeat="period in loandetails.interestRatesPeriods">
                                <td>{{period.fromDate}}</td>
                                <td>{{period.effectiveInterestRate}}</td>
                            </tr>
                        </table>
                    </tab>


                    <tab ng-show="chargeTableShow" heading="{{'label.heading.charges' | translate}}">
                        <table class="table width100">
                            <tr class="graybg">
                                <th>{{'label.heading.name' | translate}}</th>
                                <th>{{'label.heading.feeorpenalty' | translate}}</th>
                                <th>{{'label.heading.paymentdueat' | translate}}</th>
                                <th>{{'label.heading.dueasof' | translate}}</th>
                                <th>{{'label.heading.calculationtype' | translate}}</th>
                                <th>{{'label.heading.due' | translate}}</th>
                                <th>{{'label.heading.paid' | translate}}</th>
                                <th>{{'label.heading.waived' | translate}}</th>
                                <th>{{'label.heading.outstanding' | translate}}</th>
                                <th>{{'label.heading.actions' | translate}}</th>
                            </tr>
                            <tr ng-repeat="charge in charges" class="pointer-main">
                                <td class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{charge.name}}</td>
                                <td ng-show="charge.penalty" class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{"penalty"}}</td>
                                <td ng-hide="charge.penalty" class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{"fee"}}</td>
                                <td class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{charge.chargeTimeType.value}}</td>
                                <td class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{charge.dueDate | DateFormat}}</td>
                                <td class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{charge.chargeCalculationType.value}}</td>
                                <td class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{charge.currency.displaySymbol}}{{charge.amount| number}}</td>
                                <td class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{charge.currency.displaySymbol}}{{charge.amountPaid| number}}</td>
                                <td class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{charge.currency.displaySymbol}}{{charge.amountWaived| number}}</td>
                                <td class="pointer" data-ng-click="viewLoanChargeDetails(charge.id)">{{charge.currency.displaySymbol}}{{charge.amountOutstanding| number}}</td>
                                <td>
                                    <a title="{{'label.edit' | translate}}" data-ng-show="status=='Submitted and pending approval'"
                                       href="#/loanaccountcharge/{{loandetails.id}}/editcharge/{{charge.id}}"><i
                                            class="icon-pencil icon-white"></i></a>
                                    <a title="{{'label.delete' | translate}}" class="btn-warning"
                                       data-ng-show="status=='Submitted and pending approval'" data-ng-click="delCharge(charge.id)"
                                       title="delete"><i class="icon-remove icon-white"></i></a>
                                    <a class="btn-primary" data-ng-hide="charge.actionFlag"
                                       href="#/loanaccountcharge/{{loandetails.id}}/waivecharge/{{charge.id}}"><i
                                            class="icon-flag icon-white"></i></a>
                                    <a class="btn-success" data-ng-show="charge.chargePayable && status=='Active'"
                                       href="#/loanaccountcharge/{{loandetails.id}}/paycharge/{{charge.id}}">{{"label.button.pay" |
                                        translate}}</a>
                                </td>
                            </tr>
                        </table>
                    </tab>

                    <script type="text/ng-template" id="delcharge.html">
                        <div class="modal-header silver">
                            <h3 class="bolder">{{'label.heading.confirm' | translate}}</h3>
                        </div>
                        <div class="modal-body">
                            <api-validate></api-validate>
                            <br>
                            <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
                            <button class="btn btn-primary" ng-click="delete()">{{'label.button.confirm' | translate}}</button>
                        </div>
                    </script>
                    <tab heading="{{'label.heading.loandocuments' | translate}}" select="getLoanDocuments()">
                        <div class="pull-right" data-ng-show="choice">
                            <a href="#/addloandocument/{{loandetails.id}}" class="btn btn-primary"><i class="icon-plus icon-white"></i>{{'label.button.upload'
                                | translate}}</a>
                        </div>
                        <br>
                        <table class="table" ng-show="loandocuments.length > 0">
                            <thead>
                            <th>{{'label.heading.name' | translate}}</th>
                            <th>{{'label.heading.description' | translate}}</th>
                            <th>{{'label.heading.filename' | translate}}</th>
                            <th>{{'label.heading.actions' | translate}}</th>
                            </thead>
                            <tbody>
                            <tr ng-repeat="document in loandocuments">
                                <td>{{document.name}}</td>
                                <td>{{document.description}}</td>
                                <td>{{document.fileName}}</td>
                                <td>
                                    <a target="_blank" href="{{hostUrl}}{{document.docUrl}}"><i class="icon-cloud-download"></i></a>&nbsp;
                                    <a ng-click="deleteDocument(document.id,$index)"><i class="icon-remove"></i></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </tab>
                    <tab heading="{{ 'label.heading.notes' | translate }}" has-permission='READ_LOANNOTE'>
                        <br/>

                        <form>
                            <div class="form-group">
                                <div class="col-sm-12 col-md-12">
                                    <textarea rows="1" class="form-control marginbottom0px" id="textarea"
                                              placeholder="{{'label.input.enternote' | translate}}" ng-model="formData.note"></textarea>

                                    <div class="notewrapper col-sm-12 col-md-12">
                                        <span class="pull-right noteaddbuttonwrapper">
                                            <button class="btn btn-primary" type="submit" ng-click="saveNote()"
                                                    has-permission='CREATE_LOANNOTE'>{{'label.button.add' | translate}}
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="col-md-12">
                            <br/>
                            <div ng-repeat="loanNote in loanNotes | orderBy:predicate:reverse">
                                <blockquote>
                                    <p>{{loanNote.note}}</p>
                                    {{loanNote.id}}
                                    <small>{{'label.createdby' | translate}} :&nbsp;{{loanNote.createdByUsername}}</small>
                                    <small>{{'label.createdon' | translate}} :&nbsp;{{loanNote.createdOn | DateFormat}}</small>
                                </blockquote>
                            </div>
                        </div>
                    </tab>
                    <tab heading="{{loandatatable.registeredTableName}}" ng-repeat="loandatatable in loandatatables" has-permission='READ_{{loandatatable.registeredTableName}}'
                         select="dataTableChange(loandatatable)">
                        <div>
                            <div data-ng-show="choice" class="btn-group pull-right">
                                <a ng-show="datatabledetails.isData" class="btn btn-danger pull-right"
                                   has-permission='DELETE_{{loandatatable.registeredTableName}}'
                                   ng-click="deleteAll(loandatatable.registeredTableName, loandetails.id)"><i
                                        class="icon-trash icon-white"></i>{{'label.button.deleteall' | translate}}</a>
                                <a data-ng-show="showDataTableAddButton"
                                   href="#/makedatatableentry/{{loandatatable.registeredTableName}}/{{loandetails.id}}?fromEntity=loan"
                                   has-permission='CREATE_{{loandatatable.registeredTableName}}' class="btn btn-primary"><i
                                        class="icon-plus icon-white"></i>{{'label.button.add' | translate}}</a>
                                <a data-ng-show="showDataTableEditButton"
                                   ng-href="#/viewsingledatatableentry/{{loandatatable.registeredTableName}}/{{loandetails.id}}?mode=edit&&fromEntity=loan"
                                   class="btn btn-primary" has-permission='UPDATE_{{loandatatable.registeredTableName}}'><i
                                        class="icon-edit icon-white"></i>{{'label.button.edit' | translate}}</a>
                            </div>
                            <br>
                            <br>
                            <div ng-show="datatabledetails.isData">
                                <table data-ng-show="datatabledetails.isMultirow" class="table">
                                    <thead>
                                    <th ng-repeat="column in datatabledetails.columnHeaders">{{column.columnName | prettifyDataTableColumn}}</th>
                                    </thead>
                                    <tbody>
                                    <tr class="pointer-main" ng-repeat="data in datatabledetails.data">
                                        <td class="pointer" ng-repeat="row in data.row track by $index"
                                            ng-click="viewDataTable(loandatatable.registeredTableName,data)">{{row}}
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <table class="table table-bordered" data-ng-show="!datatabledetails.isMultirow" style="width: 450px">
                                    <tr ng-repeat="value in singleRow">
                                        <td class="graybg" style="font-weight: bold">{{value.key | prettifyDataTableColumn}}</td>
                                        <td><span class="padded-td">{{value.value}}</span></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </tab>
                </tabset>
            </div>
        </div>
    </div>
</div>
