<title *ngIf="serviceName=='personal-loan'">Personal Loan </title>
<title *ngIf="serviceName=='instant-loan'">Instant Loan</title>

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

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

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <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_full_name'| translate}} <span
                                                    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
                                                    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="{{ 'lbl_from_date' |translate}}" name="fromDate"
                                                    [readonly]="true" (focus)="filterPickerFrom.open()"
                                                    (dateChange)="getAge()"
                                                    (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 class="col-md-4">
                                        <div class="form-group">
                                            <label for="name">{{'lbl_alternative_contact_no'| translate}} <span
                                                    style="color: red;">*</span></label>
                                            <input class="form-control" type="text" name="contact"
                                                formControlName="alternativeContactNo" ContactNo required>
                                            <mat-error
                                                *ngIf="(basicDetailForm.get('alternativeContactNo') && !basicDetailForm.get('alternativeContactNo')!.valid  && basicDetailForm.get('alternativeContactNo')!.touched)">
                                                <span
                                                    *ngIf="basicDetailForm.get('alternativeContactNo')!.errors!['required']">{{'message_lbl_contact_no_is_required'|
                                                    translate}}</span>
                                                <span
                                                    *ngIf="basicDetailForm.get('alternativeContactNo')!.errors!['minlength']">{{'message_lbl_enter_valid_contact_no'|
                                                    translate}}</span>
                                            </mat-error>

                                        </div>
                                    </div>
                                </div>
                                <div class="row mx-0">

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <div class="col-form-label">{{'lbl_select_marital_status'| translate}} <span
                                                    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 class="col-md-4">
                                        <div class="form-group">
                                            <label for="name">{{'lbl_mothers_name'| translate}} <span
                                                    style="color: red;">*</span></label>
                                            <input class="form-control" type="text" name="refernce"
                                                formControlName="motherName" 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-lg-4">
                                        <div class="form-group">
                                            <label for="name">{{'lbl_fathers_name'| translate}} <span
                                                    style="color: red;">*</span></label>
                                            <input class="form-control" type="text" name="refernce"
                                                formControlName="fatherName" onlyAlphabets>
                                            <mat-error
                                                *ngIf="(basicDetailForm.get('fatherName') && !basicDetailForm.get('fatherName')!.valid  && basicDetailForm.get('fatherName')!.touched)">
                                                {{'add_personal_loan_message_lbl_fathers_name_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_loan_amount'| translate}} <span
                                                    style="color: red;">*</span></label>
                                            <input class="form-control" type="text" formControlName="loanAmount"
                                                required onlyNumbers>
                                            <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">
                                            <div class="col-form-label">{{'add_personal_loan_lbl_select_tenure'|
                                                translate}} <span style="color: red;">*</span>
                                            </div>
                                            <ng-select [items]="tenures" class="js-example-basic-single p-0"
                                                placeholder="{{ 'add_personal_loan_lbl_select_tenure' |translate}}"
                                                bindLabel="name" bindValue="id" name="tenureId"
                                                formControlName="tenureId" required>
                                            </ng-select>
                                            <mat-error
                                                *ngIf="(basicDetailForm.get('maritalStatusId') && !basicDetailForm.get('maritalStatusId')!.valid && basicDetailForm.get('maritalStatusId')!.touched)">
                                                {{'add_personal_loan_message_lbl_tanure_is_required'| translate}}
                                            </mat-error>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="name">{{'lbl_gender'| 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="Male" value="Male" formControlName="gender">
                                                <label class="mb-0" for="Male">{{'lbl_male'| translate}}</label>
                                            </div>
                                            <div class="radio radio-primary">
                                                <input type="radio" id="Female" value="Female" formControlName="gender">
                                                <label class="mb-0" for="Female">{{'lbl_female'| translate}}</label>
                                            </div>
                                        </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-4">
                                                <div class="form-group">
                                                    <label>{{ controlName.key | titlecase }}
                                                        <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>
                                                    </label>
                                                    <input class="form-control" [formControlName]="controlName.key"
                                                        type="text" required>
                                                    <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="row mx-0 border mb-3 mx-3">
                                    <div class="col-lg-12">
                                        <h3 class="mt-2" style="font-size:25px">{{'lbl_current_address'| translate}}
                                        </h3>
                                    </div>
                                    <div class="row w-100 mx-0">
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name">{{'lbl_label'| translate}} <span
                                                        style="color: red;">*</span></label>
                                                <input class="form-control" type="text" formControlName="label"
                                                    name="label">
                                                <mat-error
                                                    *ngIf="(basicDetailForm.get('label') && !basicDetailForm.get('label')!.valid && basicDetailForm.get('label')!.touched)">
                                                    {{'add_personal_loan_message_lbl_label_is_required'| translate}}
                                                </mat-error>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="addressLine1">{{'lbl_address_line1'| translate}} <span
                                                        style="color: red;">*</span></label>
                                                <input class="form-control" type="text" formControlName="addressLine1"
                                                    name="addressLine1" required>
                                                <mat-error
                                                    *ngIf="(basicDetailForm.get('addressLine1') && !basicDetailForm.get('addressLine1')!.valid && basicDetailForm.get('addressLine1')!.touched)">
                                                    {{'message_lbl_address_is_required'| translate}}
                                                </mat-error>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name">{{'lbl_address_line_2'| translate}}</label>
                                                <input class="form-control" type="text" formControlName="addressLine2"
                                                    name="addressLine2">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row w-100 mx-0">
                                        <div class="col-lg-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"
                                                    (keyup)="onKeyUpEvent($event,'currentAddress',true)" onlyNumbers
                                                    maxlength="6" required>
                                                <mat-error
                                                    *ngIf="(basicDetailForm.get('pincode') && !basicDetailForm.get('pincode')!.valid  && basicDetailForm.get('pincode')!.touched)">
                                                    <span *ngIf="basicDetailForm.get('pincode')!.errors!['required']">
                                                        {{'message_lbl_pincode_is_required'| translate}}</span>
                                                    <span *ngIf="basicDetailForm.get('pincode')!.errors!['minlength']">
                                                        {{'message_lbl_enter_valid_pincode'| translate}}</span>
                                                </mat-error>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <div class="col-form-label">{{'lbl_select_city'| translate}} <span
                                                        style="color: red;">*</span>
                                                </div>
                                                <ng-select [items]="currentCities" class="js-example-basic-single p-0"
                                                    placeholder="{{ 'lbl_select_city' |translate}}" bindLabel="name"
                                                    bindValue="id" name="cityName" required formControlName="cityId"
                                                    (change)="selectedCityBasicDetail()">
                                                </ng-select>
                                                <mat-error
                                                    *ngIf="(basicDetailForm.get('cityId') && !basicDetailForm.get('cityId')!.valid && basicDetailForm.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="(basicDetailForm.get('district') && !basicDetailForm.get('district')!.valid && basicDetailForm.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="(basicDetailForm.get('state') && !basicDetailForm.get('state')!.valid && basicDetailForm.get('state')!.touched)">
                                                    {{'message_lbl_state_is_required'| translate}}
                                                </mat-error>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div *ngIf="basicDetailForm.get('maritalStatusId')!.value && basicDetailForm.get('maritalStatusId')!.value == 1"
                                    class="row mx-0 border mb-3 mx-3">
                                    <div class="col-lg-12">
                                        <h3 class="mt-2" style="font-size:25px">{{'add_personal_loan_lbl_spouse_detail'|
                                            translate}}l</h3>
                                    </div>
                                    <div class="col-lg-12 mx-0">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="name">{{'lbl_spouse_name'| translate}}</label>
                                                <input class="form-control" type="text" name="spouseName"
                                                    formControlName="spouseName" onlyAlphabets>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="row mx-0 border mb-3 mx-3" *ngIf="isTransfer.value=='Bank Transfer'">
                                    <div class="col-lg-12">
                                        <h3 class="mt-2" style="font-size:25px">{{'lbl_transfer'| translate}}</h3>
                                    </div>
                                    <div class="col-lg-12 mx-0">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_loan_amount_taken_existing'|
                                                        translate}}<span style="color: red;">*</span></label>
                                                    <input class="form-control" type="text"
                                                        name="loanAmountTakenExisting"
                                                        formControlName="loanAmountTakenExisting" onlyNumbers
                                                        [required]="isTransfer.value=='Bank Transfer'">
                                                    <mat-error
                                                        *ngIf="(basicDetailForm.get('loanAmountTakenExisting') && !basicDetailForm.get('loanAmountTakenExisting')!.valid && basicDetailForm.get('loanAmountTakenExisting')!.touched)">
                                                        {{'add_personal_loan_message_lbl_existing_loan_amount_is_required'|
                                                        translate}}
                                                    </mat-error>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modalButton">

                                <button class="btn btn-info filterbtn pull-right " type="submit"
                                    (click)="addBasicDetail(basicDetailForm,customFieldForm)">{{'button_lbl_next'|
                                    translate}}</button>
                                <button class="btn btn-info filterbtn pull-right " type="submit"
                                    matStepperPrevious>{{'button_lbl_previous'| translate}}</button>
                            </div>
                        </form>
                    </mat-step>
                    <mat-step label="Employment Detail">
                        <form [formGroup]="employmentDetailForm">
                            <div class="setup-content" id="step-1">
                                <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)="changeEmploymentType()">
                                            </ng-select>
                                            <mat-error
                                                *ngIf="(employmentDetailForm.get('employmentTypeId') && !employmentDetailForm.get('employmentTypeId')!.valid && employmentDetailForm.get('employmentTypeId')!.touched)">
                                                {{'message_lbl_employment_type_is_required'| translate}}
                                            </mat-error>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>{{'lbl_monthly_income'| translate}} <span
                                                    style="color: red;">*</span></label>
                                            <input class="form-control" type="text" name="income"
                                                formControlName="monthlyIncome" required onlyNumbers>
                                            <mat-error
                                                *ngIf="(employmentDetailForm.get('monthlyIncome') && !employmentDetailForm.get('monthlyIncome')!.valid && employmentDetailForm.get('monthlyIncome')!.touched)">
                                                {{'message_lbl_monthly_income_is_required'| translate}}
                                            </mat-error>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="name">{{'lbl_name_of_the_organization_company'| translate}}
                                                <span style="color: red;">*</span></label>

                                            <div class="form-group">
                                                <input class="form-control" list="cities" name="city"
                                                    formControlName="companyName" (keyup)="searchCompany($event)">
                                                <datalist id="cities">
                                                    <option *ngFor="let company of companyCategory"
                                                        [value]="company.companyName"></option>
                                                </datalist>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mx-0">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="name"> {{'lbl_email'| translate}} <span
                                                    style="color: red;">*</span></label>
                                            <input class="form-control" type="text" formControlName="officeEmailId"
                                                name="email">
                                            <mat-error
                                                *ngIf="(employmentDetailForm.get('officeEmailId') && !employmentDetailForm.get('officeEmailId')!.valid  && employmentDetailForm.get('officeEmailId')!.touched)">
                                                <span
                                                    *ngIf="employmentDetailForm.get('officeEmailId')!.errors!['required']">{{'message_lbl_email_is_required'|
                                                    translate}}</span>
                                                <span
                                                    *ngIf="employmentDetailForm.get('officeEmailId')!.errors?.['pattern']">{{'message_lbl_enter_valid_email'|
                                                    translate}}</span>
                                            </mat-error>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="name">{{'lbl_designation'| translate}} <span
                                                    style="color: red;">*</span></label>
                                            <input class="form-control" type="text" formControlName="designation"
                                                name="designation">
                                            <mat-error
                                                *ngIf="(employmentDetailForm.get('designation') && !employmentDetailForm.get('designation')!.valid && employmentDetailForm.get('designation')!.touched)">
                                                {{'message_lbl_designation_is_required'| translate}}
                                            </mat-error>
                                        </div>
                                    </div>
                                    <div class="col-md-4"
                                        *ngIf="employmentDetailForm.get('employmentTypeId')!.value != '6'">
                                        <div class="form-group">
                                            <div class="col-form-label">
                                                {{'add_personal_loan_lbl_select_company_category'| translate}}</div>
                                            <ng-select [items]="companyTypes" class="js-example-basic-single p-0"
                                                placeholder="{{ 'add_personal_loan_lbl_select_company_category' |translate}}"
                                                bindLabel="name" bindValue="id" name="typeId"
                                                formControlName="companyTypeId">
                                            </ng-select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mx-0">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label
                                                for="name">{{'add_personal_loan_experience_in_profession_current_company_experience'|
                                                translate}} <span style="color: red;">*</span></label>
                                            <input class="form-control" type="text" name="experience"
                                                formControlName="currentCompanyExperience" onlyNumbers>
                                            <mat-error
                                                *ngIf="(employmentDetailForm.get('currentCompanyExperience') && !employmentDetailForm.get('currentCompanyExperience')!.valid && employmentDetailForm.get('currentCompanyExperience')!.touched)">
                                                {{'message_lbl_experience_is_required'| translate}}
                                            </mat-error>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label> {{'lbl_duration'| translate}}</label>
                                            <ng-select class="form-select" [formControl]="experienceTime">
                                                <ng-option value="Months" name="experienceTime">{{'lbl_month'|
                                                    translate}}</ng-option>
                                                <ng-option value="Year" name="experienceTime">{{'lbl_year'|
                                                    translate}}</ng-option>
                                            </ng-select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mx-0 border mt-3 mx-3">
                                    <div class="col-lg-12">
                                        <h3 class="mt-2" style="font-size:25px">{{'lbl_office_address'| translate}}</h3>
                                    </div>
                                    <div class="row w-100 mx-0">
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name">{{'lbl_label'| translate}} <span
                                                        style="color: red;">*</span></label>
                                                <input class="form-control" type="text" formControlName="label"
                                                    name="label">
                                                <mat-error
                                                    *ngIf="(employmentDetailForm.get('label') && !employmentDetailForm.get('label')!.valid && employmentDetailForm.get('label')!.touched)">
                                                    {{'add_personal_loan_message_lbl_label_is_required'| translate}}
                                                </mat-error>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name">{{'lbl_address_line1'| translate}} <span
                                                        style="color: red;">*</span></label>
                                                <input class="form-control" type="text" formControlName="addressLine1"
                                                    name="addressLine1" required>
                                                <mat-error
                                                    *ngIf="(employmentDetailForm.get('addressLine1') && !employmentDetailForm.get('addressLine1')!.valid && employmentDetailForm.get('addressLine1')!.touched)">
                                                    {{'message_lbl_address_is_required'| translate}}
                                                </mat-error>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name">{{'lbl_address_line_2'| translate}}</label>
                                                <input class="form-control" type="text" formControlName="addressLine2"
                                                    name="addressLine2">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row w-100 mx-0">
                                        <div class="col-lg-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"
                                                    (keyup)="onKeyUpEvent($event, 'officeAddress',true)" onlyNumbers
                                                    maxlength="6" required>
                                                <mat-error
                                                    *ngIf="(employmentDetailForm.get('pincode') && !employmentDetailForm.get('pincode')!.valid  && employmentDetailForm.get('pincode')!.touched)">
                                                    <span
                                                        *ngIf="employmentDetailForm.get('pincode')!.errors!['required']">{{'message_lbl_pincode_is_required'|
                                                        translate}}</span>
                                                    <span
                                                        *ngIf="employmentDetailForm.get('pincode')!.errors!['minlength']">{{'message_lbl_enter_valid_pincode'|
                                                        translate}}</span>
                                                </mat-error>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <div class="col-form-label">{{'lbl_select_city'| translate}} <span
                                                        style="color: red;">*</span>
                                                </div>
                                                <ng-select [items]="officeCities" class="js-example-basic-single p-0"
                                                    placeholder="{{ 'lbl_select_city' |translate}}" bindLabel="name"
                                                    bindValue="id" name="cityName" required formControlName="cityId"
                                                    (change)="selectedCity()">
                                                </ng-select>
                                                <mat-error
                                                    *ngIf="(employmentDetailForm.get('cityId') && !employmentDetailForm.get('cityId')!.valid && employmentDetailForm.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="(employmentDetailForm.get('district') && !employmentDetailForm.get('district')!.valid && employmentDetailForm.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="(employmentDetailForm.get('state') && !employmentDetailForm.get('state')!.valid && employmentDetailForm.get('state')!.touched)">
                                                    {{'message_lbl_state_is_required'| translate}}
                                                </mat-error>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modalButton">

                                <button class="btn btn-info filterbtn pull-right " type="submit"
                                    (click)="addEmploymentDetail(employmentDetailForm)">{{'button_lbl_next'|
                                    translate}}</button>
                                <button class="btn btn-info filterbtn pull-right " type="submit"
                                    matStepperPrevious>{{'button_lbl_previous'| translate}}</button>
                            </div>
                        </form>
                    </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 mx-0 border mt-3">
                                    <div class="col-lg-12">
                                        <h3 class="mt-2" style="font-size:25px">{{'add_personal_loan_two_references'|
                                            translate}}</h3>
                                    </div>
                                    <div class="col">
                                        <h4 class="mt-2" style="font-size:20px">{{'add_personal_loan_first_reference'|
                                            translate}}</h4>
                                    </div>
                                    <form [formGroup]="refrenceForm">
                                        <div class="row mx-0 w-100">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_name'| translate}} <span
                                                            style="color: red;">*</span></label>
                                                    <input class="form-control" type="text" name="firstRefrenceName"
                                                        formControlName="firstRefrenceName" onlyAlphabets required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('firstRefrenceName') && !refrenceForm.get('firstRefrenceName')!.valid  && refrenceForm.get('firstRefrenceName')!.touched)">
                                                        {{'message_lbl_name_is_required'| translate}}
                                                    </mat-error>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_contact_no'| translate}} <span
                                                            style="color: red">*</span></label>
                                                    <input class="form-control" type="text" name="spouseContactNo"
                                                        formControlName="firstRefrenceContactNo" ContactNo required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('firstRefrenceContactNo') && !refrenceForm.get('firstRefrenceContactNo')!.valid  && refrenceForm.get('firstRefrenceContactNo')!.touched)">
                                                        <span
                                                            *ngIf="refrenceForm.get('firstRefrenceContactNo')!.errors!['required']">{{'message_lbl_contact_no_is_required'|
                                                            translate}}</span>
                                                        <span
                                                            *ngIf="refrenceForm.get('firstRefrenceContactNo')!.errors!['minlength']">{{'message_lbl_enter_valid_contact_no'|
                                                            translate}}</span>
                                                    </mat-error>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row w-100 mx-0">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_label'| translate}} <span
                                                            style="color: red;">*</span></label>
                                                    <input class="form-control" type="text" formControlName="firstLabel"
                                                        name="firstLabel">
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('firstLabel') && !refrenceForm.get('firstLabel')!.valid && refrenceForm.get('firstLabel')!.touched)">
                                                        {{'add_personal_loan_message_lbl_label_is_required'| translate}}
                                                    </mat-error>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="addressLine1">{{'lbl_address_line1'| translate}} <span
                                                            style="color: red;">*</span></label>
                                                    <input class="form-control" type="text"
                                                        formControlName="firstAddressLine1" name="firstAddressLine1"
                                                        required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('firstAddressLine1') && !refrenceForm.get('firstAddressLine1')!.valid && refrenceForm.get('firstAddressLine1')!.touched)">
                                                        {{'message_lbl_address_is_required'| translate}}
                                                    </mat-error>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_address_line_2'| translate}}</label>
                                                    <input class="form-control" type="text"
                                                        formControlName="firstAddressLine2" name="firstAddressLine2">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row w-100 mx-0">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_pincode'| translate}} <span
                                                            style="color: red;">*</span></label>
                                                    <input class="form-control" type="text"
                                                        formControlName="firstPincode"
                                                        (keyup)="onKeyUpEvent($event, 'firstReferenceAddress',true)"
                                                        onlyNumbers maxlength="6" required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('firstPincode') && !refrenceForm.get('firstPincode')!.valid  && refrenceForm.get('firstPincode')!.touched)">
                                                        <span
                                                            *ngIf="refrenceForm.get('firstPincode')!.errors!['required']">{{'message_lbl_pincode_is_required'|
                                                            translate}}</span>
                                                        <span
                                                            *ngIf="refrenceForm.get('firstPincode')!.errors!['minlength']">{{'message_lbl_enter_valid_pincode'|
                                                            translate}}</span>
                                                    </mat-error>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <div class="col-form-label">{{'lbl_select_city'| translate}} <span
                                                            style="color: red;">*</span></div>
                                                    <ng-select [items]="firstCities" class="js-example-basic-single p-0"
                                                        placeholder="{{ 'lbl_select_city' |translate}}" bindLabel="name"
                                                        bindValue="id" name="cityName" required
                                                        formControlName="firstCityId"
                                                        (change)="selectedCityFirstReference()">
                                                    </ng-select>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('firstCityId') && !refrenceForm.get('firstCityId')!.valid && refrenceForm.get('firstCityId')!.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="firstDistrict" readonly required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('firstDistrict') && !refrenceForm.get('firstDistrict')!.valid && refrenceForm.get('firstDistrict')!.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="firstState"
                                                        readonly required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('firstState') && !refrenceForm.get('firstState')!.valid && refrenceForm.get('firstState')!.touched)">
                                                        {{'message_lbl_state_is_required'| translate}}
                                                    </mat-error>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <h4 class="mt-2" style="font-size:20px">
                                                {{'add_personal_loan_second_reference'| translate}}
                                                / </h4>
                                        </div>
                                        <div class="row mx-0 w-100">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_name'| translate}} <span
                                                            style="color: red;">*</span></label>
                                                    <input class="form-control" type="text" name="secondRefrenceName"
                                                        formControlName="secondRefrenceName" onlyAlphabets required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('secondRefrenceName') && !refrenceForm.get('secondRefrenceName')!.valid  && refrenceForm.get('secondRefrenceName')!.touched)">
                                                        {{'message_lbl_name_is_required'| translate}}
                                                    </mat-error>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_contact_no'| translate}} <span
                                                            style="color: red;">*</span></label>
                                                    <input class="form-control" type="text" name="spouseContactNo"
                                                        formControlName="secondRefrenceContactNo" ContactNo requried>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('secondRefrenceContactNo') && !refrenceForm.get('secondRefrenceContactNo')!.valid  && refrenceForm.get('secondRefrenceContactNo')!.touched)">
                                                        <span
                                                            *ngIf="refrenceForm.get('secondRefrenceContactNo')!.errors!['required']">{{'message_lbl_contact_no_is_required'|
                                                            translate}}</span>
                                                        <span
                                                            *ngIf="refrenceForm.get('secondRefrenceContactNo')!.errors!['minlength']">{{'message_lbl_enter_valid_contact_no'|
                                                            translate}}</span>
                                                    </mat-error>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row w-100 mx-0">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_label'| translate}} <span
                                                            style="color: red;">*</span></label>
                                                    <input class="form-control" type="text"
                                                        formControlName="secondLabel" name="secondLabel">
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('secondLabel') && !refrenceForm.get('secondLabel')!.valid && refrenceForm.get('secondLabel')!.touched)">
                                                        {{'add_personal_loan_message_lbl_label_is_required'| translate}}
                                                    </mat-error>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="addressLine1">{{'lbl_address_line1'| translate}} <span
                                                            style="color: red;">*</span></label>
                                                    <input class="form-control" type="text"
                                                        formControlName="secondAddressLine1" name="secondAddressLine1"
                                                        required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('secondAddressLine1') && !refrenceForm.get('secondAddressLine1')!.valid && refrenceForm.get('secondAddressLine1')!.touched)">
                                                        {{'message_lbl_address_is_required'| translate}}
                                                    </mat-error>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_address_line_2'| translate}}</label>
                                                    <input class="form-control" type="text"
                                                        formControlName="secondAddressLine2" name="secondAddressLine2">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row w-100 mx-0">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="name">{{'lbl_pincode'| translate}} <span
                                                            style="color: red;">*</span></label>
                                                    <input class="form-control" type="text"
                                                        formControlName="secondPincode"
                                                        (keyup)="onKeyUpEvent($event, 'secondReferenceAddress',true)"
                                                        onlyNumbers maxlength="6" required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('secondPincode') && !refrenceForm.get('secondPincode')!.valid  && refrenceForm.get('secondPincode')!.touched)">
                                                        <span
                                                            *ngIf="refrenceForm.get('secondPincode')!.errors!['required']">{{'message_lbl_pincode_is_required'|
                                                            translate}}</span>
                                                        <span
                                                            *ngIf="refrenceForm.get('secondPincode')!.errors!['minlength']">{{'message_lbl_enter_valid_pincode'|
                                                            translate}}</span>
                                                    </mat-error>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <div class="col-form-label">{{'lbl_select_city'| translate}} <span
                                                            style="color: red;">*</span></div>
                                                    <ng-select [items]="secondCities"
                                                        class="js-example-basic-single p-0"
                                                        placeholder="{{ 'lbl_select_city' |translate}}" bindLabel="name"
                                                        bindValue="id" name="cityName" required
                                                        formControlName="secondCityId"
                                                        (change)="selectedCitySecondReference()">
                                                    </ng-select>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('secondCityId') && !refrenceForm.get('secondCityId')!.valid && refrenceForm.get('secondCityId')!.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="secondDistrict" readonly required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('secondDistrict') && !refrenceForm.get('secondDistrict')!.valid && refrenceForm.get('secondDistrict')!.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="secondState" readonly required>
                                                    <mat-error
                                                        *ngIf="(refrenceForm.get('secondState') && !refrenceForm.get('secondState')!.valid && refrenceForm.get('secondState')!.touched)">
                                                        {{'message_lbl_state_is_required'| translate}}
                                                    </mat-error>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </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)="addPersonalLoanDocumentAndRefrences(refrenceForm)">{{'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>