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

<ion-content class="colorBG">
  <div *ngIf="!messageSuccess">
    <div class="subjectNotification">{{getPassNotificationDetails.SUBJECT}}</div>

    <!-- add segemnt part -->
    <ion-segment mode="md" color="secondary" (ionChange)="segmentChanged($event)" [value]="activeSegment"
      class="ion-segment-all">

      <ion-segment-button value="line_details"
        [ngClass]="activeSegment == 'line_details' ? 'active-Segment' : 'normal-Segment'">
        <ion-label class="no-padding-label margin-left"> {{'worklistMain,itemReq'| translate}} </ion-label>

      </ion-segment-button>
      <ion-segment-button value="action-history"
        [ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'">
        <ion-label class="no-padding-label"> {{'worklistMain, action' | translate}} </ion-label>
      </ion-segment-button>

      <ion-segment-button value="attach" [ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
        <ion-label class="no-padding-label"> {{'worklistMain, attach-file' | translate}}
        </ion-label>

      </ion-segment-button>
      <ion-segment-button checked value="info"
        [ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
        <ion-label class="no-padding-label"> {{'worklistMain, info'| translate}} </ion-label>
      </ion-segment-button>
    </ion-segment>

    <ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
      <ion-slide>
        <ng-container *ngIf="activeSegment === 'line_details'">
          <div [hidden]="POLines && POLines.length > 0" style="width: 100% !important">
            <p>{{ 'general, empty' | translate}}</p>
          </div>
          <accordin-custom style="width: 100% !important">
            <accordin-tab-custom *ngFor="let header of POLines; let i=index;" [header]="header.PRODUCT_DESCRIPTION"
              [show]="i === 0 ? true: false">
              <div class="itemReqDiv">
                <ion-grid>
                  <ion-row>
                    <ion-col>
                      <div *ngIf="pInformation &&  pInformation != '' " class="tipsPadding">{{pInformation}}</div>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col>
                      <ion-grid style="text-align: left">
                        <div>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, product-name'| translate}}</label>
                              <br />
                              <label for="">{{header.PRODUCT_NAME}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, product-description'| translate}}</label>
                              <br />
                              <label for="">{{header.PRODUCT_DESCRIPTION}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col size="6" [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, Unit-price'| translate}}</label>
                              <br />
                              <label for="">{{header.UNIT_PRICE}} </label>
                            </ion-col>
                            <ion-col size="6">
                              <label class="colItemReq" for="">{{'worklist, manufacturer-name'| translate}}</label>
                              <br />
                              <label for="">{{header.USER_MANUFACTURER_NAME}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, manufacturer-part-number'| translate}}</label>
                              <br />
                              <label for="">{{header.USER_MFG_PART_NUM}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, supplier-name'| translate}}</label>
                              <br />
                              <label for="">{{header.SUPPLIER_NAME}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, supplier-contact'| translate}}</label>
                              <br />
                              <label for="">{{header.SUPPLIER_CONTACT}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, charge-to-patient'| translate}}</label>
                              <br />
                              <label for="">{{header.CHARGE_TO_PATIENT}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, justification'| translate}}</label>
                              <br />
                              <label for="">{{header.JUSTIFICATION}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, item-code'| translate}}</label>
                              <br />
                              <label for="">{{header.ITEM_CODE}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, item-description'| translate}}</label>
                              <br />
                              <label for="">{{header.ITEM_DESCRIPTION}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, group-code'| translate}}</label>
                              <br />
                              <label for="">{{header.ITEM_GROUP_CODE}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, group-description'| translate}}</label>
                              <br />
                              <label for="">{{header.ITEM_GROUP}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, subgroup-code'| translate}}</label>
                              <br />
                              <label for="">{{header.ITEM_SUBGROUP_CODE}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, subgroup-description'| translate}}</label>
                              <br />
                              <label for="">{{header.ITEM_SUBGROUP}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, primary-uom'| translate}}</label>
                              <br />
                              <label for="">{{header.PRIMARY_UOM}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, manufacturer-name'| translate}}</label>
                              <br />
                              <label for="">{{header.STANDARD_MANUFACTURER_NAME}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, manufacturer-part-number'| translate}}</label>
                              <br />
                              <label for="">{{header.STANDARD_MFG_PART_NUM}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, template-name'| translate}}</label>
                              <br />
                              <label for="">{{header.TEMPLATE_NAME}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, item-creation-status'| translate}}</label>
                              <br />
                              <label for="">{{header.ITEM_CREATION_STATUS_DISP}} </label>
                            </ion-col>
                          </ion-row>
                          <ion-row class="rowBorder">
                            <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                              <label class="colItemReq" for="">{{'worklist, standardization-approval-status'| translate}}</label>
                              <br />
                              <label for="">{{header.STANDARD_STATUS}} </label>
                            </ion-col>
                            <ion-col>
                              <label class="colItemReq" for="">{{'worklist, standardization-approval-rejection-reason'| translate}}</label>
                              <br />
                              <label for="">{{header.STANDARD_REJECT_REASON}} </label>
                            </ion-col>
                          </ion-row>
                        </div>
                        <br />
                      </ion-grid>
                      <button ion-button *ngIf="!IsReachEnd" class="itemHISBtn" (click)="loadMoreNotificationBody()">
                        {{ 'general, load-more' | translate}}
                      </button>
                    </ion-col>
                  </ion-row>
                </ion-grid>
              </div>
            </accordin-tab-custom>
          </accordin-custom>

        </ng-container>
      </ion-slide>

      <ion-slide>
        <ng-container *ngIf="activeSegment === 'action-history'">

          <ion-card class="cardContent" style="width: 100%;">
              <ion-card-content>

                  <div class="noDataDiv" [hidden]="actionHistoryRes && actionHistoryRes.length > 0">
                      <p>{{ 'general, empty' | translate}}</p>
                  </div>
                  <div *ngIf="actionHistoryRes && actionHistoryRes.length > 0 ">
                      <ion-list class="notification-list ">
                          <div class="timeline">
                              <ion-item *ngFor="let actionHistory of actionHistoryRes">

                                  <div class="timeline-item"  slot="start">
                                      <div 
                                          [class]="direction == 'en'? 'timeline-thumb-en  timeline-icon': 'timeline-thumb-ar  timeline-icon'">
                                          <img *ngIf="actionHistory.EMPLOYEE_IMAGE" class="empImge"
                                              [src]="'data:image/png;base64,'+actionHistory.EMPLOYEE_IMAGE">
                                          <img *ngIf="actionHistory.EMPLOYEE_IMAGE == null" class="empImge"
                                              src="../assets/imgs/profile.png"> </div>
                                  </div>
                                  <ion-col size="8">
                                      <ion-label class="name">
                                          {{actionHistory.NAME}}
                                      </ion-label>

                                      <div *ngIf="actionHistory.NOTE != '' ">
                                          <div *ngIf="!checkLines(actionHistory.NOTE)">
                                              <div class="containerNote">
                                                  Note: {{actionHistory.NOTE}}
                                              </div>
                                          </div>


                                          <div *ngIf="checkLines(actionHistory.NOTE)">

                                              <div class="containerNote"
                                                  [ngClass]="actionHistory.visible ? 'show' : '' ">
                                                  Note: {{actionHistory.NOTE}}


                                              </div>
                                              <button class="showMore"
                                                  (click)="actionHistory.visible = !actionHistory.visible">{{ actionHistory.visible ? 'Show less': 'Show More' }}</button>

                                          </div>
                                      </div>
                                      <ion-label
                                          [ngClass]="{'bg-blue-txt' : actionHistory.ACTION_CODE === 'SUBMIT' ,'bg-orange-txt' : actionHistory.ACTION_CODE === 'PENDING' ,'bg-red-txt' : actionHistory.ACTION_CODE === 'REJECT','bg-green-txt' : actionHistory.ACTION_CODE != 'PENDING'  && actionHistory.ACTION_CODE != 'REJECT' && actionHistory.ACTION_CODE != 'SUBMIT'}"
                                          class=""> {{actionHistory.ACTION}}</ion-label>


                                      <ion-label *ngIf="actionHistory.NOTIFICATION_DATE != ''"
                                          class="dateActionHistory">
                                          {{returnDateTime(actionHistory.NOTIFICATION_DATE)}} </ion-label>
                                  </ion-col>
                                  <ion-col size="4">
                                      <img class="req_info" src="assets/imgs/req info.svg" (click)="openRequestInfoDel(actionHistory, 'REQUEST_INFO')" />
                                      <img class="req_info" src="assets/imgs/delegate.svg" (click)="openRequestInfoDel(actionHistory, 'DELEGATE')"/>
                                      
                                  </ion-col>
                                  <div class="line"></div>
                              </ion-item>
                          </div>
                      </ion-list>
                  </div>

                  <button ion-button *ngIf="!IsReachEnd" class="itemHISBtn" (click)="loadMoreActionHistory()">
                      {{ 'general, load-more' | translate}}
                  </button>

              </ion-card-content>
          </ion-card>

      </ng-container>
      </ion-slide>

      <ion-slide>
        <ng-container *ngIf="activeSegment === 'attach'">
          <ion-card class="cardContent" style="width: 100% i !important;">
            <ion-card-content>
              <div class="noDataDiv" [hidden]="attachmentRes && attachmentRes.length > 0">
                <p>{{ 'general, notAttch' | translate}}</p>
              </div>
              <div *ngIf="attachmentRes && attachmentRes.length > 0 ">

                <ion-grid>
                  <ion-item class="itemAttch" *ngFor="let attachList of attachmentRes ; let i=index;">
                    <ion-label style="color: black !important">
                      {{i+1}}. {{attachList.FILE_NAME}} </ion-label>

                    <button float-end class="attachImgBtn"
                      (click)="OpenAttachFiles(attachList.FILE_DATA,attachList.FILE_CONTENT_TYPE)">
                      <img class="attachImg" src="../assets/imgs/view.png">
                    </button>

                  </ion-item>

                </ion-grid>


              </div>
            </ion-card-content>
          </ion-card>
        </ng-container>
      </ion-slide>

      <ion-slide>
        <ng-container *ngIf="activeSegment === 'info'">


          <ion-grid>
            <div *ngFor="let Lines of POHeader">
              <ion-card class="cardContent" style="width: 90% i !important;">
                <ion-card-content>
                  <ion-row class="rowBorder">
                    <ion-col class="colItems" [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                      <label class="colItemReq" for="">{{'worklist, operating-unit'| translate}}</label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.OPERATING_UNIT}} </ion-label>
                    </ion-col>
                    <ion-col class="colItems ">
                      <label class="colItemReq" for="">{{'worklist, category'| translate}}
                      </label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.CATEGORY}}</ion-label>
                    </ion-col>
                  </ion-row>
                  <ion-row class="rowBorder">
                    <ion-col class="colItems " [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                      <label class="colItemReq" for="">{{'worklist, requester'| translate}}
                      </label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.REQUESTER}} </ion-label>
                    </ion-col>
                    <ion-col class="colItems">
                      <label class="colItemReq" for="">{{'worklist, analyzed-by'| translate}}</label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.ANALYZED_BY}} </ion-label>
                    </ion-col>
                  </ion-row>
                  <ion-row class="rowBorder">
                    <ion-col class="colItems" [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                      <label class="colItemReq" for="">{{'worklist, approved-date'| translate}}
                      </label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.APPROVED_DATE}} </ion-label>
                    </ion-col>
                    <ion-col class="colItems">
                      <label class="colItemReq" for="">{{'worklist, item-type'| translate}}</label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.ITEM_TYPE}} </ion-label>
                    </ion-col>
                  </ion-row>
                  <ion-row class="rowBorder">
                    <ion-col class="colItems" [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                      <label class="colItemReq" for="">{{'worklist, related-to'| translate}}
                      </label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.RELATED_TO}} </ion-label>
                    </ion-col>
                    <ion-col class="colItems">
                      <label class="colItemReq" for="">{{'worklist, request-date'| translate}}</label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.REQUEST_DATE| date}}
                      </ion-label>
                    </ion-col>
                  </ion-row>
                  <ion-row class="rowBorder">
                    <ion-col class="colItems" [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                      <label class="colItemReq" for="">{{'worklist, analyzed-date'| translate}}</label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.ANALYZED_DATE| date}} </ion-label>
                    </ion-col>
                    <ion-col class="colItems">
                      <label class="colItemReq" for="">{{'worklist, urgent'| translate}}</label>
                      <br />
                      <ion-label class="labelValue" for="">{{Lines.URGENT_FLAG_DISP}} </ion-label>
                    </ion-col>
                  </ion-row>
                </ion-card-content>
              </ion-card>
            </div>
          </ion-grid>
        </ng-container>
      </ion-slide>
    </ion-slides>

    <ion-row>
      <ion-col col-12>
        <div id="notificationDynamicFieldsPO">
        </div>
      </ion-col>
    </ion-row>
  </div>
  <div *ngIf="messageSuccess" 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 *ngIf="!messageSuccess" class="footerSearchBtn">

  <ion-tabs>

    <ion-tab-bar class="tabBar" slot="bottom" style="height: 100% !important;">
      <ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVE')">
        <img src="../assets/imgs/mohemm-action/Approve.png">
        <ion-label class="action-btn"> {{approve_label}}</ion-label>

      </ion-tab-button>

      <ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')">
        <img src="../assets/imgs/mohemm-action/Approve.png">
        <ion-label class="action-btn"> {{close_label}}</ion-label>

      </ion-tab-button>

      <ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECT')">
        <img src="../assets/imgs/mohemm-action/Reject.png">
        <ion-label class="action-btn"> {{reject_label}}</ion-label>
      </ion-tab-button>

      <ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')">
        <img src="../assets/imgs/mohemm-action/info.png">
        <ion-label class="action-btn"> {{reqInfo_label}}</ion-label>
      </ion-tab-button>
      <ion-tab-button (click)="nextNotfification()">
        <img src="../assets/imgs/mohemm-action/Skip.png">
        <ion-label class="action-btn"> {{'worklistMain, skip' | translate}}</ion-label>
      </ion-tab-button>

      <ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()">
        <img src="../assets/imgs/mohemm-action/More.png">
        <ion-label class="action-btn"> {{'worklistMain, more' | translate}}</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>


</ion-footer>