<ion-header>
  <ion-toolbar  class="header-toolbar">
      <ion-buttons slot="start">
        <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
      </ion-buttons>
      <ion-title color="light" >{{ts.trPK('payslip','title')}}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content  class="colorBG">
  
  <ion-item style="margin: 10px;border-radius: 5px;">
    <ion-label>choose payslip</ion-label>
    <ion-select (ionChange)="showInfo($event)" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="choosePayslip">
      <ion-select-option value="{{i}}"  selected="{{(i==0).toString()}}" *ngFor="let options of GetPayslipList; let i=index">{{options.PAYSLIP_CHOICE}} </ion-select-option>
    </ion-select>
  </ion-item>


  


  <!-- <ion-list *ngIf="showPaySlip !=''" >
        <ion-item>
          <ion-row><ion-label>PERIOD NAME</ion-label><ion-label>{{showPaySlip.PERIOD_NAME}}</ion-label></ion-row>
          <ion-row><ion-label>PERIOD START DATE</ion-label><ion-label>{{showPaySlip.PERIOD_START_DATE}}</ion-label>  </ion-row>
            <ion-row> <ion-label>PERIOD END DATE</ion-label><ion-label>{{showPaySlip.PERIOD_END_DATE}}</ion-label>  </ion-row>
  </ion-item>
</ion-list> -->
<div *ngIf="showPaySlip !=''">
<accordin-custom >
        <accordin-tab-custom [header]="'payslip,payroll-info' | translate  "  >
              <!-- special results -->
              <!-- <ion-card >
                    <ion-card-header class="boxHdr">
                        <div class="hrTitle"> {{ts.trPK('payslip','payroll-info')}} </div>
                    </ion-card-header>
                    <ion-card-content> -->
                        <div *ngIf="showPaySlip !=''">
                            <ion-grid class="">
                                <ion-row class="">
                                    <ion-col class="">
                                        <label for=""> {{ts.trPK('payslip','peroid-name')}} 
                                          
                                        </label>
                                    </ion-col>
                                    <ion-col class="colPayslip">
                                        <label for="">{{showPaySlip.PERIOD_NAME}}</label>
                                    </ion-col>
                                </ion-row>
                
                                <ion-row>
                                    <ion-col class="">
                                        <label for="">{{ts.trPK('payslip','start-date')}} 
                                        </label>
                                    </ion-col>
                                    <ion-col class="colPayslip">
                                        <label for="">{{showPaySlip.PERIOD_START_DATE}}</label>
                                    </ion-col>
                                </ion-row>
                
                                <ion-row>
                                    <ion-col class="">
                                        <label for="">{{ts.trPK('payslip','end-date')}} 
                                        </label>
                                    </ion-col>
                                    <ion-col class="colPayslip">
                                        <label for="">{{showPaySlip.PERIOD_END_DATE}}</label>
                                    </ion-col>
                                </ion-row>
                          
                            </ion-grid>
                
                        </div>
                        <empty-data *ngIf="showPaySlip.length <= 0   "></empty-data>

                    <!-- </ion-card-content>
                  </ion-card> -->
          </accordin-tab-custom>
      
      </accordin-custom>

<!-- <ion-card *ngIf="showPaySlip !=''">
    <ion-card-header class="boxHdr">
        <div class="hrTitle"> {{ts.trPK('payslip','payroll-info')}} </div>
    </ion-card-header>
    <ion-card-content>
        <div>
            <ion-grid>
                <ion-row>
                    <ion-col class="colBold">
                        <label for=""> {{ts.trPK('payslip','peroid-name')}} 
                          
                        </label>
                    </ion-col>
                    <ion-col>
                        <label for="">{{showPaySlip.PERIOD_NAME}}</label>
                    </ion-col>
                </ion-row>

                <ion-row>
                    <ion-col class="colBold">
                        <label for="">{{ts.trPK('payslip','start-date')}} 
                        </label>
                    </ion-col>
                    <ion-col>
                        <label for="">{{showPaySlip.PERIOD_START_DATE}}</label>
                    </ion-col>
                </ion-row>

                <ion-row>
                    <ion-col class="colBold">
                        <label for="">{{ts.trPK('payslip','end-date')}} 
                        </label>
                    </ion-col>
                    <ion-col>
                        <label for="">{{showPaySlip.PERIOD_END_DATE}}</label>
                    </ion-col>
                </ion-row>
          
            </ion-grid>

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

  <accordin-custom  >
        <accordin-tab-custom [header]="'payslip,summary-payment' | translate" >
  <!-- <ion-card *ngIf="GetSummaryOfPaymentList !='' " >
      <ion-card-header class="boxHdr">
          <div class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>
      </ion-card-header>
      <ion-card-content> -->
          <div *ngIf="GetSummaryOfPaymentList !=''">
              <ion-grid>
                  <ion-row >
                      <ion-col class="">
                          <label for=""> {{ts.trPK('payslip','deductions-Amount')}} 
                            
                          </label>
                      </ion-col>
                      <ion-col class="colPayslip">
                          <label for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
                      </ion-col>
                  </ion-row>
  
                  <ion-row>
                      <ion-col class="">
                          <label for="">{{ts.trPK('payslip','deductions-percentage')}} 
                          </label>
                      </ion-col>
                      <ion-col class="colPayslip">
                          <label for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_PERCENTAGE}}</label>
                      </ion-col>
                  </ion-row>
  
                  <ion-row>
                      <ion-col class="">
                          <label for="">{{ts.trPK('payslip','earings-Amount')}} 
                          </label>
                      </ion-col>
                      <ion-col class="colPayslip">
                          <label for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}</label>
                      </ion-col>
                  </ion-row>
                  <ion-row>
                      <ion-col class="">
                          <label for="">{{ts.trPK('payslip','earings-percentage')}} 
                          </label>
                      </ion-col>
                      <ion-col class="colPayslip">
                          <label for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_PERCENTAGE}}</label>
                      </ion-col>
                  </ion-row>
                  <ion-row>
                      <ion-col class="">
                          <label for="">{{ts.trPK('payslip','pay-Amount')}} 
                          </label>
                      </ion-col>
                      <ion-col class="colPayslip">
                          <label for="">{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</label>
                      </ion-col>
                  </ion-row>
                  <ion-row>
                      <ion-col class="">
                          <label for="">{{ts.trPK('payslip','pay-percentage')}} 
                          </label>
                      </ion-col>
                      <ion-col class="colPayslip">
                          <label for="">{{GetSummaryOfPaymentList.TOTAL_PAY_PERCENTAGE}}</label>
                      </ion-col>
                  </ion-row>
        
              </ion-grid>
  
          </div>
          <empty-data *ngIf="GetSummaryOfPaymentList.length <= 0   "></empty-data>

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


    </accordin-tab-custom>
    </accordin-custom >



    
          

      <accordin-custom  >
            <accordin-tab-custom [header]="'payslip,earnings' | translate"  [subHeadergreen]=true [subHeader]="earingTotal" >
      <!-- <ion-card *ngIf="GetEarningsList !='' " >
            <ion-card-header class="boxHdr">
                <div class="hrTitle"> {{ts.trPK('payslip','total')}} </div>
            </ion-card-header>
            <ion-card-content> -->
                <div *ngIf="GetEarningsList !=''">
                    <ion-grid>
                        <ion-row *ngFor="let list of GetEarningsList" >
                            <ion-col class="">
                                <label for="">{{list.ELEMENT_NAME}}</label>
                                  </ion-col>
                            <ion-col class="colPayslip">
                                <label for="">{{list.AMOUNT}}</label>
                            </ion-col>
                        </ion-row>
        
                        <ion-row>
                                <ion-col col-6   class="earingTotH">
                                    <label  style="font-size: 20px !important" for="">{{ts.trPK('payslip','total')}}</label>
                                      </ion-col>
                                <ion-col   col-6  class="earingTotG">
                                    <label   style="font-size: 20px !important" for="">{{earingTotal}}</label>
                                </ion-col>
                            </ion-row>
                        
                    </ion-grid>
        
                </div>

                <empty-data *ngIf="GetEarningsList.length <= 0    "></empty-data>

            <!-- </ion-card-content>
          </ion-card> -->
          
          <!-- <ion-infinite-scroll (ionInfinite)="doInfiniteEarning($event)">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
              </ion-infinite-scroll> -->
</accordin-tab-custom>
</accordin-custom >


<!-- <accordin-custom  *ngIf="GetDeductionsList !=''"> -->
        <accordin-custom  >

        <accordin-tab-custom [header]="'payslip,deductions' | translate" [subHeadergreen]=false [subHeader]="deductionTotal" >

  <!-- <ion-card *ngIf="GetDeductionsList !='' " >
        <ion-card-header class="boxHdr">
            <div class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
        </ion-card-header>
        <ion-card-content>
            colBold -->
            <div *ngIf="GetDeductionsList !=''">
                <ion-grid>
                    <ion-row *ngFor="let list of GetDeductionsList" >
                        <ion-col class="">
                            <label for="">{{list.ELEMENT_NAME}}</label>
                              </ion-col>
                        <ion-col class="colPayslip">
                            <label for="">{{list.AMOUNT}}</label>
                        </ion-col>
                    </ion-row>

                    <ion-row>
                            <ion-col col-6  class="earingTotH">
                                <label  style="font-size: 20px !important" for="">{{ts.trPK('payslip','total')}}</label>
                                  </ion-col>
                            <ion-col col-6 class="earingTotR">
                                <label style="font-size: 20px !important" for="">{{deductionTotal}}</label>
                            </ion-col >
                        </ion-row>


                </ion-grid>

    
            </div>
            <empty-data *ngIf="GetDeductionsList.length <= 0  "></empty-data>

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

      <!-- <ion-infinite-scroll (ionInfinite)="doInfiniteDeduction($event)">
            <ion-infinite-scroll-content></ion-infinite-scroll-content>
          </ion-infinite-scroll> -->


</accordin-tab-custom>
</accordin-custom >



<accordin-custom  >
        <accordin-tab-custom [header]="'payslip,payment-information' | translate" >

<!-- <ion-card *ngIf="GetPaymentInformationList !='' " >
    <ion-card-header class="boxHdr">
        <div class="hrTitle"> {{ts.trPK('payslip','payment-information')}} </div>
      </ion-card-header>
    <ion-card-content> -->
        <div *ngIf="GetPaymentInformationList !=''">
            <ion-grid>
                <ion-row >
                    <ion-col class="">
                        <label for=""> {{ts.trPK('payslip','payment-method')}} 
                          
                        </label>
                    </ion-col>
                    <ion-col class="colPayslip">
                        <label for="">{{GetPaymentInformationList.PAYMENT_METHOD_NAME}}</label>
                    </ion-col>
                </ion-row>

                <ion-row>
                    <ion-col class="">
                        <label for="">{{ts.trPK('payslip','bank-name')}} 
                        </label>
                    </ion-col>
                    <ion-col class="colPayslip">
                        <label for="">{{GetPaymentInformationList.BANK_NAME}}</label>
                    </ion-col>
                </ion-row>

                <ion-row>
                    <ion-col class="">
                        <label for="">{{ts.trPK('payslip','branch-name')}} 
                        </label>
                    </ion-col>
                    <ion-col class="colPayslip">
                        <label for="">{{GetPaymentInformationList.BRANCH_NAME}}</label>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col class="">
                        <label for="">{{ts.trPK('payslip','account-no')}} 
                        </label>
                    </ion-col>
                    <ion-col class="colPayslip">
                        <label for="">{{GetPaymentInformationList.ACCOUNT_NUMBER}}</label>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col class="">
                        <label for="">{{ts.trPK('payslip','amount')}} 
                        </label>
                    </ion-col>
                    <ion-col class="colPayslip">
                        <label for="">{{GetPaymentInformationList.AMOUNT}}</label>
                    </ion-col>
                </ion-row>
            
      
            </ion-grid>

        </div>

        <empty-data *ngIf="GetPaymentInformationList.length <= 0 "></empty-data>

    <!-- </ion-card-content>
  </ion-card> -->
  </accordin-tab-custom>
  </accordin-custom >

</div>

      <!-- <ion-row *ngIf="showPaySlip !=''" style="text-align: center;">
          <ion-col class="greenTxt" col-6>
              <button ion-button block class="notColBtn" (click)="openEarings()">
                  <p>{{ts.trPK('payslip','earnings')}}</p>
                  <ion-img class="serviceItemImg" src="../assets/imgs/details.png"></ion-img>
              </button>
          </ion-col>
          <ion-col class="greenTxt" col-6>
              <button ion-button block class="notColBtn" (click)="openDeductions()">
                  <p>{{ts.trPK('payslip','deductions')}}</p>
                  <ion-img class="serviceItemImg" src="../assets/imgs/details.png"></ion-img>
              </button>
          </ion-col>
          </ion-row> -->

</ion-content>