@if($data->isEmpty())
<div class="text-muted py-3">No records found for the selected filters.</div>
@else
<table id="glassNameSummaryTable" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
    <thead>
        <tr>
            <th>#</th>
            <th>Glass Name</th>
            <th>Bill Count</th>
        </tr>
    </thead>
    <tbody>
        @foreach($data as $index => $row)
        <tr>
            <td>{{ $index + 1 }}</td>
            <td>{{ $row->GlassName }}</td>
            <td align="center">
                <span class="glass-count-link" data-glassname="{{ $row->GlassName }}">{{ $row->BillCount }}</span>
            </td>
        </tr>
        @endforeach
    </tbody>
    <tfoot>
        <tr style="background-color: #f0f0f0;">
            <th></th>
            <th>Total</th>
            <th align="center">{{ $data->sum('BillCount') }}</th>
        </tr>
    </tfoot>
</table>
<script type="text/javascript">
$(document).ready(function() {
    if ($.fn.DataTable.isDataTable('#glassNameSummaryTable')) {
        $('#glassNameSummaryTable').DataTable().destroy();
    }
    $('#glassNameSummaryTable').DataTable({
        scrollX: true,
        dom: 'Bfrtip',
        pageLength: 100,
        order: [[1, 'asc']],
        buttons: [{
            extend: 'excelHtml5',
            title: 'Glass Name Report Summary',
            text: 'Export to Excel'
        }]
    });
});
</script>
@endif