/home2/mshostin/public_html/resources/views/reference/printLedger.blade.php
<!doctype html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Ledger</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container"  id="print-doc" >
        <div style="width:100%">
            <div class="row">
                <div class="col-md-2"><p style="margin-top: 35px;">S.P NAME: {{$ref->name}}</p></div>
                <div class="col-md-8 text-center">
                    <h2>PANWARI LEDGER </h2>
                </div>
              
            </div>
            <table class="table table-border" id="table-print" style=" width:100%;border:1px solid black; height:100%;">
                <thead style="border:1px solid black;">
                  <tr style="border:1px solid black;">
                    <th style="width: 2% border:1px solid black;text-align:center">SNO</th>
                    <th style="width: 5% border:1px solid black;text-align:center">DATE</th>
                    <th style="width: 10% border:1px solid black;text-align:center">PARTICULAR</th>
                    <th style="width: 10% border:1px solid black;text-align:center">DEBIT</th>
                    <th style="width: 10% border:1px solid black;text-align:center">CREDIT</th>
                    <th style="width: 10% border:1px solid black;text-align:center">BALANCE</th>
                    <!--<th style="width: 2% border:1px solid black;">Days</th>-->
                  </tr>
                </thead>
                <tbody style="border:1px solid black;">
                    @php
                        $total = 0;
                        
                    @endphp
                    @foreach ($trans as $key => $row)
                        <tr style="border:1px solid black;">
                            <th scope="row"  style="border:1px solid #ccc;     padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;">{{++$key}}</th>
                            <td style="border:1px solid #ccc;     padding: 8px;
    line-height: 1.42857143;
    vertical-align: top; text-align:center">{!! date('d/M/y', strtotime($row->created_at)) !!}</td>
                            <td style="border:1px solid #ccc;      padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;text-align:center">{{$row->title}} {{$row->client->name}}</td>
    <td style="border:1px solid #ccc;      padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;text-align:center">
        @if($row->type != "income")
        {{$row->amount}}
        @else
        0.00
        @endif
        </td>
    <td style="border:1px solid #ccc;      padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;text-align:center">@if($row->type == "income")
        {{$row->amount}}
        @else
        0.00
        @endif</td>
                            <td style="border:1px solid #ccc; text-align:center">
                                {{$row->client->balance}}
                                @php
                                    $total = $total + $row->client->balance;
                                @endphp
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>       
            <div class="text-right" id="total-amount" >
                <h4>Total Balance Amount : {{$total}} </h4>
            </div>
        </div>
    </div>
    <div class="container" id="display-none">
        <button onclick="print()">Print</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        function print()
        {
            // document.getElementById("display-none").style.display = "none";
            // window.print();
            // var element = document.getElementById('print-doc');
    //         document.getElementById("table-print").style.width = "95%";
    //         document.getElementById("total-amount").style.margin = "5%";
    //         var opt = {
    //         margin:       [22,2, 15, 2], //top, left, buttom, right
    //         filename:     'ledger.pdf',
    //         image:        { type: 'jpeg', quality: 1 },
    //         html2canvas:  { dpi: 192, letterRendering: true},
    //         jsPDF:        { unit: 'mm', format: 'A4', orientation: 'landscape' },
    //         };
    // element.print();
            // New Promise-based usage:
            // html2pdf().set(opt).from(element).save();

            // Old monolithic-style usage:
            // html2pdf(element, opt);
            var prtContent = document.getElementById("print-doc");
var WinPrint = window.open('', '', 'left=0,top=0,width=1500,height=1000,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
        }
    </script>
</body>
</html>