<title *ngIf="serviceName=='home-loan'">Home Loan</title>
<div *ngIf="customerLoanId else Add">
  <app-breadcrumb [title]="'Home Loan'" [items]="[{'name':'Home Loan', 'route':'/home-loans'}]"
    [active_item]="basicDetailForm.get('fullName')!.value">
  </app-breadcrumb>
</div>
<ng-template #Add>
  <app-breadcrumb [title]="'Home Loan'" [items]="[{'name':'Home Loan', 'route':'/home-loans'}]" [active_item]="'Add'">
  </app-breadcrumb>
</ng-template>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="card drawercard">
        <mat-stepper #stepper>
          <mat-step label="Select Type">
            <div class="setup-content" id="step-1">
              <div class="row mx-0">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="name" style="font-size: 20px;">{{'lbl_select_loan_type'| translate}}
                    </label>
                    <div class="form-group m-t-15 m-checkbox-inline mb-0 custom-radio-ml ml-2">
                      <div class="radio radio-primary">
                        <input type="radio" id="new" value="New" [formControl]="isTransfer" (change)="changeLoanType()">
                        <label class="mb-0" for="new">{{'lbl_new'| translate}}</label>
                      </div>
                      <div class="radio radio-primary">
                        <input type="radio" id="transfer" value="Bank Transfer" [formControl]="isTransfer"
                          (change)="changeLoanType()">
                        <label class="mb-0" for="transfer">{{'lbl_transfer'| translate}}</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modalButton">
              <button class="btn btn-info filterbtn pull-right " type="submit" matStepperNext>{{'button_lbl_next'|
                translate}}</button>
            </div>
          </mat-step>
          <mat-step label="Basic Detail">
            <form [formGroup]="basicDetailForm">
              <div class="setup-content" id="step-1">
                <div class="row mx-0">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_loan_amount'| translate}} <span *ngIf="isRequired == true"
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" name="refernce" formControlName="loanAmount" required
                        onlyNumber>
                      <mat-error
                        *ngIf="(basicDetailForm.get('loanAmount') && !basicDetailForm.get('loanAmount')!.valid && basicDetailForm.get('loanAmount')!.touched)">
                        {{'message_lbl_loan_amount_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_full_name_as_per_pan'| translate}} <span *ngIf="isRequired == true"
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" name="refernce" formControlName="fullName" required
                        onlyAlphabets>
                      <mat-error
                        *ngIf="(basicDetailForm.get('fullName') && !basicDetailForm.get('fullName')!.valid && basicDetailForm.get('fullName')!.touched)">
                        {{'message_lbl_full_name_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>{{'lbl_birthdate_min_age_21year'| translate}} <span *ngIf="isRequired == true"
                          style="color: red;">*</span></label>
                      <mat-form-field appearance="outline" class="d-block w-100"
                        (click)="toggleMenuService.togglePickerStyles()">
                        <input matInput [matDatepicker]="filterPickerFrom" formControlName="birthdate"
                          placeholder="Birth Date" name="fromDate" [readonly]="true" (focus)="filterPickerFrom.open()"
                          (dateChange)="getAge(null)" (click)="toggleMenuService.togglePickerStyles()">
                        <mat-datepicker-toggle matSuffix [for]="filterPickerFrom"
                          (click)="toggleMenuService.togglePickerStyles()">
                        </mat-datepicker-toggle>
                        <mat-datepicker #filterPickerFrom></mat-datepicker>
                      </mat-form-field>
                      <mat-error
                        *ngIf="(basicDetailForm.get('birthdate') && !basicDetailForm.get('birthdate')!.valid && basicDetailForm.get('birthdate')!.touched) && !basicDetailForm.get('birthdate')!.hasError('minAge')">
                        {{'message_lbl_birthdate_is_required'| translate}}
                      </mat-error>
                      <mat-error *ngIf="basicDetailForm.get('birthdate')!.hasError('minAge')">
                        {{'message_lbl_min_age_21_is_required'| translate}}
                      </mat-error>
                    </div>

                  </div>

                </div>
                <div class="row mx-0">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_mothers_name'| translate}} <span *ngIf="isRequired == true"
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" name="motherName" formControlName="motherName" required
                        onlyAlphabets>
                      <mat-error
                        *ngIf="(basicDetailForm.get('motherName') && !basicDetailForm.get('motherName')!.valid && basicDetailForm.get('motherName')!.touched)">
                        {{'message_lbl_mothers_name_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <div class="col-form-label">{{'lbl_select_marital_status'| translate}} <span
                          *ngIf="isRequired == true" style="color: red;">*</span></div>
                      <ng-select [items]="maritalStatuses" class="js-example-basic-single p-0"
                        placeholder="{{ 'lbl_select_marital_status' | translate}}" bindLabel="status" bindValue="id"
                        name="Status" required name="selectStatus" formControlName="maritalStatusId">
                      </ng-select>
                      <mat-error
                        *ngIf="(basicDetailForm.get('maritalStatusId') && !basicDetailForm.get('maritalStatusId')!.valid && basicDetailForm.get('maritalStatusId')!.touched)">
                        {{'message_lbl_marital_status_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
                <form [formGroup]="customFieldForm">
                  <div class="row mx-0">
                    <ng-container *ngFor="let controlName of customFieldForm?.controls | keyvalue;let i = index">
                      <div class="col-md-3">
                        <div class="form-group">
                          <label>{{ controlName.key | titlecase }}</label>
                          <ng-container *ngIf="hints[i]">
                            <a class="systooltip"><i class="fa fa-info-circle w-4 h-4 ml-1" style="margin-top:4px"></i>
                              <span class="tooltiptext">{{hints[i]
                                }}</span>
                            </a>
                          </ng-container>
                          <input class="form-control" [formControlName]="controlName.key" type="text">
                          <mat-error
                            *ngIf="(customFieldForm.get(controlName.key) && !customFieldForm.get(controlName.key)!.valid  && customFieldForm.get(controlName.key)!.touched)">
                            <span *ngIf="customFieldForm.get(controlName.key)!.errors?.['required']">{{controlName.key}}
                              is required</span>
                            <span *ngIf="customFieldForm.get(controlName.key)!.errors?.['pattern']">{{controlName.key}}
                              is invalid</span>
                          </mat-error>
                        </div>
                      </div>
                    </ng-container>
                  </div>
                </form>
                <div class="col-lg-12 m-2">
                  <h3 style="font-size:25px"> {{'lbl_current_residence_detail'| translate}}</h3>
                </div>
                <div class="row mx-3 mb-2 border">
                  <div class="col-md-6">
                    <div class="form-group">
                      <div class="col-form-label">{{'lbl_select_resident_type'| translate}} <span
                          *ngIf="isRequired == true" style="color: red;">*</span> </div>
                      <ng-select [items]="residenceTypes" class="js-example-basic-single p-0"
                        placeholder="{{ 'placeholder_lbl_select_resident_types' |translate}}" bindLabel="name"
                        bindValue="id" name="residence" required name="selectStatus" formControlName="residentTypeId"
                        (change)="getSelectedResidentType()">
                      </ng-select>
                      <mat-error
                        *ngIf="(basicDetailForm.get('residentTypeId') && !basicDetailForm.get('residentTypeId')!.valid && basicDetailForm.get('residentTypeId')!.touched)">
                        {{'message_lbl_resident_type_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <ng-container *ngIf="selectedResidentType=='Rented'">
                    <div class="col-md-6">
                      <div class="form-group">
                        <div class="col-form-label">{{'lbl_rent_amount'| translate}}</div>
                        <input type="text" formControlName="rentAmount" class="form-control" onlyNumber />
                      </div>
                    </div>
                  </ng-container>
                  <ng-container *ngIf="selectedResidentType=='Self Owned'">
                    <div class="col-md-6">
                      <div class="form-group">
                        <div class="col-form-label">{{'lbl_estimated_value_of_property'| translate}}
                        </div>
                        <input type="text" formControlName="valueOfProperty" class="form-control" onlyNumber />
                      </div>
                    </div>
                  </ng-container>

                </div>
                <div class="col-lg-12">
                  <button class="btn btn-info filterbtn " (click)="onAdd()">{{'button_lbl_add_co_applicant'|
                    translate}}</button>
                </div>

                <form [formGroup]="coApplicantForm">
                  <div formArrayName="coApplicant">
                    <div *ngFor="let row of getCoApplicantControls(); let i=index">
                      <div [formGroupName]="i" class="border mt-3 mx-3">
                        <div class="row mx-0 w-100">
                          <div class="col-lg-12 text-right">
                            <button class="btn btn-danger p-0 mt-2" style="margin-right: 5px;border-radius:50%"
                              type="submit" (click)="removeCoApplicant(i)"><i class="fa fa-close m-2"></i></button>
                          </div>
                          <div class="col-lg-6">
                            <div class="form-group">
                              <label>{{'lbl_co_applicant_name'| translate}} <span *ngIf="isRequired == true"
                                  style="color: red;">*</span></label>
                              <input type="text" formControlName="fullName" class="form-control" />

                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="form-group">
                              <label>{{'lbl_birthdate_min_age_21year'| translate}} <span *ngIf="isRequired == true"
                                  style="color: red;">*</span></label>
                              <mat-form-field appearance="outline" class="d-block w-100"
                                (click)="toggleMenuService.togglePickerStyles()">
                                <input matInput [matDatepicker]="filterPickerBirthDate" formControlName="birthDate"
                                  name="" [readonly]="true" (focus)="filterPickerBirthDate.open()"
                                  (dateChange)="getAge(row.get('birthDate')?.value,i)"
                                  max="{{minDate | date:'yyyy-MM-dd'}}"
                                  (click)="toggleMenuService.togglePickerStyles()">
                                <mat-datepicker-toggle matSuffix [for]="filterPickerBirthDate"
                                  (click)="toggleMenuService.togglePickerStyles()">
                                </mat-datepicker-toggle>
                                <mat-datepicker #filterPickerBirthDate></mat-datepicker>
                              </mat-form-field>

                              <mat-error *ngIf="row.get('birthDate')!.hasError('minAge')">
                                {{'message_lbl_min_age_21_is_required'| translate}}
                              </mat-error>
                            </div>
                          </div>
                        </div>
                        <div class="row mx-0 w-100">
                          <div class="col-lg-6">
                            <div class="form-group">
                              <div class="col-form-label">{{'lbl_select_marital_status'|
                                translate}} <span *ngIf="isRequired == true" style="color: red;">*</span>
                              </div>
                              <ng-select [items]="maritalStatuses" class="js-example-basic-single p-0"
                                bindLabel="status" bindValue="id" name="Status" required name="selectStatus"
                                formControlName="maritalStatusId">
                              </ng-select>

                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="form-group">
                              <div class="col-form-label">{{'lbl_relation_with_co_applicant'|
                                translate}} <span *ngIf="isRequired == true" style="color: red;">*</span>
                              </div>
                              <ng-select [items]="coApplicantRelations" class="js-example-basic-single p-0"
                                bindLabel="name" bindValue="id" name="Status" name="relation"
                                formControlName="coApplicantRelationId">
                              </ng-select>

                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

            </form>
            <div class="modalButton">
              <button class="btn btn-info filterbtn pull-right " type="submit"
                (click)="addBasicDetail(basicDetailForm,coApplicantForm.value)">{{'button_lbl_next'|
                translate}}</button>
              <button class="btn btn-info filterbtn pull-right " type="submit"
                matStepperPrevious>{{'button_lbl_previous'|
                translate}}</button>
            </div>
          </mat-step>

          <mat-step label="Property Detail">
            <div class="setup-content" id="step-3">
              <form *ngIf="isTransfer.value=='New'" [formGroup]="propertyDetailForm">
                <div class="row mx-0">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>{{'lbl_select_property_type'| translate}} <span style="color: red;">*</span></label>
                      <ng-select [items]="propertyTypes" class="js-example-basic-single p-0"
                        formControlName="propertyTypeId" bindLabel="name" bindValue="id" name="propertyType" required>
                      </ng-select>
                      <mat-error
                        *ngIf="(propertyDetailForm.get('propertyTypeId') && !propertyDetailForm.get('propertyTypeId')!.valid && propertyDetailForm.get('propertyTypeId')!.touched)">
                        {{'message_lbl_property_type_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>{{'lbl_property_purchase_value'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" name="income" formControlName="propertyPurchaseValue"
                        required onlyNumbers>
                      <mat-error
                        *ngIf="(propertyDetailForm.get('propertyPurchaseValue') && !propertyDetailForm.get('propertyPurchaseValue')!.valid && propertyDetailForm.get('propertyPurchaseValue')!.touched && propertyDetailForm.get('propertyPurchaseValue')!.errors?.['required'])">
                        {{'message_lbl_property_purchase_value_is_required'| translate}}
                      </mat-error>
                      <mat-error
                        *ngIf="propertyDetailForm.get('propertyPurchaseValue')!.touched && propertyDetailForm.get('propertyPurchaseValue')?.errors?.['min']">
                        {{'message_lbl_loan_amount_is_not_greater_than_property_purchase_value'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_address_line_1_for_property'| translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" name="company" formControlName="addressLine1" required>
                      <mat-error
                        *ngIf="(propertyDetailForm.get('addressLine1') && !propertyDetailForm.get('addressLine1')!.valid && propertyDetailForm.get('addressLine1')!.touched)">
                        {{'message_lbl_address_line_1_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
                <div class="row mx-0">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_address_line_2_for_property'| translate}}</label>
                      <input class="form-control" type="text" name="company" formControlName="addressLine2">
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_pincode_of_property'| translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" formControlName="pincode" name="pincode" maxlength="6"
                        onlyNumbers (keyup)="onKeyUpEvent($event,'property',true)">
                      <mat-error
                        *ngIf="(propertyDetailForm.get('pincode') && !propertyDetailForm.get('pincode')!.valid && propertyDetailForm.get('pincode')!.touched)">
                        {{'message_lbl_pincode_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <div class="col-form-label">{{'lbl_city_of_property'| translate}} <span
                          style="color: red;">*</span>
                      </div>
                      <ng-select [items]="propertyCities" class="js-example-basic-single p-0" bindLabel="name"
                        bindValue="id" required name="typeId" formControlName="propertyCityId">
                      </ng-select>
                      <mat-error
                        *ngIf="(propertyDetailForm.get('propertyCityId') && !propertyDetailForm.get('propertyCityId')!.valid && propertyDetailForm.get('propertyCityId')!.touched)">
                        {{'message_lbl_city_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
                <div class="row mx-0">
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_district'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" formControlName="propertyDistrict" readonly required>
                      <mat-error
                        *ngIf="(propertyDetailForm.get('propertyDistrict') && !propertyDetailForm.get('propertyDistrict')!.valid && propertyDetailForm.get('propertyDistrict')!.touched)">
                        {{'message_lbl_district_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_state'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" formControlName="propertyState" readonly required>
                      <mat-error
                        *ngIf="(propertyDetailForm.get('propertyState') && !propertyDetailForm.get('propertyState')!.valid && propertyDetailForm.get('propertyState')!.touched)">
                        {{'message_lbl_state_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
              </form>
              <form *ngIf="isTransfer.value=='Bank Transfer'" [formGroup]="transferPropertyDetailForm">
                <div class="row mx-0">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>{{'lbl_select_property_type'| translate}} <span style="color: red;">*</span></label>
                      <ng-select [items]="propertyTypes" class="js-example-basic-single p-0"
                        formControlName="propertyTypeId" bindLabel="name" bindValue="id" name="propertyType" required>
                      </ng-select>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('propertyTypeId') && !transferPropertyDetailForm.get('propertyTypeId')!.valid && transferPropertyDetailForm.get('propertyTypeId')!.touched)">
                        {{'message_lbl_property_type_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>{{'lbl_property_purchase_value'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" name="income" formControlName="propertyPurchaseValue"
                        required onlyNumbers>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('propertyPurchaseValue') && !transferPropertyDetailForm.get('propertyPurchaseValue')!.valid && transferPropertyDetailForm.get('propertyPurchaseValue')!.touched && transferPropertyDetailForm.get('propertyPurchaseValue')!.errors?.['required'])">
                        {{'message_lbl_property_purchase_value_is_required'| translate}}
                      </mat-error>
                      <mat-error
                        *ngIf="transferPropertyDetailForm.get('propertyPurchaseValue')!.touched && transferPropertyDetailForm.get('propertyPurchaseValue')!.errors?.['min']">
                        {{'message_lbl_loan_amount_is_not_greater_than_property_purchase_value'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_address_line_1_for_property'| translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" name="company" formControlName="addressLine1" required>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('addressLine1') && !transferPropertyDetailForm.get('addressLine1')!.valid && transferPropertyDetailForm.get('addressLine1')!.touched)">
                        {{'message_lbl_address_line_1_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
                <div class="row mx-0">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_address_line_2_for_property'| translate}}</label>
                      <input class="form-control" type="text" name="company" formControlName="addressLine2">
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_pincode_of_property'| translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" formControlName="pincode" name="pincode" maxlength="6"
                        onlyNumbers (keyup)="onKeyUpEvent($event,'property',true)">
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('pincode') && !transferPropertyDetailForm.get('pincode')!.valid && transferPropertyDetailForm.get('pincode')!.touched)">
                        {{'message_lbl_pincode_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <div class="col-form-label">{{'lbl_city_of_property'| translate}} <span
                          style="color: red;">*</span>
                      </div>
                      <ng-select [items]="propertyCities" class="js-example-basic-single p-0" bindLabel="name"
                        bindValue="id" required name="typeId" formControlName="propertyCityId">
                      </ng-select>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('propertyCityId') && !transferPropertyDetailForm.get('propertyCityId')!.valid && transferPropertyDetailForm.get('propertyCityId')!.touched)">
                        {{'message_lbl_city_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
                <div class="row mx-0">
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_district'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" formControlName="propertyDistrict" readonly required>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('propertyDistrict') && !transferPropertyDetailForm.get('propertyDistrict')!.valid && transferPropertyDetailForm.get('propertyDistrict')!.touched)">
                        {{'message_lbl_district_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_state'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" formControlName="propertyState" readonly required>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('propertyState') && !transferPropertyDetailForm.get('propertyState')!.valid && transferPropertyDetailForm.get('propertyState')!.touched)">
                        {{'message_lbl_state_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_loan_amount_taken_in_existing_loan'| translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" formControlName="loanAmountTakenExisting" onlyNumbers
                        required>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('loanAmountTakenExisting') && !transferPropertyDetailForm.get('loanAmountTakenExisting')!.valid && transferPropertyDetailForm.get('loanAmountTakenExisting')!.touched)">
                        {{'message_lbl_loan_amount_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
                <div class="row mx-0">
                  <div class="col">
                    <div class="form-group">
                      <label>{{'lbl_approx_date_for_loan_taken'| translate}} <span style="color: red;">*</span></label>
                      <mat-form-field appearance="outline" class="d-block w-100"
                        (click)="toggleMenuService.togglePickerStyles()">
                        <input matInput [matDatepicker]="filterPickerFrom" formControlName="approxDate"
                          placeholder="Approx Date" name="approx" [readonly]="true" (focus)="filterPickerFrom.open()"
                          (click)="toggleMenuService.togglePickerStyles()">
                        <mat-datepicker-toggle matSuffix [for]="filterPickerFrom"
                          (click)="toggleMenuService.togglePickerStyles()">
                        </mat-datepicker-toggle>
                        <mat-datepicker #filterPickerFrom></mat-datepicker>

                      </mat-form-field>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('approxDate') && !transferPropertyDetailForm.get('approxDate')!.valid && transferPropertyDetailForm.get('approxDate')!.touched)">
                        {{'message_lbl_approx_date_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col">
                    <div class="form-group">
                      <label for="name">{{'lbl_approx_current_emi'| translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" formControlName="approxCurrentEMI" onlyNumbers required>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('approxCurrentEMI') && !transferPropertyDetailForm.get('approxCurrentEMI')!.valid && transferPropertyDetailForm.get('approxCurrentEMI')!.touched)">
                        {{'message_lbl_approx_current_emi_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col">
                    <div class="form-group">
                      <label for="name">{{'lbl_select_bank'| translate}} <span style="color: red;">*</span></label>
                      <ng-select [items]="banks" class="js-example-basic-single p-0" formControlName="bankId"
                        placeholder="{{'lbl_select_bank'| translate}}" bindLabel="name" bindValue="id" name="bank"
                        required>
                      </ng-select>
                      <mat-error
                        *ngIf="(transferPropertyDetailForm.get('bankId') && !transferPropertyDetailForm.get('bankId')!.valid && transferPropertyDetailForm.get('bankId')!.touched)">
                        {{'message_lbl_bank_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>


                </div>
                <div class="row mx-0">
                  <div class="col-lg-4">
                    <label for="name">{{'lbl_is_topup_loan_required'| translate}} <span
                        style="color: red;">*</span></label>
                    <div class="form-group m-t-15 m-checkbox-inline mb-0 custom-radio-ml ml-2">
                      <div class="radio radio-primary">
                        <input type="radio" id="topupYes" value="Yes" [formControl]="isTopUp">
                        <label class="mb-0" for="topupYes">{{'lbl_yes'| translate}}</label>
                      </div>
                      <div class="radio radio-primary">
                        <input type="radio" id="topupNo" value="No" [formControl]="isTopUp">
                        <label class="mb-0" for="topupNo">{{'lbl_no'| translate}}</label>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="isTopUp.value=='Yes'" class="col-lg-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_top_up_amount'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" formControlName="topupAmount" onlyNumbers>
                    </div>
                  </div>
                </div>
              </form>
              <form [formGroup]="correspondenceAddressForm">
                <div class="row mx-0 border mt-3 mx-3">
                  <div class="col-lg-12">
                    <h3 class="mt-2" style="font-size:25px">{{'lbl_correspondence_address'| translate}}
                    </h3>
                  </div>
                  <div class="row mx-0 w-100">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label>{{'lbl_company_name'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" name="income" formControlName="label" required>
                        <mat-error
                          *ngIf="(correspondenceAddressForm.get('label') && !correspondenceAddressForm.get('label')!.valid && correspondenceAddressForm.get('label')!.touched)">
                          {{'message_lbl_company_name_is_required is Required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label>{{'lbl_address_line1'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" name="income" formControlName="addressLine1" required>
                        <mat-error
                          *ngIf="(correspondenceAddressForm.get('addressLine1') && !correspondenceAddressForm.get('addressLine1')!.valid && correspondenceAddressForm.get('addressLine1')!.touched)">
                          {{'message_lbl_address_line_1_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label>{{'lbl_address_line_2'| translate}}</label>
                        <input class="form-control" type="text" name="income" formControlName="addressLine2">
                      </div>
                    </div>
                  </div>
                  <div class="row mx-0 w-100">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="name">{{'lbl_pincode'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" formControlName="pincode" name="pincode" onlyNumbers
                          maxlength="6" (keyup)="onKeyUpEvent($event,'correspondence',true)">
                        <mat-error
                          *ngIf="(correspondenceAddressForm.get('pincode') && !correspondenceAddressForm.get('pincode')!.valid && correspondenceAddressForm.get('pincode')!.touched)">
                          {{'message_lbl_pincode_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="col-form-label">{{'lbl_city'| translate}} <span style="color: red;">*</span>
                        </div>
                        <ng-select [items]="correspondenceAddressCity" class="js-example-basic-single p-0"
                          bindLabel="name" bindValue="id" required name="typeId" formControlName="cityId">
                        </ng-select>
                        <mat-error
                          *ngIf="(correspondenceAddressForm.get('cityId') && !correspondenceAddressForm.get('cityId')!.valid && correspondenceAddressForm.get('cityId')!.touched)">
                          {{'message_lbl_city_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label for="name">{{'lbl_district'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" formControlName="district" readonly required>
                        <mat-error
                          *ngIf="(correspondenceAddressForm.get('district') && !correspondenceAddressForm.get('district')!.valid && correspondenceAddressForm.get('district')!.touched)">
                          {{'message_lbl_district_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label for="name">{{'lbl_state'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" formControlName="state" readonly required>
                        <mat-error
                          *ngIf="(propertyDetailForm.get('state') && !propertyDetailForm.get('state')!.valid && propertyDetailForm.get('state')!.touched)">
                          {{'message_lbl_state_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
              <div class="col-lg-12 my-3">
                <label for="name" style="font-size: 20px;">{{'lbl_is_correspondence_address_same_as_permanent_address'|
                  translate}}</label>
                <div class="form-group m-t-15 m-checkbox-inline mb-0 custom-radio-ml ml-2">
                  <div class="radio radio-primary">
                    <input type="radio" id="Yes" value="Yes" [formControl]="isSameAddress">
                    <label class="mb-0" for="Yes">{{'lbl_yes'| translate}}</label>
                  </div>
                  <div class="radio radio-primary">
                    <input type="radio" id="No" value="No" [formControl]="isSameAddress">
                    <label class="mb-0" for="No">{{'lbl_no'| translate}}</label>
                  </div>
                </div>
              </div>
              <form *ngIf="isSameAddress.value == 'No'" [formGroup]="permanentAddressForm">
                <div class="row mx-0 border my-3 mx-3">
                  <div class="col-lg-12">
                    <h3 class="mt-2" style="font-size:25px">{{'lbl_permanent_adderss'| translate}}</h3>
                  </div>
                  <div class="row mx-0 w-100">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label>{{'lbl_company_name'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" name="income" formControlName="label" required>
                        <mat-error
                          *ngIf="(correspondenceAddressForm.get('label') && !correspondenceAddressForm.get('label')!.valid && correspondenceAddressForm.get('label')!.touched)">
                          {{'message_lbl_company_name_is_required is Required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label>{{'lbl_address_line1'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" name="income" formControlName="addressLine1" required>
                        <mat-error
                          *ngIf="(permanentAddressForm.get('addressLine1') && !permanentAddressForm.get('addressLine1')!.valid && permanentAddressForm.get('addressLine1')!.touched)">
                          {{'message_lbl_address_line_1_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label>{{'lbl_address_line_2'| translate}}</label>
                        <input class="form-control" type="text" name="income" formControlName="addressLine2">
                      </div>
                    </div>
                  </div>
                  <div class="row mx-0 w-100">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="name">{{'lbl_pincode'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" formControlName="pincode" name="pincode"
                          (keyup)="onKeyUpEvent($event,'permanent',true)" onlyNumbers maxlength="6">
                        <mat-error
                          *ngIf="(permanentAddressForm.get('pincode') && !permanentAddressForm.get('pincode')!.valid && permanentAddressForm.get('pincode')!.touched)">
                          {{'message_lbl_pincode_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="col-form-label">{{'lbl_city'| translate}} <span style="color: red;">*</span>
                        </div>
                        <ng-select [items]="permanentAdressCity" class="js-example-basic-single p-0" bindLabel="name"
                          bindValue="id" required name="typeId" formControlName="cityId">
                        </ng-select>
                        <mat-error
                          *ngIf="(permanentAddressForm.get('cityId') && !permanentAddressForm.get('cityId')!.valid && permanentAddressForm.get('cityId')!.touched)">
                          {{'message_lbl_city_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label for="name">{{'lbl_district'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" formControlName="district" readonly required>
                        <mat-error
                          *ngIf="(permanentAddressForm.get('district') && !permanentAddressForm.get('district')!.valid && permanentAddressForm.get('district')!.touched)">
                          {{'message_lbl_district_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label for="name">{{'lbl_state'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" formControlName="state" readonly required>
                        <mat-error
                          *ngIf="(permanentAddressForm.get('state') && !permanentAddressForm.get('state')!.valid && permanentAddressForm.get('state')!.touched)">
                          {{'message_lbl_state_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <div class="modalButton">
              <button class="btn btn-info filterbtn pull-right " type="submit"
                (click)="addPropertyDetail()">{{'button_lbl_next'| translate}}</button>
              <button class="btn btn-info filterbtn pull-right " type="submit"
                matStepperPrevious>{{'button_lbl_previous'|
                translate}}</button>
            </div>
          </mat-step>
          <mat-step label="Work Detail">
            <div class="setup-content" id="step-1">
              <form [formGroup]="workForm">
                <div class="row mx-0">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>{{'lbl_select_employment_type'| translate}} <span style="color: red;">*</span></label>
                      <ng-select [items]="employmentTypes" class="js-example-basic-single p-0"
                        formControlName="employmentTypeId"
                        placeholder="{{ 'placeholder_lbl_select_employment_type' |translate}}"
                        bindLabel="employmentType" bindValue="employmentTypeId" name="commissionType" required
                        (change)="getSelectedEmploymentType(0);changeEmploymentType()">
                      </ng-select>
                      <mat-error
                        *ngIf="(workForm.get('employmentTypeId') && !workForm.get('employmentTypeId')!.valid && workForm.get('employmentTypeId')!.touched)">
                        {{'message_lbl_employment_type_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="name">{{'lbl_monthly_income'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" name="fatherContact" formControlName="monthlyIncome"
                        required onlyNumbers>
                      <mat-error
                        *ngIf="(workForm.get('monthlyIncome') && !workForm.get('monthlyIncome')!.valid && workForm.get('monthlyIncome')!.touched)">
                        {{'message_lbl_monthly_income_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>

                  <div class="col-md-4">
                    <ng-container *ngIf="selectedEmploymentType == 'Self Employee' ">
                      <div class="form-group">
                        <label>{{'lbl_select_industry'| translate}} <span style="color: red;">*</span></label>
                        <ng-select [items]="industryTypes" class="js-example-basic-single p-0"
                          formControlName="industryTypeId" bindLabel="name" bindValue="id" name="nature" required
                          groupBy="parentName">
                        </ng-select>
                        <mat-error
                          *ngIf="(workForm.get('industryTypeId') && !workForm.get('industryTypeId')!.valid && workForm.get('industryTypeId')!.touched)">
                          {{'message_lbl_industry_type_is_required'| translate}}
                        </mat-error>
                      </div>
                    </ng-container>
                    <ng-container *ngIf="selectedEmploymentType == 'Salaried' ">
                      <div class="form-group">
                        <label>{{'lbl_service_type'| translate}}</label>
                        <ng-select [items]="employmentServiceTypes" class="js-example-basic-single p-0"
                          formControlName="employmentServiceTypeId" bindLabel="name" bindValue="id" name="serviceType">
                        </ng-select>
                      </div>
                    </ng-container>
                  </div>
                </div>
                <div class="row mx-0 border my-3 mx-3">
                  <div class="col-lg-12">
                    <h3 class="mt-2" style="font-size:25px">{{'lbl_work_address'| translate}} <span
                        style="color: red;">*</span>
                    </h3>
                  </div>
                  <div class="row mx-0 w-100">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label>{{'add_home_loan_lbl_company_organization_name'| translate}}</label>
                        <input class="form-control" type="text" name="income" formControlName="label">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label>{{'lbl_address_line1'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" name="income" formControlName="addressLine1" required>
                        <mat-error
                          *ngIf="(workForm.get('addressLine1') && !workForm.get('addressLine1')!.valid && workForm.get('addressLine1')!.touched)">
                          {{'message_lbl_address_line_1_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label>{{'lbl_address_line_2'| translate}}</label>
                        <input class="form-control" type="text" name="income" formControlName="addressLine2">
                      </div>
                    </div>
                  </div>
                  <div class="row mx-0 w-100">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="name">{{'lbl_pincode'| translate}} <span style="color: red;">*</span></label>
                        <input class="form-control" type="text" formControlName="pincode" name="pincode" maxLength="6"
                          (keyup)="onKeyUpEvent($event,'workAddress',true)" onlyNumbers>
                        <mat-error
                          *ngIf="(workForm.get('pincode') && !workForm.get('pincode')!.valid && workForm.get('pincode')!.touched)">
                          {{'message_lbl_pincode_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="col-form-label">{{'lbl_city'| translate}} <span style="color: red;">*</span>
                        </div>
                        <ng-select [items]="workAddressCities" class="js-example-basic-single p-0" bindLabel="name"
                          bindValue="id" required name="typeId" formControlName="cityId">
                        </ng-select>
                        <mat-error
                          *ngIf="(workForm.get('cityId') && !workForm.get('cityId')!.valid && workForm.get('cityId')!.touched)">
                          {{'message_lbl_city_is_required'| translate}}
                        </mat-error>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
              <div class="row mx-0">
                <div class="col-lg-12">
                  <h3 class="mt-2" style="font-size:25px">{{'lbl_co_applicant_work_detail'| translate}}
                  </h3>
                </div>
                <div class="col-lg-12">
                  <form #coApplicantWorkDetailForm="ngForm">
                    <ng-container *ngFor="let coApplicantWorkDetail of coApplicantWorkDetails;let  i =index">
                      <div class="col-lg-12 my-3">
                        <h4 class="my-3" style="font-size:20px"> Work Detail For
                          {{coApplicantWorkDetail.fullName}}</h4>
                      </div>
                      <div class="row mx-0 pt-2 my-2 w-100 border">

                        <div class="col-md-4">
                          <div class="form-group">
                            <label>{{'lbl_select_employment_type'| translate}} <span
                                style="color: red;">*</span></label>
                            <ng-select [items]="employmentTypes" class="js-example-basic-single p-0"
                              placeholder="{{ 'placeholder_lbl_select_employment_type' |translate}}"
                              bindLabel="employmentType" bindValue="employmentTypeId" name="employmentType_{{i}}"
                              [(ngModel)]="coApplicantWorkDetail.employmentTypeId"
                              (change)="getSelectedEmploymentType(i,'coApplicant',coApplicantWorkDetail)"
                              #employment="ngModel" required>
                            </ng-select>
                            <mat-error *ngIf="(employment.touched) && (employment.errors?.['required'])">
                              {{'message_lbl_employment_type_is_required'| translate}}
                            </mat-error>
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="name">{{'lbl_monthly_income'| translate}} <span
                                style="color: red;">*</span></label>
                            <input class="form-control" type="text" name="income_{{i}}"
                              [(ngModel)]="coApplicantWorkDetail.monthlyIncome" onlyNumbers required #income="ngModel">
                            <mat-error *ngIf="(income.touched) && (income.errors?.['required'])">
                              {{'message_lbl_income_is_required'| translate}}
                            </mat-error>
                          </div>
                        </div>
                        <ng-container *ngIf="coApplicantWorkDetail.employmentType == 'Self Employee'">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>{{'lbl_select_industry'| translate}} <span style="color: red;">*</span></label>
                              <ng-select [items]="industryTypes" class="js-example-basic-single p-0"
                                [(ngModel)]="coApplicantWorkDetail.industryTypeId" bindLabel="name" bindValue="id"
                                name="industry_{{i}}" groupBy="parentName">
                              </ng-select>
                            </div>
                          </div>
                        </ng-container>
                        <ng-container *ngIf="coApplicantWorkDetail.employmentType == 'Salaried'">
                          <div class="col-md-4">

                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>{{ 'lbl_service_type' |translate}} <span style="color: red;">*</span></label>
                              <ng-select [items]="employmentServiceTypes" class="js-example-basic-single p-0"
                                bindLabel="name" [(ngModel)]="coApplicantWorkDetail.employmentServiceTypeId"
                                bindValue="id" name="serviceType_{{i}}">
                              </ng-select>
                            </div>
                          </div>
                        </ng-container>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label>{{'lbl_label'| translate}} <span style="color: red;">*</span></label>
                            <input class="form-control" type="text" name="label_{{i}}"
                              [(ngModel)]="coApplicantWorkDetail.label">
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label>{{'lbl_address_line1''| translate}} <span style="color: red;">*</span></label>
                            <input class="form-control" type="text" name="addressLine1_{{i}}"
                              [(ngModel)]="coApplicantWorkDetail.addressLine1">
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label>{{'lbl_address_line_2'| translate}}</label>
                            <input class="form-control" type="text" name="addressLine2_{{i}}"
                              [(ngModel)]="coApplicantWorkDetail.addressLine2">
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="name">{{'lbl_pincode'| translate}} <span style="color: red;">*</span></label>
                            <input class="form-control" type="text" [(ngModel)]="coApplicantWorkDetail.pincode"
                              (keyup)="onKeyUpEvent($event,'coApplicantWorkDetail',true,i)" onlyNumber maxLength="6"
                              name="pincode_{{i}}">
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <div class="col-form-label">{{'lbl_city'| translate}} <span style="color: red;">*</span>
                            </div>
                            <ng-select [items]="coApplicantWorkDetail.coApplicantWorkDetailCities"
                              class="js-example-basic-single p-0" bindLabel="name" bindValue="id" name="cityId_{{i}}"
                              [(ngModel)]="coApplicantWorkDetail.cityId">
                            </ng-select>
                          </div>
                        </div>
                      </div>
                    </ng-container>
                  </form>
                </div>
              </div>
            </div>
            <div class="modalButton">
              <button class="btn btn-info filterbtn pull-right " type="submit"
                (click)="addHomeLoanWorkDetail(coApplicantWorkDetailForm)">{{'button_lbl_next'|
                translate}}</button>
              <button class="btn btn-info filterbtn pull-right " type="submit"
                matStepperPrevious>{{'button_lbl_previous'|
                translate}}</button>
            </div>
          </mat-step>
          <mat-step label="Upload Document">
            <div class="setup-content" id="step-3">
              <div class="row mx-0">
                <div class="col-lg-4 col-md-6 col-sm-12 mt-2" *ngFor="let document of documents;let i =index">
                  <div>
                    <a *ngIf="!document.isPdf" class="form-control documentcard" type="upload " id="resume" required>
                      <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">
                            {{document.displayName}}(maxSize:{{document.maxSize}}KB)<span *ngIf="document.isRequired"
                              style="color: red;">*</span>
                            <ng-container *ngIf="document.documentCount > 1">
                              {{document?.documentName}}-{{document.count}}</ng-container>
                          </h4>
                        </div>
                        <mat-error *ngIf="document.documentError && !document.isPdf">
                          {{document.displayName}} is required
                        </mat-error>
                        <a href="javascript:;" class="mt-2 btn btn-sm btn-info filterbtn" (click)="fileInput.click()"
                          title="{{ 'tooltip_lbl_insert_loan' |translate}}">
                          <i class="fa fa-upload"></i>{{'button_lbl_upload'| translate}}
                        </a>
                        <a *ngIf="document.documentData" (click)="debugBase64(document.documentData)" target="_blank"
                          class="mt-2 btn btn-sm btn-info filterbtn"
                          title="{{ 'tooltip_lbl_view_document' |translate}}">
                          <i class="fa fa-eye"></i>{{'button_lbl_view'| translate}}
                        </a>
                      </div>
                      <input type="file" #fileInput id="uploadFile" (change)="selectedImage($event,document,i)"
                        name="photo" accept="image/*" style="display:none;" />
                    </a>

                    <a *ngIf="document.isPdf" class="form-control documentcard" type="upload " id="resume" required>
                      <div>
                        <div class="fileUpload">
                          <i class="fa fa-file-pdf txt-info" style="font-size:30px"></i>
                          <h4 class="px-2 pb-2">
                            {{document.displayName}}(maxSize:{{document.maxSize}}KB)<span *ngIf="document.isRequired"
                              style="color: red;">*</span>
                            <ng-container *ngIf="document.documentCount > 1">
                              {{document?.documentName}}-{{document.count}}</ng-container>
                          </h4>
                        </div>
                        <mat-error *ngIf="document.documentError && document.isPdf">
                          {{document.displayName}} is required
                        </mat-error>
                        <a href="javascript:;" class="mt-2 btn btn-sm btn-info filterbtn" (click)="filePdfInput.click()"
                          title="{{ 'tooltip_lbl_insert_loan' |translate}}">
                          <i class="fa fa-upload"></i>{{'button_lbl_upload'| translate}}
                        </a>
                        <a *ngIf="document.documentData" (click)="debugBase64(document.documentData)" target="_blank"
                          class="mt-2 btn btn-sm btn-info filterbtn"
                          title="{{ 'tooltip_lbl_view_document' |translate}}">
                          <i class="fa fa-eye"></i>{{'button_lbl_view'| translate}}
                        </a>
                      </div>
                      <input type="file" #filePdfInput id="uploadFile" (change)="selectedImage($event,document,i)"
                        name="pdf" accept="application/pdf" style="display:none;" />
                    </a>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <div class="form-group">
                    <div class="form-check" style="font-size: 16px; padding-top: 20px;">
                      <input id="checkbox-info-1" type="checkbox" value="isDone" name="isDone" [formControl]="isDone"
                        [checked]="isSelect"> {{'lbl_self_declaration'| translate}}<span style="color: red;">*</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modalButton">
              <button class="btn btn-info filterbtn pull-right " type="submit"
                (click)="addHomeLoanDocument()">{{'button_lbl_save'| translate}}</button>
              <button class="btn btn-info filterbtn pull-right " type="submit"
                matStepperPrevious>{{'button_lbl_previous'|
                translate}}</button>
            </div>
          </mat-step>
        </mat-stepper>
      </div>
    </div>
  </div>
</div>