{{-- <div class="overflow-x-auto overflow-y-visible" style="height: 385px;">
<table class="table-auto w-full border-collapse border">
    <thead class="bg-gray-100">
        <tr>
            <th class="border p-2">No</th>
            <th class="border p-2">Reference No</th>
            <th class="border p-2">Serial Number</th>
            <th class="border p-2">Created By</th>
        </tr>
    </thead>
    <tbody>
        @forelse($records as $index => $record)
            <tr>
                <td class="border p-2 text-center">{{ $index + 1 }}</td>
                <td class="border p-2 text-center">{{ $refNumber }}</td>
                <td class="border p-2 text-center">{{ $record['serial_number'] }}</td>
                <td class="border p-2 text-center">{{ $record->created_by }}</td>
            </tr>
        @empty
            <tr>
                <td class="border p-2 text-center" colspan="4">No serial numbers found.</td>
            </tr>
        @endforelse
    </tbody>
</table>
</div> --}}

<div>
    <h3 class="text-lg font-semibold mb-2">Sticker Printing Table</h3>

    <div
        wire:loading.remove
        @if(!$materialInvoice) style="display:none" @endif
        class="overflow-x-auto overflow-y-visible"
        style="height: 385px;"
    >
    <table class="table-auto w-full border-collapse border">
        {{-- <thead class="bg-gray-100"> --}}
            <thead class="bg-gray-100 text-xs">
            <tr>
                <th class="border p-2">No</th>
                <th class="border p-2">Reference No</th>
                <th class="border p-2">Serial Number</th>
                <th class="border p-2">Created By</th>
            </tr>
        </thead>
        {{-- <tbody> --}}
            <tbody class="text-xs">
            @forelse($records as $index => $record)
                <tr>
                    <td class="border p-2 text-center">{{ $index + 1 }}</td>
                    <td class="border p-2 text-center">{{ $refNumber }}</td>
                    <td class="border p-2 text-center">{{ $record['serial_number'] }}</td>
                    <td class="border p-2 text-center">{{ $record->created_by }}</td>
                </tr>
            @empty
                <tr>
                    <td class="border p-2 text-center" colspan="4">No serial numbers found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>


<script>
    window.addEventListener('focus-serial-number', () => {
        setTimeout(() => {
            const container = document.getElementById('serial_number_input');
            const input = container?.querySelector('input'); // gets the actual input inside

            if (input) {
                input.focus();
                input.select();
            }
        }, 50);
    });
</script>