<app-generic-header
  showBack="true"
  [headerText]="headerTitle">
</app-generic-header>

<ion-content>
  <div class="">
    <!-- class="colorBG" -->
  <div class="content" [hidden]="functionName!='HMG_TKT_NEW_EIT_SS'">
 
    <ion-grid class="headerGrid">

      <p class="title">{{ts.trPK('absenceList','tickets-balance')}}</p>
      <div style="color: black;"> 
      
       <div class="result-graph">
        <div >
          <!-- <ion-datetime
          [placeholder]="Select"
          display-format="DD/MM/YYYY"
          [min]="1900"
          [max]="2100"
          [(ngModel)]="dateTo"
          doneText="Done"
          cancelText="Cancel"
        ></ion-datetime> -->
        <ion-datetime [(ngModel)]="Sdate" class="datetime"  placeholder="Select" displayFormat="DD MMMM YYYY" 
         cancelText="{{ts.trPK('general','cancel')}}" doneText="{{ts.trPK('general','done')}}"
         (ionChange)="getAccrualBalance()"></ion-datetime>
          <!-- <ion-datetime [(ngModel)]="Sdate" class="datetime" displayFormat="DD MMMM YYYY" placeholder="DD MMMM YYYY"
           (ionChange)="getAccrualBalance()"></ion-datetime> -->
          <ion-icon class="iconCalendar" ios="ios-calendar" md="md-calendar"></ion-icon>
        </div>
        <div style=" border-bottom: 1px solid #a7a4a4; margin-bottom: 12px;
        margin-top: -10px; margin-right: -9px;"></div>
    
              <!-- <div class="result-text-container"> 
              </div> -->
     
<p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>

       <div>

         <ion-row>
                    <ion-col class="col" size="4">
                      <div class="light-dote"></div>
                    <!-- </ion-col>
                    <ion-col> -->
                      <label [ngClass]="direction == 'en' ? 'light-label':'light-label-ar' ">{{ts.trPK('absenceList','adult')}}</label>
                    </ion-col>
              <ion-col class="col"  size="4">
                <div class="blue-dote"></div>
              <!-- </ion-col>
                      <ion-col> -->
                        <label class="blue-label">{{ts.trPK('absenceList','child')}}</label>
                      </ion-col>
               <ion-col class="col"  size="4">
                <div class="green-dote"></div>
              <!-- </ion-col>
                      <ion-col> -->
                        <label [ngClass]="direction == 'en'? 'green-label':'green-label-ar'">{{ts.trPK('absenceList','infants')}} </label>
                        
                      </ion-col>
                    </ion-row>
                </div>


       </div>
      </div>
    </ion-grid>
  </div>
<!-- ///////////////////////////////////////////////// -->
<ion-grid [hidden]="functionName!='HMG_TKT_NEW_EIT_SS'" >
  <div class="gridService">
    <ion-row>
      <ion-col class="columns">
        <div [class]="direction =='en'? 'adult-dote':'adult-dote-ar'"></div>
        <label>{{ts.trPK('absenceList','adult')}}</label>
        <br> 
        <br>
         <label class="service">{{accrualNetAdult}}</label>
         <br>  <label class="services">{{ts.trPK('absenceList','tickets')}}</label>
      </ion-col>
      <ion-col class="columns">
        <div [ngClass]="direction == 'en'? 'child-dote' :'child-dote-ar'"></div>
        <label>{{ts.trPK('absenceList','child')}} </label>
        <br> 
        <br>
        <label class="service">{{accrualUNetChild}}</label>
    
        <br>  <label class="services">{{ts.trPK('absenceList','tickets')}}</label>
      </ion-col>
      <ion-col class="columns">
        <div [ngClass]="direction == 'en'? 'infants-dote': 'infants-dote-ar'"></div>
        <label>{{ts.trPK('absenceList','infants')}} </label>
        <br>
         <br>
        <label class="service">{{accrualNetInfants}}</label>
     <br>   <label class="services">{{ts.trPK('absenceList','tickets')}}</label>
      </ion-col>
    </ion-row>

  
  </div>
</ion-grid>
<!-- 
<ion-grid class="three-grid">
  <ion-row>
      <ion-col >
          infants
      </ion-col>
      <ion-col >2</ion-col>
      <ion-col >tickit</ion-col>
  </ion-row>
  <ion-row>
      <ion-col >
         child
      </ion-col>
      <ion-col >2</ion-col>
      <ion-col >tickit</ion-col>
  </ion-row>
  <ion-row>
      <ion-col >
         adult
      </ion-col>
      <ion-col >2</ion-col>
      <ion-col >tickit</ion-col>
  </ion-row>
</ion-grid>  -->

<!-- //////////////////////////////////////////////////// -->
<!-- <ion-content padding> -->
  
  <div *ngIf="eitAddedList && eitAddedList.length > 0 ">
    <ion-card *ngFor="let eitAddedObj of eitAddedList; let i=index ">

      <ion-card-header>

        <!-- <button *ngIf="getPassMnuEntryObj.UPDATE_BUTTON == 'Y' && eitAddedObj.statusID!=2" ion-button icon-only
              (click)="updateEITRrq(i)">
              <ion-icon name="create"></ion-icon>
            </button> -->
        <button ion-button icon-only (click)="removeAddedItem(i)">
          <ion-icon class="imgSize"  name="trash"></ion-icon>
        </button>

      </ion-card-header>
      <ion-card-content>
        
        <ion-grid>
          <div>
            <ion-row>
              <ion-col class="colBold">
                <label for="">{{'confirmAddEit , status' | translate}}</label>
              </ion-col>
              <ion-col>
                <label for="">{{eitAddedObj.status}}</label>
              </ion-col>
            </ion-row>
          </div>
          <div *ngFor="let item of eitAddedObj.Collection_Transaction">
            <ion-row *ngIf="item.DISPLAY_FLAG != 'N' ">
              <ion-col class="colBold">
                <label for="">{{item.SEGMENT_PROMPT}}</label>
              </ion-col>
              <ion-col class="colBold">
                <label for="">{{item.SEGMENT_VALUE_DSP}}</label>
              </ion-col>
            </ion-row>
          </div>

        </ion-grid>
      </ion-card-content>
    </ion-card>
  </div>
  <div class="no-dataDiv"
    *ngIf="!getResEITTransactionList || getResEITTransactionList[0]?.Collection_Transaction.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>
  <!-- <no-data *ngIf="!getResEITTransactionList || getResEITTransactionList[0]?.Collection_Transaction.length <= 0" txt="{{'general.noData' | translate}}"></no-data>  -->
  <div *ngIf="getResEITTransactionList && getResEITTransactionList[0]?.Collection_Transaction.length > 0 ">
  <!-- <div> -->
    <div *ngFor="let EITTransactionList of getResEITTransactionList; let i=index ">

      <!-- <ion-card-header class="boxHdr">
        <div class="hrTitle">{{this.headerTitle}}</div>

        <button ion-button (click)="deleteEIT(i)"
          *ngIf="getPassMnuEntryObj.DELETE_BUTTON == 'Y' && EITTransactionList.statusID!=3">
          <img class="imgSize" src="../assets/imgs/delete.png"></button>
        <button ion-button *ngIf="getPassMnuEntryObj.UPDATE_BUTTON == 'Y' && EITTransactionList.statusID!=2"
          (click)="updateEITRrq(i)">
          <img class="imgSize" src="../assets/imgs/edit.png"></button>
      </ion-card-header> -->
      <!-- <ion-card-content> -->


        <ion-grid>
          <div>
            <!-- <ion-row>
              <ion-col class="colBold">
                <label for="">status</label>
              </ion-col>
              <ion-col>
                <label for="">{{EITTransactionList.status}}</label>
              </ion-col>
            </ion-row> -->
          </div>
          <ion-grid class="grids">
          <div *ngFor="let item of EITTransactionList.Collection_Transaction">
            <!-- <ion-row *ngIf="item.DISPLAY_FLAG != 'N' ">
              <ion-col class="colBold">
                <label for="">{{item.SEGMENT_PROMPT}}</label>
              </ion-col>
              <ion-col>
                <label for="">{{item.SEGMENT_VALUE_DSP}}</label>
              </ion-col>
            </ion-row> -->
            
              <ion-row  *ngIf="item.DISPLAY_FLAG != 'N' " class="">
                  <ion-col class="" *ngIf="item.SEGMENT_PROMPT!=''">
                      <label style="color:#094875;font-weight: bold;" class="label" for="">{{item.SEGMENT_PROMPT}} </label>
                      <br>
                      <label  class="label" style="color:black;" for="">{{item.SEGMENT_VALUE_DSP}} </label>
                      <br>
                      <hr style="background-color: grey;height: 1px">
                  </ion-col>
              </ion-row>
           
          </div>
        </ion-grid>
        </ion-grid>
      <!-- </ion-card-content> -->
    </div>
<div>
 
</div>
  </div>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</div>
</ion-content>
<ion-icon class="addClass" name="add" (click)="addEITRrq()"></ion-icon>

<!-- <ion-footer>
  <div class="centerDiv"> -->
    <!-- <button *ngIf="getPassMnuEntryObj.ADD_BUTTON == 'Y'" ion-button (click)="addEITRrq()">{{'requestEit.add'
            | translate}} </button> -->
    <!-- <ion-button class="footer-button" color="customnavy" ion-button (click)="addEITRrq()">
      {{'general, add' | translate}}</ion-button> -->
  <!-- </div>

</ion-footer> -->