<admin-page-header [title]="'Edit Employee'"></admin-page-header>

<!-- Employee Create -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Edit Employee' | translate}}</h4>
    </div>
    <form #employeeUpdateform="ngForm" (ngSubmit)="employeeUpdate(employeeUpdateform, 'editEmp')">
      <input type="hidden" name="id" class="id" [ngModel]="employeeDetails?.['id']">
      <div class="card-body">
        <div class="row">
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'First Name' | translate}} <span class="text-red">*</span></label>
              <input type="text" [placeholder]="'First Name' | translate" class="form-control" name="firstname" required #firstname="ngModel" [ngModel]="employeeDetails?.['firstname']">
              @if ((firstname['touched']) && firstname.errors?.['required']) {
                <span class="text-danger">
                  {{'firstname is required'|translate}}
                </span>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Last Name' | translate}} <span class="text-red">*</span></label>
              <input type="text" [placeholder]="'Last Name' | translate" class="form-control" name="lastname" required #lastname="ngModel" [ngModel]="employeeDetails?.['lastname']">
              @if ((lastname['touched']) && lastname.errors?.['required']) {
                <span class="text-danger">
                  {{'lastname is required'|translate}}
                </span>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Username' | translate}}</label>
              <input type="text" [placeholder]="'Username' | translate" class="form-control" name="name" #username="ngModel" required [ngModel]="employeeDetails?.['name']"
                [readonly]="true">
              @if ((username['touched']) && username.errors?.['required']) {
                <span class="text-danger">
                  {{'username is required'|translate}}
                </span>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Employee ID' | translate}} <span class="text-red">*</span></label>
              <input type="text" class="form-control" placeholder="EMPID-001" name="empid" #employeeId="ngModel" required [ngModel]="employeeDetails?.['empid']" maxlength="20">
              @if ((employeeId['touched']) && employeeId.errors?.['required']) {
                <span class="text-danger">
                  {{'EmployeeId is required'|translate}}
                </span>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Select Role' | translate}} <span class="text-red">*</span></label>

              @if (Auth == '1') {
                @if (Auth != employeeDetails?.id) {
                  <ng-select class="form-control" [items]="rolesList" #select [placeholder]="'Select Role' | translate" [virtualScroll]="true" bindLabel="name"
                    [searchable]="true" dropdownPosition="auto" bindValue="name" name="role" required [ngModel]="employeeDetails?.['roles']?.[0]?.name" #role="ngModel"
                    [loading]="!rolesList">
                    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                      <div>
                        <span>{{ item?.name }}</span>
                      </div>
                    </ng-template>
                  </ng-select>
                  @if ((role['touched']) && role.errors?.['required']) {
                    <span class="text-danger">
                      {{'role is required'|translate}}
                    </span>
                  }
              } @else {
                @if (employeeDetails?.roles?.[0]) {
                  <input type="text" class="form-control" [placeholder]="'Role' | translate" name="role" readonly [ngModel]="employeeDetails?.roles?.[0]?.name">
                } @else {
                  <input type="text" class="form-control" [placeholder]="'Role' | translate" name="role" readonly [ngModel]="'superadmin'">
                }
              }
            } @else {
              @if (Auth != employeeDetails?.id && employeeDetails?.roles?.[0] && employeeDetails?.roles?.[0]?.name != 'superadmin') {
                <ng-select class="form-control" [items]="rolesList" #select [placeholder]="'Select Role' | translate" [virtualScroll]="true" bindLabel="name" [loading]="!rolesList"
                  [searchable]="true" dropdownPosition="auto" bindValue="name" name="role" required [ngModel]="employeeDetails?.['roles']?.[0]?.name" #role="ngModel">
                  <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                    <div>
                      <span>{{ item?.name }}</span>
                    </div>
                  </ng-template>
                </ng-select>
                @if ((role['touched']) && role.errors?.['required']) {
                  <span class="text-danger">
                    {{'role is required'|translate}}
                  </span>
                }
              } @else {
                @if (employeeDetails?.roles?.[0]) {
                  <input type="text" class="form-control" [placeholder]="'Role' | translate" name="role" [ngModel]="employeeDetails?.roles?.[0]?.name" readonly >
                } @else {
                  <input type="text" class="form-control" [placeholder]="'Role' | translate" name="role" ngModel="superadmin"  readonly>
                }
              }
            }


          </div>
        </div>
        <div class="col-sm-6 col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Department' | translate}}
            </label>
            <ng-select class="form-control" [items]="departmentList" #select [placeholder]="'Select department' | translate" [virtualScroll]="true" bindLabel="departmentname"
              [loading]="!departmentList" [searchable]="true" dropdownPosition="auto" bindValue="departmentname" name="department"
              [ngModel]="employeeDetails?.['departments'] != 'null' ? employeeDetails?.['departments'] : null" #role="ngModel">
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div>
                  <span>{{ item.departmentname }}</span>
                </div>
              </ng-template>
            </ng-select>


          </div>
        </div>
        <div class="col-sm-6 col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Email' | translate}} <span class="text-red">*</span></label>
            <input  [placeholder]="'Email' | translate" type="email" class="form-control" name="email" required #email="ngModel"
              [ngModel]="employeeDetails?.['email']" pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
            @if ((email.touched) && email?.errors?.['required']) {
              <span class="text-danger">
                {{'Email is required'|translate}}
              </span>
            }
            @if (email.touched && email.errors?.['email']) {
              <span class="text-danger">
                {{'Enter a valid email address'|translate}}
              </span>
            }
            @if (email.errors?.['pattern']) {
            <small class="text-danger">{{'Please check Email Format' | translate}}</small>
            }

          </div>
        </div>
        <div class="col-sm-6 col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Mobile Number' | translate}}</label>
            <ngx-mat-intl-tel-input [enablePlaceholder]="true" [enableSearch]="true" [ngModel]="employeeDetails?.phone != 'null' ? employeeDetails?.phone : ''" class="form-control"
            name="phone" describedBy="phoneInput"></ngx-mat-intl-tel-input>
          </div>
        </div>
        <div class="col-sm-6 col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Languages' | translate}}</label>
            <ng-select name="languagues" [items]="languageslist" [loading]="!languageslist" [placeholder]="'Languages' | translate" class="form-control nodropdown" [addTag]="addTagFn"
              [hideSelected]="true" [multiple]="true" bindLabel="name" [(ngModel)]="languageslist" [isOpen]="false" [maxSelectedItems]="10">
            </ng-select>
          </div>
        </div>
        <div class="col-sm-6 col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Skills' | translate}} </label>
            <ng-select [placeholder]="'Skills' | translate" name="skills" [items]="skillslist" [loading]="!skillslist" class="form-control nodropdown" [addTag]="addTagFn"
              [hideSelected]="true" [multiple]="true" bindLabel="name" [(ngModel)]="skillslist" [isOpen]="false" [maxSelectedItems]="10">
            </ng-select>
          </div>
        </div>

        <div class="col-sm-6 col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Country' | translate}}</label>
            <ng-select #selectcountry class="form-control" [items]="countries" [multiple]="false" [searchable]="true" [ngModel]="employeeDetails?.['country']" clearable="false"
              [placeholder]="'Select Country' | translate" bindLabel="name" bindValue="name" name="country" [virtualScroll]="true" [loading]="!countries" (open)="dropdownSearch()">
              <ng-template ng-header-tmp>
                <div style="display:flex;">
                  <input #filterInput class="form-control" type="text" (input)="selectcountry.filter($any($event.target).value)" />
                  <i [hidden]="filterInput.value.length === 0" class="material-icons" (click)="selectcountry.filter(''); filterInput.value = ''">close</i>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-sm-6 col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Timezone' | translate}}</label>
            <ng-select class="form-control" [items]="timezones" #select
                [placeholder]="'Select Timezone' | translate" [virtualScroll]="true"
                bindLabel="name" [multiple]="false" [searchable]="true"  clearable="false"
                dropdownPosition="auto" bindValue="name" name="timezone" [(ngModel)]="timezone"  (ngModelChange)="timeZoneChanged($event)">
                  <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                      <div><span>{{item}}</span></div>
                  </ng-template>
              </ng-select>
          </div>
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="form-group">
            <label class="form-label">{{'Upload Image' | translate}}</label>
            <div class="input-group file-browser">
              <input #imageHolder class="form-control" name="image" type="file" accept="image/png, image/jpeg,image/jpg" (change)="changeimage($event)">
            </div>
            <small class="text-muted"><i>{{'The file size should not be more than' | translate}} 5 {{'MB' | translate}}</i></small>
          </div>
          @if (employeeDetails?.profileimage != null) {
            <div #removespruko class="file-image-1 removesprukoi{{employeeDetails?.id}}">
              <div class="product-image custom-ul">
                <a href="javascript:;">
                  <img [src]="employeeDetails?.profileimage" class="br-5" [alt]="employeeDetails?.profileimage" loading="lazy" decoding="async">
                </a>
                <ul class="icons">
                  <li><a aria-label="trash" href="javascript:(0);" class="bg-danger delete-image" (click)="removeImg(employeeDetails?.id, removespruko, imageHolder)"><i
                  class="fe fe-trash"></i></a></li>
                </ul>
              </div>
            </div>
          }
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="form-group">
            <label class="form-label">{{'Status' | translate}}</label>
            @if (Auth == '1' ) {
              @if (Auth != employeeDetails?.id ) {
                <ng-select class="form-control  select2" name="status" [ngModel]="employeeDetails?.['status']">
                  <ng-option value="1">{{'Active' | translate}}</ng-option>
                  <ng-option value="0">{{'Inactive' | translate}}</ng-option>
                </ng-select>
              } @else {
                @if (Auth != employeeDetails?.id ) {
                  @if (employeeDetails?.roles?.[0]) {
                    @if (employeeDetails?.status === '1') {
                      <input type="hidden" class="form-control" name="status" [ngModel]="employeeDetails?.status">
                      <input type="text" class="form-control" value="{{'Active' | translate}}" readonly>
                    }
                    @if (employeeDetails?.status === '0') {
                      <input type="hidden" class="form-control" name="status" [ngModel]="employeeDetails?.status">
                      <input type="text" class="form-control" value="{{'Inactive' | translate}}" readonly>
                    }
                  }
                } @else {
                  @if (employeeDetails?.status === '1') {
                    <input type="hidden" class="form-control" name="status" [ngModel]="employeeDetails?.['status']">
                    <input type="text" class="form-control" value="{{'Active' | translate}}" readonly>
                  }
                  @if (employeeDetails?.status === '0') {
                    <input type="hidden" class="form-control" name="status" [ngModel]="employeeDetails?.['status']">
                    <input type="text" class="form-control" value="{{'Inactive' | translate}}" readonly>
                  }
                }
              }
            } @else {
              @if ( Auth != employeeDetails?.id && employeeDetails?.roles?.[0] && employeeDetails?.roles?.[0]['name'] != 'superadmin'  ) {
                <ng-select class="form-control  select2" name="status" [ngModel]="employeeDetails?.status">
                  <ng-option value="1">{{'Active'| translate}}</ng-option>
                  <ng-option value="0">{{'Inactive'| translate}}</ng-option>
                </ng-select>
              } @else {
                @if (employeeDetails?.roles?.[0]) {
                  @if (employeeDetails?.status === '1') {
                    <input type="hidden" class="form-control" name="status" [ngModel]="employeeDetails?.['status']">
                    <input type="text" class="form-control" value="{{'Active'| translate}}" readonly>
                  }
                  @if (employeeDetails?.status === '0') {
                    <input type="hidden" class="form-control" name="status" [ngModel]="employeeDetails?.['status']">
                    <input type="text" class="form-control" value="{{'Inactive'| translate}}" readonly>
                  }
                } @else {
                  @if (employeeDetails?.status === '1') {
                    <input type="hidden" class="form-control" name="status" [ngModel]="employeeDetails?.status">
                    <input type="text" class="form-control" value="{{'Active'  | translate}}" readonly>
                  }
                  @if (employeeDetails?.status === '0') {
                    <input type="hidden" class="form-control" name="status" [ngModel]="employeeDetails?.status">
                    <input type="text" class="form-control" value="{{'Inactive'  | translate}}" readonly>
                  }
                }
              }
            }


          </div>
        </div>
        <div class="col-sm-12 col-md-12">
          <div class="form-group">
            <label class="form-label">{{'Select Dashboard' | translate}}</label>
            <div class="custom-controls-stacked d-md-flex" id="text">
              <label class="custom-control form-radio success me-4">
                @if (employeeDetails?.dashboard) {
                  @if (employeeDetails?.dashboard === 'Employee') {
                    <input type="radio" class="custom-control-input" [ngModel]="employeeDetails?.['dashboard']" name="dashboard" value="Employee" checked>
                  } @else {
                    <input type="radio" class="custom-control-input" [ngModel]="employeeDetails?.['dashboard']" name="dashboard" value="Employee">
                  }
                }
                <span class="custom-control-label">{{'Employee Dashboard' | translate}}</span>
              </label>

              <label class="custom-control form-radio success me-4">
                @if (employeeDetails?.dashboard) {
                  @if (employeeDetails?.dashboard === 'Admin') {
                    <input type="radio" class="custom-control-input" [ngModel]="employeeDetails?.['dashboard']" name="dashboard" value="Admin" checked>
                  } @else {
                    <input type="radio" class="custom-control-input" [ngModel]="employeeDetails?.['dashboard']" name="dashboard" value="Admin">
                  }
                }
                <span class="custom-control-label">{{'Admin Dashboard' | translate}}</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer">
      <div class="form-group float-end">
        <button type="submit" [disabled]="sendingResponse['editEmp'] || employeeUpdateform.invalid" class="btn btn-secondary">{{'Update Profile' | translate}}@if (sendingResponse['editEmp']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </div>
  </form>
</div>
</div>
<!-- End Employee Create -->