<app-generic-header
  showBack="true"
  [headerText]="'submitAbsenceConfirm, submitAbsenceConfirm' | translate">
</app-generic-header>

<ion-content>
  

<!-------------------------------Start New design ---------------------------------------->
<ion-grid>
    <ion-row style="margin-top: 20px;margin-left: 12px;">
    <ion-col>
    <div size="10"   [ngClass]=" direction === 'en' ?  'approvalTitle' : 'approvalTitle-ar'">{{'general, addAttach' | translate}}</div>
    </ion-col>
    <ion-col style="padding-left: 7%;" size="2">
      <div class="fileDiv">
         <input end class="inputfile" style="margin-top: 10px;z-index: 99999;position: absolute;opacity: 0;" type="file" ng2FileSelect [uploader]="uploader"
          (change)="onFileSelected($event)" (click)="onFileSelectedclick($event)" />
        <label end for="file" class="attachLable">
          <ion-icon style="font-size: 22px;" name="add"></ion-icon>
        </label></div>
    </ion-col>
  </ion-row>
    <ion-item class="attachmentDiv" *ngIf="attachListOver?.length == 0">
        <ion-img style="height: 26px;width:100%;margin-top:12px" src="../assets/imgs/attach-icon.png"></ion-img>
        <ion-label style="margin-top: -24px;" position="floating" class="boldTxtNav">{{ 'general, notAttch' | translate}}</ion-label>
    </ion-item>
  </ion-grid>
  
  <ion-grid class="attachmentDiv" *ngIf="attachListOver?.length > 0">
    <div *ngFor="let attachList of attachListOver ; let i = index">
      <ion-row>
        <ion-col size="1">
          <ion-label style="color: black !important;">
            {{attachList.AttachmentID +1 }} .
           </ion-label>
        </ion-col>
        <ion-col style="text-align: left;" size="10">
          <ion-label style="color: blue !important;" (click)="OpenAttachFiles(attachList.P_FILE_DATA,attachList.P_FILE_CONTENT_TYPE)">
            {{attachList.P_FILE_NAME }}
           </ion-label>
        </ion-col>
        <ion-col size="1">
          <!-- <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 removeLable"
            (click)="removeFile(attachList)">
            <ion-icon style="font-size:22px;margin-left:-7px;margin-top:-2px;" name="close"></ion-icon>
          </button>
           
          </ion-col>
      </ion-row>
    </div>
  
  </ion-grid>
  <ion-grid *ngIf="attachmentRes?.length > 0">
    <div *ngFor="let attachRes of attachmentRes">
      <ion-row>
        <ion-col col-8>
          <div> <img float-start class="attachImg" src="../assets/imgs/file.png">
          </div>
          <ion-label>
            {{attachRes.FILE_NAME }} </ion-label>
  
        </ion-col>
        <ion-col col-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 class="attachImgBtn" (click)="delelteFile(attachRes)"><img
              class="attachImg" src="../assets/imgs/deletegray.png"></button>
        </ion-col>
  
  
        <!-- <button [disabled]="!isResubmitEIT" class="iconButton" (click)="addAttachment(false,attachRes)"><img
                  class="imgSize" src="../assets/imgs/editIcon.png"></button>
          <button (click)="delelteFile(attachRes)" class="iconButton" [disabled]="!isResubmitEIT"><img
                  class="imgSize" src="../assets/imgs/cancel.png"></button> -->
      </ion-row>
    </div>
  
  </ion-grid>
  
  
  <ion-grid class="">
    <div  [ngClass]=" direction === 'en' ?  'approvalTitle' : 'approvalTitle-ar'">{{'confirmAddEit, comment' | translate}}</div>
   <ion-item class="submitNote" lines="none">
     <!-- <ion-label position="floating" class="boldTxtNav">{{'confirmAddEit, comment' | translate}}</ion-label> -->
     <ion-textarea type="text"  [(ngModel)]="absComments"></ion-textarea>
   </ion-item>
  </ion-grid>
  
  <ion-grid class="approvalList">
   <div  [ngClass]=" direction === 'en' ?  'approvalTitle' : 'approvalTitle-ar'">{{'confirmAddEit, approverList' | translate}}</div>
   <div class="noDataDiv" *ngIf="approversList.length == 0">
     <p>{{ 'general, empty' | translate}}</p>
  </div>
  <div style="background-color: white;border-radius: 32px;border: 1px solid #c8c4c4;"  *ngIf="approversList?.length > 0">
     <ion-list class="notification-list ">
         <div class="timeline">
             <ion-item style="padding-left: 4%;" *ngFor="let employee of approversList">
  
                 <div class="timeline-item" slot="start">
                     <div [class]="direction == 'en'? 'timeline-thumb-en  timeline-icon': 'timeline-thumb-ar  timeline-icon'">
                         <img *ngIf="employee.EMPLOYEE_IMAGE" class="empImge"
                             [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
                         <img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImge"
                             src="../assets/imgs/profile.png"> </div>
                 </div>
                 <ion-col>
                     <ion-label style="color:black !important ;font-weight: bold;padding-top: 0%;">
                         {{employee.APPROVER}}
                     </ion-label>
                     <ion-label style="color:black !important ;padding-top: 4%;">
                       {{employee.POSITION_TITLE}}
                   </ion-label>
                    
                 </ion-col>
                 <div class="line"></div>
             </ion-item>
         </div>
     </ion-list>
  </div>
  
  </ion-grid>
  <!-------------------------------End New design ---------------------------------------->









  <!-- <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  class="confirmEitOkButton" (click)="openSubmitModal()">{{ts.trPK('confirmAddEit','start')}}</ion-button>
  </div>
  
</ion-footer>