<title>Employee</title>

<div *ngIf="paramid else Add">
  <app-breadcrumb [title]="'Employee'" [items]="[{'name':'Employees', 'route':'/employees'}]" [active_item]="'Edit'">
  </app-breadcrumb>
</div>
<ng-template #Add>
  <app-breadcrumb [title]="'Employee'" [items]="[{'name':'Employees', 'route':'/employees'}]" [active_item]="'Add'">
  </app-breadcrumb>
</ng-template>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <mat-drawer-container class="example-container" autosize>
        <div class="card">
          <div class="p-4">
            <form [formGroup]="employeeform">

              <div>
                <h2>{{ 'lbl_personal_detail' | translate}}</h2>
                <div class="form-row">
                  <div class="col-lg-2 col-sm-12">
                    <div class="form-row">
                      <div class="form-group">
                        <div class="main-contact-info-header pt-3">
                          <div *ngIf="!this.dsa.profilePicUrl else upload">
                            <img src="../../../assets/admin/images/userprofile.png" class="rounded-pill" width="120px"
                              height="120px" alt="" (click)="fileInput.click()" />
                          </div>
                          <ng-template #upload>
                            <img [src]="this.dsa.profilePicUrl" class="rounded-pill" width="120px" height="120px" alt=""
                              (click)="fileInput.click()" />
                          </ng-template>
                        </div>
                        <a>
                          <input type="file" #fileInput id="profilePicUrl"
                            (change)="selectedImage($event, 'profilePicUrl')" name="profilePicUrl"
                            style="display:none;" />
                        </a>

                        <div class="center">
                          <button class="p-2 text-black"
                            *ngIf="this.dsa.profilePicUrl && this.dsa.profilePicUrl.length > 0" (click)="removeImage()"
                            style="text-align:center; border: none; border-radius:40%; font-size: 20px;">
                            <i class="icon-trash"></i>
                          </button>
                          <button class="p-2 text-black" *ngIf="!this.dsa.profilePicUrl"
                            style="text-align:center; border: none; border-radius:40%; font-size: 18px;">
                            <i class="icon-gallery" (click)="fileInput.click()"></i>
                          </button>
                        </div>

                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group">
                        <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="(employeeform.get('gender') && !employeeform.get('gender')?.valid && employeeform.get('gender')?.touched)">
                          {{ 'message_lbl_gender_is_required' | translate}}
                        </mat-error>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-10 col-sm-12">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="fullName">{{ 'lbl_full_name' | translate}} <span
                            style="color: red;">*</span></label>
                        <input class="form-control" type="text" id="fullName" name="fullName" formControlName="fullName"
                          onlyAlphabets placeholder="{{'lbl_type_here'| translate}}" required />
                        <mat-error
                          *ngIf="(employeeform.get('fullName') && !employeeform.get('fullName')?.valid && employeeform.get('fullName')?.touched)">
                          {{ 'message_lbl_full_name_is_required' | translate}}
                        </mat-error>
                      </div>
                      <div class="form-group col-lg-6 col-md-6">
                        <label for="contactNo">{{ 'lbl_contact_no' | translate}} <span
                            style="color: red;">*</span></label>
                        <input class="form-control" type="text" maxlength="10" minlength="0" id="contactNo"
                          name="contactNo" formControlName="contactNo"
                          placeholder="{{ 'placeholder_lbl_enter_your_contact_no' |translate}}" ContactNo required>
                        <mat-error
                          *ngIf="(employeeform.get('contactNo') && !employeeform.get('contactNo')!.valid  && employeeform.get('contactNo')!.touched)">
                          <span *ngIf="employeeform.get('contactNo')!.errors!['required']">
                            {{ 'message_lbl_contact_no_is_required' | translate}}</span>
                          <span
                            *ngIf="employeeform.get('contactNo')!.errors!['minlength']">{{'message_lbl_enter_valid_contact_no'
                            } | translate}</span>
                        </mat-error>
                      </div>
                      <!-- <div class="form-group col-md-4">
                        <label for="aadhaarCardNo">{{ 'Aadhar Card No' | translate}} <span
                            style="color: red;">*</span></label>
                        <input class="form-control" type="text" id="aadhaarCardNo" formControlName="aadhaarCardNo"
                          placeholder="{{'lbl_type_here'| translate}}" maxlength="12" onlyNumbers required>
                        <mat-error
                          *ngIf="(employeeform.get('aadhaarCardNo') && !employeeform.get('aadhaarCardNo')?.valid && employeeform.get('aadhaarCardNo')?.touched)">
                          {{ 'message_lbl_aadhar_card_no_is_required' | translate}}
                        </mat-error>
                      </div>
                      <div class="form-group col-md-4">
                        <label for="panCardNo">{{ 'lbl_pan_card_no' | translate}} <span
                            style="color: red;">*</span></label>
                        <input class="form-control" type="text" id="panCardNo" formControlName="panCardNo"
                          placeholder="{{ 'placeholder_lbl_enter_pan_no' |translate}}" maxlength="10"
                          (keypress)="keyPressAlphanumeric($event)" oninput="this.value = this.value.toUpperCase()"
                          required>
                        <mat-error
                          *ngIf="(employeeform.get('panCardNo') && !employeeform.get('panCardNo')?.valid && employeeform.get('panCardNo')?.touched)">
                          {{ 'message_lbl_pan_card_no_is_required' | translate}}
                        </mat-error>
                      </div> -->
                      <div class="form-group col-md-4">
                        <label>{{ 'lbl_job_type' | translate}} <span style="color: red;">*</span></label>
                        <div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioinline2" type="radio" value="FullTime"
                              name="jobType" formControlName="jobType">
                            <label class="form-check-label" for="radioinline2">{{'lbl_full_time' | translate}}</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioinline1" type="radio" value="PartTime"
                              name="jobType" formControlName="jobType">
                            <label class="form-check-label" for="radioinline1">{{'lbl_part_time' | translate}}</label>
                          </div>
                        </div>

                      </div>

                    </div>
                    <form [formGroup]="customFieldForm">
                      <div class="row">
                        <ng-container *ngFor="let controlName of customFieldForm?.controls | keyvalue;let i = index">
                          <div class="col-lg-4 col-md-6 col-sm-12">
                            <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>
                </div>
              </div>

              <div>
                <h2>{{ 'lbl_address' | translate}}</h2>
                <div class="form-group">
                  <label for="label">{{ 'lbl_company_name' | translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="label" formControlName="label"
                    placeholder="{{ 'lbl_type_here' |translate}}" onlyAlphabets required>
                  <mat-error
                    *ngIf="(employeeform.get('label') && !employeeform.get('label')?.valid && employeeform.get('label')?.touched)">
                    {{ 'message_lbl_company_name_is_required' | translate}} is required
                  </mat-error>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="addressLine1">{{ 'lbl_address_line1' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="addressLine1" formControlName="addressLine1"
                      placeholder="{{'lbl_type_here'| translate}}" name="addressLine1" required />
                    <mat-error
                      *ngIf="(employeeform.get('addressLine1') && !employeeform.get('addressLine1')?.valid && employeeform.get('addressLine1')?.touched)">
                      {{ 'message_lbl_address_line_1_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-md-6">
                    <label for="addressLine2">{{ 'lbl_address_line_2' | translate}}</label>
                    <input class="form-control" type="text" id="addressLine2" formControlName="addressLine2"
                      placeholder="{{'lbl_type_here'| translate}}" name="addressLine2" />
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col">
                    <label for="pincode">{{ 'lbl_pincode' | translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="pincode" formControlName="pincode"
                      placeholder="{{'lbl_type_here'| translate}}" maxlength="6" onlyNumbers
                      (keyup)="onKeyUpEvent($event,true)" required>
                    <mat-error
                      *ngIf="(employeeform.get('pincode') && !employeeform.get('pincode')?.valid && employeeform.get('pincode')?.touched)">
                      {{ 'message_lbl_pincode_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col">
                    <label for="cityId">{{ 'lbl_city' | translate}} <span style="color: red;">*</span></label>
                    <ng-select [items]="cities" class="js-example-basic-single p-0"
                      placeholder="{{ 'lbl_select_city' |translate}}" bindLabel="name" bindValue="id" name="cityId"
                      formControlName="cityId" name="cityId">
                    </ng-select>
                    <mat-error
                      *ngIf="(employeeform.get('cityId') && !employeeform.get('cityId')?.valid && employeeform.get('cityId')?.touched)">
                      {{ 'message_lbl_city_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col">
                    <label for="districtName">{{ 'lbl_district' | translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="districtName" formControlName="districtName"
                      placeholder="{{'lbl_type_here'| translate}}" required>
                    <mat-error
                      *ngIf="(employeeform.get('districtName') && !employeeform.get('districtName')?.valid && employeeform.get('districtName')?.touched)">
                      {{ 'message_lbl_district_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col">
                    <label for="state">{{ 'lbl_state' | translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="state" formControlName="state"
                      placeholder="{{'lbl_type_here'| translate}}" required>
                    <mat-error
                      *ngIf="(employeeform.get('state') && !employeeform.get('state')?.valid && employeeform.get('state')?.touched)">
                      {{ 'message_lbl_state_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
              </div>

              <div>
                <h2>{{ 'lbl_business_details' | translate}}</h2>
                <div class="form-row">
                  <div class="form-group col">
                    <label for="companyName">{{ 'lbl_company_name' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="companyName" formControlName="companyName"
                      placeholder="{{ 'placeholder_lbl_enter_your_company_name' |translate}}" required>
                    <mat-error
                      *ngIf="(employeeform.get('companyName') && !employeeform.get('companyName')?.valid && employeeform.get('companyName')?.touched)">
                      {{ 'message_lbl_company_name_is_required' | translate}} is required
                    </mat-error>
                  </div>
                  <div class="form-group col">
                    <label for="workExperience">{{ 'add_employee_lbl_experience' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="workExperience" formControlName="workExperience"
                      placeholder="{{ 'placeholder_lbl_enter_your_experience' |translate}}" OnlyNumber required>
                    <mat-error
                      *ngIf="(employeeform.get('workExperience') && !employeeform.get('workExperience')?.valid && employeeform.get('workExperience')?.touched)">
                      {{ 'message_lbl_experience_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col">
                    <label for="designationId">{{ 'lbl_designation' | translate}} <span
                        style="color: red;">*</span></label>
                    <ng-select [items]="designations" class="js-example-basic-single p-0"
                      placeholder="{{ 'placeholder_lbl_select_designation' |translate}}" bindLabel="name" bindValue="id"
                      name="designationId" formControlName="designationId"></ng-select>
                    <mat-error
                      *ngIf="(employeeform.get('designationId') && !employeeform.get('designationId')?.valid && employeeform.get('designationId')?.touched)">
                      {{ 'message_lbl_designation_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
              </div>

              <div>
                <h2>{{ 'add_employee_lbl_education_detail' | translate}}</h2>

                <div class="form-group col">
                  <label for="resume">{{ 'lbl_cv' | translate}}</label>
                  <div *ngIf="!this.dsa.resume else Pdf">
                    <a class="form-control" type="upload" id="resume"
                      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>{{ 'add_employee_lbl_tap_to_upload_cv' | translate}}</h4>
                      </div>
                    </a>
                  </div>

                  <ng-template #Pdf>
                    <div class="file-content">
                      <div class="p-1 file-manager">
                        <ul class="files">
                          <li class="file-box m-1 w-100">
                            <div class="file-top">
                              <i class="fa fa-file-pdf txt-info" (click)="fileUpload.click()"></i>
                            </div>
                            <div class="file-bottom">
                              <h6 class="fileName" (click)="openCv()"> <a href="#">{{dsa.fileName}}</a></h6>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </ng-template>

                  <input type="file" #fileUpload id="resume" (change)="selectedImage($event, 'resume')" name="resume"
                    style="display:none;" />
                  <mat-error
                    *ngIf="(employeeform.get('resume') && !employeeform.get('resume')?.valid && employeeform.get('resume')?.touched)">
                    {{ 'add_employee_message_lbl_cv_is_required' |translate}}
                  </mat-error>
                </div>
                <div class="form-row">
                  <div class="form-group col">
                    <label for="instituteName">{{ 'lbl_institute_name' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="instituteName" formControlName="instituteName"
                      placeholder="{{ 'placeholder_lbl_enter_your_institute_name' |translate}}" required>
                    <mat-error
                      *ngIf="(employeeform.get('instituteName') && !employeeform.get('instituteName')?.valid && employeeform.get('instituteName')?.touched)">
                      {{ 'add_employee_message_lbl_institute_name_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col">
                    <label for="passingYear">{{ 'lbl_passing_year' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="passingYear" formControlName="passingYear"
                      placeholder="{{'lbl_type_here'| translate}}" onlyNumbers required>
                    <mat-error
                      *ngIf="(employeeform.get('passingYear') && !employeeform.get('passingYear')?.valid && employeeform.get('passingYear')?.touched)">
                      {{ 'add_employee_message_lbl_passing_year_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col">
                    <label for="educationTypeId">{{ 'lbl_education_type' | translate}} <span
                        style="color: red;">*</span></label>
                    <ng-select [items]="education" class="js-example-basic-single p-0"
                      placeholder="{{ 'placeholder_lbl_select_education_type' |translate}}" bindLabel="name"
                      bindValue="id" name="educationTypeId" formControlName="educationTypeId" required>
                    </ng-select>
                    <mat-error
                      *ngIf="(employeeform.get('educationTypeId') && !employeeform.get('educationTypeId')?.valid && employeeform.get('educationTypeId')?.touched)">
                      {{ 'add_employee_message_lbl_education_type_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
              </div>

              <div>
                <h2>{{ 'lbl_other_detail' | translate}}</h2>
                <div class="form-group">
                  <label for="commitment">{{ 'lbl_business_commitment_in_amount' | translate}} <span
                      style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="commitment" formControlName="commitment"
                    placeholder="{{ 'placeholder_lbl_enter_your_commitment' |translate}}" onlyNumbers required>
                  <mat-error
                    *ngIf="(employeeform.get('commitment') && !employeeform.get('commitment')?.valid && employeeform.get('commitment')?.touched)">
                    {{ 'message_lbl_business_commitment_is_required' | translate}}
                  </mat-error>
                </div>
              </div>

              <div>
                <h2>{{ 'lbl_bank_detail' | translate}}</h2>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="accountHolderName">{{ 'lbl_account_holder_name' | translate}}</label>
                    <input class="form-control" type="text" id="accountHolderName" formControlName="accountHolderName"
                      placeholder="{{'lbl_type_here'| translate}}" onlyAlphabets>
                  </div>
                  <div class="form-group col-md-6">
                    <label for="bankId">{{ '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="bankId"
                      formControlName="bankId"></ng-select>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="accountNo">{{ 'lbl_account_no' | translate}}</label>
                    <input class="form-control" type="text" id="accountNo" formControlName="accountNo"
                      placeholder="{{'lbl_type_here'| translate}}" onlyNumbers>
                  </div>
                  <div class="form-group col-md-6">
                    <label for="ifscCode">{{ 'lbl_ifsc_code' | translate}}</label>
                    <input class="form-control" type="text" id="ifscCode" formControlName="ifscCode"
                      placeholder="{{'lbl_type_here'| translate}}" (keypress)="keyPressAlphanumeric($event)"
                      oninput="this.value = this.value.toUpperCase()">
                  </div>
                </div>
              </div>

              <div class="modal-footer">
                <button class="btn btn-sm btn-info filterbtn" type="submit" (click)="insertEmployee()">
                  {{ 'button_lbl_save' | translate}}
                </button>
                <button class="btn btn-sm btn-secondary filterbtn" type="reset" (click)="cancelUser()">
                  {{ 'button_lbl_cancel' | translate}}
                </button>
              </div>


            </form>
          </div>
        </div>
      </mat-drawer-container>
    </div>
  </div>
</div>