@foreach($mdaServices as $service)
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
    <div class="flex justify-between items-start">
        <div class="flex-1">
            <h4 class="text-lg font-semibold text-gray-900">{{ $service['MDAServiceName'] }}</h4>
            <div class="mt-2 space-y-1 text-sm text-gray-600">
                <p><strong>Amount Charged:</strong> ₦{{ number_format($service['ServiceAmount'], 2) }}</p>
                <p><strong>Tax Year:</strong> {{ $service['TaxYear'] }}</p>
            </div>
            <div class="mt-2">
                <a href="#" onclick="jsfn_ShowMDAServiceItems({{ $service['RowID'] }}); return false;" class="text-teal-600 hover:text-teal-700 text-sm font-medium">View Items</a>
                <span class="mx-2 text-gray-400">|</span>
                <a href="#" onclick="jsfn_RemoveMDAService({{ $service['RowID'] }}); return false;" class="text-red-600 hover:text-red-700 text-sm font-medium">Remove</a>
            </div>
        </div>
        <div class="ml-4 text-right">
            <p class="text-sm text-gray-500 mb-1">Amount to Pay</p>
            <p class="text-2xl font-bold text-teal-600">₦{{ number_format($service['ServiceAmount'], 2) }}</p>
            <button onclick="jsfn_EditMDAServiceItems({{ $service['RowID'] }}); return false;" class="mt-2 inline-flex items-center px-3 py-1 bg-teal-600 text-white text-xs font-medium rounded hover:bg-teal-700">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Edit Amount
            </button>
        </div>
    </div>
</div>
@endforeach

<div class="bg-gray-100 p-4 rounded-lg mt-4">
    <div class="flex justify-between items-center">
        <span class="text-lg font-semibold text-gray-700">Total Amount</span>
        <span class="text-2xl font-bold text-gray-900">₦{{ number_format(array_sum(array_column($mdaServices, 'ServiceAmount')), 2) }}</span>
    </div>
</div>