@if(count($buildingUnits) > 0)
<div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Select</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Unit Number</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Unit Purpose</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Unit Function</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Unit Occupancy</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Unit Size</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @foreach($buildingUnits as $unit)
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 whitespace-nowrap">
                    <input type="radio" name="selected_unit" value="{{ $unit['RowID'] }}"
                           onchange="jsfn_SelectBuildingUnit({{ $unit['RowID'] }})"
                           class="w-4 h-4 text-teal-600 focus:ring-teal-500 border-gray-300">
                </td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $unit['UnitNumber'] }}</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $unit['UnitPurposeName'] }}</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $unit['UnitFunctionName'] }}</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $unit['UnitOccupancyName'] }}</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $unit['UnitSizeName'] }}</td>
                <td class="px-4 py-3 whitespace-nowrap">
                    <button type="button" onclick="jsfn_RemoveBuildingUnit({{ $unit['RowID'] }})" class="text-red-600 hover:text-red-800 text-sm font-medium">
                        Remove
                    </button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@else
<p class="text-sm text-gray-500 text-center py-8">No building units added yet. Click "Add Unit" to add building units.</p>
@endif