<div>
    @php
        $items = \App\Models\FinancialItem::where('related_type', \App\Models\Project::class)
            ->where('related_id', $getRecord()?->id)
            ->get();
    @endphp

    @if($items->isEmpty())
        <div class="text-sm text-gray-500 dark:text-gray-400 py-4 text-center">
            No financial items linked yet. Use the "Add Mandatory Levy" or "Add Voluntary Donation" buttons at the top of this page.
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="text-xs text-gray-500 dark:text-gray-400 uppercase border-b dark:border-gray-700">
                    <tr>
                        <th class="px-4 py-2">Name</th>
                        <th class="px-4 py-2">Category</th>
                        <th class="px-4 py-2">Amount</th>
                        <th class="px-4 py-2">Type</th>
                        <th class="px-4 py-2">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($items as $item)
                        <tr class="border-b dark:border-gray-700">
                            <td class="px-4 py-2 font-medium text-gray-900 dark:text-white">{{ $item->title }}</td>
                            <td class="px-4 py-2">
                                <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                    {{ \App\Models\FinancialItem::CATEGORIES[$item->category] ?? ucfirst($item->category) }}
                                </span>
                            </td>
                            <td class="px-4 py-2">{!! '&#8358;' !!}{{ number_format($item->amount, 2) }}</td>
                            <td class="px-4 py-2">
                                @if($item->is_optional)
                                    <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Voluntary</span>
                                @else
                                    <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">Mandatory</span>
                                @endif
                            </td>
                            <td class="px-4 py-2">
                                @if($item->is_active)
                                    <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Active</span>
                                @else
                                    <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">Inactive</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
