<admin-page-header [title]="'Create 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">{{'Create Employee' | translate}}</h4>
    </div>
    <form #myform="ngForm" (ngSubmit)="createEmployee(myform, 'createEmp')">
      <div class="card-body">
        <div class="row">
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label>{{'First Name' | translate}}<span class="text-danger"> *</span> </label>
              <input type="text" class="form-control" ngModel name="firstname" #firstname="ngModel" required [placeholder]="'First Name' | translate">
              @if (firstname.errors && (firstname.dirty || firstname.touched)) {
                <div class="form-control-feedback">
                  @if (firstname.errors['required']) {
                    <p class="text-danger">
                      {{'First Name is required' | translate}}
                    </p>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label>{{'Last Name' | translate}}<span class="text-danger"> *</span></label>
              <input type="text" class="form-control" ngModel name="lastname" #lastname="ngModel" required [placeholder]="'Last Name' | translate">
              @if (lastname.errors && (lastname.dirty || lastname.touched)) {
                <div class="form-control-feedback">
                  @if (lastname.errors['required']) {
                    <p class="text-danger">{{'Last Name is required' | translate}}</p>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Role' | translate}}<span class="text-danger"> *</span> </label>
              <ng-select required class="form-control" [items]="rolesList" [loading]="!rolesList" #select [placeholder]="'Select Role' | translate" [virtualScroll]="true" bindLabel="name" [searchable]="true" dropdownPosition="auto"
                bindValue="name" ngModel name="role" [ngModel]="null">
                <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                  <div>
                    <span>{{ item.name }}</span>
                  </div>
                </ng-template>
              </ng-select>
            </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" [loading]="!departmentList" #select [placeholder]="'Select Department' | translate" [virtualScroll]="true" bindLabel="departmentname" [searchable]="true" dropdownPosition="auto"
                bindValue="departmentname" ngModel name="department" [ngModel]="null">
                <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>{{'Employee ID' | translate}}<span class="text-danger"> *</span></label>
              <input type="text" class="form-control" ngModel name="empid" #empid="ngModel" required [placeholder]="'Employee ID' | translate" maxlength="20">
              @if (empid.errors && (empid.dirty || empid.touched)) {
                <div class="form-control-feedback">
                  @if (empid.errors['required']) {
                    <p class="text-danger">{{'Empid is required' | translate}}</p>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label>{{'Mobile Number' | translate}}</label>
              <ngx-mat-intl-tel-input [enablePlaceholder]="true" [enableSearch]="true" class="form-control" ngModel name="phone" describedBy="phoneInput"></ngx-mat-intl-tel-input>
            </div>
          </div>

          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label>{{'Email' | translate}}<span class="text-danger"> *</span></label>
              <input  type="email" class="form-control" ngModel name="email" #email="ngModel" required [placeholder]="'Email' | translate" pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
              @if (email.errors && (email.dirty || email.touched)) {
                <div class="form-control-feedback">
                  @if (email.errors['required']) {
                    <p class="text-danger">{{'Email is required' | translate}}</p>
                  }
                  @if (email.errors['pattern']) {
                  <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label>{{'Password' | translate}} </label>
              <input type="text" class="form-control"  name="password" readonly required [ngModel]="pswd" [placeholder]="'Password' | translate">
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label>{{'Languages' | translate}}</label>
              <ng-select ngModel name="languages" class="form-control nodropdown" [items]="languageslist" [placeholder]="'Languages' | translate" [loading]="!languageslist" [addTag]="addTagFn" [hideSelected]="true" [multiple]="true" bindLabel="name" [(ngModel)]="selectedlanguages" [isOpen]="false" [maxSelectedItems]="10">
              </ng-select>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label>{{'Skills' | translate}}</label>
              <ng-select ngModel name="skills" [items]="skillslist" [loading]="!skillslist" class="form-control nodropdown" [placeholder]="'Skills' | translate" [addTag]="addTagFn" [hideSelected]="true" [multiple]="true" bindLabel="name" [(ngModel)]="selectedskills" [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 [items]="countries" class="form-control" [multiple]="false" [searchable]="true" [ngModel]="null" [placeholder]="'Select Country' | translate" bindLabel="name" bindValue="name" clearable="false"
                ngModel 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-12">
            <div class="form-group">
              <label class="form-label">{{'Upload Image' | translate}}</label>
              <div class="input-group file-browser">
                <input class="form-control" type="file" accept="image/png, image/jpeg,image/jpg" [placeholder]="'Upload Image' | translate" (change)="changeimage($event)">
              </div>
              <small class="text-muted"><i>{{'The file size should not be more than' | translate}} 5 {{'MB' | translate}}</i></small>
            </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">
                  <input type="radio" class="custom-control-input" [(ngModel)]="selectedDashboard" name="dashboard" value="Employee" >
                  <span class="custom-control-label">{{'Employee Dashboard' | translate}}</span>
                </label>
                <label class="custom-control form-radio success me-4">
                  <input type="radio" class="custom-control-input" [(ngModel)]="selectedDashboard" name="dashboard" value="Admin" checked>
                  <span class="custom-control-label">{{"Admin Dashboard" | translate}}</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">

        <button [disabled]="myform.invalid || sendingResponse['createEmp']" type="submit" class="btn btn-secondary">{{'Create Employee' | translate}}@if (sendingResponse['createEmp']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</div>
<!-- End Employee Create -->