<app-breadcrumb *ngIf="serviceName=='home-loan'" [title]="'Home Loan'"
  [items]="[{'name':'Home Loan', 'route':'/home-loans'}]" [active_item]=customerLoanId>
</app-breadcrumb>

<app-breadcrumb *ngIf="serviceName=='LAP'" [title]="'LAP'" [items]="[{'name':'LAP', 'route':'/LAP'}]"
  [active_item]=customerLoanId>
</app-breadcrumb>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12 px-1">
      <div class="card">
        <div class="card-body" style="height:calc(100vh - 200px);overflow: auto;">
          <table class="table" style="margin-bottom: 5px; margin-top: 10px;" aria-label="">
            <tbody>
              <tr>
                <td style="font-weight: 550;">{{'lbl_name'| translate}}</td>
                <td>{{homeLoan?.basicDetail?.fullName}}</td>
              </tr>
              <tr>
                <td style="font-weight: 550;">{{'lbl_contact_no'| translate}}</td>
                <td>{{homeLoan?.basicDetail?.contactNo}}</td>
              </tr>

              <tr>
                <td style="font-weight: 550;">{{'Birth Date'| translate}}</td>
                <td>{{homeLoan?.basicDetail?.birthdate | date}}</td>
              </tr>
              <!-- <tr>
                                <td style="font-weight: 550;">{{'PanCard No'| translate}}</td>
                                <td>{{homeLoan?.basicDetail?.panCardNo}}</td>
                            </tr> -->
              <tr>
                <td style="font-weight: 550;">{{'Application Date'| translate}}</td>
                <td>{{homeLoan?.basicDetail?.createdDate | date:'medium'}}</td>
              </tr>
              <tr>
                <td style="font-weight: 550;">{{'Loan Amount'| translate}}</td>
                <td>{{currency}}{{homeLoan?.basicDetail?.loanAmount}}</td>
              </tr>
            </tbody>
          </table>
          <h1 class="mt-5 text-center" style="color:red">{{'Current Status'| translate}}:
            <ng-container *ngIf="homeLoan?.basicDetail?.status else Default">
              {{homeLoan?.basicDetail?.status}}
            </ng-container>
            <ng-template #Default>
              {{'PENDING'| translate}}
            </ng-template>
          </h1>
          <div class="mt-3" style="border:1px dashed #ddd;padding:20px;background-color: #dad6ff;border-radius:5px"
            *ngIf="(homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED') && isEditPermission && !homeLoan.basicDetail?.isDelete">
            <div class="form-group">
              <h4 class="mb-0 changeStatus">{{'Change Status'| translate}}</h4>
              <ng-select [items]="loanStatuses" class="js-example-basic-single p-0" placeholder="Search by Status"
                bindLabel="status" bindValue="id" name="selectedStatus" [(ngModel)]="selectedStatus"
                (change)="changeStatus(basicmodal)">
                {{homeLoan?.basicDetail?.status}}
              </ng-select>
            </div>
          </div>
          <ng-container *ngIf="homeLoan?.groupDetail">
            <h4 class="mt-5">{{'lbl_group_detail'| translate}}</h4>
            <table class="table" style="margin-bottom: 5px; " aria-label="">
              <tbody>
                <tr>
                  <td style="font-weight: 550;">{{'lbl_partner_code'| translate}}</td>
                  <td>{{homeLoan?.groupDetail?.permanentCode}}</td>
                </tr>
                <tr>
                  <td style="font-weight: 550;">{{'lbl_partner_name'| translate}}</td>
                  <td>{{homeLoan?.groupDetail?.fullName}}</td>
                </tr>
                <tr>
                  <td style="font-weight: 550;">{{'lbl_partner_contact'| translate}}</td>
                  <td>{{homeLoan?.groupDetail?.contactNo}}</td>
                </tr>

                <tr>
                  <td style="font-weight: 550;">{{'lbl_role'| translate}}</td>
                  <td>{{homeLoan?.groupDetail?.roleName}}</td>
                </tr>
              </tbody>
            </table>
          </ng-container>
        </div>
      </div>
    </div>
    <div class="col-lg-8 col-md-6 col-sm-12 px-1">
      <div class="card">
        <div class="card-body p-3" style="height:calc(100vh - 200px);overflow: auto;">
          <div class="tabs-menu">
            <ul ngbNav #nav="ngbNav" class=" nav-tabs profile navtab-custom panel-tabs mb-0">
              <li [ngbNavItem]="1">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-info tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{'lbl_basic_detail'| translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1">
                    <h6 class="sub-title">{{'lbl_more_detail'| translate}}</h6>
                    <dl>

                      <dt>{{'lbl_gender'| translate}} - <span
                          style="font-weight:lighter;">{{homeLoan?.basicDetail?.gender}}</span>
                      </dt>
                      <dt>{{'lbl_marital_status'| translate}} - <span
                          style="font-weight:lighter;">{{homeLoan?.basicDetail?.maritalStatus}}</span>
                      </dt>

                      <dt>{{'lbl_mothers_name'| translate}} - <span
                          style="font-weight:lighter;">{{homeLoan?.basicDetail?.motherName}}</span>
                      </dt>
                      <dt>{{'lbl_permanent_adderss'| translate}} - <span
                          *ngIf="homeLoan?.permanentAddressDetail?.addressLine1"
                          style="font-weight:lighter;">{{homeLoan?.permanentAddressDetail?.label}},
                          {{homeLoan?.permanentAddressDetail?.addressLine1}},
                          {{homeLoan?.permanentAddressDetail?.addressLine2}},
                          {{homeLoan?.permanentAddressDetail?.city}}, {{homeLoan?.permanentAddressDetail?.district}},
                          {{homeLoan?.permanentAddressDetail?.state}}
                          - {{homeLoan?.permanentAddressDetail?.pincode}}</span>
                      </dt>
                      <dt>{{'lbl_loan_type'| translate}} - <span
                          style="font-weight:lighter;">{{homeLoan?.propertyDetail?.loanType}}</span>
                      </dt>
                      <dt>{{'lbl_cibil_score'| translate}} -
                        <span style="font-weight:lighter;">{{homeLoan?.basicDetail?.cibilScore}}</span>
                      </dt>
                      <ng-container *ngFor="let field of homeLoan?.documentMaster">
                        <dt>{{field.name}} -
                          <span style="font-weight:lighter;">{{field.documentData}}</span>
                        </dt>
                      </ng-container>
                    </dl>
                  </div>
                  <div class="p-1 border-top" *ngIf="homeLoan?.propertyDetail?.loanType == 'Bank Transfer'">
                    <h6 class="sub-title">{{'lbl_loan_transfer_detail'| translate}}</h6>
                    <div class="row">
                      <div class="col-lg-6">
                        <dl>
                          <dt>{{'lbl_loan_amount_taken_existing'| translate}} - <span
                              style="font-weight:lighter;">{{homeLoan?.transferPropertyDetail?.loanAmountTakenExisting}}</span>
                          </dt>
                          <dt>{{'lbl_approx_current_emi'| translate}} - <span
                              style="font-weight:lighter;">{{homeLoan?.transferPropertyDetail?.approxCurrentEMI}}</span>
                          </dt>
                          <dt>{{'lbl_approx_date'| translate}} - <span
                              style="font-weight:lighter;">{{homeLoan?.transferPropertyDetail?.approxDate
                              | date}}</span>
                          </dt>
                          <dt>{{'lbl_bank'| translate}} - <span
                              style="font-weight:lighter;">{{homeLoan?.transferPropertyDetail?.bankName}}</span>
                          </dt>
                          <dt *ngIf="homeLoan?.transferPropertyDetail?.topupAmount != null">
                            {{'lbl_top_up_amount'| translate}} -
                            <span style="font-weight:lighter;">{{homeLoan?.transferPropertyDetail?.topupAmount}}
                            </span>
                          </dt>
                        </dl>
                      </div>
                    </div>
                  </div>
                  <div class="p-1 border-top">
                    <h6 class="sub-title">{{'lbl_employment_detail'| translate}}</h6>
                    <div class="row">
                      <div class="col-lg-12">
                        <dl>
                          <dt>{{'lbl_employment'| translate}} - <span
                              style="font-weight:lighter;">{{homeLoan?.basicDetail?.employmentType}}</span>
                          </dt>
                          <dt>{{'lbl_monthly_salary'| translate}} - <span
                              style="font-weight:lighter;">{{homeLoan?.basicDetail?.monthlyIncome
                              | currency:'INR':'symbol'}}</span>
                          </dt>
                          <dt>{{'lbl_type_of_industry'| translate}} - <span
                              style="font-weight:lighter;">{{homeLoan?.employmentDetail?.industryType}}</span>
                          </dt>
                          <dt>{{'lbl_office_pincode'| translate}} - <span
                              style="font-weight:lighter;">{{homeLoan?.employmentDetail?.pincode}}</span>
                          </dt>
                          <dt>{{'lbl_work_address'| translate}} -
                            <span style="font-weight:lighter;">{{homeLoan?.employmentDetail?.label}},
                              {{homeLoan?.employmentDetail?.addressLine1}},
                              {{homeLoan?.employmentDetail?.addressLine2}}, {{homeLoan?.employmentDetail?.city}},
                              {{homeLoan?.employmentDetail?.district}}, {{homeLoan?.employmentDetail?.state}}
                              - {{homeLoan?.employmentDetail?.pincode}}
                            </span>
                          </dt>
                        </dl>
                      </div>
                    </div>
                  </div>
                  <div class="p-1 border-top">
                    <h6 class="sub-title">{{'home_loan_detail_lbl_property_detail'| translate}}</h6>
                    <div class="row">
                      <div class="col-lg-12">
                        <dl>

                          <dt>{{'home_loan_detail_lbl_property_type'| translate}} -
                            <span style="font-weight:lighter;">{{homeLoan?.propertyDetail?.propertyType}}
                            </span>
                          </dt>
                          <div>
                            <dt>{{'lbl_property_purchase_value'| translate}} -
                              <span
                                style="font-weight:lighter;">{{currency}}{{homeLoan?.propertyDetail?.propertyPurchaseValue}}</span>
                            </dt>
                          </div>
                          <dt>{{'home_loan_detail_lbl_address_for_property'| translate}} -
                            <span style="font-weight:lighter;">{{homeLoan?.propertyDetail?.addressLine1}}
                              <span *ngIf="homeLoan?.propertyDetail?.addressLine2">
                                ,{{homeLoan?.propertyDetail?.addressLine2}}, {{homeLoan?.propertyDetail?.propertyCity}},
                                {{homeLoan?.propertyDetail?.propertyDistrict}},
                                {{homeLoan?.propertyDetail?.propertyState}}
                                - {{homeLoan?.propertyDetail?.pincode}}
                              </span>
                            </span>
                          </dt>
                          <ng-container *ngIf="homeLoan.propertyDetail?.loanType != 'New'">
                            <dt>{{'lbl_loan_amount_taken_in_existing_loan'| translate}} -
                              <span
                                style="font-weight:lighter;">{{currency}}{{homeLoan?.transferPropertyDetail?.loanAmountTakenExisting}}
                              </span>
                            </dt>
                            <dt>{{'lbl_approx_date_for_loan_taken'| translate}} -
                              <span style="font-weight:lighter;">{{homeLoan?.transferPropertyDetail?.approxDate
                                | date}}
                              </span>
                            </dt>
                            <dt>{{'lbl_approx_current_emi'| translate}} -
                              <span
                                style="font-weight:lighter;">{{currency}}{{homeLoan?.transferPropertyDetail?.approxCurrentEMI}}
                              </span>
                            </dt>
                            <dt>{{'lbl_bank'| translate}} -
                              <span
                                style="font-weight:lighter;">{{currency}}{{homeLoan?.transferPropertyDetail?.bankName}}
                              </span>
                            </dt>
                            <dt *ngIf="homeLoan?.transferPropertyDetail?.topupAmount">
                              {{'lbl_top_up_amount'| translate}}
                              <span *ngIf="homeLoan?.transferPropertyDetail?.topupAmount">
                                -
                                {{currency}}{{homeLoan?.transferPropertyDetail?.topupAmount}}</span>
                            </dt>

                          </ng-container>
                        </dl>
                      </div>
                    </div>
                  </div>
                  <div class="p-1 border-top">
                    <h6 class="sub-title">{{'lbl_loan_amount'| translate}}</h6>
                    <dl>
                      <dt>{{'lbl_loan_amount'| translate}} - <span
                          style="font-weight:lighter;">{{homeLoan?.basicDetail?.loanAmount
                          | currency:'INR':'symbol'}}</span>
                      </dt>
                    </dl>
                  </div>
                  <div class="text-center">
                    <button
                      *ngIf="(homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED' && homeLoan?.basicDetail?.status != 'DISBURSED' && homeLoan?.basicDetail?.status != 'SANCTIONED') && isEditPermission && !homeLoan.basicDetail?.isDelete"
                      type="button" class="btn btn-info filterbtn" title="{{ 'tooltip_lbl_accept' |translate}}"
                      (click)="acceptApplication('ACCEPT',basicmodal)"
                      [disabled]="homeLoan?.basicDetail?.status === 'ACCEPT APPLICATION'">
                      <span>{{'button_lbl_accept'| translate}}</span>
                    </button>
                    <button
                      *ngIf="isEditPermission && homeLoan?.basicDetail?.status != 'COMPLETED' && homeLoan?.basicDetail?.status != 'DISBURSED' &&  !homeLoan.basicDetail?.isDelete"
                      type="button" class="btn btn-info filterbtn" title="{{ 'tooltip_lbl_reject' |translate}}"
                      (click)="acceptApplication('REJECT',basicmodal)"
                      [disabled]="homeLoan?.basicDetail?.status === 'REJECTED'">
                      <span>{{'button_lbl_reject'| translate}}</span>
                    </button>
                  </div>
                </ng-template>

              </li>
              <li [ngbNavItem]="2">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="icofont icofont-file-document tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{'lbl_uploaded_documents'| translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="file-content">
                    <div class="p-1 file-manager">
                      <div class="row mx-0" *ngIf="homeLoan.loanDocuments.length>0 else NoDocument">
                        <div class="col-lg-4 col-md-6 col-sm-12 mt-2" *ngFor="let doc of homeLoan?.loanDocuments">
                          <div>
                            <a href="{{doc.documentUrl}}" target="_blank" *ngIf="!doc.isPdf"
                              class="form-control document" type="upload" id="resume">
                              <div>
                                <div class="fileUpload text-center">
                                  <i class="fa fa-file-pdf txt-info" style="font-size:30px"></i>
                                  <h4 class="px-2 pb-2">{{doc.documentName}}</h4>
                                </div>
                                <div class="form-group m-t-15 m-checkbox-inline mb-0 custom-radio-ml ml-2">
                                  <div class="radio radio-primary">
                                    <input [id]="doc.loanDocumentId + '_7'" type="radio" [name]="doc.loanDocumentId"
                                      value="PENDING" [checked]="doc.documentStatus =='PENDING'"
                                      (click)="getStatus($event,doc)">
                                    <label class="mb-0" [for]="doc.loanDocumentId + '_7'">{{'lbl_pending'|
                                      translate}}</label>
                                  </div>
                                  <div class="radio radio-primary">
                                    <input [id]="doc.loanDocumentId + '_4'" type="radio" [name]="doc.loanDocumentId"
                                      value="REVIEW" [checked]="doc.documentStatus=='REVIEW'"
                                      (click)="getStatus($event,doc)">
                                    <label class="mb-0" [for]="doc.loanDocumentId + '_4'">{{'lbl_review'|
                                      translate}}</label>
                                  </div>
                                  <div class="radio radio-primary">
                                    <input [id]="doc.loanDocumentId + '_5'" type="radio" [name]="doc.loanDocumentId"
                                      value="APPROVED" [checked]="doc.documentStatus=='APPROVED'"
                                      (click)="getStatus($event,doc)">
                                    <label class="mb-0" [for]="doc.loanDocumentId + '_5'">{{'lbl_approved'|
                                      translate}}</label>
                                  </div>
                                  <div class="radio radio-primary">
                                    <input [id]="doc.loanDocumentId + '_6'" type="radio" [name]="doc.loanDocumentId"
                                      value="REJECTED" [checked]="doc.documentStatus=='REJECTED'"
                                      (click)="getStatus($event,doc)">
                                    <label class="mb-0" [for]="doc.loanDocumentId + '_6'">{{'lbl_rejected'|
                                      translate}}</label>
                                  </div>
                                </div>
                              </div>
                            </a>

                            <a href="{{doc.documentUrl}}" target="_blank" *ngIf="doc.isPdf"
                              class="form-control document" type="upload" id="resume">
                              <div>
                                <div class="fileUpload">
                                  <i class="fa fa-file-pdf txt-info" style="font-size:30px"></i>
                                  <h4 class="px-2 pb-2">{{doc.documentName}}</h4>
                                </div>
                                <div class="form-group m-t-15 m-checkbox-inline mb-0 custom-radio-ml ml-2">
                                  <div class="radio radio-primary">
                                    <input [id]="doc.loanDocumentId + '_8'" type="radio" [name]="doc.loanDocumentId"
                                      value="PENDING" [checked]="doc.documentStatus =='PENDING'"
                                      (click)="getStatus($event,doc)">
                                    <label class="mb-0" [for]="doc.loanDocumentId + '_8'">{{'lbl_pending'|
                                      translate}}</label>
                                  </div>
                                  <div class="radio radio-primary">
                                    <input [id]="doc.loanDocumentId + '_4'" type="radio" [name]="doc.loanDocumentId"
                                      value="REVIEW" [checked]="doc.documentStatus=='REVIEW'"
                                      (click)="getStatus($event,doc)">
                                    <label class="mb-0" [for]="doc.loanDocumentId + '_4'">{{'lbl_review'|
                                      translate}}</label>
                                  </div>
                                  <div class="radio radio-primary">
                                    <input [id]="doc.loanDocumentId + '_5'" type="radio" [name]="doc.loanDocumentId"
                                      value="APPROVED" [checked]="doc.documentStatus=='APPROVED'"
                                      (click)="getStatus($event,doc)">
                                    <label class="mb-0" [for]="doc.loanDocumentId + '_5'">{{'lbl_approved'|
                                      translate}}</label>
                                  </div>
                                  <div class="radio radio-primary">
                                    <input [id]="doc.loanDocumentId + '_6'" type="radio" [name]="doc.loanDocumentId"
                                      value="REJECTED" [checked]="doc.documentStatus=='REJECTED'"
                                      (click)="getStatus($event,doc)">
                                    <label class="mb-0" [for]="doc.loanDocumentId + '_6'">{{'lbl_rejected'|
                                      translate}}</label>
                                  </div>
                                </div>
                              </div>
                            </a>

                          </div>
                        </div>
                        <div class="my-2  col-lg-12 text-center">
                          <button
                            *ngIf="(homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED') && isEditPermission && !homeLoan.basicDetail?.isDelete"
                            type="button" class="btn btn-info filterbtn" title="{{ 'tooltip_lbl_verify' |translate}}"
                            (click)="approvedDocument()"
                            [disabled]="homeLoan?.basicDetail?.status === 'DOCUMENT VERIFIED'">
                            <span>{{'button_lbl_verify'| translate}}</span>
                          </button>
                          <button
                            *ngIf="(homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED') && isEditPermission && !homeLoan.basicDetail?.isDelete"
                            type="button" class="btn btn-info filterbtn"
                            title="{{ 'tooltip_lbl_generate_pendancy' |translate}}"
                            (click)="approvedDocument('pendency')"
                            [disabled]="homeLoan?.basicDetail?.status === 'DOCUMENT VERIFIED'">
                            <span>{{'button_lbl_generate_pendancy'| translate}}</span>
                          </button>
                        </div>
                      </div>
                      <ng-template #NoDocument>
                        <div class="d-flex vertical-center nodata">
                        </div>
                      </ng-template>
                    </div>
                  </div>
                  <div class="p-1 border-top">
                    <div class="file-content border-top">
                      <div class="p-1 file-manager">
                        <h6 class="sub-title" style="opacity: 1;">{{'lbl_references'| translate}}
                        </h6>
                        <ul class="files" *ngIf="homeLoan?.loanReferences?.length>0">
                          <ng-container *ngFor="let reference of homeLoan?.loanReferences; let i = index">
                            <li class="file-box m-1">
                              <div class="file-bottom">
                                <h6><span style="font-weight: 600;">{{'lbl_name'|
                                    translate}}:</span>
                                  {{reference.fullName}}
                                </h6>
                                <h6><span style="font-weight: 600;">{{'lbl_contact_no'|
                                    translate}}:</span>
                                  {{reference.contactNo}}
                                </h6>
                              </div>
                            </li>
                          </ng-container>

                        </ul>
                      </div>
                    </div>


                  </div>
                </ng-template>
              </li>
              <li [ngbNavItem]="3">
                <a ngbNavLink (click)="getGeneratedOffer()">
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-info tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{'lbl_eligible_banks'| translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <ng-container *ngIf="this.homeLoan.offers && this.homeLoan.offers.length > 0 else NoOffer">
                    <div class="table-responsive userlist-table"
                      style="height: calc(100vh - 340px); overflow-y: hidden;">
                      <table mat-table [dataSource]="this.homeLoan.offers"
                        class="detailTable mat-elevation-z8 table-striped table-vcenter"
                        style="min-width: 1200px; box-shadow: none;" aria-label="">
                        <ng-container matColumnDef="id">
                          <th mat-header-cell *matHeaderCellDef style="width:7%">#</th>
                          <td mat-cell *matCellDef="let element; let i = index;" style="width:7%">
                            <input id="checkbox-info-1" type="checkbox" class="mr-2"
                              [checked]="element.status == 'ACCEPT'"
                              [disabled]="element.fileStatus || (homeLoan?.basicDetail?.status == 'REJECTED') && !isEditPermission && homeLoan.basicDetail?.isDelete"
                              (change)="selectBank($event,element)">{{i
                            + 1}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="bankName">
                          <th mat-header-cell *matHeaderCellDef style="width:10%;">{{'lbl_bank'|
                            translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;" style="width:10%">
                            {{element.bankName}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="cibilScore">
                          <th mat-header-cell *matHeaderCellDef>
                            {{'lbl_cibil_score'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.cibilScore}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="age">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_age'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.minAge}} - {{element.maxAge}} Years
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="roi">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_roi'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.ROI}}%
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="tenure">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_tenure'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.tenure}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="loanAmount">
                          <th mat-header-cell *matHeaderCellDef>
                            {{'lbl_loan_amount'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.minLoanAmount}} -
                            {{currency}}{{element.maxLoanAmount}}
                          </td>
                        </ng-container>
                        <!-- <ng-container matColumnDef="minimumIncome">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_min_income'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.minIncome}}
                          </td>
                        </ng-container> -->
                        <ng-container matColumnDef="fileStatus">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_status'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.fileStatus}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="action" stickyEnd>
                          <th mat-header-cell *matHeaderCellDef style="width:7%">{{'lbl_action'|
                            translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;" style="width:7%">
                            <button
                              *ngIf="element.status == 'ACCEPT' && (homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED') && isEditPermission && !homeLoan.basicDetail?.isDelete && element.offerStatus != 'SANCTIONED'"
                              mat-button [matMenuTriggerFor]="menu" (click)="toggleMenuService.toggleMenuStyles()">
                              <a href="javascript:;" class="btn btn-sm btn-info filterbtn"
                                title="{{ 'tooltip_lbl_change_status' |translate}}">
                                <i class="fa fa-forward"></i>
                              </a></button>
                            <mat-menu #menu="matMenu">
                              <div mat-menu-item class="p-0 mx-2 h-100">
                                <div *ngIf="element.fileStatus != 'FileApproved'"
                                  (click)="changeFileStatus(element,'FileApproved')">
                                  <a title="" href="javascript:;">{{'lbl_file_approved'|
                                    translate}}
                                  </a>
                                </div>
                                <div *ngIf="element.fileStatus != 'FileREJECT'"
                                  (click)="changeFileStatus(element,'FileREJECT')">
                                  <a title="" href="javascript:;">{{'lbl_file_rejected'|
                                    translate}}
                                  </a>
                                </div>
                                <div *ngIf="element.fileStatus != 'DOCUMENTPENDENCY'"
                                  (click)="changeFileStatus(element,'DOCUMENTPENDENCY')">
                                  <a title="" href="javascript:;">{{'button_lbl_generate_pendancy'| translate}}
                                  </a>
                                </div>
                              </div>
                            </mat-menu>

                          </td>
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="offerColumn; sticky: true"></tr>
                        <tr mat-row *matRowDef="let row; columns:offerColumn ;" class="student-element-row"
                          style="cursor: pointer;" [ngStyle]="{background:row.status =='ACCEPT'?'#dad6ff':'#fff'}">
                        </tr>
                      </table>
                      <div *ngIf="!homeLoan.basicDetail?.isDelete && (homeLoan.basicDetail?.status != 'REJECTED')"
                        class="my-2  col-lg-12 text-center">
                        <button type="button" class="btn btn-info filterbtn"
                          style="padding: 10px 12px;border-radius: 10px;margin: 0 3px;position: fixed;"
                          title="{{ 'tooltip_lbl_save' |translate}}" (click)="addBankForFileUpload()">
                          <span>{{'button_lbl_save'| translate}}</span>
                        </button>
                      </div>
                    </div>
                  </ng-container>
                  <ng-template #NoOffer>
                    <div class="d-flex vertical-center nodata">
                    </div>
                  </ng-template>
                </ng-template>
              </li>
              <li [ngbNavItem]="4">
                <a ngbNavLink (click)="getBank()">
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-info tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{'lbl_bank_offer'| translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <ng-container>
                    <div class="col-lg-12">
                      <form [formGroup]="loanDetailForm"
                        *ngIf="(homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED') && isEditPermission && !homeLoan.basicDetail?.isDelete">
                        <div class="row mt-2">
                          <div class="col-lg-4">
                            <div class="form-group">
                              <label for="name">{{'lbl_select_bank'| translate}}</label>
                              <ng-select [items]="banks" class="js-example-basic-single p-0" formControlName="bankId"
                                placeholder="{{'lbl_select_bank'| translate}}" bindLabel="namedata" bindValue="id"
                                name="bank" (change)="changeSelecedBank($event)" required>
                              </ng-select>
                              <mat-error
                                *ngIf="(loanDetailForm.get('bankId') && !loanDetailForm.get('bankId')!.valid && loanDetailForm.get('bankId')!.touched)">
                                {{'message_lbl_bank_is_required'| translate}}
                              </mat-error>
                            </div>
                          </div>
                          <div class="col-lg-4">
                            <div class="form-group">
                              <label for="name">{{'lbl_reference_no'| translate}}</label>
                              <input class="form-control" type="text" name="refernce" formControlName="refrenceNo"
                                required>
                              <mat-error
                                *ngIf="(loanDetailForm.get('refrenceNo') && !loanDetailForm.get('refrenceNo')!.valid && loanDetailForm.get('refrenceNo')!.touched)">
                                {{'message_lbl_reference_no_is_required'| translate}}
                              </mat-error>
                            </div>
                          </div>

                          <div class="col-lg-4">
                            <div class="form-group">
                              <label for="name">{{'lbl_amount_disbursed'| translate}}</label>
                              <input class="form-control" type="text" name="refernce" formControlName="amountDisbursed"
                                required onlyNumbers (keyup)="calculateEMI()">
                              <mat-error
                                *ngIf="(loanDetailForm.get('amountDisbursed') && !loanDetailForm.get('amountDisbursed')!.valid && loanDetailForm.get('amountDisbursed')!.touched)">
                                {{'message_lbl_disbursed_amount_is_required'| translate}}
                              </mat-error>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-lg-4">
                            <div class="form-group">
                              <label for="name">{{'lbl_interest_rate_percent'| translate}}</label>
                              <input class="form-control" type="text" name="refernce" formControlName="ROI" required
                                NumberWithDecimal maxlength="5" (keyup)="calculateEMI()">
                              <mat-error
                                *ngIf="(loanDetailForm.get('lbl_roi') && !loanDetailForm.get('lbl_roi')!.valid && loanDetailForm.get('lbl_roi')!.touched)">
                                {{'message_lbl_roi_is_required'| translate}}
                              </mat-error>
                            </div>
                          </div>

                          <div class="col-lg-4">
                            <div class="form-group">
                              <label for="name">{{'lbl_tenure_month'| translate}}</label>
                              <input class="form-control" type="text" name="refernce" formControlName="tenure" required
                                onlyNumbers (keyup)="calculateEMI()">
                              <mat-error
                                *ngIf="(loanDetailForm.get('tenure') && !loanDetailForm.get('tenure')!.valid && loanDetailForm.get('tenure')!.touched)">
                                {{'message_lbl_tenure_is_required'| translate}}
                              </mat-error>
                            </div>
                          </div>
                          <div
                            *ngIf="!(loanDetailForm.get('termsCondition')&& loanDetailForm.get('termsCondition')!.value)"
                            class="col-lg-12">
                            <a class="form-control" type="upload" id="resume"
                              style="height: 100px; width: 100%; text-align: center; border-style: dashed; border-color: rgb(63, 105, 223);display: flex;align-items: center;"
                              (click)="fileInput.click()">
                              <div class="absolute text-center m-auto">

                                <i class="fa fa-file-text txt-info" style="font-size:30px"></i>
                                <h4 class="mb-0">{{'lbl_tap_to_upload_terms_Condition'|
                                  translate}}</h4>

                              </div>
                            </a>
                            <input type="file" #fileInput id="uploadFile" (change)="selectedImage($event)" name="photo"
                              accept="application/pdf" style="display:none;" />
                          </div>
                          <ng-container
                            *ngIf="(loanDetailForm.get('termsCondition') && loanDetailForm.get('termsCondition')!.value)">
                            <div class="col-lg-12">

                              <a class="form-control" type="upload" id="resume"
                                style="height: 125px; width: 100%; text-align: center; border: 1px solid #f1f1f1;align-items: center;background-color: #f6f7fb">
                                <div class="fileUpload text-center">
                                  <div>
                                    <i class="fa fa-file-pdf txt-info" style="font-size:30px"></i>
                                  </div>
                                  <div>
                                    <a class="btn btn-sm btn-info filterbtn" (click)="fileInput.click()">
                                      {{'button_lbl_change'| translate}}
                                    </a>
                                    <a class="btn btn-sm btn-info filterbtn"
                                      (click)="debugBase64(loanDetailForm.get('termsCondition')!.value)"
                                      target="_blank">
                                      {{'button_lbl_view'| translate}}
                                    </a>
                                  </div>
                                </div>
                              </a>
                            </div>
                            <input type="file" #fileInput id="uploadFile" (change)="selectedImage($event)" name="photo"
                              accept="application/pdf" style="display:none;" />
                          </ng-container>
                        </div>
                      </form>
                    </div>
                    <div class="col-lg-12 mt-2">
                      <button type="button" class="btn btn-info filterbtn" title="{{ 'tooltip_lbl_save' |translate}}"
                        (click)="addBankOfferInList()"
                        *ngIf="(homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED') && isEditPermission && !homeLoan.basicDetail?.isDelete">
                        <span>{{'button_lbl_add_more'| translate}}</span>
                      </button>
                      <button type="button" class="btn btn-info filterbtn" title="{{ 'tooltip_lbl_save' |translate}}"
                        (click)="addBankOfferInList()"
                        *ngIf="(homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED') && isEditPermission && !homeLoan.basicDetail?.isDelete">
                        <span>{{'button_lbl_save'| translate}}</span>
                      </button>
                      <button type="button" class="btn btn-info filterbtn"
                        title="{{ 'tooltip_lbl_share_and_save' |translate}}" (click)="addBankOfferInList('share')"
                        *ngIf="(homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED') && isEditPermission && !homeLoan.basicDetail?.isDelete">
                        <span>{{'button_lbl_share_and_save'| translate}}</span>
                      </button>
                    </div>
                  </ng-container>

                  <ng-container *ngIf="homeLoan.bankOffers && homeLoan.bankOffers.length > 0">
                    <div class="table-responsive userlist-table"
                      style="height: calc(100vh - 340px); overflow-y: hidden;">
                      <table mat-table [dataSource]="this.homeLoan.bankOffers"
                        class="mat-elevation-z8 table-striped table-vcenter"
                        style="min-width: 1100px; box-shadow: none;" aria-label="">
                        <ng-container matColumnDef="id">
                          <th mat-header-cell *matHeaderCellDef style="width:5%">#</th>
                          <td mat-cell *matCellDef="let element; let i = index;" style="width:5%">
                            {{i + 1}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="bankName">
                          <th mat-header-cell *matHeaderCellDef style="width: 12%;">{{'lbl_bank'|
                            translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;" style="width: 12%;">
                            {{element.bankName}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="referenceNo">
                          <th mat-header-cell *matHeaderCellDef>
                            {{'lbl_reference_no'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.refrenceNo}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="amountDisbursed">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_amount_disbursed'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.amountDisbursed}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="roi">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_roi'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.ROI}}%
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="tenure">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_tenure'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.tenure}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="EMI">
                          <th mat-header-cell *matHeaderCellDef>
                            {{'lbl_emi'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.emi}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="totalInterest">
                          <th mat-header-cell *matHeaderCellDef style="width: 10%;">
                            {{'lbl_interest_payable'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;" style="width: 10%;">
                            {{currency}}{{element.totalInterest}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="totalAmount">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_total_amount'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.totalPayment}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="action" stickyEnd>
                          <th colspan="2" mat-header-cell *matHeaderCellDef class="text-right" style="width: 5%;">
                            {{'lbl_action'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;" colspan="2" class="text-right"
                            style="width: 5%;">
                            <button *ngIf="element.isAccept || element.isAccept == null" mat-button
                              [matMenuTriggerFor]="beforeMenu" (click)="toggleMenuService.toggleMenuStyles()"> <a
                                href="javascript:;" class="btn btn-sm btn-info filterbtn"
                                title="{{ 'tooltip_lbl_action' |translate}}">
                                <i class="fa fa-angle-down"></i>
                              </a></button>
                            <mat-menu #beforeMenu="matMenu" xPosition="before">
                              <div (click)="editBankOffer(element)" mat-menu-item class="p-0 mx-2">
                                <a title="{{ 'tooltip_lbl_edit_offer' |translate}}" href="javascript:;"
                                  class="btn btn-sm btn-info filterbtn"
                                  style="padding: 10px 12px;border-radius: 10px;margin: 0 2px;">
                                  <i class="fa fa-pen"></i>
                                </a>{{'lbl_edit_offer'| translate}}
                              </div>
                              <div (click)="acceptOffer(element,true,'SANCTIONED')" mat-menu-item class="p-0 mx-2">
                                <a title="{{ 'tooltip_lbl_accept_offer' |translate}}" href="javascript:;"
                                  class="btn btn-sm btn-info filterbtn"
                                  style="padding: 10px 12px;border-radius: 10px;margin: 0 2px;">
                                  <i class="fa fa-check"></i>
                                </a>{{'lbl_accept_offer'| translate}}
                              </div>
                              <div mat-menu-item (click)="acceptOffer(element,false)" class="p-0 mx-2">
                                <a title="{{ 'tooltip_lbl_reject_offer' |translate}}" href="javascript:;"
                                  class="btn btn-sm btn-info filterbtn"
                                  style="padding: 10px 12px;border-radius: 10px;margin: 0 2px;">
                                  <i class="fa fa-close"></i>
                                </a>{{'lbl_reject_offer'| translate}}
                              </div>
                              <div (click)="showChart(element,chartmodal)" mat-menu-item class="p-0 mx-2">
                                <a title="{{ 'tooltip_lbl_show_chart' |translate}}" href="javascript:;"
                                  class="btn btn-sm btn-info filterbtn"
                                  style="padding: 10px 12px;border-radius: 10px;margin: 0 2px;">
                                  <i class="fa fa-bar-chart "></i>
                                </a>{{'lbl_show_chart'| translate}}
                              </div>
                            </mat-menu>
                          </td>
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="bankOfferColumn; sticky: true">
                        </tr>
                        <tr mat-row *matRowDef="let row; columns:bankOfferColumn ;" class="student-element-row"
                          style="cursor: pointer;" [ngStyle]="{background:row.status =='ACCEPT'?'#dad6ff':'#fff'}">
                        </tr>
                      </table>
                    </div>
                  </ng-container>
                </ng-template>
              </li>
              <li [ngbNavItem]="5">
                <a ngbNavLink (click)="getSanctionedApplication()">
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-info tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{'lbl_sanctioned_bank_offer'| translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <ng-container
                    *ngIf="homeLoan.sanctionedApplication && homeLoan.sanctionedApplication.length > 0 else NoData">
                    <div class="table-responsive userlist-table"
                      style="height: calc(100vh - 340px); overflow-y: hidden;">
                      <table mat-table [dataSource]="this.homeLoan.sanctionedApplication"
                        class="mat-elevation-z8 table-striped table-vcenter" style="min-width: 1200px;box-shadow: none;"
                        aria-label="">
                        <ng-container matColumnDef="id">
                          <th mat-header-cell *matHeaderCellDef style="width:50px">#</th>
                          <td mat-cell *matCellDef="let element; let i = index;" style="width:50px">
                            {{i + 1}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="bankName">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_bank'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.bankName}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="referenceNo">
                          <th mat-header-cell *matHeaderCellDef>
                            {{'lbl_reference_no'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.refrenceNo}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="amountDisbursed">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_amount_disbursed'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.amountDisbursed}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="roi">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_roi'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.ROI}}%
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="tenure">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_tenure'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.tenure}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="EMI">
                          <th mat-header-cell *matHeaderCellDef>
                            {{'lbl_emi'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.emi}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="totalInterest">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_interest_payable'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.totalInterest}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="totalAmount">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_total_amount'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.totalPayment}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="action" stickyEnd>
                          <th mat-header-cell *matHeaderCellDef class="text-right">{{'lbl_action'|
                            translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;" class="text-right">
                            <a title="{{ 'tooltip_lbl_show_chart' |translate}}" href="javascript:;"
                              class="btn btn-sm btn-info filterbtn"
                              style="padding: 10px 12px;border-radius: 10px;margin: 0 2px;"
                              (click)="showChart(element,chartmodal)">
                              <i class="fa fa-bar-chart "></i>
                            </a>
                            <a *ngIf="(homeLoan?.basicDetail?.status != 'REJECTED'  && homeLoan?.basicDetail?.status != 'COMPLETED') && isEditPermission && !homeLoan.basicDetail?.isDelete"
                              title="{{ 'tooltip_lbl_disbursed_application' |translate}}" href="javascript:;"
                              class="btn btn-sm btn-info filterbtn"
                              style="padding: 10px 12px;border-radius: 10px;margin: 0 2px;"
                              (click)="disbursedApplication(element)">
                              <i class="fa fa-forward "></i>
                            </a>
                          </td>
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="bankOfferColumn; sticky: true">
                        </tr>
                        <tr mat-row *matRowDef="let row; columns:bankOfferColumn ;" class="student-element-row"
                          style="cursor: pointer;">
                        </tr>
                      </table>
                    </div>
                  </ng-container>
                  <ng-template #NoData>
                    <div class="d-flex vertical-center nodata">

                    </div>
                  </ng-template>
                </ng-template>
              </li>
              <li [ngbNavItem]="6">
                <a ngbNavLink (click)="getDisbursedApplication()">
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-info tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{'lbl_disbursed_bank_offer'| translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <ng-container
                    *ngIf="homeLoan.disbursedApplication && homeLoan.disbursedApplication.length > 0 else NoData">
                    <div class="table-responsive userlist-table"
                      style="height: calc(100vh - 340px); overflow-y: hidden;">
                      <table mat-table [dataSource]="this.homeLoan.disbursedApplication"
                        class="mat-elevation-z8 table-striped table-vcenter"
                        style="min-width: 1200px; box-shadow: none;" aria-label="">
                        <ng-container matColumnDef="id">
                          <th mat-header-cell *matHeaderCellDef style="width:50px">#</th>
                          <td mat-cell *matCellDef="let element; let i = index;" style="width:50px">
                            {{i + 1}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="bankName">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_bank'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.bankName}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="referenceNo">
                          <th mat-header-cell *matHeaderCellDef>
                            {{'lbl_reference_no'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.refrenceNo}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="amountDisbursed">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_amount_disbursed'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.amountDisbursed}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="roi">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_roi'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.ROI}}%
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="tenure">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_tenure'| translate}}</th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{element.tenure}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="EMI">
                          <th mat-header-cell *matHeaderCellDef>
                            {{'lbl_emi'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.emi}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="totalInterest">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_interest_payable'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.totalInterest}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="totalAmount">
                          <th mat-header-cell *matHeaderCellDef>{{'lbl_total_amount'| translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;">
                            {{currency}}{{element.totalPayment}}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="action" stickyEnd>
                          <th mat-header-cell *matHeaderCellDef class="text-right">{{'lbl_action'|
                            translate}}
                          </th>
                          <td mat-cell *matCellDef="let element; let i = index;" class="text-right">
                            <a title="{{ 'tooltip_lbl_show_chart' |translate}}" href="javascript:;"
                              class="btn btn-sm btn-info filterbtn"
                              style="padding: 10px 12px;border-radius: 10px;margin: 0 2px;"
                              (click)="showChart(element,chartmodal)">
                              <i class="fa fa-bar-chart "></i>
                            </a>
                          </td>
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="bankOfferColumn; sticky: true">
                        </tr>
                        <tr mat-row *matRowDef="let row; columns:bankOfferColumn ;" class="student-element-row"
                          style="cursor: pointer;">
                        </tr>
                      </table>
                    </div>
                  </ng-container>
                  <ng-template #NoData>
                    <div class="d-flex vertical-center nodata">
                    </div>
                  </ng-template>
                </ng-template>
              </li>
            </ul>
          </div>
          <div class="mt-3 border-left border-bottom border-right border-top">
            <div [ngbNavOutlet]="nav" class="mt-1 mb-1 tab-content personalloantab"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #basicmodal let-modal>
  <div>

    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body mainmodal p-0">
      <ng-container *ngIf="selectedStatus == 2">
        <form>
          <div class="setup-content" id="step-1">
            <div class="col-xs-12">
              <div class="col-md-12">
                <div class="form-group">
                  <div class="col-form-label">{{'lbl_select_rm'| translate}}</div>
                  <ng-select [items]="rmUsers" class="js-example-basic-single p-0" [formControl]="myControl"
                    placeholder="Select RM" bindLabel="fullName" bindValue="id" name="rm" (change)="isRmSelect()">
                  </ng-select>
                  <mat-error *ngIf="rmError">
                    {{'message_lbl_rm_selection_is_required'| translate}}
                  </mat-error>
                </div>
              </div>
            </div>
          </div>

        </form>
      </ng-container>
      <ng-container *ngIf="selectedStatus == 14">
        <div class="col-lg-12 mt-1">
          <div class="form-group">
            <label for="reasons">{{'lbl_reason'| translate}}</label>
            <textarea class="form-control" type="text" id="reasons" [formControl]="reason" rows="4" required></textarea>
            <mat-error *ngIf="(reasonError)">
              {{'message_lbl_reason_is_required'| translate}}
            </mat-error>
          </div>
        </div>
        <div class="col-lg-12">
          <button class="btn btn-info filterbtn " type="submit" (click)="addMoreReason()"><i class="fa fa-plus"></i>
            {{'lbl_add_more_reason'|
            translate}}</button>
        </div>
        <div *ngIf="isAddMoreReason">
          <div class="col-lg-12">
            <div class="form-group">
              <label>{{'lbl_reason'| translate}}</label>
              <input class="form-control" type="text" name="rejectReason" [formControl]="rejectReason">
            </div>
            <div class="form-group">
              <label for="reasons">{{'lbl_description'| translate}}</label>
              <textarea class="form-control" type="text" id="description" name="desc" [formControl]="reasonDescription"
                rows="4"></textarea>
            </div>
          </div>
        </div>
        <div class="col-lg-12">
          <mat-expansion-panel class="mt-2" *ngFor="let reason of reasons;let i = index" hideToggle [expanded]="i == 0">
            <mat-expansion-panel-header>
              <mat-panel-description [ngStyle]="{'color':(reason.isCollapsed == false) ? '#fff':'#221668'}">
                {{reason.reason}}
              </mat-panel-description>
              <mat-icon style="text-align: right;"> <i class='icon-trash' (click)="removeReason(reason,i)"></i>
              </mat-icon>
            </mat-expansion-panel-header>
            <p style="text-align: justify;" class="mt-2">
              {{reason.description}}
          </mat-expansion-panel>
        </div>
      </ng-container>

    </div>
    <div class="modal-footer">
      <button *ngIf="selectedStatus == 2" class="btn btn-info filterbtn pull-right " type="submit"
        (click)="assignRM()">{{'lbl_assign'|
        translate}}</button>
      <button *ngIf="selectedStatus == 14" class="btn btn-info filterbtn pull-right " type="submit"
        (click)="insertRejectionReason()">{{'button_lbl_reject'| translate}}</button>
      <button class="btn btn-secondary filterbtn pull-right " (click)="modal.dismiss('Cross click')">
        {{'button_lbl_cancel'| translate}}
      </button>
    </div>
  </div>
</ng-template>

<ng-template #chartmodal let-modal>
  <div>

    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">{{'lbl_emi_chart'| translate}}</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body mainmodal p-0">
      <ng-container>
        <div class="col-lg-12 text-center">
          <div id="chart my-0">
            <apx-chart [series]="chartOptions.series!" [chart]="chartOptions.chart!" [labels]="chartOptions.labels"
              [responsive]="chartOptions.responsive!" [colors]="chartOptions.colors"></apx-chart>
          </div>
        </div>
      </ng-container>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary filterbtn pull-right " (click)="modal.dismiss('Cross click')">
        {{'button_lbl_cancel'| translate}}
      </button>
    </div>
  </div>
</ng-template>