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

<ion-content>
  <div class="contentBg">
    <div>
      <div class="header">
        <div>
          <ion-row *ngIf="direction == 'ltr'">
            <ion-col [size]="2" style="text-align: left;">
              <ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
            </ion-col>
            <ion-col [size]="8" style="text-align: center;">
                <span class="month-year-span">{{month}} {{year}}</span>
            </ion-col>
            <ion-col [size]="2" style="text-align: right;">
              <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
            </ion-col>
          </ion-row>
          
          <ion-row *ngIf="direction == 'rtl'">
            <ion-col [size]="2" style="text-align: right;">
              <ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon>
            </ion-col>
            <ion-col [size]="8" style="text-align: center;">
                <span class="month-year-span">{{year}} {{month}}</span>
            </ion-col>
            <ion-col [size]="2" style="text-align: left;">
              <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
            </ion-col>
          </ion-row>
        </div>
      </div>
      
      <div class="result-graph">
        <div >
          <span [ngClass]="direction == 'ltr' ? 'request-heading':'request-heading-ar'">{{ts.trPK('myTeam','attendance-statistics')}}</span>
        </div>
        <div style="position: relative;">
          <div class="label-container">
            <div class="green-label-container">
              <span class="span-one">{{ts.trPK('attendance','present')}}</span>
              <span class="span-two">{{attendedDays}}</span>
            </div>
            <div class="blue-label-container">
              <span class="span-one">{{ts.trPK('attendance','absent')}}</span>
              <span class="span-two">{{absentDays}}</span>
            </div>
          </div>
          <div class="graph-container">
            <div class="result-text-container">
                <h2>{{totalAttendancePrecentage}}</h2>
                <span>{{ts.trPK('absenceList','days')}}</span>
            </div>
            <p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
          </div>
        </div>
      </div>

      <ion-row class="attendance-summary">
        <ion-col [size]="3">
          <div class="attendance-information">
            <span>{{ts.trPK('attendance-tracking','schedule')}}</span>
            <h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
          </div>
        </ion-col>

        <ion-col [size]="3">
          <div class="attendance-information">
            <span>{{ts.trPK('attendance-tracking','off-days')}}</span>
            <h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
          </div>
        </ion-col>

        <ion-col [size]="3">
          <div class="attendance-information">
            <span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
            <h2>{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
          </div>
        </ion-col>

        <ion-col [size]="3">
          <div class="attendance-information">
            <span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
            <h2>{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
          </div>
        </ion-col>
      </ion-row>

      <div *ngIf="showData" [ngClass]="direction == 'ltr' ? 'calendar-container':'calendar-container-ar' ">
        <span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
        <app-circle-calendar
          [currentDateParent]="currentDate"
          [dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
          (monthTitle)='changeMonthTitle($event)'
          (currentYear)=changeYear($event)>
        </app-circle-calendar>
      </div>

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