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

    <div
    wire:loading.remove
    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">Sticker ID</th>
                <th class="border p-2">Production Order</th>
                <th class="border p-2">Serial Number</th>
                <th class="border p-2">Status</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">{{ $record->sticker_id }}</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->status }}</td>
                    <td class="border p-2 text-center">{{ $record->operator_id }}</td>
                </tr>
            @empty
                <tr>
                    <td class="border p-2 text-center" colspan="6">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>
