@extends('layouts.auth.app')

@section('title', 'Treasury Receipt')

@section('content')
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <!-- Header -->
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Treasury Receipt</h3>
                <p class="text-sm text-gray-500 mt-1">View and manage treasury receipts</p>
            </div>
            <button onclick="openAddReceiptModal()" class="px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                Add Receipt
            </button>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="relative">
            <input type="text" id="searchInput" placeholder="Search by receipt ref, bill ref, taxpayer name, amount..." class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
            <svg class="absolute left-3 top-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.35-4.35"></path>
            </svg>
        </div>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Receipt Ref</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bill Ref</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Payer</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Method</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                </tr>
            </thead>
            <tbody id="tableBody" class="divide-y divide-gray-200">
                <!-- Data via AJAX -->
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
        <div class="flex items-center justify-between">
            <p class="text-sm text-gray-700">
                Showing <span id="showingFrom" class="font-medium">0</span> to <span id="showingTo" class="font-medium">0</span> of <span id="totalRecords" class="font-medium">0</span> results
            </p>
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-700">Show:</span>
                    <select id="itemsPerPage" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <div id="paginationControls" class="flex items-center space-x-1"></div>
            </div>
        </div>
    </div>
</div>

<!-- Add Receipt Modal -->
<div id="addReceiptModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-2xl bg-white">
        <!-- Modal Header -->
        <div class="flex items-center justify-between pb-4 border-b border-gray-200">
            <h3 class="text-xl font-semibold text-gray-900">Add Treasury Receipt</h3>
            <button onclick="closeAddReceiptModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="addReceiptForm" class="mt-4">
            <div class="space-y-4">
                <div>
                    <label for="billRefNo" class="block text-sm font-medium text-gray-700 mb-1">Bill Reference Number *</label>
                    <input type="text" id="billRefNo" name="billRefNo" required
                        placeholder="Enter Bill Ref No (e.g., AB123 or SB123)"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                    <p class="text-xs text-gray-500 mt-1">Enter Assessment Bill (AB) or Service Bill (SB) reference number</p>
                </div>
                <div id="errorMessage" class="hidden text-sm text-red-600 bg-red-50 p-3 rounded-lg"></div>
            </div>

            <!-- Modal Footer -->
            <div class="flex items-center justify-end pt-4 mt-4 border-t border-gray-200 space-x-3">
                <button type="button" onclick="closeAddReceiptModal()"
                    class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-lg hover:bg-gray-600 transition-colors duration-200">
                    Cancel
                </button>
                <button type="submit" id="submitBtn"
                    class="px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors duration-200">
                    Continue
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Bill Detail Modal -->
<div id="billDetailModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-10 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 shadow-lg rounded-2xl bg-white mb-10">
        <!-- Modal Header -->
        <div class="flex items-center justify-between pb-4 border-b border-gray-200">
            <h3 class="text-xl font-semibold text-gray-900">Bill Details</h3>
            <button onclick="closeBillDetailModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <!-- Modal Body -->
        <div id="billDetailContent" class="mt-4">
            <!-- Bill details will be loaded here -->
        </div>

        <!-- Modal Footer -->
        <div class="flex items-center justify-end pt-4 mt-4 border-t border-gray-200 space-x-3">
            <button type="button" onclick="closeBillDetailModal()"
                class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-lg hover:bg-gray-600 transition-colors duration-200">
                Close
            </button>
            <button type="button" onclick="proceedToCreateReceipt()"
                class="px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors duration-200">
                Create Receipt
            </button>
        </div>
    </div>
</div>

<!-- View Receipt Modal -->
<div id="viewReceiptModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-10 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 shadow-lg rounded-2xl bg-white mb-10">
        <!-- Modal Header -->
        <div class="flex items-center justify-between pb-4 border-b border-gray-200">
            <h3 class="text-xl font-semibold text-gray-900">Receipt Details</h3>
            <button onclick="closeViewReceiptModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <!-- Modal Body -->
        <div id="viewReceiptContent" class="mt-4">
            <div class="flex items-center justify-center py-8">
                <svg class="animate-spin h-8 w-8 text-teal-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="ml-2 text-gray-600">Loading receipt details...</span>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="flex items-center justify-between pt-4 mt-4 border-t border-gray-200">
            <div id="viewReceiptDownloadSection" class="hidden">
                <a id="downloadReceiptBtn" href="#" target="_blank"
                    class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                    Download PDF
                </a>
            </div>
            <button type="button" onclick="closeViewReceiptModal()"
                class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-lg hover:bg-gray-600 transition-colors duration-200 ml-auto">
                Close
            </button>
        </div>
    </div>
</div>

<!-- Sign Receipt Modal -->
<div id="signReceiptModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-10 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-2xl bg-white mb-10">
        <!-- Modal Header -->
        <div class="flex items-center justify-between pb-4 border-b border-gray-200">
            <h3 class="text-xl font-semibold text-gray-900">Sign Receipt</h3>
            <button onclick="closeSignReceiptModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <!-- Modal Body -->
        <div id="signReceiptContent" class="mt-4">
            <input type="hidden" id="signReceiptID" value="">
            <input type="hidden" id="signReceiptRefNo" value="">

            <!-- Receipt Info -->
            <div class="bg-gray-50 p-4 rounded-lg mb-4">
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-gray-500">Receipt Ref:</span>
                        <span id="signReceiptRefDisplay" class="font-medium ml-2">-</span>
                    </div>
                    <div>
                        <span class="text-gray-500">Amount:</span>
                        <span id="signReceiptAmountDisplay" class="font-medium text-teal-600 ml-2">-</span>
                    </div>
                </div>
            </div>

            <!-- Signature Source Selection -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Signature Source *</label>
                <div class="space-y-2">
                    <label class="flex items-center">
                        <input type="radio" name="signSource" value="1" class="text-teal-600 focus:ring-teal-500">
                        <span class="ml-2 text-sm text-gray-700">Use Saved Signature</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="signSource" value="2" class="text-teal-600 focus:ring-teal-500">
                        <span class="ml-2 text-sm text-gray-700">Upload Signature</span>
                    </label>
                </div>
            </div>

            <!-- Signature Upload Section (hidden by default) -->
            <div id="signatureUploadSection" class="hidden mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Upload Signature Image</label>
                <input type="file" id="signatureFile" accept="image/*"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-sm">
                <p class="text-xs text-gray-500 mt-1">Accepted formats: JPG, PNG, GIF (Max 2MB)</p>
            </div>

            <!-- Sign Notes -->
            <div class="mb-4">
                <label for="signNotes" class="block text-sm font-medium text-gray-700 mb-1">Notes (Optional)</label>
                <textarea id="signNotes" rows="3" placeholder="Enter any additional notes..."
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"></textarea>
            </div>

            <div id="signErrorMessage" class="hidden text-sm text-red-600 bg-red-50 p-3 rounded-lg mb-4"></div>
        </div>

        <!-- Modal Footer -->
        <div class="flex items-center justify-end pt-4 mt-4 border-t border-gray-200 space-x-3">
            <button type="button" onclick="closeSignReceiptModal()"
                class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-lg hover:bg-gray-600 transition-colors duration-200">
                Cancel
            </button>
            <button type="button" onclick="submitSignReceipt()" id="signReceiptBtn"
                class="px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                </svg>
                Sign Receipt
            </button>
        </div>
    </div>
</div>

<!-- Cancel Receipt Modal -->
<div id="cancelReceiptModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-2xl bg-white">
        <!-- Modal Header -->
        <div class="flex items-center justify-between pb-4 border-b border-gray-200">
            <h3 class="text-xl font-semibold text-gray-900">Cancel Receipt</h3>
            <button onclick="closeCancelReceiptModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <!-- Modal Body -->
        <div class="mt-4">
            <input type="hidden" id="cancelReceiptID" value="">

            <!-- Warning Message -->
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-yellow-700">
                            You are about to cancel receipt <strong id="cancelReceiptRefDisplay">-</strong>. This action cannot be undone.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Cancel Notes -->
            <div class="mb-4">
                <label for="cancelNotes" class="block text-sm font-medium text-gray-700 mb-1">Cancellation Reason *</label>
                <textarea id="cancelNotes" rows="3" placeholder="Please provide a reason for cancellation..."
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required></textarea>
            </div>

            <div id="cancelErrorMessage" class="hidden text-sm text-red-600 bg-red-50 p-3 rounded-lg mb-4"></div>
        </div>

        <!-- Modal Footer -->
        <div class="flex items-center justify-end pt-4 mt-4 border-t border-gray-200 space-x-3">
            <button type="button" onclick="closeCancelReceiptModal()"
                class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-lg hover:bg-gray-600 transition-colors duration-200">
                No, Keep Receipt
            </button>
            <button type="button" onclick="submitCancelReceipt()" id="cancelReceiptBtn"
                class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
                Yes, Cancel Receipt
            </button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/receipt-list.js') }}"></script>
<script>
// Configuration variables for receipt-list.js
const getReceiptDataUrl = '{{ route("settle.get-receipt-data") }}';
const getReceiptDetailsUrl = '{{ route("settle.get-receipt-details") }}';
const cancelReceiptUrl = '{{ route("settle.cancel-receipt") }}';
const signReceiptUrl = '{{ route("settle.sign-receipt") }}';
const downloadReceiptUrl = '/TreasuryReceipt/Download';

/**
 * Open add receipt modal
 */
function openAddReceiptModal() {
    document.getElementById('addReceiptModal').classList.remove('hidden');
    document.getElementById('billRefNo').value = '';
    document.getElementById('errorMessage').classList.add('hidden');
}

/**
 * Close add receipt modal
 */
function closeAddReceiptModal() {
    document.getElementById('addReceiptModal').classList.add('hidden');
}

/**
 * Handle form submission
 */
let currentBillData = null;

document.getElementById('addReceiptForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const billRefNo = document.getElementById('billRefNo').value.trim();
    const errorMessage = document.getElementById('errorMessage');
    const submitBtn = document.getElementById('submitBtn');

    // Validate bill reference number format
    if (!billRefNo.match(/^(AB|SB)/i)) {
        errorMessage.textContent = 'Bill Reference Number must start with AB (Assessment Bill) or SB (Service Bill)';
        errorMessage.classList.remove('hidden');
        return;
    }

    // Show loading state
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Loading...';
    errorMessage.classList.add('hidden');

    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    // Fetch bill details
    fetch('{{ route("settle.get-bill-details") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        },
        body: JSON.stringify({ billRefNo: billRefNo })
    })
    .then(response => response.json())
    .then(data => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = 'Continue';

        if (data.success) {
            currentBillData = data;
            displayBillDetails(data);
            closeAddReceiptModal();
            document.getElementById('billDetailModal').classList.remove('hidden');
        } else {
            errorMessage.textContent = data.message || 'Error loading bill details';
            errorMessage.classList.remove('hidden');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        submitBtn.disabled = false;
        submitBtn.innerHTML = 'Continue';
        errorMessage.textContent = 'Error loading bill details. Please try again.';
        errorMessage.classList.remove('hidden');
    });
});

/**
 * Display bill details in modal
 */
function displayBillDetails(data) {
    const content = document.getElementById('billDetailContent');
    const bill = data.bill;
    const billType = data.billType; // 'assessment' or 'servicebill'

    let html = '<div class="space-y-6">';

    // Record Details
    html += `
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-gray-50 p-4 rounded-lg">
                <h4 class="text-sm font-semibold text-gray-700 mb-3">Record Details</h4>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Template Type:</span>
                        <span class="font-semibold">${billType === 'assessment' ? 'Assessment' : 'Service Bill'}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Date:</span>
                        <span class="font-semibold">${formatDate(billType === 'assessment' ? bill.AssessmentDate : bill.ServiceBillDate)}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Tax Payer Type:</span>
                        <span class="font-semibold">${escapeHtml(bill.TaxPayerTypeName || '-')}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Tax Payer Name:</span>
                        <span class="font-semibold">${escapeHtml(bill.TaxPayerName || '-')}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Due Date:</span>
                        <span class="font-semibold">${formatDate(bill.SettlementDueDate)}</span>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
                <h4 class="text-sm font-semibold text-gray-700 mb-3">Notes</h4>
                <p class="text-sm text-gray-900">${bill.Notes || bill.AssessmentNotes || '-'}</p>
            </div>
        </div>
    `;

    // Bill Reference and Status
    const refNo = billType === 'assessment' ? bill.AssessmentRefNo : bill.ServiceBillRefNo;
    html += `
        <div class="bg-white border-t-4 border-teal-600 p-4 rounded-lg">
            <div class="flex flex-wrap items-center justify-between">
                <span class="text-lg font-semibold text-gray-900">Reference: ${escapeHtml(refNo)}</span>
                <span class="text-lg font-semibold text-gray-900">Status: ${escapeHtml(bill.SettlementStatusName || '-')}</span>
            </div>
        </div>
    `;

    // Bill Summary
    const billAmount = billType === 'assessment' ? bill.AssessmentAmount : bill.ServiceBillAmount;
    const settledAmount = bill.SettlementAmount || 0;
    const outstandingAmount = billAmount - settledAmount;

    html += `
        <div class="bg-white border border-gray-200 rounded-lg p-4 space-y-3">
            <div class="flex justify-between items-center py-2 border-b">
                <span class="font-semibold">${billType === 'assessment' ? 'Assessment' : 'Service Bill'} Amount</span>
                <span class="font-semibold">₦${formatNumber(billAmount)}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b">
                <span class="font-semibold">Total Paid</span>
                <span class="font-semibold">₦${formatNumber(settledAmount)}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b">
                <span class="font-semibold">Outstanding</span>
                <span class="font-semibold">₦${formatNumber(outstandingAmount)}</span>
            </div>
            <div class="flex justify-between items-center py-3 bg-red-50 px-4 rounded">
                <span class="font-bold text-red-600 text-lg">Amount to Pay</span>
                <span class="font-bold text-red-600 text-lg">₦${formatNumber(outstandingAmount)}</span>
            </div>
        </div>
    `;

    html += '</div>';
    content.innerHTML = html;
}

/**
 * Format number with commas
 */
function formatNumber(num) {
    if (!num) return '0.00';
    return parseFloat(num).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

/**
 * Close bill detail modal
 */
function closeBillDetailModal() {
    document.getElementById('billDetailModal').classList.add('hidden');
    currentBillData = null;
}

/**
 * Proceed to create receipt
 */
function proceedToCreateReceipt() {
    if (!currentBillData) {
        alert('No bill data available');
        return;
    }

    // Redirect to treasury receipt creation with bill data
    const billRefNo = currentBillData.billType === 'assessment'
        ? currentBillData.bill.AssessmentRefNo
        : currentBillData.bill.ServiceBillRefNo;

    window.location.href = '/TreasuryReceipt/Add?billRefNo=' + encodeURIComponent(billRefNo);
}

// Close modal on outside click
document.getElementById('addReceiptModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeAddReceiptModal();
    }
});

/**
 * ==========================================
 * VIEW RECEIPT MODAL FUNCTIONS
 * ==========================================
 */

/**
 * Open view receipt modal and load receipt details
 */
function openViewReceiptModal(receiptId) {
    const modal = document.getElementById('viewReceiptModal');
    const content = document.getElementById('viewReceiptContent');
    const downloadSection = document.getElementById('viewReceiptDownloadSection');

    // Show loading state
    content.innerHTML = `
        <div class="flex items-center justify-center py-8">
            <svg class="animate-spin h-8 w-8 text-teal-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="ml-2 text-gray-600">Loading receipt details...</span>
        </div>
    `;
    downloadSection.classList.add('hidden');
    modal.classList.remove('hidden');

    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    // Fetch receipt details
    fetch(getReceiptDetailsUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        },
        body: JSON.stringify({ receiptId: receiptId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            displayReceiptDetails(data.receipt);
            // Show download button if receipt has PDF
            if (data.receipt.SignedPath || data.receipt.GeneratedPath) {
                document.getElementById('downloadReceiptBtn').href = downloadReceiptUrl + '/' + receiptId;
                downloadSection.classList.remove('hidden');
            }
        } else {
            content.innerHTML = `
                <div class="text-center py-8 text-red-600">
                    <p>${escapeHtml(data.message || 'Error loading receipt details')}</p>
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        content.innerHTML = `
            <div class="text-center py-8 text-red-600">
                <p>Error loading receipt details. Please try again.</p>
            </div>
        `;
    });
}

/**
 * Display receipt details in modal
 */
function displayReceiptDetails(receipt) {
    const content = document.getElementById('viewReceiptContent');

    // Determine status badge color
    let statusColor = 'bg-green-100 text-green-800';
    let statusName = receipt.ReceiptStatusName || 'Active';
    if (statusName.toLowerCase().includes('cancel')) {
        statusColor = 'bg-red-100 text-red-800';
    } else if (statusName.toLowerCase().includes('pending') || statusName.toLowerCase().includes('generated')) {
        statusColor = 'bg-yellow-100 text-yellow-800';
    }

    const html = `
        <div class="space-y-6">
            <!-- Receipt Header -->
            <div class="bg-teal-50 border-l-4 border-teal-500 p-4 rounded-r-lg">
                <div class="flex items-center justify-between">
                    <div>
                        <h4 class="text-lg font-semibold text-teal-800">${escapeHtml(receipt.ReceiptRefNo || '-')}</h4>
                        <p class="text-sm text-teal-600">Receipt Reference</p>
                    </div>
                    <span class="px-3 py-1 text-sm font-medium rounded-full ${statusColor}">${escapeHtml(statusName)}</span>
                </div>
            </div>

            <!-- Receipt Details Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Tax Payer Info -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 border-b pb-2">Tax Payer Information</h4>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500">Name:</span>
                            <span class="font-medium text-gray-900">${escapeHtml(receipt.TaxPayerName || '-')}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">RIN:</span>
                            <span class="font-medium text-gray-900">${escapeHtml(receipt.TaxPayerRIN || '-')}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Type:</span>
                            <span class="font-medium text-gray-900">${escapeHtml(receipt.TaxPayerTypeName || '-')}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Tax Office:</span>
                            <span class="font-medium text-gray-900">${escapeHtml(receipt.TaxOfficeName || '-')}</span>
                        </div>
                    </div>
                </div>

                <!-- Receipt Info -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 border-b pb-2">Receipt Information</h4>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500">Bill Ref:</span>
                            <span class="font-medium text-gray-900">${escapeHtml(receipt.ASRefNo || '-')}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Receipt Date:</span>
                            <span class="font-medium text-gray-900">${formatDate(receipt.ReceiptDate)}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Created By:</span>
                            <span class="font-medium text-gray-900">${escapeHtml(receipt.CreatedByName || '-')}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Amount Section -->
            <div class="bg-teal-600 text-white p-4 rounded-lg">
                <div class="flex items-center justify-between">
                    <span class="text-lg font-medium">Receipt Amount</span>
                    <span class="text-2xl font-bold">${formatCurrency(receipt.ReceiptAmount)}</span>
                </div>
            </div>

            <!-- Notes Section -->
            ${receipt.Notes ? `
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Notes</h4>
                    <p class="text-sm text-gray-600">${escapeHtml(receipt.Notes)}</p>
                </div>
            ` : ''}

            ${receipt.CancelNotes ? `
                <div class="bg-red-50 p-4 rounded-lg border-l-4 border-red-500">
                    <h4 class="text-sm font-semibold text-red-700 mb-2">Cancellation Reason</h4>
                    <p class="text-sm text-red-600">${escapeHtml(receipt.CancelNotes)}</p>
                </div>
            ` : ''}
        </div>
    `;

    content.innerHTML = html;
}

/**
 * Close view receipt modal
 */
function closeViewReceiptModal() {
    document.getElementById('viewReceiptModal').classList.add('hidden');
}

/**
 * ==========================================
 * SIGN RECEIPT MODAL FUNCTIONS
 * ==========================================
 */

/**
 * Open sign receipt modal
 */
function openSignReceiptModal(receiptId, receiptRefNo, receiptAmount) {
    const modal = document.getElementById('signReceiptModal');

    // Set values
    document.getElementById('signReceiptID').value = receiptId;
    document.getElementById('signReceiptRefNo').value = receiptRefNo;
    document.getElementById('signReceiptRefDisplay').textContent = receiptRefNo;
    document.getElementById('signReceiptAmountDisplay').textContent = formatCurrency(receiptAmount);

    // Reset form
    document.getElementById('signNotes').value = '';
    document.getElementById('signErrorMessage').classList.add('hidden');
    document.querySelectorAll('input[name="signSource"]').forEach(radio => radio.checked = false);
    document.getElementById('signatureUploadSection').classList.add('hidden');
    if (document.getElementById('signatureFile')) {
        document.getElementById('signatureFile').value = '';
    }

    modal.classList.remove('hidden');
}

/**
 * Close sign receipt modal
 */
function closeSignReceiptModal() {
    document.getElementById('signReceiptModal').classList.add('hidden');
}

/**
 * Handle signature source radio change
 */
document.querySelectorAll('input[name="signSource"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const uploadSection = document.getElementById('signatureUploadSection');
        if (this.value === '2') {
            uploadSection.classList.remove('hidden');
        } else {
            uploadSection.classList.add('hidden');
        }
    });
});

/**
 * Submit sign receipt
 */
function submitSignReceipt() {
    const receiptId = document.getElementById('signReceiptID').value;
    const signNotes = document.getElementById('signNotes').value;
    const signSourceRadio = document.querySelector('input[name="signSource"]:checked');
    const errorMessage = document.getElementById('signErrorMessage');
    const submitBtn = document.getElementById('signReceiptBtn');

    // Validate
    if (!signSourceRadio) {
        errorMessage.textContent = 'Please select a signature source';
        errorMessage.classList.remove('hidden');
        return;
    }

    const signSourceId = signSourceRadio.value;

    // Show loading state
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<svg class="animate-spin inline-block h-4 w-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Signing...';
    errorMessage.classList.add('hidden');

    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    // Prepare form data
    const formData = new FormData();
    formData.append('receiptId', receiptId);
    formData.append('signSourceId', signSourceId);
    formData.append('signNotes', signNotes);

    // Add signature file if uploading
    if (signSourceId === '2') {
        const signatureFile = document.getElementById('signatureFile').files[0];
        if (!signatureFile) {
            errorMessage.textContent = 'Please select a signature file to upload';
            errorMessage.classList.remove('hidden');
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg> Sign Receipt';
            return;
        }
        formData.append('signatureFile', signatureFile);
    }

    fetch(signReceiptUrl, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg> Sign Receipt';

        if (data.success) {
            closeSignReceiptModal();
            showAlert('Receipt signed successfully!', 'success');
            loadData(); // Refresh the table
        } else {
            errorMessage.textContent = data.message || 'Error signing receipt';
            errorMessage.classList.remove('hidden');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg> Sign Receipt';
        errorMessage.textContent = 'Error signing receipt. Please try again.';
        errorMessage.classList.remove('hidden');
    });
}

/**
 * ==========================================
 * CANCEL RECEIPT MODAL FUNCTIONS
 * ==========================================
 */

/**
 * Open cancel receipt modal
 */
function openCancelReceiptModal(receiptId, receiptRefNo) {
    const modal = document.getElementById('cancelReceiptModal');

    // Set values
    document.getElementById('cancelReceiptID').value = receiptId;
    document.getElementById('cancelReceiptRefDisplay').textContent = receiptRefNo;

    // Reset form
    document.getElementById('cancelNotes').value = '';
    document.getElementById('cancelErrorMessage').classList.add('hidden');

    modal.classList.remove('hidden');
}

/**
 * Close cancel receipt modal
 */
function closeCancelReceiptModal() {
    document.getElementById('cancelReceiptModal').classList.add('hidden');
}

/**
 * Submit cancel receipt
 */
function submitCancelReceipt() {
    const receiptId = document.getElementById('cancelReceiptID').value;
    const cancelNotes = document.getElementById('cancelNotes').value.trim();
    const errorMessage = document.getElementById('cancelErrorMessage');
    const submitBtn = document.getElementById('cancelReceiptBtn');

    // Validate
    if (!cancelNotes) {
        errorMessage.textContent = 'Please enter a cancellation reason';
        errorMessage.classList.remove('hidden');
        return;
    }

    // Show loading state
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<svg class="animate-spin inline-block h-4 w-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Cancelling...';
    errorMessage.classList.add('hidden');

    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    fetch(cancelReceiptUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            receiptId: receiptId,
            cancelNotes: cancelNotes
        })
    })
    .then(response => response.json())
    .then(data => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg> Yes, Cancel Receipt';

        if (data.success) {
            closeCancelReceiptModal();
            showAlert('Receipt cancelled successfully!', 'success');
            loadData(); // Refresh the table
        } else {
            errorMessage.textContent = data.message || 'Error cancelling receipt';
            errorMessage.classList.remove('hidden');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg> Yes, Cancel Receipt';
        errorMessage.textContent = 'Error cancelling receipt. Please try again.';
        errorMessage.classList.remove('hidden');
    });
}

/**
 * ==========================================
 * UTILITY FUNCTIONS
 * ==========================================
 */

/**
 * Show alert message
 */
function showAlert(message, type = 'success') {
    // Create alert element
    const alertDiv = document.createElement('div');
    alertDiv.className = `fixed top-4 right-4 z-[100] px-6 py-4 rounded-lg shadow-lg transform transition-all duration-300 ${
        type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
    }`;
    alertDiv.innerHTML = `
        <div class="flex items-center">
            ${type === 'success'
                ? '<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>'
                : '<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>'
            }
            <span>${escapeHtml(message)}</span>
        </div>
    `;

    document.body.appendChild(alertDiv);

    // Auto remove after 3 seconds
    setTimeout(() => {
        alertDiv.style.opacity = '0';
        setTimeout(() => alertDiv.remove(), 300);
    }, 3000);
}

// Close modals on outside click
['viewReceiptModal', 'signReceiptModal', 'cancelReceiptModal'].forEach(modalId => {
    document.getElementById(modalId).addEventListener('click', function(e) {
        if (e.target === this) {
            if (modalId === 'viewReceiptModal') closeViewReceiptModal();
            else if (modalId === 'signReceiptModal') closeSignReceiptModal();
            else if (modalId === 'cancelReceiptModal') closeCancelReceiptModal();
        }
    });
});
</script>
@endpush