<!-- <ion-header >
  <ion-toolbar  class="header-toolbar-new">
      <ion-title color="light">{{ts.trPK('home','leave-balance')}}</ion-title>
      <ion-buttons slot="start">
        <nav-buttons></nav-buttons>
      </ion-buttons> -->
      <!-- <ion-buttons slot="end">
              <button class="headerBtn" (click)="AccrualBalances()">
                      <img class="headerImg" src="../assets/imgs/accubalance.png">
              </button>
      </ion-buttons> -->
<!-- </ion-toolbar>
</ion-header> -->

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


<ion-content class="colorBG">
  <!-- colorBG -->
  <div class="contentEit" style="background: #f3f1f1;">
    <div class="header-div">
    
    </div>
     

   
        <div>
          <ion-grid class="headerGrid">
            <div >
              <ion-datetime [(ngModel)]="Sdate" class="datetime" displayFormat="DD MMMM YYYY"
               placeholder="DD MMMM YYYY" cancelText="{{ts.trPK('general','cancel')}}"
                doneText="{{ts.trPK('general','done')}}" (ionChange)="getAccrualBalance()"></ion-datetime>
              <ion-icon class="iconCalendar" ios="ios-calendar" md="md-calendar"></ion-icon>
            </div>
          <div style="position: relative;">
            <!-- <div [ngClass]=" direction == 'ltr' ?  'subTitle' : 'subTitle-ar'" >{{ts.trPK('absenceList','AccrualUsed')}} </div> -->
            <div class="label-container">
              <ion-row [ngClass]=" direction == 'ltr' ?  'green-label-container' : 'green-label-container-ar'" >
                <label class="current-label"> </label>
                  <span [ngClass]=" direction == 'ltr' ?  'span-one' : 'span-one-ar'" >{{ts.trPK('absenceList','currentBalance')}}</span>
                  <span class="span-two">{{accrualNet}}</span>
              </ion-row>
              <!-- <div [ngClass]=" direction == 'ltr' ?  'yearLabel' : 'yearLabel-ar'">2021</div> -->
            </div>
            <!-- <div class="label-container">
              <ion-row [ngClass]=" direction == 'ltr' ?  'black-label-container' : 'black-label-container-ar'" >
                <label class="current-label-container"> </label>
                 <span [ngClass]=" direction == 'ltr' ?  'black-span1' : 'black-span1-ar'" >{{ts.trPK('absenceList','currentBalance')}}</span>
                 <span class="black-span2">{{accrualNet}}</span>
              </ion-row>
              <div [ngClass]=" direction == 'ltr' ?  'yearLabel' : 'yearLabel-ar'" > {{ts.trPK('absenceList','PreviousYears')}}</div>
            </div> -->
            <div class="label-container">
              <ion-row [ngClass]=" direction == 'ltr' ?  'black-label-container' : 'black-label-container-ar'" >
              <label class="used-label-container"> </label>
                 <span [ngClass]=" direction == 'ltr' ?  'red-span1' : 'red-span1-ar'" >{{ts.trPK('absenceList','usedBalance')}}</span>
                <span class="red-span2">{{accrualUsed}}</span>
              </ion-row>
            </div>
            <div class="graph-container">
              <p-chart [ngClass]=" direction == 'ltr' ?  'today-graph' : 'today-graph-ar'" type="doughnut" [data]="data" [options]="options" ></p-chart>
            </div>
          </div>
          </ion-grid>

              <!-- <ion-grid class="headerGrid">
               
                <div style="color: black;"> 
                
                 <div class="result-graph">
    <div >
      
      <ion-datetime [(ngModel)]="Sdate" class="datetime" displayFormat="DD MMMM YYYY"
       placeholder="DD MMMM YYYY" cancelText="{{ts.trPK('general','cancel')}}"
        doneText="{{ts.trPK('general','done')}}" (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 [ngClass]=" direction == 'ltr' ?  'today-graph' : 'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
    
        </div>
                  <div [ngClass]=" direction == 'ltr' ?  'div-green' : 'div-green-ar'">
                  <ion-col>
                      <ion-row>
                        <label class="green-label">{{ts.trPK('absenceList','currentBalance')}}</label>
                      </ion-row>
                      <ion-row>
                        <label class="green-amount">{{accrualNet}}</label>
                    </ion-row>
                  </ion-col>
                  </div>
                  <div [ngClass]=" direction == 'ltr' ?  'div-red' : 'div-red-ar'">
                    <ion-col>
                        <ion-row>
                          <label class="red-label">{{ts.trPK('absenceList','usedBalance')}}</label>
                        </ion-row>
                        <ion-row>
                       
                          <label class="red-amount" for="">{{accrualUsed}}</label>
                      </ion-row>
                    </ion-col>
                  </div>
                
                </div>
              </ion-grid> -->
        
      </div> 


<!-- /////////////////////////////////////////////////////////up -->

<!-- <ion-content padding> -->

  <div class="no-dataDiv" *ngIf="!GetAbsenceTransactionList || GetAbsenceTransactionList.length <= 0" >
      <ion-row>
              <img class="empty-data" src="../assets/imgs/box.png"/>
 
        
      </ion-row>
      <h4>  {{ts.trPK('general','noData')}}</h4>
    </div>
  
  <div *ngIf="GetAbsenceTransactionList && GetAbsenceTransactionList.length > 0 ">
          <div *ngFor="let item of GetAbsenceTransactionList; let i=index;">
      
            <!-- <ion-card-header class="boxHdr">
                <div class="hrTitle">{{ts.trPK('absenceList','absHeader')}}</div>
               
                    <img class="imgSize" src="../assets/imgs/attachment.png" *ngIf="item.ATTACHMENT_EXIST=='Y'" (click)="AttachmentDocuments(item.ABSENCE_ATTENDANCE_ID)">
      </ion-card-header> -->
          
            <ion-grid class="grids">
              <div>
                      <ion-row>
                              <ion-col class="colBold">
                                  <label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','startDate')}} </label>
                                <br>
                                  <label class="label" style="color:black;" for=""> {{item.START_DATE}}</label>
                                  <br>
                             <hr style="background-color: grey;height: 1px">
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','endDate')}}</label>
                                  <br>
                                  <label class="label" style="color:black;"  for=""> {{item.END_DATE}}</label>
                                  <br>
                                  <hr style="background-color: grey;height: 1px">
                                </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label  style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceType')}} </label>
                                  <br>
                                  <label class="label" style="color:black;" for="">{{item.ABSENCE_TYPE}}</label>
                                  <br>
                                  <hr style="background-color: grey;height: 1px">
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceCategory')}}</label>
                                  <br>
                                  <label class="label" style="color:black;" for="">{{item.ABSENCE_CATEGORY}}</label>
                                  <br>
                                  <hr style="background-color: grey;height: 1px">
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','days')}}</label>
                                  <br>
                                  <label class="label" style="color:black;" for="">{{item.ABSENCE_DAYS}}</label>
                                  <br>
                                  <hr style="background-color: grey;height: 1px">
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','hours')}}</label>
                                  <br>
                                  <label class="label" style="color:black;" for="">{{item.ABSENCE_HOURS}}</label>
                                  <br>
                                  <hr style="background-color: grey;height: 1px">
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label style="color:#269DB8;font-weight: bold;" for="">{{ts.trPK('absenceList','approvalStatus')}}</label>
                                  <br>
                                  <label class="label" style="color:black;" for="">{{item.APPROVAL_STATUS}}</label>
                                  <br>
                                  <hr style="background-color: grey;height: 1px">
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label style="color:#269DB8;font-weight: bold;" for="">{{ts.trPK('absenceList','absenceStatus')}}</label>
                                  <br>
                                  <label class="label" style="color:black;" for="">{{item.ABSENCE_STATUS}}</label>
                                  <br>
                                  <hr style="background-color: grey;height: 1px">
                              </ion-col>
                          </ion-row>
              </div>
            </ion-grid>
         
        </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)="createAbsence()"></ion-icon>
<!-- <ion-footer>
  <div class="centerDiv">
      <ion-button  color="customnavy" class="gridBtn" (click)="createAbsence()">{{ts.trPK('absenceList','createAbs')}}</ion-button>
  </div>
</ion-footer> -->