<style>
    .mouse-cursor{

    }
</style>  
<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row hidden-print">
            <div class="col-sm-12" >
                <div class="col-sm-3" >
                    <h4 class="page-title">Payment Slips</h4>
                </div>
                
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body" >
                        <div id="print_area">
                            <div class="row m-b-30 m-t-30">
                                <div class="pull-left">
                                    <h3 class="logo invoice-logo"><?php if (isset($business)) {
                                        echo "<img src='" . base_url() . 'assets/images/business/' . $business[0]['business_logo'] . "' alt='" . $business[0]['business_name'] . "' class='img-responsive' />";
                                    } else {
                                        echo 'SalonPK';
                                    } ?></h3>
                                </div>
                                <div class="pull-right">
                                    <p ><strong>Date: </strong> <?php echo date('d-m-Y'); ?></p>
                                    <p id="modep"><strong>Payment Type: </strong><?php echo $slip_data[0]['payment_type']; ?></p>
                                </div>
                            </div>


                            <table class="table table-bordered">
                                <tr>    
                                    <td>
                                        <h4 class="text-inverse font-600">Name          :         <?php echo $slip_data[0]['staff_name']; ?>'</h4>
                                    </td>
                                    <td colspan="2">
                                        <h4 class="text-inverse font-600">Staff #:    <?php echo $slip_data[0]['id_staff']; ?></h4>
                                    </td>
                                </tr>
                                <tr >    
                                    <td class="text-inverse font-600" style="border-bottom:1px solid #808080; border-top:1px solid #808080;">Remarks</td><td class="text-inverse font-600" style="border-bottom:1px solid #808080; border-top:1px solid #808080;">Payment Month</td><td class="text-inverse font-600" style="border-bottom:1px solid #808080; border-top:1px solid #808080; text-align:right;">Deductions</td><td class="text-inverse font-600" style="border-bottom:1px solid #808080;  text-align:right;">Amount</td>
                                </tr>
                                <?php $total=0; foreach ($slip_data as $sd) { ?>
                                    <tr>
                                        <td><h5><?php echo $sd['payment_remarks']; ?></h5></td>
                                        <td><h5><?php $sd['payment_month'] . ' ' . $sd['payment_year']; ?></h5></td>
                                        <td style="text-align:right"><h5><?php echo $sd['deduction_amount'];?></h5></td>
                                        <td style="text-align:right">
                                            <h5 class="text-inverse font-600">
                                                <?php echo number_format($sd['payment_amount'], 2); ?>
                                            </h5>
                                        </td>
                                    </tr>
                                    <?php $total = $total + $sd['payment_amount']; ?>
                                <?php } ?>
                                <tr> 
                                    <td style="border-top:1px solid #808080; text-align:right;" colspan=3>
                                        <h4 class="text-inverse font-600" >Total</h4>
                                    </td>
                                    <td style="text-align:right">
                                        <h4 class="text-inverse font-600"><?php echo number_format($total, 2); ?></h4>
                                    </td>
                                </tr>
                            </table>
                            <br/>
                            <br/>
                            <div class="row m-t-50">
                                <div class="col-md-12 col-sm-12 col-xs-12 ">
                                    <div class="pull-left">
                                        <h5 >Staff __________________</h5>
                                    </div>';
                                    <div class="pull-right ">
                                        <h5>Accountant / Director ___________________</h5>
                                    </div>
                                </div><!-- end col -->
                            </div><!-- end row -->
                        </div>
                    </div>
                   
                </div>
                <hr>
                <div class="hidden-print">
                    <div class="pull-right">
                        <a href="javascript:window.print()" class="btn btn-inverse waves-effect waves-light" id="btnprint"><i class="fa fa-print"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end row -->

<script>

                                    function reloadslips(){
                                    $("#print_area").html('');
                                            $.ajax({
                                            type: 'POST',
                                                    url: '<?php echo base_url(); ?>staff_controller/searchpayments',
                                                    data: {payment_month: $("#selected_month :selected").val(), payment_year: $("#selected_year :selected").val(), payment_type: $("#selected_type :selected").val(), staff_id:$("#selected_staff :selected").val()},
                                                    dataType: "json",
                                                    cache: false,
                                                    async: true,
                                                    success: function(data) {
                                                    mhtml = "";
                                                            var  today  =  new  Date();
                                                            var  dd  =  today.getDate();
                                                            var  mm  =  today.getMonth() + 1; 
                                                            var  yyyy  =  today.getFullYear();
                                                            var  total = 0;
                                                            mhtml  += '<div class="row m-b-30 m-t-30"><div class="pull-left">';
                                                            mhtml  += '<h3 class="logo invoice-logo"><?php if (isset($business)) {
    echo "<img src=\"" . base_url() . "assets/images/business/" . $business[0]['business_logo'] . "\" alt=\"" . $business[0]["business_name"] . "\" class=\"img-responsive\" />";
} else {
    echo "SkedWise";
} ?>';
                                                                    mhtml += '</h3></div><div class="pull-right">';
                                                                            mhtml += '<p class="m-t-30"><strong>Date: </strong> ' + dd + '-' + mm + '-' + yyyy + '</p></div></div>';
                                                              mhtml += '<table class="table table-bordered">';
                                                                            mhtml += '<tr>';
                                                           mhtml += '<td><h4 class="text-inverse font-600">Name          :         ' + data[0]['staff_name'] + '</h4></td><td colspan="2"><h4 class="text-inverse font-600">Staff #:   ' + data[0]['staff_number'] + '</h4></td>';
                                                            mhtml += '</tr>';
                                                            mhtml += '<tr >';
                                                            mhtml += '<td class="text-inverse font-600" style="border-bottom:1px solid #808080; border-top:1px solid #808080;">Remarks</td><td class="text-inverse font-600" style="border-bottom:1px solid #808080; border-top:1px solid #808080;">Payment Month</td><td class="text-inverse font-600" style="border-bottom:1px solid #808080; border-top:1px solid #808080; text-align:right;">Deductions</td><td class="text-inverse font-600" style="border-bottom:1px solid #808080; border-top:1px solid #808080; text-align:right;">Amount</td>';
                                                            mhtml += '</tr>';
                                                            for (x = 0; x < data.length; x++) {
                                                    mhtml += '<tr>';
                                                            mhtml += '<td><h5>' + data[x]['payment_remarks'] + '</h5></td>';
                                                            mhtml += '<td ><h5>' + data[x]['payment_month'] + ' ' + data[x]['payment_year'] + '</h5></td>';
                                                            mhtml += '<td><h5>' + data[x]['deduction_amount'] + '</h5></td>';
                                                            mhtml += '<td style="text-align:right"><h5 class="text-inverse font-600">' + data[x]['payment_amount'].toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '</h5>';
                                                            mhtml += '</tr>';
                                                            total = total + parseFloat(data[x]['payment_amount']);
                                                    }
                                                    mhtml += '<tr>';
                                                            mhtml += '<td style="border-top:1px solid #808080; text-align:right;" colspan=3><h4 class="text-inverse font-600" >Total</h4></td><td style="text-align:right"><h4 class="text-inverse font-600">' + total.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '</h4></td>';
                                                            mhtml += '</tr>';
                                                            mhtml += '</table>';
                                                            mhtml += '<br/><br/><div class="row m-t-50"><div class="col-md-12 col-sm-12 col-xs-12 "><div class="pull-left">';
                                                            mhtml += '<h5 >Employee __________________</h5>';
                                                            mhtml += '</div>';
                                                            mhtml += '<div class="pull-right ">';
                                                            mhtml += '<h5>Director ___________________</h5>';
                                                            mhtml += '</div>';
                                                            mhtml += '</div><!-- end col --></div><!-- end row -->';
                    mhtml +='</div></div><div class="row"><div class="col-md-12 col-sm-12 col-xs-12 "><div class="clearfix m-t-10 m-b-20">';
                    mhtml +='';
                    mhtml +='<small></small>';
                    mhtml +='</div></div></div>';
                    
                
                $("#print_area").html(mhtml);
            }
        });
     
     
 }
   
    
   

</script>
