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

<ion-content>
  <div class="contentBg">
    <div class="result-graph">
      <div class="request-heading">
        <span>{{ts.trPK('work-list','open-analysis')}}</span>
      </div>
      <div class="result-text-container" [ngStyle]="showChart === false ? {'visibility': 'hidden'} : {}">
          <span *ngIf="selectedFilter === 'ALL'">{{newWorkListResponse.length + ITGCount}} {{ts.trPK('work-list','of')}} </span>
          <span *ngIf="showSearchButton && newWorkListResponse.length > 0 && selectedFilter !== 'ALL' && itemType !== ''">{{newWorkListResponse.length}} {{ts.trPK('work-list','of')}} </span>
          <h2 *ngIf="!showSearchButton">{{totalRequestCount}}</h2>
          <h2 *ngIf="showSearchButton && newWorkListResponse.length > 0 && itemType === ''">{{newWorkListResponse[0].NO_OF_ROWS + ITGCount}}</h2>
          <h2 *ngIf="showSearchButton && newWorkListResponse.length > 0 && selectedFilter !== 'ALL' && itemType !== ''">{{newWorkListResponse[0].NO_OF_ROWS}}</h2>
          <span>{{ts.trPK('work-list','total')}} <br> {{ts.trPK('work-list','open-reqest')}}</span>
      </div>
      <p-chart *ngIf="!showChart" class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
      <p-chart *ngIf="showChart" class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
    </div>

    <ion-row class="filters-row" *ngIf="showChart">
      <ion-slides [options]="slideOptsOne">
          <ion-slide *ngFor="let filter of filters;  let i=index" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
              <app-card-filter
                [value]="filter.value"
                [text]="filter.name"
                [color]="filter.color"
                [active]="filter.active"
                (click)="activeFilter(i)"
              ></app-card-filter>
          </ion-slide>
      </ion-slides>
    </ion-row>
    
    <ion-row class="search-container">
        <ion-col style="float: left;" size=[6] *ngIf="showSearchButton" (click)="clearSearch()">
            <span style="margin-left: 5px;">{{ts.trPK('work-list','clear-search')}}</span>
            <ion-icon name="close" ></ion-icon>
        </ion-col>
        <ion-col style="float: right;" size=[6] (click)="openSearchModal()" *ngIf="selectedFilter === 'ALL'">
            <ion-icon name="search" ></ion-icon>
            <span>{{ts.trPK('work-list','advanced-search')}}</span>
        </ion-col> 
    </ion-row>

    <ion-row *ngIf='selectedFilter === "ITG"' class="filters-row">
      <ion-col>
        <ion-slides [options]="slideOptsTwo">
          <ion-slide class='slideCss' *ngFor="let segment of ITGSegment">
            <span [ngClass]="segment.style? 'text-span-active': 'text-span'" (click)="setActive(segment.code)">
                {{segment.name}}              
            </span>
          </ion-slide>
        </ion-slides>
      </ion-col>
    </ion-row>

    <div style="position: relative;">
      <div [ngClass]="showFormattedData.length > 0 && direction == 'en'? 'work-list-container' : 'work-list-container-ar'" *ngIf='selectedFilter != "ITG" && showFormattedData.length > 0'>
        <div *ngFor="let formattedData of showFormattedData;  let i = index">
          <span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{formattedData.date}}</span>
          <div  class="date-data" *ngFor="let workList of formattedData.data;  let j = index">
            <p (click)="openNotificationDetail(workList)">{{workList.SUBJECT}}</p>
          </div>
          </div>
        </div>
      </div>
      <div [ngClass]="ITGItem.length > 0 ? 'work-list-container' : ''" *ngIf="selectedFilter == 'ITG'" >
          <!-- <div  *ngFor='let segmentInfo of ITGItem[0]; let i= index' (click)='openITG(segmentInfo)'> -->
          <div  *ngFor='let segmentInfo of ITGItem[0]; let i= index' >
          
          <div *ngIf="activeSegment !== 'All'" (click)='openITG(segmentInfo)'>
            <span class="date-span">{{segmentInfo.ModifiedDate |date}}</span>
            <div class="date-data">
              <p>{{segmentInfo.Title}}</p>
            </div>
          </div>

          <div *ngIf="activeSegment == 'All'" >
            <div *ngFor="let data of segmentInfo" (click)="openITGAll(data.ID, data.ItemID)">
              <span class="date-span">{{data.ModifiedDate | date}}</span>
              <div class="date-data">
                <p>{{data.Title}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="no-data-available" *ngIf="showFormattedData.length === 0 && selectedFilter != 'ITG'">
        <span>{{ts.trPK('work-list','No-data-available')}}</span>
      </div>
      <div class="no-data-available" *ngIf="ITGItem.length === 0 && selectedFilter == 'ITG'">
        <span>{{ts.trPK('work-list','No-data-available')}}</span>
      </div>
    </div>
  <!-- </div> -->
  
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="selectedFilter === 'ALL' || itemType !== ''">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
