
<ion-content>
  <div class="head-title">

    <app-generic-header showImage="false" showBack="true" [headerText]="'general,pending-transaction' | translate">
    </app-generic-header>
  </div>
  <div class="header"></div>
  <div class="bottom"></div>
  <div #containerDiv id="containerDiv">
    <div class="search-header" *ngIf="!transactionDetails">
    <ion-row class="ion-justify-content-center">
      <ion-col [size]="11">
  <div [ngClass]=" direction === 'en' ?  'custom-text-area-element Field-en' : 'custom-text-area-element Field-ar'" >
    <label class="label" position='floating'  class="colBold requiredClass">{{ 'general,select' | translate}} </label>
    <select name="selectAbsenceType" class="label-Select"  #selectAbsenceType="ngModel" [(ngModel)]="selectedTransaction"   required> 
      <option value="noType" selected hidden selected><p>{{ts.trPK('absenceList','selectType')}}</p></option>
        <option  *ngFor="let transaction of transactions" [value]="transaction.FUNCTION_ID">{{ transaction.FUNCTION_PROMPT}} </option>
    </select>
</div>
  <!-- </ion-item> -->
  </ion-col>
    </ion-row>
  <div class="date-container">
    <ion-row class="ion-justify-content-center">
      <ion-col [size]="6">
        <ion-item [ngClass]=" direction === 'en' ?  'custom-text-area-element Field-en padding_date' : 'custom-text-area-element padding_date Field-ar'" >
          <div class="date-time-icon date-primary"> <ion-icon name="calendar" class="date-icon"></ion-icon></div>
         
          <ion-label>{{ 'general,from-date' | translate}}</ion-label>
          <ion-datetime 
           
            display-format="DD/MM/YYYY"
            [min]="1900"
            [max]="2100"
            [(ngModel)]="dateFrom"
            [doneText]="'general,done' | translate"
            [cancelText]="'general,cencel' | translate"
          ></ion-datetime>
        </ion-item>
      </ion-col>
      <ion-col [size]="6">
        <ion-item [ngClass]=" direction === 'en' ?  'custom-text-area-element padding_date Field-en' : 'custom-text-area-element padding_date Field-ar'" >
          <div class="date-time-icon date-primary"> <ion-icon class="date-icon" name="calendar"></ion-icon></div>
         
          <ion-label>{{ 'general,to-date' | translate}}</ion-label>
          <ion-datetime  
            placeholder="Select"
            display-format="DD/MM/YYYY"
            [min]="1900"
            [max]="2100"
            [(ngModel)]="dateTo"
            [doneText]="'general,done' | translate"
            [cancelText]="'general,cencel' | translate"
          ></ion-datetime>
        </ion-item>
      </ion-col>
    </ion-row>
  </div>

</div>
  <div class="data-content">
    <div class="no-dataDiv"
    *ngIf="transactionDetails && transactionDetails.length==0">
    <!-- <div class="no-dataDiv"> -->
    <ion-row>
      <img class="empty-data" src="../assets/imgs/box.png" />
    </ion-row>
    <h4> {{'general, noData' | translate}}</h4>
  </div>
  </div>
  <div *ngIf="transactionDetails && transactionDetails.length>0" class="transaction-list">
    <ion-card *ngFor="let transaction of transactionDetails">
      <div class="date">{{transaction.CREATION_DATE}}</div>
      <ion-label class="ion-text-wrap">
        <ion-text color="primary">
          <p class="display-created bold" >{{'transaction, created-for' | translate}}</p>
          <p class="display-created bold padding">{{transaction.TRANSACTION_CREATED_FOR}}</p>
        </ion-text>
       
        <ion-text color="secondary">
          <div class="">
          <p class="color-black display-inline">{{'transaction, request-type' | translate}}</p>
          <p class="display-inline red">{{transaction.REQUEST_TYPE}}</p>
        </div>
        </ion-text>
      </ion-label>
    </ion-card>

  </div>
  </div>
</ion-content>

<ion-footer>
  <div class="centerDiv">
    <ion-button *ngIf="!transactionDetails" class="footer-button" style="background: var(--newgreen)!important;border-radius: 10px;    --background: transparent; width:80%" ion-button [disabled]="!isValid()" (click)="getPendingRequestDetails()">
      {{'general, submit' | translate}}</ion-button>
      <ion-button *ngIf="transactionDetails && transactionDetails.length>0" class="footer-button" style="background: var(--newgreen)!important;border-radius: 10px;    --background: transparent; width:80%" ion-button  (click)="transactionDetails=null">
        {{'general, reset' | translate}}</ion-button>
  </div>
</ion-footer>

