<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>
<ion-content  class="colorBG">
        <div *ngIf="!messageSuccess">
    <!-- add segemnt part -->
    <div class="subjectNotification">{{getPassNotificationDetails.SUBJECT}}</div>
    <ion-segment [dir]="directionLTR" mode="md" color="secondary" (ionChange)="segmentChanged($event)"
        [value]="defaultSegment" class="ion-segment-all">


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

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

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

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





    <div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
    <ng-container *ngIf="activeSegment === 'info'">

        <div *ngIf="notificationBodyRes?.length > 0 ">
            <ion-card *ngFor="let item of notificationBodyRes; let i=index ">

                <!-- <ion-card-header class="boxHdr">
                        <div class="hrTitle"> {{'worklistMain, notfDetails' | translate}}</div>
                      </ion-card-header> -->

                <ion-card-content>
                    <div>

                        <ion-row class="" *ngIf=" item.Collection_Notification.DISPLAY_FLAG != 'N' ">
                            <ion-col class="rowBorder" *ngFor="let notificationBody of item.Collection_Notification;"
                                size="6">
                                <label class="colItemReq" for="">{{notificationBody.SEGMENT_PROMPT}}</label>
                                <!-- </ion-col>
                            <ion-col col-7> -->
                                <br />
                                <label for="">{{notificationBody.SEGMENT_VALUE_DSP}}</label>
                            </ion-col>
                        </ion-row>
                    </div>
                </ion-card-content>

            </ion-card>
        </div>


        <div style="margin: 10px; " *ngIf="subordinatesleaveList != undefined">Employee will also on leave </div>
        <ion-item lines="none" class="subOrdinateList" *ngFor="let List of subordinatesleaveList;">



            <ion-grid class="gridSubordinates">
                <div class="subOrdinateDiv">

                    <!-- <img class="subOrdinateImg" src="../assets/imgs/profile.png"> -->

                    <img *ngIf="List.EMPLOYEE_IMAGE" class="empImgeSub"
                    [src]="'data:image/png;base64,'+List.EMPLOYEE_IMAGE">
                    <img *ngIf="List.EMPLOYEE_IMAGE == null"
                     class="empImgeSub" src="../assets/imgs/profile.png">
                    </div>
                <ion-row class="rowHeader subOrdinateRow">

                    <ion-col size="9">
                        <label style="font-weight: bold; " class="label" for="">{{List.EMPLOYEE_NAME}} </label>
                        <br />
                        <label class="label" for="">JOB TITLE DEMO </label><br />
                    </ion-col>

                    <ion-col class="status" size="3">
                        <label class="label" for="label">{{List.STATUS}}</label>
                    </ion-col>
                </ion-row>
                <br />
                <ion-row class="subOrdinateRow">
                    <ion-col>

                        <label class="label" for="">From</label><br />
                        <label class="label" for="">{{List.DATE_START |date}}</label>
                    </ion-col>
                    <ion-col>

                        <label class="label" for="">To</label><br />
                        <label class="label" for="">{{List.DATE_END | date}}</label>
                    </ion-col>
                </ion-row>
            </ion-grid>
            <!-- </ion-col> -->
        </ion-item>
        <!-- </ion-card-content>
        </ion-card> -->
    </ng-container>
    <ng-container *ngIf="activeSegment === 'item-req'">



        <ion-card class="cardContent">
            <!-- <ion-card-header class="boxHdr">
                    <div class="hrTitle"> {{ts.trPK('worklistMain','info')}} </div>
                </ion-card-header> -->
            <ion-card-content>
                <div>
                    <ion-grid style="text-align: left">
                        <ion-row class="rowBorder">
                            <ion-col class="colBorder">
                                <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 class="">
                                <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 class="rowBorder">
                            <ion-col class="colBorder">
                                <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 class="">
                                <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 class="">
                            <ion-col class="colBorder">
                                <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 class="">
                                <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 class="">
                                    <ion-col class="">
                                <label class="colItemReq" for="">{{ts.trPK('worklistMain','subject')}} </label>
                                 </ion-col>
                                <ion-col> 
                                    <br/>
                                    <label for="">{{getPassNotificationDetails.SUBJECT}} </label>
                                </ion-col>
                            </ion-row> -->
                        <!-- <ion-row>
                                <ion-col class="greenTxt" col-4>
                                    <button ion-button block class="notColBtn" (click)="openNotificationBody()">
                                        <p>{{ts.trPK('worklistMain','notfDetails')}} </p>
                                        <ion-img class="serviceItemImg" src="../assets/imgs/details.png"></ion-img>
                                    </button>
                                </ion-col>
                                <ion-col class="greenTxt" col-4>
                                    <button ion-button block class="notColBtn" (click)="openActionHistory()">
                                        <p>{{ts.trPK('worklistMain','actionHis')}}</p>
                                        <ion-img class="serviceItemImg" src="../assets/imgs/actionHistory.png"></ion-img>
                                    </button>
                                </ion-col>
                                <ion-col class="greenTxt" col-4>
                                    <button ion-button block class="notColBtn" (click)="openSupportDocuments()">
                                        <p>{{ts.trPK('worklistMain','suppDoc')}}</p>
                                        <ion-img class="serviceItemImg" src="../assets/imgs/documents.png"></ion-img>
                                    </button>
                                </ion-col>
                            </ion-row> -->
                    </ion-grid>

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




        <div *ngIf="submitterInfoRes?.length > 0 ">

            <ion-card>

                <!-- <ion-card-header class="boxHdr">
                            <div class="hrTitle"> {{'general, info' | translate}}</div>
                          </ion-card-header> -->

                <ion-card-content>
                    <div style="font-weight: bold;" class="hrTitle">Employee Detail</div>

                    <div *ngFor="let submitterInfo of submitterInfoRes">
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, empNo' | translate}}</label>
                                <br />
                                <label for="">{{submitterInfo.EMPLOYEE_NUMBER}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, name' | translate}}</label>
                                <br />
                                <label for="">{{submitterInfo.EMPLOYEE_NAME}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, position' | translate}}</label>
                                <br />
                                <label for="">{{submitterInfo.POSITION_NAME}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, grade' | translate}}</label>
                                <br />
                                <label for="">{{submitterInfo.GRADE_NAME}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, job' | translate}}</label>
                                <br />
                                <label for="">{{submitterInfo.JOB_NAME}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, category' | translate}}</label>
                                <br />
                                <label for="">{{submitterInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, orgEmail' | translate}}</label>
                                <br />
                                <label for="">{{submitterInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, orgName' | translate}}</label>
                                <br />
                                <label for="">{{submitterInfo.ORGANIZATION_NAME}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, busG' | translate}}</label>
                                <br />
                                <label for="">{{submitterInfo.BUSINESS_GROUP_NAME}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row class="rowBorder submitterInfo">
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, locName' | translate}}</label>
                                <br />

                                <label for="">{{submitterInfo.LOCATION_NAME}}</label>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <label class="colItemReq" for="">{{'userProfile, payrol' | translate}}</label>
                                <br />

                                <label for="">{{submitterInfo.PAYROLL_NAME}}</label>
                            </ion-col>
                        </ion-row>
                    </div>
                </ion-card-content>

            </ion-card>
        </div>
    </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">

                                <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="!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 === '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>
                                <div class="line"></div>
                            </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>


    <div>

        <!-- ATTRIBUTE_DISPLAY_NAME: "Note"
        ATTRIBUTE_FORMAT: "4000"
        ATTRIBUTE_NAME: "WF_NOTE"
        ATTRIBUTE_TYPE: "VARCHAR2" -->
        <div id="notificationDynamicFields1">
        </div>
        <!-- <json-schema-form *ngIf="schemaNotific" [form]="schemaNotific" [(ngModel)]="notExampleJsonObject">
      </json-schema-form> -->
    </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-row>
        <ion-col col-12>
            <div id="notificationDynamicFields">
            </div>
        </ion-col>
    </ion-row>
    </div>
    <div *ngIf="messageSuccess" class="succssfullMSG">
        <ion-col size="12">
            <ion-icon class="succssfullIcon" name="checkmark"></ion-icon>
            <!--filled-->
        </ion-col>
        <ion-col size="12">  <div style="font-size: 30px !important"> Transaction Successful </div> </ion-col>
        </div>
</ion-content>



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



    <!-- <ion-row class="rowBtn" *ngIf="notificationButtonRes?.length >0">
              *ngFor="let notificationButtons of notificationButtonRes; let i=index;"> 
                                
                        <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;"  class="actionBtn" (click)="openMoreActions()">
                            more
                
                            </ion-button>
        
                          
                                   
        </ion-row> -->
    <!-- <div class="centerDiv">
        <ion-button color="customnavy" class="gridBtn" (click)="actionButton()"> {{ts.trPK('general','submit')}}
        </ion-button>
    </div>
    <div class="centerDiv">
        <ion-button color="customnavy" class="gridBtn" (click)="nextNotfification()">
            {{'worklistMain, skip' | translate}}</ion-button>
    </div> -->

    <ion-row class="rowBtn" *ngIf="notificationButtonRes?.length >0">

        <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 [disabled]="moreDisabled" (click)="openMoreActions()">
                    <img src="../assets/imgs/action-more.png">
                    <ion-label>More</ion-label>
                </ion-tab-button>
            </ion-tab-bar>
        </ion-tabs>

    </ion-row>


</ion-footer>