<app-generic-header
  showBack="true"
  [headerText]="'submitAbsence, submitAbsence' | translate">
</app-generic-header>

<ion-content padding>

  <div [ngClass]=" direction === 'en' ?  'custom-text-area-element Field-en' : 'custom-text-area-element Field-ar'" >
      <label class="label" position='floating'  class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </label>
      <select name="selectAbsenceType" class="label-Select"  #selectAbsenceType="ngModel" [(ngModel)]="absenceType"  (change)="onTypeAbsenceChange()" required> 
        <option value="noType" selected hidden selected><p>{{ts.trPK('absenceList','selectType')}}</p></option>
          <option   value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </option>
      </select>
  </div>
  <!-- <ion-item class='dynamicField'>
    <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </ion-label>
    <ion-select  (ionChange)="calcDay()" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="absenceType"  (ionChange)="onTypeAbsenceChange()" required>
         let item of AbsenceType; let i=index; 
        <ion-select-option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </ion-select-option>
    </ion-select>
  </ion-item> -->
  
  <ion-item class='dynamicField'>
    <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','startDate')}} </ion-label>
   <ion-datetime  (ionChange)="calcDay()" [(ngModel)]="startDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY"  placeholder="MM/DD/YYYY" required
   cancelText="{{ts.trPK('general','cancel')}}"
        doneText="{{ts.trPK('general','done')}}"></ion-datetime>
</ion-item>
<ion-item *ngIf="hoursOrDay!='D'" class='dynamicField'>
  <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','startTime')}} </ion-label>
  <ion-datetime doneText="{{doneText}}" cancelText="{{cancelText}}" displayFormat="HH:mm" [(ngModel)]="startTime" required></ion-datetime>
</ion-item>
<ion-item class='dynamicField'>
    <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','endDate')}}</ion-label>
    <ion-datetime  (ionChange)="calcDay()" [(ngModel)]="endDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY"  placeholder="MM/DD/YYYY" required 
    cancelText="{{ts.trPK('general','cancel')}}"
        doneText="{{ts.trPK('general','done')}}"></ion-datetime>
</ion-item>

<ion-item *ngIf="hoursOrDay!='D'" class='dynamicField'>
  <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','endTime')}}</ion-label>
  <ion-datetime doneText="{{doneText}}" cancelText="{{cancelText}}" displayFormat="HH:mm" [(ngModel)]="endTime" required></ion-datetime>
</ion-item>
<ion-item class='dynamicField'>
  <ion-label  class="colBold" >{{ts.trPK('submitAbsence','totalDays')}} </ion-label>
  <ion-label end style="text-align: center;">{{totalDays}}</ion-label>
</ion-item>
<ion-item class='dynamicField'>
  <ion-input  placeholder="{{ts.trPK('searchForReplacment','searchForReplacment')}}" type="text" [(ngModel)]="employeeSel">
    </ion-input>
    <button ion-button class="search-button" icon-only (click)="SearchReplacment()" clear type="button" item-end >
        <ion-icon name="search" ></ion-icon>
      </button>
</ion-item>

<ion-item class='dynamicField'>
  <ion-label position='floating' class="colBold">{{ts.trPK('submitAbsence','comments')}}</ion-label>
  <ion-textarea [(ngModel)]="absComments"></ion-textarea>
</ion-item>
<div id="dynamic-abs-container" >
</div>
</ion-content>
<ion-footer>
  <div  class="centerDiv">
    <ion-button class="confirmEitOkButton"  (click)="validateAbcenseTransaction()">{{ts.trPK('general','next')}}</ion-button>
    </div> 
</ion-footer>
