<app-generic-header showBack="true" backLink="/notification/homepage" [headerText]="'worklistMain,title' | translate">
</app-generic-header>

<ion-content class="colorBG" *ngIf="!messageSuccess">
  <ion-segment mode="md" color="secondary" (ionChange)="segmentChangedClick($event)" [value]="activeSegment"
    class="ion-segment-all">

    <!-- <ion-segment-button value="{{segmentVal.name}}"
      [ngClass]="activeSegment == segmentVal.name ? 'active-Segment' : 'normal-Segment'"
      *ngFor="let segmentVal of segmentsArray">
      <p style="font-size: 11px;">{{segmentVal.name}}</p>
    </ion-segment-button> -->

    <ion-segment-button value="Request Details"
      [ngClass]="activeSegment == 'Request Details' ? 'active-Segment' : 'normal-Segment'">
      <p style="font-size: 11px;">Request Details</p>
    </ion-segment-button>

    <ion-segment-button value="Approval Level"
      [ngClass]="activeSegment == 'Approval Level' ? 'active-Segment' : 'normal-Segment'">
      <p style="font-size: 11px;">Approval Level</p>
    </ion-segment-button>

    <ion-segment-button value="Requester Details"
      [ngClass]="activeSegment == 'Requester Details' ? 'active-Segment' : 'normal-Segment'">
      <p style="font-size: 11px;">Requester Details</p>
    </ion-segment-button>
  </ion-segment>

  <ion-slides #slides pager="false" (ionSlideDidChange)="slideChanged($event)">
    <ion-slide>
      <ion-card class="cardContent" *ngIf='activeSegment === "Request Details"' style="width: 100%;">
        <ion-card-content>
          <ion-grid style="text-align: left" *ngFor='let dataContant of segmentData[0]?.data'>
            <ion-row>
              <ion-col>
                <label class="colItemReq"> {{dataContant.Title}}</label>
                <br />
                <label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label>

                <div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'">
                  <label *ngFor="let data of dataContant.MultipleValue">{{data}}<br /></label>
                </div>

                <div *ngIf="dataContant.Value && dataContant.Type =='table'">
                  <ion-card class="cardContent">
                    <ion-card-content>
                      <div *ngFor="let multiData of dataLabelAndValue">
                        <div *ngFor="let dataAll of multiData">
                          <div *ngFor="let dataLabel of dataAll">
                            <label class="colItemReq">{{dataLabel.label}}
                              <br /></label>
                            <div *ngIf="dataLabel.isTable =='false'">
                              <label *ngIf="dataLabel.textvalue">{{dataLabel.textvalue}}
                                <br /></label>
                              <label *ngIf="dataLabel.textvalue==''">none
                                <br /></label>
                              <br />
                            </div>
                            <div *ngIf="dataLabel.isTable == 'true'">
                              <div *ngFor="let subData of dataLabel.textvalue">
                                <div>
                                  <label style="font-weight: bold;">{{subData.label}}
                                    <br /></label>
                                  <label>{{subData.textvalue}}
                                    <br /></label>
                                  <br />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </ion-card-content>
                  </ion-card>
                </div>
              </ion-col>
            </ion-row>
            <ion-row *ngIf='dataContant.TableValue'>
              <ion-col style="border: 1px solid gainsboro; border-radius: 15px; padding-left: 20px;">
                <label class="colItemReq" *ngFor="let header of dataContant.TableValue.Header"><br /> {{header}}</label>
                <br />
                <label *ngFor="let rows of dataContant.TableValue.Rows"><br />{{rows}}</label>
                <label *ngIf="dataContant.TableValue.Rows"><br />none</label>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-content>
      </ion-card>
    </ion-slide>

    <ion-slide>
      <ion-list style="margin: 25px; border-radius: 16px; width: 340px;" class="notification-list" *ngIf='activeSegment === "Approval Level"'>
        <div class="timeline">
          <ion-item *ngFor="let approvalInfo of workList">
            <div class="timeline-item" slot="start">
              <div [class]="direction == 'en'? 'timeline-thumb-en  timeline-icon': 'timeline-thumb-ar  timeline-icon'">
              <img class="empImge" src="../assets/imgs/profile.png">
          </div>
            </div>
            <ion-col size="8">
              <ion-label class="name">
                  {{approvalInfo.Name}}
              </ion-label>

              <div *ngIf="approvalInfo.Notes != '' ">
                  <div *ngIf="!approvalInfo.Notes">
                      <div class="containerNote">
                          Note: {{approvalInfo.Notes}}
                      </div>
                  </div>


                  <div *ngIf="approvalInfo.Notes">

                      <div class="containerNote">
                          Note: {{approvalInfo.Notes}}
                      </div>

                  </div>
              </div>
              <!-- <ion-label
                  [ngClass]="{'bg-blue-txt' : approvalInfo.Action === 'Submit','bg-red-txt': approvalInfo.Action == 'Not Doable' ,'bg-orange-txt' : approvalInfo.Action === 'Pending' ,'bg-red-txt' : approvalInfo.Action === 'Rejected','bg-green-txt' : approvalInfo.Action != 'Pending'  && approvalInfo.Action != 'Rejected' && approvalInfo.Action != 'Submit'}"
                  class=""> {{approvalInfo.Action}}</ion-label> -->
                  <ion-label
                  [ngClass]="backgroundColor(approvalInfo.Action)"
                  class=""> {{approvalInfo.Action}}</ion-label>

              <ion-label *ngIf="approvalInfo.Date != ''"
                  class="dateActionHistory">
                  {{returnDateTime(approvalInfo.Date) }} </ion-label>
          </ion-col>
          <ion-col size="4">
            <ion-grid>
              <ion-row>
                <ion-col size='5'>
                  <img class="req_info" src="assets/imgs/req info.svg"
                  (click)="selectAtion('RequestInformation')" />
                </ion-col>
                <ion-col size='2'></ion-col>
                <ion-col size='5'>
                  <img class="req_info" src="assets/imgs/delegate.svg"
                  (click)="selectAtion('Delegate', approvalInfo)" />
                </ion-col>
              </ion-row>
            </ion-grid>
        </ion-col>
          </ion-item>
        </div>

      <!-- <div class="line"></div> -->
      </ion-list>

      <!-- <ion-card class="cardContent" *ngIf='activeSegment === "Approval Level"'>
        <ion-card-content>
          <ion-grid>
            <ion-row>
              <ion-col>
                <ion-list class="notification-list" style="margin-left: -30px;" *ngFor="let approvalInfo of workList">
                  <div class="timeline">
                    <ion-item>
                      <div class="timeline-item" slot="start">
                        <div>

                          <button ion-button style=" background: none;width: 60%;">
                            <img src="../assets/imgs/noteSmall.png">
                          </button>

                          <div
                            [ngClass]="{'bg-blue-dot' : approvalInfo.Action === 'Submit', 'bg-green-dot':approvalInfo.Action === 'Approved', 'bg-red-dot':approvalInfo.Action === 'Rejected', 'bg-gray-dot':approvalInfo.Action === 'Pending'}"
                            [class]="direction == 'en'? 'timeline-thumb-en  timeline-icon': 'timeline-thumb-ar  timeline-icon'"
                            [ngClass]="{'bg-gray-dot' : approvalInfo.Action === ''}">
                          </div>
                          <p style="margin-left: -0%; font-size: 12px !important; width: 66px;">{{approvalInfo.Action}}
                          </p>
                        </div>
                      </div>
                      <div>
                        <p style="margin-left: 10%; font-weight: bold;">{{approvalInfo.Name}}</p>
                        <div *ngIf="approvalInfo.Notes">
                          <p style="margin-left: 10%;">{{ 'submitAbsence, comments' | translate}}:</p>
                          <p style="margin-left: 10%;">{{approvalInfo.Notes}}</p>

                        </div>
                      </div>

                    </ion-item>
                  </div>
                </ion-list>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-content>
      </ion-card> -->
    </ion-slide>

    <ion-slide>
      <ion-card class="cardContent" *ngIf='activeSegment === "Requester Details"' style="width: 100%;">
        <ion-card-content>
          <ion-grid style="text-align: left" *ngFor='let dataContant of segmentData[1]?.data'>
            <ion-row>
              <ion-col>
                <label class="colItemReq"> {{dataContant.Title}}</label>
                <br />
                <label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label>

                <div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'">
                  <label *ngFor="let data of dataContant.MultipleValue">{{data}}<br /></label>
                </div>

                <div *ngIf="dataContant.Value && dataContant.Type =='table'">
                  <ion-card class="cardContent">
                    <ion-card-content>
                      <div *ngFor="let multiData of dataLabelAndValue">
                        <div *ngFor="let dataAll of multiData">
                          <div *ngFor="let dataLabel of dataAll">
                            <label class="colItemReq">{{dataLabel.label}}
                              <br /></label>
                            <div *ngIf="dataLabel.isTable =='false'">
                              <label *ngIf="dataLabel.textvalue">{{dataLabel.textvalue}}
                                <br /></label>
                              <label *ngIf="dataLabel.textvalue==''">none
                                <br /></label>
                              <br />
                            </div>
                            <div *ngIf="dataLabel.isTable == 'true'">
                              <div *ngFor="let subData of dataLabel.textvalue">
                                <div>
                                  <label style="font-weight: bold;">{{subData.label}}
                                    <br /></label>
                                  <label>{{subData.textvalue}}
                                    <br /></label>
                                  <br />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </ion-card-content>
                  </ion-card>
                </div>
              </ion-col>
            </ion-row>
            <ion-row *ngIf='dataContant.TableValue'>
              <ion-col style="border: 1px solid gainsboro; border-radius: 15px; padding-left: 20px;">
                <label class="colItemReq" *ngFor="let header of dataContant.TableValue.Header"><br /> {{header}}</label>
                <br />
                <label *ngFor="let rows of dataContant.TableValue.Rows"><br />{{rows}}</label>
                <label *ngIf="dataContant.TableValue.Rows"><br />none</label>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-content>
      </ion-card>
    </ion-slide>
  </ion-slides>

  <!-- <ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
    <ion-slide *ngFor='let segmentContant of segmentData'>
      <ion-card class="cardContent" *ngIf='activeSegment === segmentContant.name' style="width: 100%;">
        <ion-card-content>
          <ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
            <ion-row>
              <ion-col>
                <label class="colItemReq"> {{dataContant.Title}}</label>
                <br />
                <label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label>
  
                <div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'">
                  <label *ngFor="let data of dataContant.MultipleValue">{{data}}<br /></label>
                </div>
  
                <div *ngIf="dataContant.Value && dataContant.Type =='table'">
                  <ion-card class="cardContent">
                    <ion-card-content>
                      <div *ngFor="let multiData of dataLabelAndValue">
                        <div *ngFor="let dataAll of multiData">
                          <div *ngFor="let dataLabel of dataAll">
                            <label class="colItemReq">{{dataLabel.label}}
                              <br /></label>
                            <div *ngIf="dataLabel.isTable =='false'">
                              <label *ngIf="dataLabel.textvalue">{{dataLabel.textvalue}}
                                <br /></label>
                              <label *ngIf="dataLabel.textvalue==''">none
                                <br /></label>
                              <br />
                            </div>
                            <div *ngIf="dataLabel.isTable == 'true'">
                              <div *ngFor="let subData of dataLabel.textvalue">
                                <div>
                                  <label style="font-weight: bold;">{{subData.label}}
                                    <br /></label>
                                  <label>{{subData.textvalue}}
                                    <br /></label>
                                  <br />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </ion-card-content>
                  </ion-card>
                </div>
              </ion-col>
            </ion-row>
            <ion-row *ngIf='dataContant.TableValue'>
              <ion-col style="border: 1px solid gainsboro; border-radius: 15px; padding-left: 20px;">
                <label class="colItemReq" *ngFor="let header of dataContant.TableValue.Header"><br /> {{header}}</label>
                <br />
                <label *ngFor="let rows of dataContant.TableValue.Rows"><br />{{rows}}</label>
                <label *ngIf="dataContant.TableValue.Rows"><br />none</label>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-content>
      </ion-card>
    </ion-slide>

    <ion-slide>
      <ion-card class="cardContent" *ngIf='activeSegment === "Approval Level"'>
        <ion-card-content>
          <ion-grid>
            <ion-row>
              <ion-col>
                <ion-list class="notification-list" style="margin-left: -30px;" *ngFor="let approvalInfo of workList">
                  <div class="timeline">
                    <ion-item>
                      <div class="timeline-item" slot="start">
                        <div>
    
                          <button ion-button style=" background: none;width: 60%;">
                            <img src="../assets/imgs/noteSmall.png">
                          </button>
    
                          <div
                            [ngClass]="{'bg-blue-dot' : approvalInfo.Action === 'Submit', 'bg-green-dot':approvalInfo.Action === 'Approved', 'bg-red-dot':approvalInfo.Action === 'Rejected', 'bg-gray-dot':approvalInfo.Action === 'Pending'}"
                            [class]="direction == 'en'? 'timeline-thumb-en  timeline-icon': 'timeline-thumb-ar  timeline-icon'"
                            [ngClass]="{'bg-gray-dot' : approvalInfo.Action === ''}">
                          </div>
                          <p style="margin-left: -0%; font-size: 12px !important; width: 66px;">{{approvalInfo.Action}}</p>
                        </div>
                      </div>
                      <div>
                        <p style="margin-left: 10%; font-weight: bold;">{{approvalInfo.Name}}</p>
                        <div *ngIf="approvalInfo.Notes">
                          <p style="margin-left: 10%;">{{ 'submitAbsence, comments' | translate}}:</p>
                          <p style="margin-left: 10%;">{{approvalInfo.Notes}}</p>
    
                        </div>
                      </div>
    
                    </ion-item>
                  </div>
                </ion-list>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-content>
      </ion-card>
    </ion-slide>
  </ion-slides> -->

  <!-- <div *ngFor='let segmentContant of segmentData'>
    <ion-card class="cardContent" *ngIf='activeSegment === segmentContant.name'>
      <ion-card-content>
        <ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
          <ion-row>
            <ion-col>
              <label class="colItemReq"> {{dataContant.Title}}</label>
              <br />
              <label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label>

              <div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'">
                <label *ngFor="let data of dataContant.MultipleValue">{{data}}<br /></label>
              </div>

              <div *ngIf="dataContant.Value && dataContant.Type =='table'">
                <ion-card class="cardContent">
                  <ion-card-content>
                    <div *ngFor="let multiData of dataLabelAndValue">
                      <div *ngFor="let dataAll of multiData">
                        <div *ngFor="let dataLabel of dataAll">
                          <label class="colItemReq">{{dataLabel.label}}
                            <br /></label>
                          <div *ngIf="dataLabel.isTable =='false'">
                            <label *ngIf="dataLabel.textvalue">{{dataLabel.textvalue}}
                              <br /></label>
                            <label *ngIf="dataLabel.textvalue==''">none
                              <br /></label>
                            <br />
                          </div>
                          <div *ngIf="dataLabel.isTable == 'true'">
                            <div *ngFor="let subData of dataLabel.textvalue">
                              <div>
                                <label style="font-weight: bold;">{{subData.label}}
                                  <br /></label>
                                <label>{{subData.textvalue}}
                                  <br /></label>
                                <br />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </ion-card-content>
                </ion-card>
              </div>
            </ion-col>
          </ion-row>
          <ion-row *ngIf='dataContant.TableValue'>
            <ion-col style="border: 1px solid gainsboro; border-radius: 15px; padding-left: 20px;">
              <label class="colItemReq" *ngFor="let header of dataContant.TableValue.Header"><br /> {{header}}</label>
              <br />
              <label *ngFor="let rows of dataContant.TableValue.Rows"><br />{{rows}}</label>
              <label *ngIf="dataContant.TableValue.Rows"><br />none</label>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-card-content>
    </ion-card>
  </div>

  <ion-card class="cardContent" *ngIf='activeSegment === "Approval Level"'>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-list class="notification-list" style="margin-left: -30px;" *ngFor="let approvalInfo of workList">
              <div class="timeline">
                <ion-item>
                  <div class="timeline-item" slot="start">
                    <div>

                      <button ion-button style=" background: none;width: 60%;">
                        <img src="../assets/imgs/noteSmall.png">
                      </button>

                      <div
                        [ngClass]="{'bg-blue-dot' : approvalInfo.Action === 'Submit', 'bg-green-dot':approvalInfo.Action === 'Approved', 'bg-red-dot':approvalInfo.Action === 'Rejected', 'bg-gray-dot':approvalInfo.Action === 'Pending'}"
                        [class]="direction == 'en'? 'timeline-thumb-en  timeline-icon': 'timeline-thumb-ar  timeline-icon'"
                        [ngClass]="{'bg-gray-dot' : approvalInfo.Action === ''}">
                      </div>
                      <p style="margin-left: -0%; font-size: 12px !important; width: 66px;">{{approvalInfo.Action}}</p>
                    </div>
                  </div>
                  <div>
                    <p style="margin-left: 10%; font-weight: bold;">{{approvalInfo.Name}}</p>
                    <div *ngIf="approvalInfo.Notes">
                      <p style="margin-left: 10%;">{{ 'submitAbsence, comments' | translate}}:</p>
                      <p style="margin-left: 10%;">{{approvalInfo.Notes}}</p>

                    </div>
                  </div>

                </ion-item>
              </div>
            </ion-list>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card> -->
  <!-- 
  <ion-card class="cardContent">
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-label>
              <h2 class="boldTxtNav">Comment</h2>
            </ion-label>
            <ion-input type='text' [(ngModel)]='commentText'></ion-input>

            <ion-item *ngFor="let object of grantInfo">
              <ion-label>{{object.Label}}</ion-label>
              <ion-select *ngIf="!object.ConditionalFieldName" [(ngModel)]='ExchangeServerSelected'
                (ionChange)="filterGrantDB(ExchangeServerSelected,object, object.FieldName)" id='{{object.FieldName}}'>
                <ion-select-option value="{{value}}" *ngFor="let value of object.Value">
                  {{value}}</ion-select-option>
              </ion-select>
              <ion-select *ngIf="object.ConditionalFieldName" [(ngModel)]='ExchangeServerDBSelected'
                (ionChange)="filterGrantDB(ExchangeServerDBSelected,object)" id='{{object.FieldName}}'>
                <ion-select-option value="{{value}}" *ngFor="let value of filteredGrantFieldsConditionalValue">
                  {{value}}</ion-select-option>
              </ion-select>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>


   if there is additional screen like in VIDA -->
  <!-- <ng-container>
      <ion-card class="cardContent" *ngFor='let segmentContant of segmentDataTable'>
          <ion-card-content *ngIf='activeSegment === segmentContant.name'>
            <ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
              <ion-row *ngFor="let headerData of dataContant.Header">
                <ion-col>
                  <label class="colItemReq"> {{headerData}}</label>
                  <br />
                  <label>{{headerData}}</label>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-card-content>
        </ion-card>
  </ng-container> -->

  <!-- END -->
  <br>
  <ion-label>
    <ion-item>
      <ion-grid>
        <ion-row>
          <ion-col>
            <p>{{ 'submitAbsence, comments' | translate}}</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-input type='text' [(ngModel)]='commentText'></ion-input>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-label>
</ion-content>

<ion-content *ngIf="messageSuccess">
  <div class="succssfullMSG">
    <ion-col size="12">
      <ion-icon class="succssfullIcon" name="checkmark"></ion-icon>
    </ion-col>
    <ion-col size="12">
      <div style="font-size: 30px !important"> {{'worklistMain, Tran_Succ' | translate}} </div>
    </ion-col>
  </div>
</ion-content>


<ion-footer class="footerSearchBtn" *ngIf="!messageSuccess">


  <ion-tabs>
    <ion-tab-bar class="tabBar" slot="bottom" style="overflow-x: scroll;" style="height: 100%  !important;">

      <!-- <ion-tab-button *ngFor='let action of actionBTN' [hidden]="action.isAvailable" > -->
      <ion-tab-button *ngFor='let action of actionBTN;  let i=index' [hidden]='!action.isAvailable'
        (click)="selectAtion(action.name)" [ngClass]="i === 0 ? 'tabs-margin' : ''">

        <img [src]="action.image" class="footer-btn-img">
        <ion-label style="font-size: 10px" *ngIf="action.name !== 'RequestInformation'">{{action.name}}</ion-label>
        <ion-label style="font-size: 10px; white-space: nowrap;" *ngIf="action.name === 'RequestInformation'">
          {{'worklistMain, request' | translate}}</ion-label>


      </ion-tab-button>

      <ion-tab-button (click)="skip()">
        <img src="../assets/imgs/mohemm-action/Skip.png" class="footer-btn-img">
        <ion-label style="font-size: 10px;">Skip</ion-label>
      </ion-tab-button>

    </ion-tab-bar>

  </ion-tabs>



</ion-footer>