@extends('Layout.Payslipmaster')

@section('title', 'Payslip')

@section('content')

    <section id="content">    
            <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>              
                <section class="panel panel-default col-md-6 no-padder col-md-offset-3"   style="margin-right:30px;visibility:visible;">                   
                    <div class="panel-body">
                        @include('Layout.errors')
                        <div class="row" id="Payslip" style="background-color: white;">
                        <div class="payslip-row clearfix" >
                        <header class="panel-heading font-semibold"   style="text-align: center;">
                        Payslip for January, 2019
                        </header>
                            <div class="col-md-3 psli" style="width: 50%;float: left;">
                                <label class="control-label" >Employee No. :</label>
                                <label class="control-label">Employee Name:</label>
                                <label class="control-label">Pay period:</label>
                            </div>
                            <div class="col-md-9 psii" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">NT075</label>
                                <label class="control-label">Duncan Kishira</label>
                                <label class="control-label">January, 2019</label>
                            </div>
                        </div>
                        <div class="payslip-row clearfix">
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">Basic pay</label>
                            </div>
                        </div>
                        <div class="payslip-row clearfix">
                            <div class="col-md-6 psl" style="width: 50%;float: left; ">
                                <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" style="width: 50%;display: inline-block;float: right;">
                                <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>
                        <div class="payslip-row clearfix">
                            <div class="col-md-6 psb" style="width: 50%;float: left;">
                                <label class="control-label">Total gross pay</label>
                            </div>
                            <div class="col-md-6 psib" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">KES. 12,129.55</label>
                            </div>
                        </div>
                        <div class="payslip-row clearfix">
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">Non-taxable deductions</label>
                            </div> 
                        </div>  
                        <div class="payslip-row clearfix">                                         
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">NSSF</label>
                            </div>
                            <div class="col-md-6 psi" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">KES. 200.00</label>                               
                            </div>
                        </div>   
                        <div class="payslip-row clearfix">                       
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">Total non-taxable deductions</label>
                            </div>
                            <div class="col-md-6 psib" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">KES. 200.00</label>
                            </div>
                        </div>

                        <div class="payslip-row clearfix">
                            <div class="col-md-6 psb" style="width: 50%;float: left;">
                                <label class="control-label">Pay As You Earn (PAYE)</label>
                            </div>
                            <div class="col-md-6 psib" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">KES. 41,043.90</label>
                            </div>
                        </div>
                        <div class="payslip-row clearfix">
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">Taxable deductions</label>
                            </div> 
                        </div>  
                        <div class="payslip-row clearfix">                                         
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">NHIF</label>
                            </div>
                            <div class="col-md-6 psi" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">KES. 1,700.00</label>                               
                            </div>
                        </div>    
                        <div class="payslip-row clearfix">                       
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">Total taxable deductions</label>
                            </div>
                            <div class="col-md-6 psib" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">KES. 1,700.00</label>
                            </div>
                        </div>   
                        <div class="payslip-row clearfix">
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">Relief</label>
                            </div> 
                        </div>  
                        <div class="payslip-row clearfix">                                         
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">Personal relief</label>
                            </div>
                            <div class="col-md-6 psi" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">KES. 1,408.00</label>                               
                            </div>
                        </div>    
                        <div class="payslip-row clearfix">                       
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">Total relief</label>
                            </div>
                            <div class="col-md-6 psib" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">KES. 1,408.00</label>
                            </div>
                        </div>   
                        <div class="payslip-row net clearfix">                       
                            <div class="col-md-12 psb" style="width: 50%;float: left;">
                                <label class="control-label">NET PAY</label>
                            </div>
                            <div class="col-md-6 psib" style="width: 50%;display: inline-block;float: right;">
                                <label class="control-label">KES. BLAH BLAH</label>
                            </div>
                        </div>                                                  
                    </div>
                </div>
               
                    <div class="col-md-12 clearfix" id="pdfDownload_button"style="margin-top:20px;border-top:1px dashed rgba(0,0,0,0.2);margin-right:150px;">
                        <div class="pull-right" style="margin-top:20px;">
                            <button type="submit" class="btn btn-success" id="pdfGenerator"><i class="fa fa-file-pdf-o"></i>Export to PDF</button>
                            <button type="submit" class="btn btn-success" onClick="printDiv()"><i class="fa fa-print"></i>Print</button></a>
                          
                        </div>
                    </div> 
                    </table>
                </section>  

                              
            </section>           
            
            <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>          
    </section>     
    <aside class="bg-light lter b-l aside-md hide" id="notes">
        <div class="wrapper">Notification</div>
    </aside>
    <!-- Javascript code for pdf rendering -->
    <script> 
    /* (function(API) {
		API.textAlign = function(txt, options, x, y) {
				options = options || {};
				// Use the options align property to specify desired text alignment
				// Param x will be ignored if desired text alignment is 'center'.
				// Usage of options can easily extend the function to apply different text
				// styles and sizes

				// Get current font size
				var fontSize = this.internal.getFontSize();

				// Get page width
				var pageWidth = this.internal.pageSize.width;

				// Get the actual text's width
				// You multiply the unit width of your string by your font size and divide
				// by the internal scale factor. The division is necessary
				// for the case where you use units other than 'pt' in the constructor
				// of jsPDF.

				var txtWidth = this.getStringUnitWidth(txt) * fontSize / this.internal.scaleFactor;

				if (options.align === "center") {

						// Calculate text's x coordinate
						x = (pageWidth - txtWidth) / 2;

				} else if (options.align === "centerAtX") { // center on X value

						x = x - (txtWidth / 2);

				} else if (options.align === "right") {

						x = x - txtWidth;
				}

				// Draw text at x,y
				this.text(txt, x, y);
		};
		
		    // API.textWidth = function(txt) {
			    // var fontSize = this.internal.getFontSize();
		        // return this.getStringUnitWidth(txt)*fontSize / this.internal.scaleFactor;
		    // };
		

		API.getLineHeight = function(txt) {
				return this.internal.getLineHeight();
		};

})(jsPDF.API);

(function() {
		"use strict";

		
		// Refs:
		// https://mrrio.github.io/jsPDF/
		// https://github.com/MrRio/jsPDF
		// https://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html
	

		// some variables
		var agency_logo = {
						src:'data:image/png;base64, ',
						w: 800,
						h: 285
				},
				agency_name = 'Huduma Kenya',
				agency_site_url = 'https://www.hudumakenya.go.ke/',
				footer = agency_name + ' - ' + agency_site_url,

				page_size = 'a4',
				page_width = 210, // mm
				page_margin = 10, // mm
				content_width = page_width - (page_margin * 2), // available width for the content

				_y, _x, // drawing coord
				color_array, _string, lineHeight, y_correction, // some variables

				vspace = 10 // standard vertical space between elements

		;
        var hex2rgb = function(hex_string) {
						if (/^#/.test(hex_string)) {
								hex_string = hex_string.substr(1);
						}
						if (hex_string.length === 3) {
								hex_string = hex_string.replace(/\w/, function(match) {
										return String(match) + String(match);
								});
						}

						return {
								red: parseInt(hex_string.substr(0, 2), 16),
								green: parseInt(hex_string.substr(2, 2), 16),
								blue: parseInt(hex_string.substr(4, 2), 16)
						};
				},

				px2mm = function(pixel) {
						// px to inches
						var inches = pixel / 72;
						return inches * 25.4;
				},

				mm2px = function(millimeters) {
						// mm to inches
						var inches = millimeters / 25.4;
						return inches * 72;
				},
                imgSizes = function(img_w, img_h, img_mm_w) {
						
			// img_w and img_h represent the original image size, in pixel
			// img_mm_w is the desidered rendered image size, in millimeters

	

						if (img_mm_w > content_width) { // this should be never used...
								img_mm_w = content_width;
						}

						if (mm2px(img_mm_w) > img_w) {
								throw 'The `img_mm_w` parameter is too big';
						}

						var img_mm_h = Math.round((px2mm(img_h) * img_mm_w) / px2mm(img_w));

						return {
								w: img_mm_w,
								h: img_mm_h,
								centered_x: (page_width - img_mm_w) / 2
						};
				};

		try {
            var createPDF = function(update_preview) {
                _y = page_margin; 
            var pdf = new jsPDF('p', 'mm', page_size),
				text_baseline,

				// some colors:
				light_grey = 237,
				grey = 128,
				black = 0,
				white = 255;
                pdf.setProperties({
					title: 'Payslip',
					subject: footer,
					author: 'HR',
					creator: ''
				});
                var logo_sizes = imgSizes(agency_logo.w, agency_logo.h, 80);
				pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);
                _y += (logo_sizes.h + vspace + lineHeight);
                _y += vspace;
                
                // pdf.addHTML($("#Payslip"));
            
                _y = 287;
				    pdf.setFontSize(9);
				    pdf.setFontType("normal");
				    pdf.setTextColor(black);
				    pdf.textAlign(footer, {
				    align: "center"
				}, 0, _y);
            };
                $('#pdfGenerator').click(function() {
						createPDF(false);
				});

		} catch (e) {
				console.log(e);
		}

})(); */

    $('#pdfGenerator').click(function() {
 		var options = {
    		'width': 800,
            'height': 1000,
            'background':'#ffffff',
            'font-size':10,                
			};    
        var page=document.getElementById('Payslip');           
			var pdf = new jsPDF('p', 'pt', 'a4');           
			pdf.addHTML($("#Payslip"), -1, 150,options, function() {
				pdf.save('Payslip.pdf');
				});
			});   
    </script>
    <script>
        function printDiv() {    
        var printContents = document.getElementById('Payslip').innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
        }
    </script>

@endsection
<!-- Resources for PDF generation -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xeponline.jqplugin.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lrsjng.jquery-qrcode/0.12.0/jquery.qrcode.min.js"></script>


@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 -->
@endsection

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

        });
       
    </script>

@endsection