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

<ion-content>
  

  <ion-card>
      <ion-card-header class="boxHdr">
          <div class="hrTitle"> {{ts.trPK('confirmAddEit','approverList')}}</div>
      </ion-card-header>
      <ion-card-content class="confirm-details">
      
          <ion-grid class=" gridAH" *ngIf="approversList?.length > 0">
              <ion-row class="rowAH titleH">
                  <ion-col size="1" >
                      <label class="Header" for="">{{ts.trPK('confirmAddEit','no')}}</label>
                  </ion-col>
                  <ion-col size="3">
                      <label class="Header" for="">{{ts.trPK('confirmAddEit','approver')}}</label>
                  </ion-col>
                  <ion-col size="3">
                      <label class="Header" for="">{{ts.trPK('confirmAddEit','approverCategory')}} </label>
                  </ion-col>
                  <ion-col size="3">
                      <label class="Header" for="">{{ts.trPK('confirmAddEit','approverType')}}</label>
                  </ion-col>
                  <ion-col size="2">
                      <label class="Header" for="">{{ts.trPK('confirmAddEit','status')}}</label>
                  </ion-col>
              </ion-row>

              <ion-row class="rowAH" *ngFor="let item of approversList">
                  <ion-col size="1">
                      <label for="">{{item.APPROVER_ORDER_NUMBER}}</label>
                  </ion-col>
                  <ion-col size="3">
                      <label for="">{{item.APPROVER}}</label>
                  </ion-col>
                  <ion-col size="3">
                      <label for="">{{item.APPROVER_CATEGORY}}</label>
                  </ion-col>
                  <ion-col size="3">
                      <label for="">{{item.APPROVER_TYPE}}</label>
                  </ion-col>
                  <ion-col size="2">
                      <label for="">{{item.APPROVAL_STATUS}}</label>
                  </ion-col>
              </ion-row>
          </ion-grid>
   

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

  <ion-item padding>
      <ion-label class="boldTxtNav">{{ts.trPK('confirmAddEit','comment')}}</ion-label>
      <ion-textarea type="text" [(ngModel)]="absComments"></ion-textarea>
  </ion-item>


  <div>
      <ion-card>

          <ion-card-header class="boxHdr">
              <div class="hrTitle">{{ts.trPK('absenceList','attachList')}}</div>
             
                  <img class="imgSize" src="../assets/imgs/attachment.png"  (click)="addAttachment(true,-1)">

          </ion-card-header>
          <ion-card-content >
              <ion-grid *ngIf="attachListOver?.length > 0">
                  <div *ngFor="let attachList of attachListOver ; let i = index">
                      <ion-row>
                          <ion-col size="8">
                              <div> <img float-start class="attachImg" src="../assets/imgs/file.png">
                              </div>
                              <ion-label>
                                  {{attachList.P_FILE_NAME }} </ion-label>

                          </ion-col>
                          <ion-col size="4">
                              <button float-end class="attachImgBtn"
                                  (click)="OpenAttachFiles(attachList.P_FILE_DATA,attachList.P_FILE_CONTENT_TYPE)">
                                  <img class="attachImg" src="../assets/imgs/view.png">
                              </button>
                              <button float-end [disabled]="attachList.isSuccess" class="attachImgBtn"
                                  (click)="removeFile(attachList)"><img class="attachImg"
                                      src="../assets/imgs/deletegray.png"></button>
                          </ion-col>
                      </ion-row>
                  </div>

              </ion-grid>
              <ion-grid *ngIf="attachmentRes?.length > 0">
                  <div *ngFor="let attachRes of attachmentRes">
                      <ion-row>
                          <ion-col size="8">
                              <div> <img float-start class="attachImg" src="../assets/imgs/file.png">
                              </div>
                              <ion-label>
                                  {{attachRes.FILE_NAME }} </ion-label>

                          </ion-col>
                          <ion-col size="4">
                              <button float-end class="attachImgBtn"
                                  (click)="OpenAttachFiles(attachRes.FILE_DATA,attachRes.FILE_CONTENT_TYPE)">
                                  <img class="attachImg" src="../assets/imgs/view.png">
                              </button>
                              <button float-end [disabled]="!isResubmitAbs" class="attachImgBtn"
                                  (click)="delelteFile(attachRes)"><img class="attachImg"
                                      src="../assets/imgs/deletegray.png"></button>
                          </ion-col>

                      </ion-row>
                  </div>

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

  </div>

</ion-content>
<ion-footer>
  <div class="centerDiv">
      <ion-button  color="customnavy" (click)="startAbApproval()">{{ts.trPK('confirmAddEit','start')}}</ion-button>
  </div>
  
</ion-footer>