<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="<?php echo e(asset('images/INB.png')); ?>" rel="shortcut icon" type="image/x-icon"/>
     <!-- Bootstrap -->
    <link href="<?php echo e(asset('backend/vendors/bootstrap/dist/css/bootstrap.min.css')); ?>" rel="stylesheet">
    <style type="text/css">
      /* th span {
        background: #337ab7;
        color: #fff;
        font-weight: bold;
        padding: 1px;
    }*/
    </style>
</head>
<body>
    <div class="container body-section">
        <div class="toolbar hidden-print">
            <div class="text-left">
                <a href="<?php echo e(route('customer.customer-record')); ?>" class="btn btn-info">Back </a>
            </div>
            <div class="text-right">
                <button id="printInvoice" class="btn btn-info" onclick="printDiv('printableArea')" >
                    <i class="fa fa-print"></i> Print
                </button>
                <!--<button class="btn btn-info"><i class="fa fa-file-pdf-o"></i> Export as PDF</button>-->
            </div>
            <hr>
        </div>
        <div id="printableArea">
                <header>
                    <div class="row">
                        <div class="col-sm-2 col-xs-2">
                                <img src="<?php echo e(asset('storage/about/'.about()->logo)); ?>" data-holder-rendered="true" class="img-responsive" width="85px" height="75px" />
                        </div>
                        <div class="col-sm-8 col-xs-8">
                            <div class="text-center">
                                <h4><?php echo e(about()->english_name); ?></h4>
                                <p>Phone:  <?php echo e(about()->phone); ?>, Email: <?php echo e(about()->email); ?></p>
                                <p>Address: <?php echo e(about()->address); ?> </p>
                                <h4>Payment Slip</h4>
                            </div>
                        </div>
                        <div class="col-sm-2 col-xs-2">
                    </div>
                </header>
                <main class="">
                    <div class="row">
                        <div class="col-sm-12 col-xs-12">
                             <b>Payment Date: <?php echo e(date('d-m-Y',strtotime($record->transaction_date))); ?></b>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-sm-12 col-xs-12">
                            <table class="table table-bordered table-condensed">
                                <tr class="customer-detail">
                                    <td><b> Name: </b> <?php echo e($record->customer->name); ?></td>
                                    <td><b>Customer Phone: </b> <?php echo e($record->customer->phone); ?></td>
                                </tr>
                                <tr class="customer-detail">
                                    <td colspan="2"><b>Address: </b><?php echo e($record->customer->address); ?> </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                	<div class="table-responsive">
						<table class="table table-condensed table-bordered" >
							<thead>
								<tr>
									<th class="center">SL</th>
									<th>Total Price</th>
									<th>Payment Amount</th>
									<th>Due Amount</th>
									<th>Previous Due</th>
									<th>Total Due</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><?php echo e(1); ?></td>
									<td><?php echo e($record->total_price); ?></td>
									<td><?php echo e($record->payment_amount); ?></td>
									<td><?php echo e($record->due_amount); ?></td>
									<td><?php echo e($record->previous_due); ?></td>
									<td><?php echo e($record->total_due); ?></td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="text-center">
						<small>
							Thank you for choosing our Company products.We believe you will be satisfied by our services.
						</small>
					</div>
                    <div style="clear: both;"></div>
                    <div class="row">
                        <div class="2">............................</div>
                        <div class="2">Authorize Signature</div>
                    </div>
                    <div class="thanks">Thank you!</div>
                </main>
                
            </div>
            <!--DO NOT DELETE THIS div. IT is responsible for showing footer always at the bottom-->
            <div></div>
        </div>
    </div>
    <script type="text/javascript">
        function printDiv(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
        }
    </script>
</body>
</html>