

<!-- 
<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">

    <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>
        <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>
 
        <!-- <label class="label" for="">{{showPaySlip.PAYSLIP_CHOICE}}</label> -->

        <!-- <label class="p" for="">{{showPaySlip.PERIOD_NAME}}</label> -->
            <!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</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>
</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 class="result-graph">
    
          <!-- <div class="request-heading">
    
            <span>Open Request Analysis</span>
    
          </div> -->
    
          <div class="result-text-container">
    
              <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 style="position: relative;
                  left: 77%;
                  bottom: 117px;
                  color: black;
                  background-color: #22c6b3;
                  width: 20%; height: 6px;">
                  <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 style="position: relative;
                  left: 77%;
                  bottom: 67px;
                  color: black;
                  background-color: #094875;
                  width: 20%; height: 6px;">
                    <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 class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>

<div *ngIf="GetSummaryOfPaymentList !=''">
    <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 class="hrTitle"> {{ts.trPK('payslip','earnings')}} </div>
<div *ngIf="GetEarningsList !=''">
    <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 class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
<div *ngIf="GetDeductionsList !=''">
    <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>
    <!-- ///////////////////////////////////// -->
  
  <!-- <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> -->

  <div class="hrTitle"> {{ts.trPK('payslip','payment-information')}} </div>
   <div *ngIf="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="">{{GetPaymentInformationList.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="">{{GetPaymentInformationList.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="">{{GetPaymentInformationList.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="">{{GetPaymentInformationList.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="">{{GetPaymentInformationList.AMOUNT}}</label>
    </ion-row>
    </ion-col>
   </ion-row>
     </ion-grid>
   </div>
</ion-content>