<script>
    $(document).ready(function (){
        /**Download Section**/
        $('#myReport').DataTable( {
            dom: 'lBfrtip',
            buttons: [
                { extend: 'excel', className: 'download-buttons'},
                { extend: 'pdf', className: 'download-buttons'},
            ],
            footerCallback: function ( row, data, start, end, display ) {
                var api = this.api(), data;
                var numberRenderer = $.fn.dataTable.render.number(',', '.', 2).display;

                // Remove the formatting to get integer data for summation
                var intVal = function ( i ) {
                    return typeof i === 'string' ? i.replace(/[\.]/g, '.').replace(/[\,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                };

                //Comm Amount
                totalSalesAmount = api.column( 4 ).data().reduce( function (a, b) { return intVal(a) + intVal(b)}, 0 );
                currentSalesAmount = api.column( 4, { page: 'current'} ).data().reduce( function (a, b) { return intVal(a) + intVal(b)}, 0 );
                // Update Footer - Sale Amount
                $( api.column( 4 ).footer() ).html(numberRenderer(currentSalesAmount) +'<br>('+ numberRenderer(totalSalesAmount) +')').css('color', 'blue');
            },

        } );
    });
    var e = document.getElementsByClassName("er");
    for (var i = 0; i < e.length; i++) {
        e[i].innerHTML = (i+1)+".";
    }
</script>
<style>
    #myReport th, td {
        text-align: left;
        padding: 5px;
    }
    #myReport tr:hover {background-color: #a3aef6;}
</style>
<table id="myReport" class="display" style="width:100%; border-collapse: collapse">
    <thead>
    <tr style="background-color: #a1b5d3">
        <th>No</th>
        <th>Item Name</th>
        <th>Unit Price</th>
        <th>Quantity</th>
        <th>Total Price</th>
    </tr>
    </thead>
    <tbody>
    @foreach($lists as $row)
        {{--Every Entry is connected to a Specific Item in the INventory Table--}}
        @if($row->item)
            <tr>
                <td class="er"></td>
                <td><b class="error">{!! strtoupper($row->item->name) !!}</b></td>
                <td>{!! number_format($row->unit_price_sell,2) !!}</td>
                <td>{{abs($row->quantity)}}</td>
                <td>{!! number_format($row->total_price_sell,2) !!}</td>
            </tr>
        @endif
    @endforeach
    </tbody>
    <tfoot>
    <tr style="background-color: #a1b5d3">
        <th>No</th>
        <th>Item Name</th>
        <th>Unit Price</th>
        <th>Quantity</th>
        <th>Total Price</th>
    </tr>
    </tfoot>
</table>
