<title>Credit bankCreditCards</title>
<div *ngIf="customerCreditCardId else Add">
  <app-breadcrumb [title]="'Credit Card'" [items]="[{'name':'CreditCard', 'route':'/creditCards'}]"
    [active_item]="'Edit'">
  </app-breadcrumb>
</div>
<ng-template #Add>
  <app-breadcrumb [title]="'Credit Card'" [items]="[{'name':'CreditCard', 'route':'/creditCards'}]"
    [active_item]="'Add'">
  </app-breadcrumb>
</ng-template>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="p-4">
          <form [formGroup]="creditCardForm">
            <div>
              <h2>{{'lbl_profile_detail' | translate}}</h2>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="fullName">{{'lbl_full_name' | translate}}(As per PAN)<span
                      style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="fullName" formControlName="fullName" onlyAlphabets
                    required>
                  <mat-error
                    *ngIf="(creditCardForm.get('fullName') && !creditCardForm.get('fullName')?.valid && creditCardForm.get('fullName')?.touched)">
                    {{'message_lbl_full_name_is_required' | translate}}
                  </mat-error>
                </div>
                <div class="form-group col-md-6">
                  <label>{{'lbl_date_of_birth' | translate}} <span style="color: red;">*</span></label>
                  <mat-form-field appearance="outline" class=" w-100" (click)="toggleMenuService.togglePickerStyles()">
                    <input matInput [matDatepicker]="filterPickerFrom" formControlName="birthdate" name="birthdate"
                      [readonly]="true" (focus)="filterPickerFrom.open()" required
                      (click)="toggleMenuService.togglePickerStyles()">
                    <mat-datepicker-toggle matSuffix [for]="filterPickerFrom"
                      (click)="toggleMenuService.togglePickerStyles()">
                    </mat-datepicker-toggle>
                    <mat-datepicker #filterPickerFrom></mat-datepicker>
                    <mat-error
                      *ngIf="(creditCardForm.get('birthdate') && !creditCardForm.get('birthdate')?.valid && creditCardForm.get('birthdate')?.touched)">
                      {{'message_lbl_birthdate_is_required' | translate}}
                    </mat-error>
                  </mat-form-field>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="email">{{'lbl_email' | translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="email" formControlName="email">
                  <mat-error
                    *ngIf="(creditCardForm.get('email') && !creditCardForm.get('email')?.valid && creditCardForm.get('email')?.touched)">
                    <span
                      *ngIf="creditCardForm.get('email')!.errors!['required']">{{'message_lbl_pan_card_no_is_required' |
                      translate}}</span>
                    <span *ngIf="creditCardForm.get('email')!.errors?.['pattern']">{{'message_lbl_enter_valid_pan_card'
                      |
                      translate}}</span>
                  </mat-error>
                </div>

                <!-- <div class="form-group col-md-6">
                  <label for="panCardNo">{{'PAN Card' | translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="panCardNo" formControlName="panCardNo" required
                    oninput="this.value = this.value.toUpperCase()" maxlength="10"
                    (keypress)="keyPressAlphanumeric($event)">
                  <mat-error
                    *ngIf="(creditCardForm.get('panCardNo') && !creditCardForm.get('panCardNo')?.valid && creditCardForm.get('panCardNo')?.touched)">
                    <span
                      *ngIf="creditCardForm.get('panCardNo')!.errors!['required']">{{'message_lbl_pan_card_no_is_required' |
                      translate}}</span>
                    <span *ngIf="creditCardForm.get('panCardNo')!.errors?.['pattern']">{{'message_lbl_enter_valid_pan_card' |
                      translate}}</span>
                  </mat-error>
                </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-4 pl-0">
                      <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="form-row">
                <div class="form-group col-md-4">
                  <label for="gender">{{'lbl_gender' | translate}} <span style="color: red;">*</span></label>
                  <div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" id="radioinline1" type="radio" value="Male" name="gender"
                        formControlName="gender">
                      <label class="form-check-label" for="radioinline1">{{'lbl_male' |
                        translate}}</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" id="radioinline2" type="radio" value="Female" name="gender"
                        formControlName="gender">
                      <label class="form-check-label" for="radioinline2">{{'lbl_female' |
                        translate}}</label>
                    </div>
                  </div>
                  <mat-error
                    *ngIf="(creditCardForm.get('gender') && !creditCardForm.get('gender')?.valid && creditCardForm.get('gender')?.touched)">
                    {{'message_lbl_gender_is_required' | translate}}
                  </mat-error>
                </div>
                <div class="form-group col-md-4">
                  <label for="maritalStatus">{{'lbl_marital_status' | translate}} <span
                      style="color: red;">*</span></label>
                  <div>
                    <div class="form-check form-check-inline" *ngFor="let statuses of maritalStatuses;let i =index ">
                      <input class="form-check-input" id="radioinline_{{i}}" type="radio" [value]="statuses.id"
                        formControlName="maritalStatusId">
                      <label class="form-check-label" for="radioinline_{{i}}">{{statuses.status}}</label>
                    </div>

                  </div>
                  <mat-error
                    *ngIf="(creditCardForm.get('maritalStatusId') && !creditCardForm.get('maritalStatusId')?.valid && creditCardForm.get('maritalStatusId')?.touched)">
                    {{'message_lbl_marital_status_is_required' | translate}}
                  </mat-error>
                </div>
              </div>

              <div class="form-group">
                <label>{{'message_lbl_have_you_other_bank_credit_card' | translate}}</label>
                <div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" id="radioinline1" type="radio" value="Yes"
                      formControlName="isAlreadyCreditCard">
                    <label class="form-check-label" for="radioinline1">{{'lbl_yes' | translate}}</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" id="radioinline2" type="radio" value="No"
                      formControlName="isAlreadyCreditCard">
                    <label class="form-check-label" for="radioinline2">{{'lbl_no' | translate}}</label>
                  </div>
                </div>
              </div>
              <div *ngIf="creditCardForm.get('isAlreadyCreditCard')!.value == 'Yes'">
                <form [formGroup]="otherCreditCardForm">
                  <h3>{{'lbl_bank_detail' | translate}}</h3>
                  <div class="form-row ">
                    <div class="form-group col-md-4">
                      <label for="name">{{'lbl_bank' | translate}}</label>
                      <ng-select [items]="banks" class="js-example-basic-single p-0"
                        placeholder="{{'lbl_select_bank'| translate}}" bindLabel="name" bindValue="id" name="bank"
                        formControlName="otherCreditCardBankId" required></ng-select>
                    </div>
                    <div class="form-group col-md-4">
                      <label for="maxCreditCard">{{'Maximum Credit Limit' | translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" id="maxCreditCard" formControlName="maxCreditLimit"
                        required onlyNumbers>
                      <mat-error
                        *ngIf="(otherCreditCardForm.get('maxCreditLimit') && !otherCreditCardForm.get('maxCreditLimit')?.valid && otherCreditCardForm.get('maxCreditLimit')?.touched)">
                        {{'Maximum Credit Limit is required' | translate}}
                      </mat-error>
                    </div>
                    <div class="form-group col-md-4">
                      <label for="availableCreditCard">{{'Avaiable Credit Limit' | translate}}
                        <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" id="availableCreditCard"
                        formControlName="availableCreditLimit" required onlyNumbers>
                      <mat-error
                        *ngIf="(otherCreditCardForm.get('availableCreditLimit') && !otherCreditCardForm.get('availableCreditLimit')?.valid && otherCreditCardForm.get('availableCreditLimit')?.touched)">
                        {{'Avilable Credit Limit is required' | translate}}
                      </mat-error>
                    </div>
                  </div>
                </form>
              </div>
            </div>

            <div>
              <h2>{{'message_lbl_employment_income_information' | translate}}</h2>
              <div class="form-group">
                <label for="itrLast">{{'lbl_itr_last' | translate}} <span style="color: red;">*</span></label>
                <div *ngIf="!creditCardForm.get('lastItr')!.value else Pdf">
                  <a class="form-control" type="upload" id="itrLast"
                    style="height: 140px; width: 100%; text-align: center; border-style: dashed; border-color: rgb(63, 105, 223);display: flex;align-items: center;"
                    required>
                    <div class="absolute text-center m-auto">
                      <i class="icon-plus" style="font-size:30px" (click)="fileUpload.click()"></i>
                      <h4>{{'Tap to upload ITR Last' | translate}}</h4>
                    </div>
                  </a>
                </div>

                <ng-template #Pdf>
                  <div class="file-content">
                    <div class="file-manager">
                      <ul class="files">
                        <li class="file-box w-100">
                          <div class="file-top" style="height:140px">
                            <div class="row">
                              <div class="col-lg-12 d-flex">
                                <i class="fa fa-file-pdf txt-info m-auto" (click)="fileUpload.click()"></i>
                              </div>
                              <div class="col-lg-12 d-flex">
                                <a class="btn btn-info filterbtn m-auto"
                                  (click)="debugBase64(creditCardForm.get('lastItr')!.value)"
                                  target="_blank">{{'button_lbl_view' |
                                  translate}}</a>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </ng-template>

                <input type="file" #fileUpload id="itrLast" (change)="selectedImage($event)" name="itrLast"
                  style="display:none;" />
                <mat-error
                  *ngIf="(creditCardForm.get('lastItr') && !creditCardForm.get('lastItr')?.valid && creditCardForm.get('lastItr')?.touched)">
                  {{'Last ITR is required' | translate}}
                </mat-error>
              </div>
              <div class="form-row">
                <div class="form-group col-md-4 col-sm-12">
                  <label for="name">{{ 'lbl_employment_type'| translate }} <span style="color: red;">*</span></label>
                  <ng-select [items]="employmentTypes" class="js-example-basic-single p-0" bindLabel="name"
                    bindValue="id" name="bank" formControlName="employmentTypeId" groupBy="parentName"></ng-select>
                  <mat-error
                    *ngIf="(creditCardForm.get('employmentTypeId') && !creditCardForm.get('employmentTypeId')?.valid && creditCardForm.get('employmentTypeId')?.touched)">
                    {{ 'message_lbl_employment_type_is_required' | translate }}
                  </mat-error>
                </div>
                <div *ngIf="creditCardForm.get('employmentTypeId')!.value=='2'" class="form-group col-4">
                  <label for="name">{{ 'lbl_company_name' | translate }}</label>
                  <input class="form-control" type="text" formControlName="companyName" required>
                </div>
                <div class="form-group col-md-4 col-sm-12">
                  <label for="name">{{ 'lbl_bank' | translate }} <span style="color: red;">*</span></label>
                  <ng-select [items]="banks" class="js-example-basic-single p-0"
                    placeholder="{{'lbl_select_bank'| translate}}" bindLabel="name" bindValue="id" name="bank"
                    formControlName="bankId" required>
                  </ng-select>
                  <mat-error
                    *ngIf="(creditCardForm.get('bankId') && !creditCardForm.get('bankId')?.valid && creditCardForm.get('bankId')?.touched)">
                    {{ 'message_lbl_bank_is_required' | translate }}
                  </mat-error>
                </div>
                <div class="form-group col-md-4 col-sm-12">
                  <label for="bankAccountNo">{{ 'lbl_bank_account_number' | translate}} <span
                      style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="bankAccountNo" formControlName="bankAccountNo" required
                    onlyNumbers>
                  <mat-error
                    *ngIf="(creditCardForm.get('bankAccountNo') && !creditCardForm.get('bankAccountNo')?.valid && creditCardForm.get('bankAccountNo')?.touched)">
                    {{ 'message_lbl_bank_account_no_is_required' | translate }}
                  </mat-error>
                </div>

              </div>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="highestEducation">{{ 'lbl_highest_education' | translate }} <span
                      style="color: red;">*</span></label>
                  <ng-select [items]="educationTypes" class="js-example-basic-single p-0" bindLabel="name"
                    bindValue="id" name="bank" formControlName="educationTypeId" required>
                  </ng-select>
                  <mat-error
                    *ngIf="(creditCardForm.get('educationTypeId') && !creditCardForm.get('educationTypeId')?.valid && creditCardForm.get('educationTypeId')?.touched)">
                    {{ 'Highest Education is required' | translate }}
                  </mat-error>
                </div>
                <div class="form-group col-md-6">
                  <label for="officeContactNo">{{ 'lbl_office_contact_number' | translate }} <span
                      style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="officeContactNo" formControlName="officeContactNo"
                    required minlength="10" maxlength="10" onlyNumbers>
                  <mat-error
                    *ngIf="(creditCardForm.get('officeContactNo') && !creditCardForm.get('officeContactNo')?.valid && creditCardForm.get('officeContactNo')?.touched)">
                    <span *ngIf="creditCardForm.get('officeContactNo')!.errors!['required']"> {{'Office
                      Contact Number is required' | translate}}
                    </span>
                    <span *ngIf="creditCardForm.get('officeContactNo')!.errors!['minlength']">{{'Enter
                      Valid Contact Number' | translate}}</span>
                  </mat-error>
                </div>
              </div>
            </div>
          </form>
          <div>
            <h2>{{ 'lbl_present_residental_address' | translate }}</h2>
            <form [formGroup]="correspondenceAddressForm">
              <div class="form-row">
                <div class="form-group col-md-4">
                  <label for="email">{{ 'lbl_flat_no_building_name' | translate}} <span
                      style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="email" formControlName="label" required>
                  <mat-error
                    *ngIf="(correspondenceAddressForm.get('label') && !correspondenceAddressForm.get('label')?.valid && correspondenceAddressForm.get('label')?.touched)">
                    {{ 'message_lbl_flat_no_building_name_is_required' | translate }}
                  </mat-error>
                </div>
                <div class="form-group col-md-4">
                  <label for="addressLine1">{{ 'lbl_address_line1' | translate}} <span
                      style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="addressLine1" formControlName="addressLine1"
                    name="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 class="form-group col-md-4">
                  <label for="addressLine2">{{ 'lbl_address_line_2' | translate}}</label>
                  <input class="form-control" type="text" id="addressLine2" formControlName="addressLine2"
                    name="addressLine2" />
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-md-4">
                  <label for="pincode">{{ 'lbl_pincode' | translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="pincode" formControlName="pincode" maxlength="6"
                    minlength="6" required (keyup)="onKeyUpEvent($event,'present',true)" onlyNumbers>
                  <mat-error
                    *ngIf="(correspondenceAddressForm.get('pincode') && !correspondenceAddressForm.get('pincode')!.valid  && correspondenceAddressForm.get('pincode')!.touched)">
                    <span *ngIf="correspondenceAddressForm.get('pincode')!.errors!['required']">
                      {{ 'message_lbl_pincode_is_required' | translate}}</span>
                    <span *ngIf="correspondenceAddressForm.get('pincode')!.errors!['minlength']">{{'Enter
                      Valid Pin code' | translate}}</span>
                  </mat-error>
                </div>
                <div class="form-group col-md-4">
                  <label for="cityId">{{ 'lbl_city' | translate}} <span style="color: red;">*</span></label>
                  <ng-select [items]="cities" 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 class="form-group col-md-4">
                  <label for="district">{{ 'lbl_district' | translate }} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="district" formControlName="district" required
                    readonly="true">
                  <mat-error
                    *ngIf="(correspondenceAddressForm.get('district') && !correspondenceAddressForm.get('district')?.valid && correspondenceAddressForm.get('district')?.touched)">
                    {{ 'message_lbl_district_is_required' | translate}}
                  </mat-error>
                </div>
                <div class="form-group col-md-4">
                  <label for="state">{{ 'lbl_state' | translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="state" formControlName="state" required readonly="true">
                  <mat-error
                    *ngIf="(correspondenceAddressForm.get('state') && !correspondenceAddressForm.get('state')?.valid && correspondenceAddressForm.get('state')?.touched)">
                    {{ 'message_lbl_state_is_required' | translate}}
                  </mat-error>
                </div>
              </div>
            </form>
            <div class="form-group col-md-4">
              <label for="maritalStatus">{{ 'message_lbl_is_corresponding_address_same_as_permanent_address' |
                translate}}?</label>
              <div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" id="radioinline1" type="radio" value="yes"
                    [formControl]="isSameAddress">
                  <label class="form-check-label" for="radioinline1">{{ 'lbl_yes' | translate}}</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" id="radioinline2" type="radio" value="No"
                    [formControl]="isSameAddress">
                  <label class="form-check-label" for="radioinline2">{{ 'lbl_no' | translate }}</label>
                </div>
              </div>
            </div>

            <div *ngIf="isSameAddress.value == 'No'">
              <h2>{{ 'lbl_permanent_adderss' | translate}}</h2>
              <form [formGroup]="permanentAddressForm">
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="email">{{ 'lbl_flat_no_building_name' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="email" formControlName="label" required>
                    <mat-error
                      *ngIf="(permanentAddressForm.get('label') && !permanentAddressForm.get('label')?.valid && permanentAddressForm.get('label')?.touched)">
                      {{ 'message_lbl_flat_no_building_name_is_required' | translate }}
                    </mat-error>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="addressLine1">{{ 'lbl_address_line1' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="addressLine1" formControlName="addressLine1"
                      name="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 class="form-group col-md-4">
                    <label for="addressLine2">{{ 'lbl_address_line_2' | translate}}</label>
                    <input class="form-control" type="text" id="addressLine2" formControlName="addressLine2"
                      name="addressLine2" />
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="pincode">{{ 'lbl_pincode' | translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="pincode" formControlName="pincode" required onluNumber
                      maxlength="6" minlength="6" (keyup)="onKeyUpEvent($event,'permanent',true)">
                    <mat-error
                      *ngIf="(permanentAddressForm.get('pincode') && !permanentAddressForm.get('pincode')!.valid  && permanentAddressForm.get('pincode')!.touched)">
                      <span *ngIf="permanentAddressForm.get('pincode')!.errors!['required']">
                        {{ 'message_lbl_pincode_is_required' | translate}}</span>
                      <span *ngIf="permanentAddressForm.get('pincode')!.errors!['minlength']">{{'Enter
                        Valid Pin code' | translate}}</span>
                    </mat-error>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="cityId">{{ 'lbl_city' | translate}} <span style="color: red;">*</span></label>
                    <ng-select [items]="permanentAddressCities" 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 class="form-group col-md-4">
                    <label for="district">{{ 'lbl_district' | translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="district" formControlName="district" required
                      readonly="true">
                    <mat-error
                      *ngIf="(permanentAddressForm.get('district') && !permanentAddressForm.get('district')?.valid && permanentAddressForm.get('district')?.touched)">
                      {{ 'message_lbl_district_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="state">{{ 'lbl_state' | translate }} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="state" formControlName="state" required readonly="true">
                    <mat-error
                      *ngIf="(permanentAddressForm.get('state') && !permanentAddressForm.get('state')?.valid && permanentAddressForm.get('state')?.touched)">
                      {{ 'message_lbl_state_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
              </form>
            </div>
          </div>

          <div>
            <h2>{{ 'lbl_work_address' | translate}}</h2>
            <form [formGroup]="workAddressForm">
              <div class="form-row">
                <div class="form-group col-md-4">
                  <label for="email">{{ 'lbl_flat_no_building_name' | translate}} <span
                      style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="email" formControlName="label" required>
                  <mat-error
                    *ngIf="(workAddressForm.get('label') && !workAddressForm.get('label')?.valid && workAddressForm.get('label')?.touched)">
                    {{ 'message_lbl_flat_no_building_name_is_required' | translate}}
                  </mat-error>
                </div>
                <div class="form-group col-md-4">
                  <label for="addressLine1">{{ 'lbl_address_line1' | translate}} <span
                      style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="addressLine1" formControlName="addressLine1"
                    name="addressLine1" required />
                  <mat-error
                    *ngIf="(workAddressForm.get('addressLine1') && !workAddressForm.get('addressLine1')?.valid && workAddressForm.get('addressLine1')?.touched)">
                    {{ 'message_lbl_address_line_1_is_required' | translate}}
                  </mat-error>
                </div>
                <div class="form-group col-md-4">
                  <label for="addressLine2">{{ 'lbl_address_line_2' | translate}}</label>
                  <input class="form-control" type="text" id="addressLine2" formControlName="addressLine2"
                    name="addressLine2" />
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-md-4">
                  <label for="pincode">{{ 'lbl_pincode' | translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="pincode" maxlength="6" minlength="6"
                    formControlName="pincode" required onlyNumbers (keyup)="onKeyUpEvent($event,'work',true)">
                  <mat-error
                    *ngIf="(workAddressForm.get('pincode') && !workAddressForm.get('pincode')!.valid  && workAddressForm.get('pincode')!.touched)">
                    <span *ngIf="workAddressForm.get('pincode')!.errors!['required']">
                      {{ 'message_lbl_pincode_is_required' | translate}}</span>
                    <span *ngIf="workAddressForm.get('pincode')!.errors!['minlength']">{{'Enter
                      Valid Pin code' | translate}}</span>
                  </mat-error>
                </div>
                <div class="form-group col-md-4">
                  <label>{{ 'lbl_city' | translate}} <span style="color: red;">*</span></label>
                  <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="(workAddressForm.get('cityId') && !workAddressForm.get('cityId')!.valid && workAddressForm.get('cityId')!.touched)">
                    {{ 'message_lbl_city_is_required' | translate}}
                  </mat-error>
                </div>
                <div class="form-group col-md-4">
                  <label for="district">{{ 'lbl_district' | translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="district" formControlName="district" required
                    readonly="true">
                  <mat-error
                    *ngIf="(workAddressForm.get('district') && !workAddressForm.get('district')?.valid && workAddressForm.get('district')?.touched)">
                    {{ 'message_lbl_district_is_required' | translate}}
                  </mat-error>
                </div>
                <div class="form-group col-md-4">
                  <label for="state">{{ 'lbl_state' | translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="state" formControlName="state" required readonly="true">
                  <mat-error
                    *ngIf="(workAddressForm.get('state') && !workAddressForm.get('state')?.valid && workAddressForm.get('state')?.touched)">
                    {{ 'message_lbl_state_is_required' | translate}}
                  </mat-error>
                </div>
              </div>
            </form>
          </div>

          <div>
            <h2>{{ 'lbl_choose_address' | translate}}</h2>
            <div class="form-group col">
              <label for="communicationAddress">{{ 'lbl_communication_address' | translate}} <span
                  style="color: red;">*</span></label>
              <div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" id="radioinline1" type="radio" value="1" name="communicationAddress"
                    [formControl]="communicationAdressId">
                  <label class="form-check-label" for="radioinline1">{{'lbl_present_resident_address' |
                    translate}}</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" id="radioinline2" type="radio" value="2" name="communicationAddress"
                    [formControl]="communicationAdressId">
                  <label class="form-check-label" for="radioinline2">{{ 'lbl_work_address' | translate}}</label>
                </div>
              </div>
              <mat-error
                *ngIf="(creditCardForm.get('communicationAdressId') && !creditCardForm.get('communicationAdressId')?.valid && creditCardForm.get('communicationAdressId')?.touched)">
                {{ 'Communication address is required' | translate}}
              </mat-error>
            </div>
          </div>

          <div class="modal-footer">
            <button class="btn btn-info filterbtn" type="submit" (click)="insertCreditCard(basicmodal)">
              {{ 'button_lbl_save' | translate}}
            </button>
            <button class="btn btn-secondary filterbtn" type="reset" (click)="navigateCreditCardList()">
              {{ 'button_lbl_cancel' | translate}}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ng-template #basicmodal let-modal>
    <div>
      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">{{ 'Select Credit Card' | 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 pd-20">
        <ng-container *ngIf="eligibleCreditCards && eligibleCreditCards.length  > 0">
          <div class="row mx-0">
            <ng-container *ngFor="let creditCard of eligibleCreditCards;let i = index">
              <a (click)="getSelectedBankCreditCard(creditCard)">
                <div class="border p-2 mr-2"
                  [ngStyle]="{'background-color':creditCard.bankId == selectedbank ? '#dad6ff':'#fff'}">
                  {{creditCard.bankName}}</div>
              </a>

            </ng-container>
          </div>
          <table mat-table [dataSource]="selectedBankCreditCard"
            class=" maintable mat-elevation-z8 table-striped table-vcenter" style="box-shadow: none;" aria-label="">
            <ng-container matColumnDef="id">
              <th mat-header-cell *matHeaderCellDef="let element;" style="width:75px">
                #</th>
              <td mat-cell *matCellDef="let element; let i = index;" style="width:75px">
                <input id="checkbox-info-1" type="checkbox" [checked]="element.isSelected"
                  [(ngModel)]="element.isSelected" (change)="changeSelectedCreditCard(element)">
                {{i+ 1}}
              </td>
            </ng-container>
            <ng-container matColumnDef="creditCard">
              <th mat-header-cell *matHeaderCellDef>{{ 'Credit Card' | translate}}</th>
              <td mat-cell *matCellDef="let element">
                <img class="creditCard" [src]="element?.creditCardUrl" alt="">
              </td>
            </ng-container>
            <ng-container matColumnDef="bnakCreditCard">
              <th mat-header-cell *matHeaderCellDef>{{ 'Bank CreditCard' | translate}}</th>
              <td mat-cell *matCellDef="let element">
                <ng-container *ngIf="element.creditCardName else NoBank">
                  {{element.creditCardName}}
                  <br>
                </ng-container>
                <ng-template #NoBank>
                  <p>--</p>
                </ng-template>
              </td>
            </ng-container>
            <ng-container matColumnDef="joiningfee">
              <th mat-header-cell *matHeaderCellDef>{{ 'lbl_joining_fee' | translate}}</th>
              <td mat-cell *matCellDef="let element">
                <ng-container *ngIf="element.joiningfee else NoJoining">
                  {{element.joiningfee | currency:'INR'}}
                  <br>
                </ng-container>
                <ng-template #NoJoining>
                  <p>--</p>
                </ng-template>
              </td>
            </ng-container>
            <ng-container matColumnDef="renualfee">
              <th mat-header-cell *matHeaderCellDef>{{ 'lbl_renewal_fee' | translate}}</th>
              <td mat-cell *matCellDef="let element">
                <ng-container *ngIf="element.renualfee else NoRenual">
                  {{element.renualfee | currency:'INR'}}
                  <br>
                </ng-container>
                <ng-template #NoRenual>
                  <p>--</p>
                </ng-template>
              </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: displayColumns;" class="student-element-row"
              style="cursor: pointer;"></tr>
          </table>
        </ng-container>
      </div>
      <div class="modal-footer">
        <button class="btn btn-info filterbtn" (click)="insertSelectedBankCreditCard()">
          {{ 'button_lbl_save' | translate}}
        </button>
      </div>
    </div>
  </ng-template>
</div>