<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]="defaultSegment" class="ion-segment-all">

        <ion-segment-button value="item-req"
            [ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'">
            <ion-label>  {{ts.trPK('worklistMain','itemReq')}} </ion-label>
        </ion-segment-button>
        <ion-segment-button value="action-history"
            [ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'">
            <ion-label>   {{'worklistMain, action' | translate}} </ion-label>
        </ion-segment-button>

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

        </ion-segment-button>

        <ion-segment-button checked value="info"
            [ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
            <ion-label>   {{ts.trPK('worklistMain','info')}} </ion-label>
        </ion-segment-button>
    </ion-segment>

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


        <div *ngIf="pInformation &&  pInformation != '' " class="tipsPadding">{{pInformation}}</div>

        <ion-card class="cardContent">
            <!-- <ion-card-header class="boxHdr">
          <div class="hrTitle"> {{ts.trPK('worklistMain','info')}} </div>
      </ion-card-header> -->
            <ion-card-content>
                <ion-grid style="text-align: left">
                    <ion-row>
                        <ion-col>
                            <label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}

                            </label>
                            <br />
                            <!-- </ion-col>
                      <ion-col> -->
                            <label for="">{{getPassNotificationDetails.FROM_USER}}</label>
                        </ion-col>

                        <ion-col>
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
                            </label>
                            <br />

                            <!-- </ion-col>
                      <ion-col> -->
                            <label for=""> {{getPassNotificationDetails.TO_USER}}</label>
                        </ion-col>
                    </ion-row>

                    <ion-row>
                        <ion-col>
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
                            </label>
                            <br />

                            <!-- </ion-col>
                      <ion-col> -->
                            <label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
                        </ion-col>
                        <!-- </ion-row>
                        <ion-row> -->
                        <ion-col>
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
                            </label>
                            <br />

                            <!-- </ion-col>
                      <ion-col> -->
                            <label for="">{{getPassNotificationDetails.END_DATE}}</label>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col>
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
                            </label>
                            <br />

                            <!-- </ion-col>
                      <ion-col> -->
                            <label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
                        </ion-col>
                        <!-- </ion-row> -->
                        <!-- <ion-row *ngIf=" getPassNotificationDetails.RESPONDER != '' "> -->
                        <ion-col>
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
                            </label>
                            <br />

                            <!-- </ion-col>
                      <ion-col> -->
                            <label for="">{{getPassNotificationDetails.RESPONDER}} </label>
                        </ion-col>
                    </ion-row>

                    <!-- <ion-row>
                            <ion-col>
                                <label class="colItemReq" for="">{{ts.trPK('worklistMain','subject')}} </label>
                                <br />
 </ion-col>
                      <ion-col> 
                                <label for="">{{getPassNotificationDetails.SUBJECT}} </label>
                            </ion-col>
                        </ion-row> -->

                    <!-- notificationBodyRes -->

                    <div *ngFor="let header of PRHeader">

                        <ion-row
                            *ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'">
                            <!-- *ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'"> -->

                            <ion-col>
                                <label class="colItemReq" for="">{{header.HDR_ATTRIBUTE_NAME}} </label>
                                <br />

                                <label for="">{{header.HDR_ATTRIBUTE_VALUE}} </label>
                            </ion-col>
                        </ion-row>

                    </div>
                    <br />



                    <ion-grid>
                        <div>
                            <ion-row style="text-align: center !important">
                                <ion-col *ngIf="totalH">
                                    <div class="colItemReq" style="text-align: center !important">{{totalH}}</div>
                                    <div class="labelTotal">{{valueH}}</div>

                                </ion-col>
                                <ion-col *ngIf="taxH ">
                                    <div class="colItemReq" style="text-align: center !important">{{taxH}}</div>
                                    <div class="labelTotal">{{taxvalueH}}</div>

                                </ion-col>
                            </ion-row>

                        </div>
                    </ion-grid>



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

                    </button>

            </ion-card-content>


           
        </ion-card>


    </ng-container>
    <ng-container *ngIf="activeSegment === 'item-req'">
        <!-- <ion-card class="cardContent"> -->
        <!-- <ion-card-header class="boxHdr">
                <div class="hrTitle"> {{ts.trPK('worklistMain','info')}} </div>
            </ion-card-header> -->
        <!-- <ion-card-content> -->

        <div [hidden]="PRLines && PRLines.length > 0">
            <p>{{ 'general, empty' | translate}}</p>
        </div>






        <accordin-custom>
            <accordin-tab-custom *ngFor="let Lines of PRLines; let i=index;" [header]="Lines.DESCRIPTION">


                <div class="itemReqDiv">

                    <!-- <ion-row>
                                    <ion-col class="colItemReqHeader">
                                  
                                        <label for="">{{i+1}}. {{Lines.DESCRIPTION}} </label>
                                    </ion-col>
                                </ion-row> -->
                    <ion-row class="rowBorder">
                        <ion-col class="colItems colBorder ">
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','cost-center')}}
                            </label>
                            <br />
                            <!-- </ion-col>
                            <ion-col> -->
                            <ion-label class="labelValue" for="">{{Lines.COST_CENTER}} </ion-label>
                        </ion-col>
                        <!-- </ion-row>

                        <ion-row> -->

                        <ion-col class="colItems">
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','code')}} </label>
                            <br />
                            <!-- </ion-col>
                                <ion-col> -->
                            <ion-label class="labelValue" for="">{{Lines.ITEM_CODE}} </ion-label>
                        </ion-col>
                    </ion-row>
                    <ion-row class="rowBorder">
                        <ion-col class="colItems colBorder ">
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','unit')}} </label>
                            <br />

                            <ion-label class="labelValue" for="">{{Lines.UOM}} </ion-label>
                        </ion-col>


                        <ion-col class="colItems">
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','price')}}  ({{ 'general, sar' | translate}})</label>
                            <br />

                            <ion-label class="labelValue" for="">{{Lines.UNIT_PRICE}} </ion-label>

                        </ion-col>
                    </ion-row>
                    <ion-row class="rowBorder">
                        <ion-col class="colItems colBorder ">
                            <label class="colItemReq" for="">{{ts.trPK('payslip','amount')}}  ({{ 'general, sar' | translate}})</label>
                            <br />

                            <ion-label class="labelValue" for="">{{Lines.LINE_AMOUNT}} </ion-label>
                        </ion-col>



                        <ion-col class="colItems">
                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','quantity')}}  </label>
                            <br />

                            <ion-label class="labelValue" for="">{{Lines.QUANTITY}} </ion-label>
                        </ion-col>

                    </ion-row>

                    <ion-row>
                            <ion-col class="colItems">
                          <label class="colItemReq" for="">{{ts.trPK('worklistMain','ITEM_AMU')}} </label>
                          <br />

                          <ion-label class="labelValue" for="">{{Lines.ITEM_AMU}} </ion-label>
                      </ion-col>
                  </ion-row>
                </div>
            </accordin-tab-custom>
        </accordin-custom>

    </ng-container>
    <ng-container *ngIf="activeSegment === 'action-history'">
        <ion-card class="cardContent">
            <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; let index=index">

                                <div class="timeline-item" slot="start">

                                    <!-- <div>

                                            <button ion-button
                                                (click)="openNoteDetail(actionHistory.NOTE ,actionHistory.NAME)"
                                                [hidden]="actionHistory.NOTE == '' || actionHistory.NOTE == null"
                                                style=" background: none;width: 60%;">

                                                <img src="../assets/imgs/noteSmall.png">

                                            </button>
                                        </div> -->

                                    <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>
                                    <ion-label style="color:black !important ;font-weight: bold;">
                                        {{actionHistory.NAME}}
                                    </ion-label>

                                    <div *ngIf="actionHistory.NOTE">
                                        <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>




                                        <!-- *ngIf="!checkLines(actionHistory.NOTE)" -->
                                    </div>
                                    <!-- [ngClass]="{'bg-blue-txt' : actionHistory.ACTION === 'Submitted' || actionHistory.ACTION === 'Submit' ,'bg-orange-txt' : actionHistory.ACTION === 'Pending' ,'bg-red-txt' : actionHistory.ACTION === 'Rejected','bg-green-txt' : actionHistory.ACTION != 'Pending' && actionHistory.ACTION != 'Rejected' && actionHistory.ACTION != 'Submitted' && actionHistory.ACTION != 'Submit'}" -->

                                    <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">
                                        {{actionHistory.NOTIFICATION_DATE| dateString }} </ion-label>
                                </ion-col>
                            </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>
    <ng-container *ngIf="activeSegment === 'attach'">
        <ion-card class="cardContent">
                <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;">
                    <!-- <div *ngIf="attachList.FILE_CONTENT_TYPE === 'pdf' || attachList.FILE_CONTENT_TYPE === 'PDF'">
                        <img float-start class="attachImg" src="../assets/imgs/pdf.png">
                    </div>
                    <div *ngIf="attachList.FILE_CONTENT_TYPE === 'txt'"> <img float-start class="attachImg"
                            src="../assets/imgs/doc.png">
                    </div>
                    <div
                        *ngIf="attachList.FILE_CONTENT_TYPE != 'txt' && attachList.FILE_CONTENT_TYPE != 'PDF' && attachList.FILE_CONTENT_TYPE != 'pdf' && attachList.FILE_CONTENT_TYPE != 'png'  && attachList.FILE_CONTENT_TYPE != 'jpeg' && attachList.FILE_CONTENT_TYPE != 'jpg' && attachList.FILE_CONTENT_TYPE != 'PNG' && attachList.FILE_CONTENT_TYPE != 'JPEG' && attachList.FILE_CONTENT_TYPE != 'JPG'">
                        <img float-start class="attachImg" src="../assets/imgs/nonfile.png">
                    </div>
                    <div
                        *ngIf="attachList.FILE_CONTENT_TYPE === 'png'  || attachList.FILE_CONTENT_TYPE === 'jpeg' || attachList.FILE_CONTENT_TYPE === 'jpg'|| attachList.FILE_CONTENT_TYPE === 'PNG' || attachList.FILE_CONTENT_TYPE === 'JPEG'|| attachList.FILE_CONTENT_TYPE === 'JPG'">
                        <img float-start class="attachImg" src="../assets/imgs/img.png">
                    </div> -->
                    <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-row>
        <ion-col col-12>
            <div id="notificationDynamicFieldsPR">
            </div>
        </ion-col>
    </ion-row>
</div>
<div *ngIf="messageSuccess" class="succssfullMSG">
      <ion-col size="12">
          <ion-icon class="succssfullIcon" name="checkmark"></ion-icon>
          <!--filled-->
      </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-row>
        <ion-col col-12>
            <div id="notificationDynamicFields">
            </div>
        </ion-col>
    </ion-row> -->

    <!-- <ion-row class="rowBtn">
        <ion-col col-2>

        </ion-col>
        <ion-col col-8>
           

            <ion-item *ngIf="notificationButtonRes?.length >0" class="requiredItem actionList">
                <ion-label class="boldTxtNav">{{'actionHis, action' | translate}} </ion-label>
                <ion-select (ionChange)="actionButton()" okText="{{ts.trPK('general','ok')}}"
                    cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="actionType" required>
                    <ion-select-option value="{{notificationButtons.BUTTON_ACTION}}"
                        *ngFor="let notificationButtons of notificationButtonRes; let i=index;">
                        {{notificationButtons.BUTTON_LABEL}}</ion-select-option>
                </ion-select>
            </ion-item>

        </ion-col>

        <ion-col col-2 style="bottom: -8px">
            <ion-button class="skipbutton" (click)="nextNotfification()">
                {{'worklistMain, skip' | translate}}
                <img class="arrowIcon" src="../assets/imgs/arrowRight.png">

            </ion-button>
        </ion-col>
      
    </ion-row> -->

    <!-- <ion-row class="rowBtn" *ngIf="notificationButtonRes?.length >0">
                            
                    <ion-button   class="actionBtn" (click)="actionButton(notificationButtons.BUTTON_ACTION)"
                    *ngFor="let notificationButtons of notificationButtonRes | slice:0:3; let i=index;" >
                    {{notificationButtons.BUTTON_LABEL}}
            </ion-button>
    
                <ion-button style="--background:orange;" class="actionBtn" (click)="nextNotfification()">
                        {{'worklistMain, skip' | translate}}
        
                    </ion-button>
                    <ion-button style="--background:#cccccc;" *ngIf="notiActionBtnMore != '' && notiActionBtnMore == undefined" class="actionBtn" (click)="openMoreActions()">
                        more
            
                        </ion-button>
    
                      
                               
    </ion-row> -->



    <ion-tabs>

        <ion-tab-bar class="tabBar" slot="bottom">
            <ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVE')">
                <img src="../assets/imgs/action-approve.png">
                <ion-label>  {{'worklistMain, approve' | translate}}</ion-label>
            </ion-tab-button>

            <ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECT')">
                <img src="../assets/imgs/action-reject.png">
                <ion-label>  {{'worklistMain, reject' | translate}}</ion-label>
            </ion-tab-button>

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


        

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




</ion-footer>