<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 Lines of POLines; let i=index;"
                            [header]="Lines.ITEM_DESCRIPTION" [show]="i === 0 ? true: false">
                            <div class="itemReqDiv">
                                <ion-grid>
                                    <ion-row class="rowBorder">
                                        <ion-col class="colItems"
                                            [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','code')}} </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.ITEM_CODE}} </ion-label>
                                        </ion-col>
                                        <ion-col class="colItems ">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','MFG')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.MFG}} *</ion-label>
                                        </ion-col>
                                    </ion-row>
                                    <ion-row class="rowBorder">
                                        <ion-col class="colItems "
                                            [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','LINE_TYPE')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.LINE_TYPE}} </ion-label>
                                        </ion-col>
                                        <ion-col class="colItems">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','unit')}} </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.UOM}} </ion-label>
                                        </ion-col>
                                    </ion-row>
                                    <ion-row class="rowBorder">
                                        <ion-col class="colItems"
                                            [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','price')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.UNIT_PRICE}} </ion-label>
                                        </ion-col>
                                        <ion-col class="colItems">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','LINE_AMOUNT')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.LINE_AMOUNT}} </ion-label>
                                        </ion-col>
                                    </ion-row>
                                    <ion-row class="rowBorder">
                                        <ion-col class="colItems"
                                            [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','quantity')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.QUANTITY}} </ion-label>
                                        </ion-col>
                                        <ion-col class="colItems">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','LINE_DIS')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.LINE_DISC_PERCENTAGE}}
                                            </ion-label>
                                        </ion-col>
                                    </ion-row>
                                    <ion-row class="rowBorder">
                                        <ion-col class="colItems"
                                            [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','NEED_TO')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.NEED_BY_DATE}} </ion-label>
                                        </ion-col>
                                        <ion-col class="colItems">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','PROMISED_DATE')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.PROMISED_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="">{{ts.trPK('worklistMain','DELIVER_TO')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.DELIVER_TO_LOCATION}}
                                            </ion-label>
                                        </ion-col>
                                        <ion-col class="colItems">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','PR_NO')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.PR_NUM}} </ion-label>
                                        </ion-col>
                                    </ion-row>
                                    <ion-row class="rowBorder">
                                        <ion-col class="colItems ">
                                            <label class="colItemReq" for="">{{ts.trPK('worklistMain','REQUEST')}}
                                            </label>
                                            <br />
                                            <ion-label class="labelValue" for="">{{Lines.REQUESTOR}} </ion-label>
                                        </ion-col>
                                    </ion-row>
                                    <ion-row>
                                        <ion-col>
                                            <div style="text-align: center">
                                                <button ion-button class="itemHISBtn"
                                                    (click)="getItemHistory(Lines.ITEM_ID)">
                                                    {{ts.trPK('worklistMain','ITEM_HIS')}}
                                                </button>
                                            </div>
                                        </ion-col>
                                        <ion-col>
                                            <div style="text-align: center">
                                                <button ion-button class="itemHISBtn"
                                                    (click)="getQutationAnalysis(Lines.PO_HEADER_ID ,Lines.ITEM_ID)">
                                                    {{ts.trPK('worklistMain','QUOTATION_ANALYSIS')}}
                                                </button>
                                            </div>
                                        </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>
                <!-- <ng-container *ngIf="activeSegment === 'action-history'">

                    <ion-card class="cardContent" style="width: 100% i !important;">
                        <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
                                                    [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>

                                                </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"> {{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> -->
            </ion-slide>

            <ion-slide>
                <ng-container *ngIf="activeSegment === 'attach'">
                    <ion-card class="cardContent" style="width: 100% !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>
                        <ion-row>
                            <ion-col>
                                <div *ngIf="pInformation &&  pInformation != '' " class="tipsPadding">{{pInformation}}</div>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <ion-card class="cardContent" style="width: 90% i !important;">
                                    <ion-card-content>
                                        <ion-grid style="text-align: left">
                                            <ion-row class="rowBorder">
                                                <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                    <label class="colItemReq" for=""> {{ts.trPK('worklistMain','description')}}
                                                    </label>
                                                    <br />
                                                    <label for=""> {{ts.trPK('worklistMain','des-PO')}} {{PO_NUMBER}} </label>
                                                </ion-col>
                                                <ion-col>
                                                    <label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
                                                    </label>
                                                    <br />
                                                    <label for="">{{getPassNotificationDetails.FROM_USER}}</label>
                                                </ion-col>
                                            </ion-row>
                                            <ion-row class="rowBorder">
                                                <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
                                                    </label>
                                                    <br />
                                                    <label for=""> {{getPassNotificationDetails.TO_USER}}</label>
                                                </ion-col>
                                                <ion-col>
                                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
                                                    </label>
                                                    <br />
                                                    <label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
                                                </ion-col>
                                            </ion-row>
                                            <ion-row class="rowBorder">
                                                <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
                                                    </label>
                                                    <br />
                                                    <label for="">{{getPassNotificationDetails.END_DATE}}</label>
                                                </ion-col>
                                                <ion-col>
                                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
                                                    </label>
                                                    <br />
                                                    <label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
                                                </ion-col>
                                            </ion-row>
                                            <ion-row class="rowBorder" *ngIf=" getPassNotificationDetails.RESPONDER != '' ">
                                                <ion-col class="">
                                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
                                                    </label>
                                                    <br />            
                                                    <label for="">{{getPassNotificationDetails.RESPONDER}} </label>
                                                </ion-col>
                                            </ion-row>
                                            <div *ngFor="let header of POHeader">
                                                <ion-row class="rowBorder">
                                                    <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','Supplier')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.VENDOR_NAME}} </label>
                                                    </ion-col>
                                                    <ion-col>
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','Site')}} </label>
                                                        <br />
                                                        <label for="">{{header.VENDOR_SITE_CODE}} </label>
                                                    </ion-col>
                                                </ion-row>
                                                <ion-row class="rowBorder">
                                                    <ion-col size="6"
                                                        [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','Buyer')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.BUYER}} </label>
                                                    </ion-col>
                                                    <ion-col size="6">
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','Preparer')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.PREPARER}} </label>
                                                    </ion-col>
                                                </ion-row>
                                                <ion-row class="rowBorder">
                                                    <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                        <label class="colItemReq"
                                                            for="">{{ts.trPK('worklistMain','CreationDate')}}</label>
                                                        <br />
                                                        <label for="">{{header.CREATION_DATE}} </label>
                                                    </ion-col>
                                                    <ion-col>
                                                        <label class="colItemReq"
                                                            for="">{{ts.trPK('worklistMain','ShipToLocation')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.SHIP_TO_LOCATION_NAME}} </label>
                                                    </ion-col>
                                                </ion-row>
                                                <ion-row class="rowBorder">
                                                    <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                        <label class="colItemReq"
                                                            for="">{{ts.trPK('worklistMain','QuotationNumber')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.QUOTATION_NUMBER}} </label>
                                                    </ion-col>
                                                    <ion-col>
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','QuotationDate')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.QUOTATION_DATE}} </label>
                                                    </ion-col>
                                                </ion-row>
                                                <ion-row class="rowBorder">
                                                    <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','PaymentTerms')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.PAYMENT_TERMS}} </label>
                                                    </ion-col>
                                                    <ion-col>
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','Currency')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.CURRENCY_NAME}} - {{header.LOC_CUR}} </label>
                                                    </ion-col>
                                                </ion-row>
                                                <ion-row class="rowBorder">
                                                    <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','GrossAmount')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.GROSS_AMOUNT}} </label>
                                                    </ion-col>
                                                    <ion-col>
                                                        <label class="colItemReq"
                                                            for="">{{ts.trPK('worklistMain','DiscountAmount')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.DISCOUNT_AMOUNT}} </label>
                                                    </ion-col>
                                                </ion-row>
                                                <ion-row class="rowBorder">
                                                    <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                        <label class="colItemReq"
                                                            for="">{{ts.trPK('worklistMain','TotalPODiscount')}}</label>
                                                        <br />
                                                        <label for="">{{header.TOTAL_PO_DISCOUNT}} </label>
                                                    </ion-col>
                                                    <ion-col>
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','VATAmount')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.SALES_TAX}} </label>
                                                    </ion-col>
                                                </ion-row>
                                                <ion-row class="rowBorder">
                                                    <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','CustomDuty')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.CUSTOM_DUTY}} </label>
                                                    </ion-col>
                                                    <ion-col>
                                                        <label class="colItemReq" for="">{{ts.trPK('worklistMain','ShipHandle')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.SHIP_HANDLE}} </label>
                                                    </ion-col>
                                                </ion-row>
                                                <ion-row class="rowBorder">
                                                    <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
                                                        <label class="colItemReq"
                                                            for="">{{ts.trPK('worklistMain','OtherCharges')}}</label>
                                                        <br />
                                                        <label for="">{{header.OTHER_CHARGES}} </label>
                                                    </ion-col>
                                                    <ion-col>
                                                        <label class="colItemReq"
                                                            for="">{{ts.trPK('worklistMain','TotalPOAmountWithVAT')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.TOT_PO_AMT}} </label>
                                                    </ion-col>
                                                </ion-row>
                                                <ion-row>
                                                    <ion-col class="">
                                                        <label class="colItemReq"
                                                            for="">{{ts.trPK('worklistMain','TotalPOAmountInWords')}}
                                                        </label>
                                                        <br />
                                                        <label for="">{{header.TOT_PO_AMT_WORD}} </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 ion-button *ngIf="!IsReachEnd" class="itemHISBtn"
                                            (click)="loadMoreNotificationBody()">
                                            {{ 'general, load-more' | translate}}
                                        </button>
                                    </ion-card-content>
                                </ion-card>
                            </ion-col>
                        </ion-row>
                    </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>