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

<ion-content class="colorBG" padding>

  <ion-grid no-padding>
    <!-- <ul class="cusprogressbar">
      <ion-row nowrap>
        <ion-col size="4">
          <li class="active">{{'vacation-rule, itemType' | translate}}</li>
        </ion-col>
        <ion-col size="4">
          <li>{{'vacation-rule, notification-type' | translate}}</li>
        </ion-col>
        <ion-col size="4">
          <li>{{'vacation-rule, create-vacation-rule' | translate}}</li>
        </ion-col>
      </ion-row>
    </ul> -->

    <!-- <ion-row justify-content-center>
      <div [innerHTML]='"vacation-rule, vacation-type-text" | translate'></div>
    </ion-row> -->
    <div *ngIf="!isUpdate" class="divStep ">

    <ion-row no-wrap>
      <div class="stepHeaderDiv">
          <label class="stepHeaderLebal">{{ 'vacation-rule, apply-for-vacation-rule' | translate}} </label><br>
          <label class="stepHeaderLebal"> {{ 'vacation-rule, step-1' | translate}}</label>
        </div>
<!-- ////  okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'/// -->
<div class="selectItem">
  <label class="label">{{'vacation-rule, itemType' | translate}}</label>
  <select class="label-Select"  [(ngModel)]="index" (ionChange)="vacationRuleSel($event)" required>
    <option [selected]="x.ITEM_TYPE_DISPLAY_NAME" value="{{i}}"
      *ngFor="let x of ruleTypeList; let i=index;">
      {{x.ITEM_TYPE_DISPLAY_NAME}} </option>
  </select>
</div>

    </ion-row>

    <ion-row>
      <p class="smallTip">
        {{'vacation-rule, skip-step-3' | translate}}
      </p>
    </ion-row>

    </div>
<div *ngIf="notificationTypeShow && !isUpdate" class="divStep">
 
    <div class="stepHeaderDiv">
        <label class="stepHeaderLebal">{{ 'vacation-rule, step-2' | translate}}</label>
      </div>

    <ion-row >
        <ion-list style="width: 100% !important;">
          <ion-radio-group (ionChange)="notificationTypeSel($event)" [(ngModel)]="notifTypeSelP2" mode="md">
            <ion-item>
              <ion-label class="labelRadio">{{'vacation-rule, all-label' | translate}}</ion-label>
              <ion-radio color="secondary" mode="md"  checked value="*"></ion-radio>
            </ion-item>
            <ion-item>
              <ion-label class="labelRadio">{{'vacation-rule, select-label' | translate}}</ion-label>
              <ion-radio  color="secondary" mode="md"  value="sel_opt"></ion-radio>
            </ion-item>
          </ion-radio-group>
        </ion-list>
      </ion-row>
  
      <ion-row>
          <!-- style="max-width: 100%  !important;; width: 100%  !important;" mode="ios" -->
        <ion-item  class="selectItem " *ngIf="notifTypeSelP2=='sel_opt'" >
          <ion-label>{{'vacation-rule, notification' | translate}}</ion-label>
          <ion-select mode="ios" class="notifiSelect" okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
            [(ngModel)]="var_notification" (ionChange)="notificationSel($event)" >
            <ion-select-option style="min-height: 100% !important; height: 100%  !important;" value="{{i}}" *ngFor="let x of notification_list; let i=index">
              {{x.NOTIFICATION_DISPLAY_NAME}}
            </ion-select-option>
          </ion-select>
        </ion-item>
      </ion-row>
    </div>
    
    <div *ngIf="createVacationRuleShow" class="divStep" >
        <div class="stepHeaderDiv">
            <label class="stepHeaderLebal">{{ 'vacation-rule, step-3' | translate}}</label>
          </div>
        <ion-row>
        <ion-grid>

        <ion-row style="margin-top: 20px;">
          <ion-col style="border-right: solid #d3d3d3 1px" size="6">
              <p class="labelTitle label">{{'vacation-rule, itemType' | translate}}</p><br/>
              <p class="labelValue label floatlabel">{{P_ITEM_TYPE_TITLE}} </p>
          </ion-col>
          <ion-col size="6">
              <p class="labelTitle label">{{'vacation-rule, notification' | translate}} </p><br/>
              <p class="labelValue label floatlabel">{{Notification_Title}} </p>
            </ion-col>
        </ion-row>
      </ion-grid>
            <!-- <ion-item>
              <ion-label class="label">{{'vacation-rule, itemType' | translate}}</ion-label>
              <ion-label class="label floatlabel">{{P_ITEM_TYPE_TITLE}} </ion-label>
            </ion-item>
            <ion-item>
              <ion-label class="label">{{'vacation-rule, notification' | translate}} </ion-label>
              <ion-label class="label floatlabel">{{Notification_Title}} </ion-label>
            </ion-item> -->




            <ion-item class="requiredItem selectItem">
              <ion-label class="label">{{'vacation-rule, start-date' | translate}}</ion-label>
              <ion-datetime [(ngModel)]="Sdate" min="1900" max="2100" displayFormat="MM/DD/YYYY hh:mm:ss A"
                placeholder="MM/DD/YYYY hh:mm:ss A" required cancelText="{{ts.trPK('general','cancel')}}"
                doneText="{{ts.trPK('general','done')}}"></ion-datetime>
            </ion-item>
            <ion-item class="requiredItem selectItem">
              <ion-label class="label">{{'vacation-rule, end-date' | translate}}</ion-label>
              <ion-datetime [(ngModel)]="Edate" min="1900" max="2100" displayFormat="MM/DD/YYYY hh:mm:ss A"
                placeholder="MM/DD/YYYY hh:mm:ss A" required cancelText="{{ts.trPK('general','cancel')}}"
                doneText="{{ts.trPK('general','done')}}"></ion-datetime>
            </ion-item>
            <ion-item lines="none" class="requiredItem selectItem">
              <ion-label>{{'vacation-rule, message-label' | translate}}</ion-label>
              <ion-textarea required [(ngModel)]="msgVal"></ion-textarea>
            </ion-item>
      
            <ion-list style="width: 95%;">
              <ion-radio-group [(ngModel)]="notifTypeSel">
                <ion-item *ngFor="let assignMode of REASSIGN_val;let i=index">
                  <ion-label class="labelRadio">{{assignMode.RADIO_BUTTON_LABEL}}</ion-label>
                  <ion-radio  color="secondary" mode="md"  value="{{assignMode.RADIO_BUTTON_ACTION}}" [checked]="i==0"></ion-radio>
                </ion-item>
                <ion-item *ngIf="isDeliver">
                  <ion-label  class="labelRadio">{{'vacation-rule, deliver' | translate}}</ion-label>
                  <ion-radio  color="secondary" mode="md"  value="DELIVER"></ion-radio>
                </ion-item>
      
                <ion-item *ngIf="showForType_Y">
                  <ion-label  class="labelRadio">{{'vacation-rule, close' | translate}}</ion-label>
                  <ion-radio  color="secondary" mode="md"  value="CLOSE"></ion-radio>
                </ion-item>
                <!-- <button *ngIf="notifTypeSel!='RESPOND'" ion-button block (click)="SearchReplacment()">{{'createVacationRule.search' | translate}}</button> -->
      
                <ion-item *ngIf="RespondAttributeList.length > 0 && showForType_Y == false">
                  <ion-label  class="labelRadio">{{'vacation-rule, respond' | translate}}</ion-label>
                  <ion-radio  color="secondary" mode="md"  value="RESPOND"></ion-radio>
                </ion-item>
              </ion-radio-group>
            </ion-list> 
            <div [ngClass]="RespondAttributeList.length > 0  ? 'dynamicFields' : '' " id="CVDynamicFields">
              </div>
            <!-- <json-schema-form *ngIf="schemaNotific && notifTypeSel =='RESPOND'" [form]="schemaNotific"
              [(ngModel)]="exampleJsonObject">
            </json-schema-form> -->
      
            <ion-item class="selectItem"  lines="none" (click)="openReplacementRoll()"
              *ngIf="(hideForwordEmployee && notifTypeSel =='RESPOND') || (notifTypeSel == 'DELEGATE') || (notifTypeSel == 'TRANSFER') ">
      
              <ion-input [(ngModel)]="employeeSel" placeholder="{{'vacation-rule, search-employee' | translate}}"></ion-input>
              <ion-button style="width: 19%;" button-type="clear">
                <ion-icon slot="icon-only" name="search"></ion-icon>
              </ion-button>
      
            </ion-item>
          </ion-row>
          </div>
  </ion-grid>
</ion-content>

<ion-footer class="colorBG">
  <div class="centerDiv">
    <ion-button *ngIf="!createBtn" class="button-login footer-button"  ion-button (click)="NextPage()">
      {{'vacation-rule, next-label' | translate}}</ion-button>
      <!-- <ion-button *ngIf="createBtn" class="footer-button" color="customnavy" ion-button (click)="createVacationRule()">
         create </ion-button> -->

         <div *ngIf="isUpdate==false && createBtn" class="centerDiv">
            <ion-button class="button-login footer-button"  ion-button (click)="openConfirmAlertDialogAction(true)">
              {{'vacation-rule, apply' | translate}}</ion-button>
          </div>
      
          <div *ngIf="isUpdate  " class="centerDiv">
            <ion-button class="button-login footer-button"  ion-button (click)="openConfirmAlertDialogAction(false)">
              {{'vacation-rule, update' | translate}}</ion-button>
          </div>
        </div>



</ion-footer>