<div class="w-full px-2 py-2">
    <table class="w-full divide-y divide-gray-200 border-1 rounded-lg overflow-hidden">
        <thead class="bg-gray-100">
            <tr>
                <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">No</th>
                <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Item Code</th>
                <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Serial Number</th>
                <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Created At</th>
                <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">SAP Status</th>
                <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">SAP Description</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @forelse($items as $index => $item)
                <tr>
                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $index + 1 }}</td>
                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $item['item_code'] }}</td>
                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $item['serial_number'] }}</td>
                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $item['created_at'] }}</td>
                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $item['sap_status'] }}</td>
                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $item['sap_description'] }}</td>
                </tr>
            @empty
                @if ($attempted)
                    <tr>
                        <td colspan="6" class="px-3 py-4 border text-center text-sm text-gray-500">
                            No data available for the selected plant and production order!
                        </td>
                    </tr>
                @elseif ($refresh)
                <tr>
                    <td colspan="6" class="px-3 py-4 border text-center text-sm text-gray-500">
                          Scan the valid production order and press enter!
                    </td>
                </tr>
            @endif
            @endforelse
        </tbody>
    </table>
</div>
