<ion-header *ngIf="!messageSuccess">
    <ion-toolbar class="header-toolbar-new">
        <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-header>
<div *ngIf="messageSuccess" class="succssfullMSG">
        <ion-icon class="succssfullIcon" name="checkmark"></ion-icon> <!--filled-->
     <br/>
      <div>  Transaction Successful </div>
    </div>
<ion-content *ngIf="!messageSuccess" class="colorBG">

        <div class="subjectNotification">{{getPassNotificationDetails.SUBJECT}}</div>

        <!-- add segemnt part -->
        <ion-segment [dir]="directionLTR" mode="md" color="secondary" (ionChange)="segmentChanged($event)"
            [value]="defaultSegment" class="ion-segment-all">
            
            <ion-segment-button value="line_details"
                [ngClass]="activeSegment == 'line_details' ? 'active-Segment' : 'normal-Segment'">
                <ion-label>   {{ts.trPK('worklistMain','line_details')}} </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>






    <!-- <ion-slides pager="true" class="slides-gray-bullets">
        <ion-slide class="slide-1"> -->
        <ng-container *ngIf="activeSegment === 'info'">

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

            <ion-card class="cardContent">
           
                <ion-card-content>
                    <ion-grid style="text-align: left">
                        <ion-row class="rowBorder">
                            <ion-col class="colBorder">
                                <label class="colItemReq" for=""> {{ts.trPK('worklistMain','description')}}

                                </label>
                                <br />

                                <label for=""> {{ts.trPK('worklistMain','des-PO')}} {{PO_NUMBER}} </label>
                            </ion-col>
                        <!-- </ion-row>
                        <ion-row> -->
                            <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 class="colBorder">
                                <label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
                                </label>
                                <br />

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

                        <ion-row> -->
                            <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 class="colBorder">
                                <label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
                                </label>
                                <br />

                                <label for="">{{getPassNotificationDetails.END_DATE}}</label>
                            </ion-col>
                        <!-- </ion-row>
                        <ion-row> -->
                            <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="colBorder">
                                <label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
                                </label>
                                <br />

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

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


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


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


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

                                    <label for="">{{header.VENDOR_NAME}} </label>
                                </ion-col>
                            <!-- </ion-row>
                            <ion-row> -->
                                <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 class="colBorder">
                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','Buyer')}} </label>
                                    <br />

                                    <label for="">{{header.BUYER}} </label>
                                </ion-col>
                            <!-- </ion-row>
                            <ion-row> -->
                                <ion-col>
                                    <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 class="colBorder">
                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','CreationDate')}}</label>
                                    <br />

                                    <label for="">{{header.CREATION_DATE}} </label>
                                </ion-col>
                            <!-- </ion-row>
                            <ion-row> -->
                                <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 class="colBorder">
                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','QuotationNumber')}}
                                    </label>
                                    <br />

                                    <label for="">{{header.QUOTATION_NUMBER}} </label>
                                </ion-col>
                            <!-- </ion-row>
                            <ion-row> -->
                                <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 class="colBorder">
                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','PaymentTerms')}} </label>
                                    <br />

                                    <label for="">{{header.PAYMENT_TERMS}} </label>
                                </ion-col>
                            <!-- </ion-row>
                            <ion-row> -->
                                <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 class="colBorder">
                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','GrossAmount')}} </label>
                                    <br />

                                    <label for="">{{header.GROSS_AMOUNT}} </label>
                                </ion-col>
                            <!-- </ion-row>
                            <ion-row> -->
                                <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 class="colBorder">
                                    <label class="colItemReq"
                                        for="">{{ts.trPK('worklistMain','TotalPODiscount')}}</label>
                                    <br />

                                    <label for="">{{header.TOTAL_PO_DISCOUNT}} </label>
                                </ion-col>
                            <!-- </ion-row>
                            <ion-row> -->
                                <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 class="colBorder">
                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','CustomDuty')}} </label>
                                    <br />

                                    <label for="">{{header.CUSTOM_DUTY}} </label>
                                </ion-col>
                            <!-- </ion-row>
                            <ion-row> -->
                                <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 class="colBorder">
                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','OtherCharges')}}</label>
                                    <br />

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

                            <ion-row> -->
                                <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-col>
                                
                                </ion-col> -->
                            </ion-row>
                            <!-- <ion-row>
                                                                <ion-col>
                                                                    <label class="colItemReq" for="">{{ts.trPK('worklistMain','PONumber')}} </label>
                                                                    <br />
                                  
                                                                    <label for="">{{header.PO_NUMBER}} </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()">Load More</button>


                </ion-card-content>


                <ion-card-content>
                    <div>

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

                    </div>

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

       </ng-container>
       <ng-container *ngIf="activeSegment === 'line_details'">
           
            
        <!-- <ion-card class="cardContent">
              
                <ion-card-content> -->
            <div [hidden]="POLines && POLines.length > 0">
                <p>{{ 'general, empty' | translate}}</p>
            </div>
            <!-- <ion-list class="itemReqList" *ngIf="POLines && POLines.length > 0 "> -->
       
                <!-- <div> -->
                     
                    <!-- <ion-grid class="gridItemReq"> -->

                             
                                <accordin-custom >
                                        <accordin-tab-custom *ngFor="let Lines of POLines; let i=index;"  [header]="Lines.ITEM_DESCRIPTION"  >
                            <div class="itemReqDiv">
                                    <!-- <ion-item class="itemReqContent" > -->
     


                             
                                <ion-row class="rowBorder">
                                        <ion-col class="colItems colBorder ">
                                        <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 colBorder">
                                        <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 colBorder">
                                        <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 colBorder">
                                        <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 colBorder">
                                        <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 colBorder">
                                        <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>

                           </div> 
                        <!-- </ion-item> -->
                        </accordin-tab-custom>
                    </accordin-custom>
                        

                    <!-- </ion-grid>
                </div> -->
         
            <!-- </ion-list> -->
            <!-- </ion-card-content>
            </ion-card> -->
         
</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="timeline-thumb  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> 
                                            <!-- [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 === 'Submite' || actionHistory.ACTION === 'Submit' ,'bg-orange-txt' : actionHistory.ACTION === 'Pending' ,'bg-red-txt' : actionHistory.ACTION === 'Reject','bg-green-txt' : actionHistory.ACTION != 'Pending' && actionHistory.ACTION != 'Reject' && actionHistory.ACTION != 'Submitted' && actionHistory.ACTION != '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()">Load More</button>

                </ion-card-content>

            </ion-card>
</ng-container>
<ng-container *ngIf="activeSegment === 'attach'">
        
                    <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" >
                                            <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>

                                                <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>
              
</ng-container>
    <!-- </ion-slides> -->


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


<div *ngIf="messageSuccess" class="succssfullMSG">
        <ion-icon class="succssfullIcon" name="checkmark"></ion-icon> <!--filled-->
     <br/>
      <div>  Transaction Successful </div>
    </div>


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


 

    <!-- <ion-row>
        <ion-col col-12>
            <div id="notificationDynamicFields">
            </div>
        </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-row >
          
                
                
                
                <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-tabs> 

            <ion-tab-bar class="tabBar" slot="bottom">
              <ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVED')">
                <img src="../assets/imgs/action-approve.png">
                <ion-label>Approve</ion-label>
              </ion-tab-button>
          
              <ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECTED')">
                    <img src="../assets/imgs/action-reject.png">
                    <ion-label>Reject</ion-label>
              </ion-tab-button>
          
              <ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')">
                    <img src="../assets/imgs/action-info.png">
                <ion-label>Request</ion-label>
              </ion-tab-button>
              <ion-tab-button (click)="nextNotfification()">
                    <img src="../assets/imgs/action-skip.png">
                <ion-label>Skip</ion-label>
              </ion-tab-button>
        
              <ion-tab-button (click)="openMoreActions()">
                    <img src="../assets/imgs/action-more.png">
                <ion-label>More</ion-label>
              </ion-tab-button>
        </ion-tab-bar>
        </ion-tabs>
          

</ion-footer>