{{-- Service Bill Rule Items Modals --}}
@foreach($mdaServiceRules as $rule)
<div id="serviceBillRuleItemsModal_{{ $rule->SBSID }}" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="hideServiceBillRuleItemsModal({{ $rule->SBSID }})"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">View Items in {{ $rule->MDAServiceName }}</h3>
                    <button onclick="hideServiceBillRuleItemsModal({{ $rule->SBSID }})" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>
            <div class="px-6 py-4 max-h-96 overflow-y-auto">
                @php $ruleItems = $serviceBillItems->where('SBSID', $rule->SBSID); @endphp
                @if($ruleItems->count() > 0)
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Item Ref</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Item Name</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Computation</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($ruleItems as $item)
                        <tr>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $item->MDAServiceItemReferenceNo ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $item->MDAServiceItemName ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $item->ComputationName ?? 'N/A' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <p class="text-sm text-gray-500 text-center py-4">No Item Found</p>
                @endif
            </div>
            <div class="bg-gray-50 px-6 py-3 flex justify-end">
                <button type="button" onclick="hideServiceBillRuleItemsModal({{ $rule->SBSID }})" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- Rule Payments Modal --}}
<div id="rulePaymentsModal_{{ $rule->SBSID }}" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="hideRulePaymentsModal({{ $rule->SBSID }})"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">View Payments for {{ $rule->MDAServiceName }}</h3>
                    <button onclick="hideRulePaymentsModal({{ $rule->SBSID }})" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>
            <div class="px-6 py-4 max-h-96 overflow-y-auto">
                @php $ruleSettlements = $serviceBillRuleSettlements->where('SBSID', $rule->SBSID); @endphp
                @if($ruleSettlements->count() > 0)
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Payment Ref</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Payment Date</th>
                            <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">Amount Paid</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($ruleSettlements as $settlement)
                        <tr>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $settlement->SettlementRefNo ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $settlement->SettlementDate ? \Carbon\Carbon::parse($settlement->SettlementDate)->format('d-M-Y') : 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900 text-right">{{ number_format($settlement->SettlementAmount ?? 0, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <p class="text-sm text-gray-500 text-center py-4">No Payment Found</p>
                @endif
            </div>
            <div class="bg-gray-50 px-6 py-3 flex justify-end">
                <button type="button" onclick="hideRulePaymentsModal({{ $rule->SBSID }})" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Close</button>
            </div>
        </div>
    </div>
</div>
@endforeach

{{-- View All Settlements Modal --}}
<div id="settlementsModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="hideSettlementsModal()"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">View Payments for {{ $serviceBill->ServiceBillRefNo }}</h3>
                    <button onclick="hideSettlementsModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>
            <div class="px-6 py-4 max-h-96 overflow-y-auto">
                @if($settlements->count() > 0)
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Payment Ref</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Payment Date</th>
                            <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">Amount Paid</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($settlements as $settlement)
                        <tr>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $settlement->SettlementRefNo ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $settlement->SettlementDate ? \Carbon\Carbon::parse($settlement->SettlementDate)->format('d-M-Y') : 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900 text-right">{{ number_format($settlement->SettlementAmount ?? 0, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <p class="text-sm text-gray-500 text-center py-4">No Payment Found</p>
                @endif
            </div>
            <div class="bg-gray-50 px-6 py-3 flex justify-end">
                <button type="button" onclick="hideSettlementsModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- View Adjustments Modal --}}
<div id="adjustmentsModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="hideAdjustmentsModal()"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">View Adjustment for {{ $serviceBill->ServiceBillRefNo }}</h3>
                    <button onclick="hideAdjustmentsModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>
            <div class="px-6 py-4 max-h-96 overflow-y-auto">
                @if($adjustments->count() > 0)
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Line</th>
                            <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">Amount</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($adjustments as $adj)
                        <tr>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $adj->AdjustmentDate ? \Carbon\Carbon::parse($adj->AdjustmentDate)->format('d-M-Y') : 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $adj->AdjustmentTypeName ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $adj->AdjustmentLine ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900 text-right">{{ number_format($adj->Amount ?? 0, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <p class="text-sm text-gray-500 text-center py-4">No Adjustment Found</p>
                @endif
            </div>
            <div class="bg-gray-50 px-6 py-3 flex justify-end">
                <button type="button" onclick="hideAdjustmentsModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- View Late Charges Modal --}}
<div id="lateChargesModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="hideLateChargesModal()"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">View Late Charge for {{ $serviceBill->ServiceBillRefNo }}</h3>
                    <button onclick="hideLateChargesModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>
            <div class="px-6 py-4 max-h-96 overflow-y-auto">
                @if($lateCharges->count() > 0)
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                            <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">Penalty</th>
                            <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">Interest</th>
                            <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">Total</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($lateCharges as $lc)
                        <tr>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ $lc->ChargeDate ? \Carbon\Carbon::parse($lc->ChargeDate)->format('d-M-Y') : 'N/A' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900 text-right">{{ number_format($lc->Penalty ?? 0, 2) }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900 text-right">{{ number_format($lc->Interest ?? 0, 2) }}</td>
                            <td class="px-3 py-2 text-sm text-gray-900 text-right">{{ number_format($lc->TotalAmount ?? 0, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <p class="text-sm text-gray-500 text-center py-4">No Late Charge Found</p>
                @endif
            </div>
            <div class="bg-gray-50 px-6 py-3 flex justify-end">
                <button type="button" onclick="hideLateChargesModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- PoA Modal (for deduction with overpayment) --}}
<div id="poaModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="hidePoaModal()"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">PoA Details</h3>
                    <button onclick="hidePoaModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>
            <div class="px-6 py-4">
                <form id="frmPoA">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label for="txtTransactionRefNo" class="block text-sm font-medium text-gray-700 mb-1">
                                Transaction Ref No <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="txtTransactionRefNo" name="txtTransactionRefNo"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                                placeholder="Enter Transaction Ref No">
                        </div>
                        <div>
                            <label for="cboRevenueStream" class="block text-sm font-medium text-gray-700 mb-1">
                                Revenue Stream <span class="text-red-500">*</span>
                            </label>
                            <select id="cboRevenueStream" name="cboRevenueStream"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                <option value="">Select Revenue Stream</option>
                                @foreach($revenueStreams as $stream)
                                <option value="{{ $stream->RevenueStreamID }}">{{ $stream->RevenueStreamName }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label for="cboRevenueSubStream" class="block text-sm font-medium text-gray-700 mb-1">
                                Revenue Sub Stream <span class="text-red-500">*</span>
                            </label>
                            <select id="cboRevenueSubStream" name="cboRevenueSubStream"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                <option value="">Select Revenue Sub Stream</option>
                            </select>
                        </div>
                        <div>
                            <label for="cboAgency" class="block text-sm font-medium text-gray-700 mb-1">
                                Agency <span class="text-red-500">*</span>
                            </label>
                            <select id="cboAgency" name="cboAgency"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                <option value="">Select Agency</option>
                                @foreach($agencies as $agency)
                                <option value="{{ $agency->AgencyID }}">{{ $agency->AgencyName }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label for="txtPoAAmount" class="block text-sm font-medium text-gray-700 mb-1">
                                PoA Amount <span class="text-red-500">*</span>
                            </label>
                            <input type="number" step="0.01" id="txtPoAAmount" name="txtPoAAmount"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 bg-gray-100"
                                placeholder="Enter Amount" readonly>
                        </div>
                        <div>
                            <label for="cboPaymentMethod" class="block text-sm font-medium text-gray-700 mb-1">
                                Payment Method <span class="text-red-500">*</span>
                            </label>
                            <select id="cboPaymentMethod" name="cboPaymentMethod"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                <option value="">Select Payment Method</option>
                                @foreach($settlementMethods as $method)
                                <option value="{{ $method->SettlementMethodID }}">{{ $method->SettlementMethodName }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="txtPoANotes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                        <textarea id="txtPoANotes" name="txtPoANotes" rows="3"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                            placeholder="Enter Notes"></textarea>
                    </div>
                </form>
            </div>
            <div class="bg-gray-50 px-6 py-3 flex justify-end space-x-3">
                <button type="button" onclick="hidePoaModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Cancel</button>
                <button type="button" id="btnSaveAdjustmentWithPoA" class="px-6 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">Save</button>
            </div>
        </div>
    </div>
</div>

<script>
// Modal functions
function showServiceBillRuleItemsModal(sbsid) {
    document.getElementById('serviceBillRuleItemsModal_' + sbsid).classList.remove('hidden');
}
function hideServiceBillRuleItemsModal(sbsid) {
    document.getElementById('serviceBillRuleItemsModal_' + sbsid).classList.add('hidden');
}
function showRulePaymentsModal(sbsid) {
    document.getElementById('rulePaymentsModal_' + sbsid).classList.remove('hidden');
}
function hideRulePaymentsModal(sbsid) {
    document.getElementById('rulePaymentsModal_' + sbsid).classList.add('hidden');
}
function showSettlementsModal() {
    document.getElementById('settlementsModal').classList.remove('hidden');
}
function hideSettlementsModal() {
    document.getElementById('settlementsModal').classList.add('hidden');
}
function showAdjustmentsModal() {
    document.getElementById('adjustmentsModal').classList.remove('hidden');
}
function hideAdjustmentsModal() {
    document.getElementById('adjustmentsModal').classList.add('hidden');
}
function showLateChargesModal() {
    document.getElementById('lateChargesModal').classList.remove('hidden');
}
function hideLateChargesModal() {
    document.getElementById('lateChargesModal').classList.add('hidden');
}
function showPoaModal() {
    document.getElementById('poaModal').classList.remove('hidden');
}
function hidePoaModal() {
    document.getElementById('poaModal').classList.add('hidden');
}
</script>