uparrow/resources/views/admin/payroll/receipt.blade.php

<div class="modal-content" style='width:60%;margin:0 auto !important'>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Payment Receipt &nbsp;&nbsp;&nbsp;
        <span id="print" style="cursor: pointer;"><i class="fa fa-print"></i> </span>  &nbsp;&nbsp;&nbsp;
        
        </h4>
    </div>
    <style type="text/css">
        #table_details{
            width: 100%;
            margin-bottom: 15px;
        }
        #table_details tr td{
            width: 50%;
            padding:5px 13px;
        }
        #table_details tr td b{
            width:100px;
        }

    </style>
    <div class="modal-body" style="padding: 10px 20px;width: 80%;margin:auto;" id="printableArea">
        <div class="invoice-box" style="border:1px solid #f1e4e4;">
            <table style="background: #edf5f4;width: 100%;height: 55px;border-bottom: 1px solid #f1e4e4;">
                <tr>
                    <td class="text-center" style="border-right: 1px solid #f1e4e4;width: 60%;font-size: 22px;"> Electronic Business Solution ltd. </td>
                    <td>
                        <ul class="text-center" style="font-size:20px;border-bottom: 1px solid #f1e4e4;padding: 6px 0px;margin: 0px;font-weight: 600;">SALARY SLIP</ul>
                        <ul class="text-center" style="font-size:14px;padding: 3px 0px;margin: 0px;font-weight: 600;">{{ date("F Y", strtotime(@$pay->date)) }}</ul>
                    </td>
                </tr>
            </table>
            <table id="table_details" style="margin-top: 10px;">
                <tr>
                    <td><b>Full Name </b>: {{$emp->name}}</td>
                    <td><b>Designation </b>: {{$emp_details->designation->name}}</td>
                </tr>
            </table>
            <table class="table table-bordered" style="border-bottom: 1px solid #f1e4e4;">
                <thead>
                    <tr>
                        <th class="text-center">Description</th>
                        <th class="text-center">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($single->psHead as $data)
                    <tr>
                        <td class="text-left" style="width: 40%;">{{$data->head->name}}</td>
                        <td class="text-right">{{ number_format($data->amount,2) }}</td>
                    </tr>
                    @endforeach 

                    <tr>
                        <th class="text-center">Total</th>
                        <td class="text-right">{{ number_format($pay->gross_amount,2) }} TK.</td>
                    </tr>
                    <tr style="background: #edf5f4;">
                        <th class="text-center">Paid Amount</th>
                        <td class="text-right"> {{ number_format($pay->paid_amount,2) }} TK.</td>
                    </tr>
                    @if($pay->gross_amount > $pay->paid_amount)
                    <tr style="background: #edf5f4;">
                        <th class="text-center">Due</th>
                        <td class="text-right">{{ number_format($pay->gross_amount - $pay->paid_amount,2) }} TK.</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            <table id="table_details" style="margin-bottom:60px;">
                <tr>
                    <td class="text-left">
                        <ul>Payment Date <span style="padding-left: 10px;padding-right: 10px;">: </span> {{ date("d M Y", strtotime(@$pay->updated_at)) }}</ul>
                        {{-- <ul>Media <span style="padding-left: 72px;">:</span></ul> --}}
                    </td>
                    <td class="text-center">Signature</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<script src="{{ asset('/assets/') }}/print/printThis.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#btn_email').click(function(e){
        e.preventDefault();
        var inv_id=$(this).data('inv_id');
        $.ajax({
            url: '{{ url('invoice/invoice_created_email') }}/'+inv_id,
            type: 'GET'
        })
        .done(function(res) {
            alert('Email sent successfully !')
        });
        

    });
    
});
</script>
<script>
$('#print').click(function(e){
    $('#printableArea').printThis({
  debug: false,               // show the iframe for debugging
  importCSS: true,            // import page CSS
  importStyle: true,         // import style tags
  printContainer: true,  // path to additional css file - use an array [] for multiple
  pageTitle: "SALARY SLIP",              // add title to print page
  removeInline: false,        // remove all inline styles from print elements
  printDelay: 33,            // variable print delay
  header: null,               // prefix to html
  footer: null,               // postfix to html
  base: false ,               // preserve the BASE tag, or accept a string for the URL
  formValues: true,           // preserve input/form values
  canvas: false,              // copy canvas elements (experimental)
  doctypeString: "",       // enter a different doctype for older markup
  removeScripts: false,       // remove script tags from print content
  copyTagClasses: false       // copy classes from the html & body tag
});
}); 
</script>