<script>
    $(document).ready(function (){
        /**Download Section**/
        $('#purchaseOrderItems').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>
    #purchaseOrderItems th, td {
        text-align: left;
        padding: 5px;
    }
    #purchaseOrderItems tr:hover {background-color: #a3aef6;}
</style>
<table id="purchaseOrderItems" class="display" style="width:100%; border-collapse: collapse">
    <thead>
    <tr style="background-color: #a1b5d3">
        <th>No</th>
        <th>Item Name/Description of Purchase Order Item</th>
        <th>Batches Of</th>
        <th>Quantity of Items Required</th>
    </tr>
    </thead>
    <tbody>
    @foreach($purchaseOrder->items 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>{{$row->batches_of}}</td>
                <td>{{$row->quantity}}</td>
            </tr>
        @endif
    @endforeach
    </tbody>
    <tfoot>
    <tr style="background-color: #a1b5d3">
        <th>No</th>
        <th>Item Name/Description of Purchase Order Item</th>
        <th>Batches Of</th>
        <th>Quantity of Items Required</th>
    </tr>
    </tfoot>
</table>
