

<!-- <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-header>
  <ion-toolbar class="header-toolbar-new">
    <nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
    <ion-title style="color: white;">{{ts.trPK('payslip','monthly-payslip')}}</ion-title>
</ion-toolbar>
</ion-header> 

<ion-content  class="colorBG">

    <div class="header-div">
        <!-- <ion-buttons slot="start">
          <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
        </ion-buttons>
        <p class="Title">{{ts.trPK('payslip','monthly-payslip')}}</p>
    
        <div class="Imgdiv">
            <img class="Imgsrc">
           </div> -->
    </div>
        <!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
        



    <div class="">
        <div class="header">
          <!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->

<div>
    <ion-row *ngIf="direction == 'ltr'">
        <ion-col>
        <button ion-button icon-start  class="slidBtn"  (click)="slidePrev(sliderOne,slideWithNav)">
         <ion-icon  [ngClass]=" payslipIndex === GetPayslipList.length-1 ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
         </ion-icon>
          </button>
      </ion-col>
       <ion-col>
        <p class="label"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
          </ion-col>
      <ion-col>
           <button ion-button icon-end  class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
       <ion-icon  [ngClass]=" payslipIndex === 0 ?  'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
            </ion-icon>
              </button>
          </ion-col>
          </ion-row>

          <ion-row *ngIf="direction == 'rtl'">
            <ion-col>
            <button ion-button icon-start  class="slidBtn"  (click)="slidePrev(sliderOne,slideWithNav)">
             <ion-icon  [ngClass]=" payslipIndex === GetPayslipList.length-1 ?  'disabledArrow-ar' : 'activeArrow-ar'"  ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
             </ion-icon>
              </button>
          </ion-col>
           <ion-col>
            <p class="label"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
              </ion-col>
          <ion-col>
               <button ion-button icon-end  class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
           <ion-icon  [ngClass]=" payslipIndex === 0 ?  'disabledArrow-ar' : 'activeArrow-ar'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
                </ion-icon>
                  </button>
              </ion-col>
              </ion-row>
</div>


          <ion-slides [options]="slideOptsOne" #slideWithNav  (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
            <ion-slide >
              <ion-grid class="headerGrid">
               
                  <ion-row >
                    <label class="date" for="">{{showPaySlip.PERIOD_START_DATE}}</label>
                    <label class="label" for="">{{showPaySlip.PERIOD_END_DATE}}</label>
                  </ion-row>
                <div style="color: black;"> 
                  <!-- <ngx-gauge 
                    *ngFor="let s of showPaySlip"
                      [type]="gaugeType" 
                      [value]="gaugeValue"
                      [label]="gaugeLabel">
                  </ngx-gauge> -->
                 <div [ngClass]="direction == 'en'? 'result-graph':'result-graph-ar'">
    
          <!-- <div class="request-heading">
    
            <span>Open Request Analysis</span>
    
          </div> -->
    
          <div [ngClass]="direction == 'en'? 'result-text-container':'result-text-container-ar'">
    
              <h2>{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</h2>
    
              <!-- <span>TOTAL <br> OPEN REQUEST</span> -->
              <span>{{ts.trPK('payslip','total')}} <br> {{ts.trPK('payslip','salary')}}</span>
          </div>
         
    
          <p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
    
        </div>
                  <div [ngClass]=" direction == 'ltr' ?  'div-green' : 'div-green-ar'">
                  <ion-col>
                      <ion-row>
                        <label class="green-label">{{ts.trPK('payslip','earnings-key')}}</label>
                      </ion-row>
                      <ion-row>
                        <label class="green-amount">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}</label>
                    </ion-row>
                  </ion-col>
                  </div>
                  <div [ngClass]=" direction == 'ltr' ?  'div-blue' : 'div-blue-ar'">
                    <ion-col>
                        <ion-row>
                          <label class="blue-label">{{ts.trPK('payslip','deductions-key')}}</label>
                        </ion-row>
                        <ion-row>
                          <label class="blue-amount" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
                      </ion-row>
                    </ion-col>
                  </div>
                </div>
              </ion-grid>
            </ion-slide>
          </ion-slides>
        </div>
      </div>

     

      <!-- <p>Summary of Payment</p> -->
      
      <div *ngIf="GetSummaryOfPaymentList !=''">
        <div class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>
    <ion-grid class="grids">
        <ion-row class="bgcolor">
            <ion-col class="colPayslip">
                <label class="label" for="">{{ts.trPK('payslip','particular')}} </label>
            </ion-col>
            <ion-col class="colPayslip">
                <label class="label">%</label>
            </ion-col>
            <ion-col class="colPayslips">
                <label class="label" for="">{{ts.trPK('payslip','amount')}} 
                </label>
            </ion-col>
        </ion-row>
        <ion-row class="rowtable" >
            <ion-col class="colPayslip">
                <label class="label" for=""> {{ts.trPK('payslip','deductions')}} 
                  
                </label>
            </ion-col>
            <ion-col class="colPayslip">
                <label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_PERCENTAGE}}</label>
            </ion-col>
            <ion-col class="colPayslips">
                <label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
            </ion-col>
          
            
        </ion-row>


        <ion-row class="rowtable"> 
            <ion-col class="colPayslip">
                <label class="label" for="">{{ts.trPK('payslip','earnings')}} 
                </label>
            </ion-col>
            <ion-col class="colPayslip">
                <label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_PERCENTAGE}}</label>
            </ion-col>
            <ion-col class="colPayslips" >
                <label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}</label>
            </ion-col>
          
        </ion-row>

        <ion-row class="rowtable">
            <ion-col class="colPayslip">
                <label class="label-bold" for="">{{ts.trPK('payslip','pay-Amount')}} 
                </label>
            </ion-col>
            <ion-col class="colPayslip">
                <label class="label-bold" for="">{{GetSummaryOfPaymentList.TOTAL_PAY_PERCENTAGE}}</label>
            </ion-col>
            <ion-col class="colPayslips">
                <label class="label-bold" for="">{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</label>
            </ion-col>
        </ion-row>

    </ion-grid>
</div>

<div *ngIf="GetEarningsList !=''">
<div class="hrTitle"> {{ts.trPK('payslip','earnings')}} </div>
    <ion-grid class="grids">
            <ion-row class="bgcolor">
                <ion-col class="colPayslip">
                    <label class="label" for="">{{ts.trPK('payslip','particular')}} </label>
                </ion-col>
                <ion-col class="colPayslips">
                    <label class="label" for="">{{ts.trPK('payslip','amount')}} 
                    </label>
                </ion-col>
            </ion-row>
        <ion-row class="rowtable" *ngFor="let list of GetEarningsList" >
            <ion-col class="colPayslip">
                <label class="label" for="">{{list.ELEMENT_NAME}}</label>
                  </ion-col>
            <ion-col class="colPayslips">
                <label class="label" for="">{{list.AMOUNT}}</label>
            </ion-col>
        </ion-row>
    </ion-grid>
</div>

<div *ngIf="GetDeductionsList !=''">
    <div class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
    <ion-grid class="grids">
        <ion-row class="bgcolor">
            <ion-col class="colPayslip">
                <label class="label" for="">{{ts.trPK('payslip','particular')}} </label>
            </ion-col>
            <ion-col class="colPayslips">
                <label class="label" for="">{{ts.trPK('payslip','amount')}} 
                </label>
            </ion-col>
        </ion-row>
        <ion-row class="rowtable" *ngFor="let list of GetDeductionsList" >
            <ion-col class="colPayslip">
                <label class="label" for="">{{list.ELEMENT_NAME}}</label>
                  </ion-col>
            <ion-col class="colPayslips">
                <label class="label" for="">{{list.AMOUNT}}</label>
            </ion-col>
        </ion-row>
    </ion-grid>
</div>
    <!-- ///////////////////////////////////// -->


  <div *ngIf="GetPaymentInformationList !=''">
  <div class="hrTitle"> {{ts.trPK('payslip','payment-information')}} </div>
   <div *ngIf="GetPaymentInformationList !=''">
       <div *ngFor="let paymentInfo of GetPaymentInformationList">
            <ion-grid class="grids" >
      <ion-row class="rowtables">
         <ion-col class="colPayslips">
         <ion-row class="col">
          <label class="label" for=""> {{ts.trPK('payslip','payment-method')}}  </label>
     </ion-row>
              
     <ion-row>
      <label class="label" for="">{{paymentInfo.PAYMENT_METHOD_NAME}}</label>
     </ion-row>
     </ion-col>

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

       <ion-row class="rowtable">
        <ion-col class="colPayslip">
        <ion-row class="col">
            <label class="label" for="">{{ts.trPK('payslip','account-no')}} 
            </label>
    </ion-row>       
    <ion-row >
        <label class="label" for="">{{paymentInfo.ACCOUNT_NUMBER}}</label>
    </ion-row>
    </ion-col>
     <ion-col class="colPayslips">
        <ion-row class="col">
            <label class="label" for="">{{ts.trPK('payslip','amount')}} 
            </label>
    </ion-row>      
    <ion-row >
        <label class="label" for="">{{paymentInfo.AMOUNT}}</label>
    </ion-row>
    </ion-col>
   </ion-row>
     </ion-grid>
   </div>
</div>
  </div>
</ion-content>