<script>
    $(document).ready(function (){
        /**Download Section**/
        $('#myReport').DataTable( {
            dom: 'lBfrtip',
            buttons: [
                { extend: 'excel', className: 'download-buttons'},
                { extend: 'pdf', className: 'download-buttons'},
            ]
        } );
    });
    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>Last Qnty Purchased</th>
        <th>Last Date Sold</th>
        <th>Current Quantity</th>
    </tr>
    </thead>
    <tbody>
    @foreach($list as $row)
        <tr>
            <td class="er"></td>
            <td><b class="error">{!! strtoupper($row['item-name']) !!}</b></td>
            <td>{!! $row['last-purchased-quantity'] !!}</td>
            <td>{!! $row['last-date-sold'] !!}</td>
            <td>{!! $row['current-quantity'] !!}</td>
        </tr>
    @endforeach
    </tbody>
    <tfoot>
    <tr style="background-color: #a1b5d3">
        <th>No</th>
        <th>Item Name</th>
        <th>Last Qnty Purchased</th>
        <th>Last Date Sold</th>
        <th>Current Quantity</th>
    </tr>
    </tfoot>
</table>
