<title>Bank Loan Policy</title>
<div *ngIf="bankId else Add">
  <app-breadcrumb [title]="'Bank Loan Policy'" [items]="[{name:'Bank Loan Policies', 'route':'/bankLoanPolicies'}]"
    [active_item]="'Edit'">
  </app-breadcrumb>
</div>
<ng-template #Add>
  <app-breadcrumb [title]="'Bank Loan Policy'" [items]="[{name:'Bank Loan Policies', 'route':'/bankLoanPolicies'}]"
    [active_item]="'Add'">
  </app-breadcrumb>
</ng-template>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="card pb-0">
        <div class="contentcard card-body pb-0">
          <div>
            <form [formGroup]="bankPolicyForm">
              <div class="row mx-0">
                <div class="col-lg-12">
                  <div class="form-group">
                    <div class="col-form-label">{{'lbl_select_bank'| translate}} <span style="color: red;">*</span>
                    </div>
                    <ng-select [items]="banks" class="js-example-basic-single p-0"
                      placeholder="{{'lbl_select_bank'| translate}}" bindLabel="name" bindValue="id" required
                      name="selectBank" formControlName="bankId" (change)="getService()">
                    </ng-select>
                    <mat-error
                      *ngIf="(bankPolicyForm.get('bankId') && !bankPolicyForm.get('bankId')!.valid && bankPolicyForm.get('bankId')!.touched)">
                      {{'message_lbl_bank_is_required'| translate}}
                    </mat-error>
                  </div>
                </div>
                <ng-container *ngIf="bankPolicyForm.get('bankId')!.value">
                  <div class="col-lg-4">
                    <div class="form-group">
                      <div class="col-form-label">{{'lbl_select_service'| translate}} <span style="color: red;">*</span>
                      </div>
                      <ng-select [items]="services" class="js-example-basic-single p-0"
                        placeholder="{{ 'lbl_select_service' |translate}}" bindLabel="name" bindValue="id" required
                        name="selectService" formControlName="serviceId">
                      </ng-select>
                      <mat-error
                        *ngIf="(bankPolicyForm.get('serviceId') && !bankPolicyForm.get('serviceId')!.valid && bankPolicyForm.get('serviceId')!.touched)">
                        {{'Serviace is Required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div *ngIf="bankPolicyForm.get('serviceId')!.value && bankPolicyForm.get('serviceId')!.value != 2"
                    class="col-lg-4">
                    <div class="form-group">
                      <div class="col-form-label">{{'lbl_select_employment_type'| translate}}
                      </div>
                      <ng-select [items]="employmentTypes" class="js-example-basic-single p-0"
                        formControlName="employmentTypeId"
                        placeholder="{{ 'placeholder_lbl_select_employment_type' |translate}}" bindLabel="name"
                        bindValue="id" groupBy="parentName" name="employmentTypes">
                      </ng-select>
                    </div>
                  </div>

                  <div class="col-lg-4"
                    *ngIf="bankPolicyForm.get('serviceId')!.value && bankPolicyForm.get('serviceId')!.value != 2">
                    <div class="form-group">
                      <div class="col-form-label">{{'add_personal_loan_lbl_select_company_category_type'| translate}}

                      </div>
                      <ng-select
                        *ngIf="bankPolicyForm.get('serviceId')!.value && bankPolicyForm.get('serviceId')!.value != 2"
                        [items]="companyCategoryTypes" class="js-example-basic-single p-0"
                        formControlName="companyCategoryTypeId" placeholder="Select CompanyCategory Type"
                        bindLabel="name" bindValue="id" name="categoryTypes">
                      </ng-select>

                    </div>
                  </div>
                  <div
                    *ngIf="bankPolicyForm.get('serviceId')!.value && bankPolicyForm.get('serviceId')!.value != 2 && (bankPolicyForm.get('employmentTypeId')!.value && bankPolicyForm.get('employmentTypeId')!.value == 1)"
                    class="col-lg-4">
                    <div class="form-group">
                      <label>{{'lbl_min_income'| translate}}</label>
                      <input class="form-control" type="text" name="income" formControlName="minIncome"
                        NumberWithDecimal>
                    </div>
                  </div>
                  <ng-container
                    *ngIf="bankPolicyForm.get('serviceId')!.value && bankPolicyForm.get('serviceId')!.value == 2 || (bankPolicyForm.get('employmentTypeId')!.value && bankPolicyForm.get('employmentTypeId')!.value == 2 )">
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label>{{'lbl_vintage'| translate}}</label>
                        <input class="form-control" type="text" name="vintage" formControlName="vintage" onlyNumbers>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label>{{'minTurnOver'| translate}}</label>
                        <input class="form-control" type="text" name="minTurnOver" formControlName="minTurnOver"
                          onlyNumbers>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label>{{'maxTurnOver'| translate}}</label>
                        <input class="form-control" type="text" name="minTurnOver" formControlName="maxTurnOver"
                          onlyNumbers>
                      </div>
                    </div>
                  </ng-container>
                  <ng-container
                    *ngIf="bankPolicyForm.get('serviceId')!.value &&   bankPolicyForm.get('serviceId')!.value == 2">
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label>{{'Itr Required'| translate}}</label>
                        <ng-select [items]="itrs" class="js-example-basic-single p-0" formControlName="itrRequired"
                          bindLabel="name" bindValue="id" name="itr">
                        </ng-select>
                      </div>
                    </div>

                  </ng-container>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label>{{'lbl_tenure'| translate}}</label>
                      <input class="form-control" type="text" name="tenure" formControlName="tenure">
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label>{{'lbl_roi'| translate}}(%)</label>
                      <input class="form-control" type="text" name="minROI" formControlName="ROI" NumberWithDecimal>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label>{{'lbl_min_loanAmount'| translate}}</label>
                      <input class="form-control" type="text" name="minloanAmount" formControlName="minLoanAmount"
                        onlyNumbers>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label>{{'lbl_max_loanAmount'| translate}}</label>
                      <input class="form-control" type="text" name="maxloanAmount" formControlName="maxLoanAmount"
                        onlyNumbers>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label>{{'lbl_cibil_score_range'| translate}}</label>
                      <input class="form-control" type="text" name="minimumCibilScore" formControlName="cibilScore">
                    </div>
                  </div>
                </ng-container>
              </div>
            </form>
            <ng-container *ngIf="bankPolicyForm.get('bankId')!.value">
              <button (click)="resetForm()" class="btn btn-sm btn-secondary filterbtn  ">
                {{'button_lbl_cancel'| translate}}
              </button>
              <button class="btn btn-info filterbtn " type="submit" (click)="addMorePolicy()">
                {{'button_lbl_save'| translate}}
              </button>
            </ng-container>
          </div>

          <ng-container *ngIf="policies && policies.length > 0">
            <div class="mt-3 policytable table-responsive border-top userlist-table">
              <table mat-table [dataSource]="policies" class="mat-elevation-z8 table-striped table-vcenter"
                style="min-width: 1500px; box-shadow: none;" aria-label="">
                <ng-container matColumnDef="id">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_id'| translate}}</th>
                  <td mat-cell *matCellDef="let element;let i = index">
                    {{i + 1}}
                  </td>
                </ng-container>
                <ng-container matColumnDef="serviceName">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_service'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    {{element.serviceName}}
                  </td>
                </ng-container>
                <ng-container matColumnDef="employmentType">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_employment_type'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    <div *ngIf="element.employmentType else NoValue">
                      {{element.employmentType}}
                    </div>
                    <ng-template #NoValue>
                      --
                    </ng-template>
                  </td>
                </ng-container>
                <ng-container matColumnDef="companyCategoryType">
                  <th mat-header-cell *matHeaderCellDef>{{'bank_lbl_company_category'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    {{element.companyCategoryType}}
                  </td>
                </ng-container>
                <ng-container matColumnDef="minIncome">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_min_income'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    <div *ngIf="element.minIncome else NoValue">
                      {{currency}}{{element.minIncome}}
                    </div>
                    <ng-template #NoValue>
                      --
                    </ng-template>
                  </td>
                </ng-container>
                <ng-container matColumnDef="vintage">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_vintage'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    <div *ngIf="element.vintage else NoValue">
                      {{element.vintage}}
                    </div>
                    <ng-template #NoValue>
                      --
                    </ng-template>
                  </td>
                </ng-container>
                <ng-container matColumnDef="minTurnOver">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_min_turnOver'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    <div *ngIf="element.minTurnOver else NoValue">
                      {{currency}}{{element.minTurnOver}}
                    </div>
                    <ng-template #NoValue>
                      --
                    </ng-template>
                  </td>
                </ng-container>

                <ng-container matColumnDef="maxTurnOver">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_max_turnOver'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    <div *ngIf="element.maxTurnOver else NoValue">
                      {{currency}}{{element.maxTurnOver}}
                    </div>
                    <ng-template #NoValue>
                      --
                    </ng-template>
                  </td>
                </ng-container>
                <ng-container matColumnDef="itrRequired">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_itr'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    <div *ngIf="element.itrRequired else NoValue">
                      {{element.itrYear}} Year
                    </div>
                    <ng-template #NoValue>
                      --
                    </ng-template>
                  </td>
                </ng-container>
                <ng-container matColumnDef="loanAmount">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_loan_amount'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    <ng-container *ngIf="element.minLoanAmount else NoTenure">
                      {{element.minLoanAmount}} - {{element.maxLoanAmount}}
                    </ng-container>
                    <ng-template #NoTenure>
                      <span>--</span>
                    </ng-template>
                  </td>
                </ng-container>
                <ng-container matColumnDef="ROI">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_roi'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    <ng-container *ngIf="element.ROI else NoROI">
                      {{element.ROI}}%
                    </ng-container>
                    <ng-template #NoROI>
                      <span>--</span>
                    </ng-template>
                  </td>
                </ng-container>
                <ng-container matColumnDef="tenure">
                  <th mat-header-cell *matHeaderCellDef>{{'lbl_tenure'| translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    {{element.tenure}}
                  </td>
                </ng-container>
                <ng-container matColumnDef="cibilScore">
                  <th mat-header-cell *matHeaderCellDef></th>
                  <td mat-cell *matCellDef="let element">
                    {{element.cibilScore}}
                  </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="{{ 'credit_card_tooltip_edit_detail' |translate}}" href="javascript:;"
                      class="btn btn-sm btn-info filterbtn" (click)="editPolicyForm(element,i)">
                      <i class="icon-pencil"></i>
                    </a>
                  </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="PolicyColumns; sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: PolicyColumns;" class="student-element-row"
                  style="cursor: pointer;"></tr>
              </table>
            </div>
          </ng-container>
        </div>
        <div class="card-footer p-2">
          <button (click)="cancelUser()" class="btn btn-sm btn-secondary filterbtn  pull-right">
            {{'button_lbl_cancel'| translate}}
          </button>
          <button class="btn btn-info filterbtn pull-right" type="submit" (click)="insertBankLoanPolicy()">
            {{'button_lbl_save'| translate}}
          </button>
        </div>
      </div>
    </div>
  </div>
</div>