<ion-header>
    <ion-toolbar class="header-toolbar">
        <ion-title color="light"> {{ts.trPK('worklistMain','title')}}</ion-title>
        <ion-buttons slot="start">
            <nav-buttons backLink="/notification/homepage"></nav-buttons>
        </ion-buttons>
    </ion-toolbar>

    <ion-toolbar class="slideToolBar">
        <ion-segment class="segmentPR" scrollable>
            <ion-segment-button value="0" checked>
                <!-- <ion-icon name="call">arrowRight</ion-icon> -->
                <ion-label> {{ts.trPK('worklistMain','info')}}</ion-label>
            </ion-segment-button>
            <ion-segment-button value="1">
                <!-- <ion-icon name="cloud-upload"></ion-icon> -->
                <ion-label> {{ts.trPK('worklistMain','itemReq')}}</ion-label>
            </ion-segment-button>
            <ion-segment-button value="2">
                <!-- <ion-icon name="paper"></ion-icon> -->
                <ion-label>
                    {{'worklistMain, actionHis' | translate}}

                </ion-label>
            </ion-segment-button>
            <ion-segment-button value="3">
                <!-- <ion-icon name="code-working"></ion-icon> -->
                <ion-label>{{'general, attachment' | translate}}
                </ion-label>
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>

<ion-content class="colorBG">


    <ion-slides pager="true" class="slides-gray-bullets">
        <ion-slide class="slide-1">

            <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-row>

                        <ion-row>
                            <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 [hidden]="IsReachEnd" ion-button class="itemHISBtn" (click)="loadMoreNotificationBody()">Load More</button>

                </ion-card-content>


                <ion-card-content>
                    <div>

                        <div id="notificationDynamicFields1">
                        </div>

                    </div>
                    <!-- <ion-item *ngIf="notificationButtonRes?.length >0" class="requiredItem">
                        <ion-label class="boldTxtNav">{{'actionHis, action' | translate}} </ion-label>
                        <ion-select 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-card-content>
            </ion-card>


        </ion-slide>
        <ion-slide>
            <!-- <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>
            <ion-list class="itemReqList" *ngIf="PRLines && PRLines.length > 0 ">
                <div>
                    <ion-grid class="gridItemReq">

                        <ion-item class="itemReqContent" *ngFor="let Lines of PRLines; let i=index; ">
                            <div class="itemReqDiv">

                                <ion-row>
                                    <ion-col class="colItemReqHeader">
                                        <!-- <label for="">{{ts.trPK('worklistMain','description')}}
                                </label> -->
                                        <!-- </ion-col>
                            <ion-col> -->
                                        <label for="">{{i+1}}. {{Lines.DESCRIPTION}} </label>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col class="colItems">
                                        <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>

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

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

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


                                    <ion-col class="colItems">
                                        <label class="colItemReq" for="">{{ts.trPK('payslip','amount')}} </label>
                                        <br />
                                        <!-- </ion-col>
                            <ion-col> -->
                                        <ion-label class="labelValue" for="">{{Lines.LINE_AMOUNT}} </ion-label>
                                    </ion-col>

                                    <!-- </ion-row>
                        <ion-row> -->

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

                                </ion-row>
                            </div>

                        </ion-item>

                    </ion-grid>
                </div>
            </ion-list>
            <!-- </ion-card-content> -->
            <!-- </ion-card> -->
        </ion-slide>
        <ion-slide>
            <ion-card class="cardContent">
                <ion-card-content>

                    <div [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="item-date"> {{notificationList.BEGIN_DATE }} </div> -->
                                        <!-- [hidden]="actionHistory.NOTE == '' || actionHistory.NOTE == null"> -->

                                        <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">

                                                <!-- <ion-icon name="bookmark"></ion-icon> -->
                                            </button>
                                        </div>
                                        <!-- [ngClass]="{'bg-blue-dot' : actionHistory.ACTION === 'Submitted' ,'statusGreanColor' :appointmentsArrive.Status != 1 && appointmentsArrive.Status != 2, 'statusRedColor' :appointmentsArrive.Status === 2}" -->

                                        <div [ngClass]="{'bg-blue-dot' : actionHistory.ACTION === 'Submitted' || actionHistory.ACTION === 'Submit' ,'bg-orange-dot' : actionHistory.ACTION === 'Pending' ,'bg-red-dot' : actionHistory.ACTION === 'Rejected','bg-green-dot' : actionHistory.ACTION != 'Pending' && actionHistory.ACTION != 'Rejected' && actionHistory.ACTION != 'Submitted' && actionHistory.ACTION != 'Submit'}"
                                            class="timeline-thumb  timeline-icon">
                                        </div>
                                    </div>
                                    <ion-col>
                                        <ion-label
                                            [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'}"
                                            class=""> {{actionHistory.ACTION}}</ion-label>
                                        <ion-label> {{actionHistory.NAME}}
                                        </ion-label>

                                        <ion-label> {{actionHistory.NOTIFICATION_DATE| dateString }} </ion-label>
                                    </ion-col>
                                </ion-item>
                            </div>
                        </ion-list>
                    </div>

                    <button ion-button [hidden]="IsReachEnd" class="itemHISBtn" (click)="loadMoreActionHistory()">Load More</button>

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

        </ion-slide>
        <ion-slide>
            <ion-card class="cardContent">
                <ion-card-content>
                    <div [hidden]="attachmentRes && attachmentRes.length > 0">
                        <p>{{ 'general, notAttch' | translate}}</p>
                    </div>
                    <div *ngIf="attachmentRes && attachmentRes.length > 0 ">
                        <!-- <ion-card>

                             <ion-card-header class="boxHdr">
                                <div class="hrTitle">{{'worklistMain, suppDoc' | translate}}</div>
                            </ion-card-header> 
                            <ion-card-content>
                                -->
                        <ion-grid>
                            <div *ngFor="let attachList of attachmentRes">
                                <ion-row (click)="OpenAttachFiles(attachList.FILE_DATA,attachList.FILE_CONTENT_TYPE)">
                                    <ion-col col-12>
                                        <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>
                                            {{attachList.SEQ_NUM }}. {{attachList.FILE_NAME}} </ion-label>
                                    </ion-col>
                                    <!-- <ion-col col-2>
                                                <button float-end class="attachImgBtn"
                                                    (click)="OpenAttachFiles(attachList.FILE_DATA,attachList.FILE_CONTENT_TYPE)">
                                                    <img class="attachImg" src="../assets/imgs/view.png">
                                                </button>
                                            </ion-col> -->
                                </ion-row>
                            </div>

                        </ion-grid>
                        <!-- </ion-card-content>
                        </ion-card> -->

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

    </ion-slides>


    <!-- <div id="notificationDynamicFields">
</div> -->
</ion-content>
<ion-footer class="footerSearchBtn">

    <ion-row>
        <ion-col col-12>
            <div id="notificationDynamicFields">
            </div>
        </ion-col>
    </ion-row>

    <ion-row>
        <!-- <div class="centerDiv"> -->
        <ion-col col-2>

        </ion-col>
        <ion-col col-8>
            <!-- <ion-button color="customnavy" class="gridBtn" (click)="actionButton()"> {{ts.trPK('general','submit')}}
                    </ion-button> -->

            <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>
        <!-- </div> -->

        <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-footer>