@extends('Layout.Payslipmaster')

@section('title', 'Payslip')

@section('content')

    <section id="content">
        <form method="POST" action="/payslip" role="form" class="vbox form-horizontal clearfix">
            {{ csrf_field() }}
            <section class="scrollable padder">
                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                    <li><a href="."><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="/payslip">Payslip</a></li>
                    <li class="active">View payslip</li>
					
					 
                </ul>
				
				
				<!-- payslip starts here ... so this is what to be printed.. 
				
              <!-- CSS for the things we want to print  -->
<style type="text/css" media="print">

#panel panel-default col-md-6 no-padder col-md-offset-3{
        display: none;
    }
 	
.other_print_layout{
        background-color:#FFF;
    }
</style>

<!-- CSS for the things we DO NOT want to print  -->
<style type="text/css" media="screen">

   #bg-dark dk header navbar navbar-fixed-top-xs{
      display: none;
   }
   
     #vbox{
      display: none;
   }
   
     #col-md-12 clearfix {
      display: none;
   }
   
.other_web_layout{
        background-color:#E0E0E0;
    }
</style>
                <div id="divToPrint">
                <section class="panel panel-default col-md-6 no-padder col-md-offset-3" style="margin-right:30px;">
                    <header class="panel-heading font-semibold">
                        
						
						 <div class="row">
  <div class="col-md-2">  <img src="/images/huduma.jpg"alt="huduma" style="width:70px;height:60px; "> </div>
  <div class="col-md-8"> <center> <u> THE PRESIDENCY.</u> </center>  <br>
  <center> Ministry of Public Service Youth and Gender Affairs.</center><br>
                                     <center> Huduma Kenya Secretariat.</center></div>
  <div class="col-md-2"><img src="/images/coat.png"alt=" govt " style="width:70px;height:60px; "> </div>
</div>
                    </header>
					
					 
					
                    <div class="panel-body">  
                        @include('Layout.errors')
                        <div class="payslip-row clearfix">
						
 
 <div class="row">                                                                                    <!-- php echo stuff here -->
   <div class="col-md-4"><mark>Emp Name : </mark>  &nbsp &nbsp      <strong> Duncan Kishira </strong>  </div>
  <div class="col-md-4"><mark>Emp No : </mark>        &nbsp &nbsp       <strong> NT075 </strong>  </div>
   <div class="col-md-4"><mark>Grade : </mark>          &nbsp &nbsp       <strong> NK4 </strong>  </div>
</div> <br>
 <div class="row">                                                                               <!-- php echo stuff here -->
   <div class="col-md-4"><mark>Role : </mark>      &nbsp &nbsp       <strong> Program Assistant</strong>  </div>
  <div class="col-md-4"><mark>Dept : </mark>      &nbsp &nbsp       <strong>Supply Chain Mgmt </strong>  </div>
  <div class="col-md-4"><mark>Payment for : </mark>  &nbsp &nbsp      <strong> March 2019 </strong> </div>
 </div>  
 


  
                        </div>
						<hr>
                        <div class="payslip-row clearfix">
                            <div class="col-md-12 psb">
                                <label class="control-label">Gross pay</label>
                            </div>
                            <div class="col-md-6 psl">
                                <label class="control-label">Basic pay</label>
                                <label class="control-label">Housing allowance</label>
                                <label class="control-label">Transport allowance</label>
                                <label class="control-label">Leave allowance</label>
                            </div>
                            <div class="col-md-6 psi">
                                <label class="control-label">KES. 40,000.00</label>
                                <label class="control-label">KES. 2,305.00</label>
                                <label class="control-label">KES. 3,504.00</label>
                                <label class="control-label">KES. 6,320.55</label>
                            </div>
                            <div class="col-md-6 psb">
                                <label class="control-label">Total gross pay</label>
                            </div>
                            <div class="col-md-6 psib">
                                <label class="control-label">KES. 52,129.55 </label>
                            </div>
                        </div>


                            <!-- show gok pay -->
                            <div class="payslip-row clearfix">
                            <div class="col-md-6 psb">
                                <label class="control-label">GOK</label>
                            </div>
                            <div class="col-md-6 psib">
                                <label class="control-label">0 </label>
                            </div>
                        </div>
                         
                         
                            <!-- show gok pay -->
                        <div class="payslip-row clearfix">
                            <div class="col-md-6 psb">
                                <label class="control-label">TAXABLE INCOME </label>
                            </div>
                            <div class="col-md-6 psib">
                                <label class="control-label">52,129.55 </label>
                            </div>
                        </div>


                        <div class="payslip-row clearfix">
                            <div class="col-md-6 psb">
                                <label class="control-label">PAYE before relief</label>
                            </div>
                            <div class="col-md-6 psib">
                                <label class="control-label">KES. 10,000</label>
                            </div>
                        </div> 
                        
                        <div class="payslip-row clearfix">
                            <div class="col-md-12 psb">
                                <label class="control-label">Relief</label>
                            </div>
                            <div class="col-md-6 psl">
                                <label class="control-label">Personal relief</label>
                            </div>
                            <div class="col-md-6 psi">
                                <label class="control-label">KES. 1,408.00</label>
                            </div>
                            <div class="col-md-6 psb">
                                <label class="control-label">Total relief</label>
                            </div>
                            <div class="col-md-6 psib">
                                <label class="control-label">KES. 1,408.00 </label>
                            </div>
                        </div>


                        <div class="payslip-row clearfix">
                            <div class="col-md-6 psb">
                                <label class="control-label">Pay As You Earn (PAYE)</label>
                            </div>
                            <div class="col-md-6 psib">
                                <label class="control-label">KES. 8,592</label>
                            </div>
                        </div>


                        <div class="payslip-row clearfix">
                            <div class="col-md-12 psb">
                                <label class="control-label">Deductions</label>
                            </div>
                            <div class="col-md-6 psl">
                                <label class="control-label">NHIF</label>
                                <label class="control-label">HUDUMA SACCO</label>
                            </div>
                            <div class="col-md-6 psi">
                                <label class="control-label">KES. 1,700.00</label>
                                <label class="control-label">KES. 1,000.00</label>
                            </div>
                            <div class="col-md-6 psb">
                                <label class="control-label">Total deductions</label>
                            </div>
                            <div class="col-md-6 psib">
                                <label class="control-label">KES. 10,292.00</label>
                            </div>
  

                        </div>

                        

                        <div class="payslip-row net clearfix">
                            <div class="col-md-6 psb">
                                <label class="control-label">NET PAY</label>
                            </div>
                            <div class="col-md-6 psib">
                                <label class="control-label">KES. 41,837.55 </label>
                            </div>
                        </div>
						
							<!-- payslip ends  here ...  -->
                        <div class="col-md-12 clearfix" style="margin-top:20px;border-top:1px dashed rgba(0,0,0,0.2);">
                            <div class="pull-right" style="margin-top:20px;">
                                <button type="submit" class="btn btn-success"><i class="fa fa-file-pdf-o"></i>Export to PDF</button>
                                <input type="button"   class="btn btn-success"    value="print" onclick="PrintDiv();"  />
								
                            </div>
                        </div>
                    </div>
                </section>
				 </div>
				
            </section>
            <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
        </form>
    </section>
    <aside class="bg-light lter b-l aside-md hide" id="notes">
        <div class="wrapper">Notification</div>
    </aside>

@endsection

@section('footer-include')
    <!-- fuelux -->
    <script src="/js/libs/underscore-min.js"></script>
    <script src="/js/fuelux/fuelux.js"></script>
    {{--<script src="js/fuelux/demo.datagrid.js"></script>--}}
    <!-- select2 -->
	
	    <!-- Print -->
	<script type="text/javascript">     
    function PrintDiv() {    
       var divToPrint = document.getElementById('divToPrint');
       var popupWin = window.open('', '_blank', 'width=600 ,height=600');
       popupWin.document.open();
       popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
        popupWin.document.close();
            }
 </script>
 
 
@endsection

@section('j-script')
    <!-- Jquery -->
    <script>
        $(document).on('ready', function(){

        });
    </script>
@endsection