@extends('layouts.auth.app')

@section('title', 'Settlement Via PoA')

@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">Unsettled Bills with PoA Balance</h3>
                <p class="text-sm text-gray-500 mt-1">View and settle outstanding bills using Payment on Account balance</p>
            </div>
        </div>
    </div>

    <!-- Alert Container -->
    <div id="alertContainer"></div>

    @if(session('success'))
        <div class="mx-6 mt-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mx-6 mt-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
            {{ session('error') }}
        </div>
    @endif

    <!-- Table Controls (Search & Show) -->
    <div class="px-6 py-3 bg-white border-b border-gray-200">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <!-- Items per page -->
            <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="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span class="text-sm text-gray-700">entries</span>
            </div>

            <!-- Search Input -->
            <div class="flex items-center space-x-2">
                <label for="tableSearch" class="text-sm text-gray-700">Search:</label>
                <input type="text" id="tableSearch" placeholder="Type to filter..." class="px-3 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500 w-48">
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
        <table id="poaSettlementTable" class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-column="0">
                        Bill Date
                        <span class="sort-icon ml-1"></span>
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-column="1">
                        Bill Ref
                        <span class="sort-icon ml-1"></span>
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 hidden lg:table-cell" data-column="2">
                        Tax Payer
                        <span class="sort-icon ml-1"></span>
                    </th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-column="3">
                        Amount
                        <span class="sort-icon ml-1"></span>
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 hidden lg:table-cell" data-column="4">
                        Status
                        <span class="sort-icon ml-1"></span>
                    </th>
                    <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Action
                    </th>
                </tr>
            </thead>
            <tbody id="poaSettlementTableBody" class="bg-white divide-y divide-gray-200">
                <!-- Data will be loaded via AJAX -->
            </tbody>
        </table>
    </div>

    <!-- Loading Spinner -->
    <div id="loadingSpinner" class="hidden px-6 py-8 text-center">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-teal-600"></div>
        <p class="mt-2 text-sm text-gray-500">Loading...</p>
    </div>

    <!-- Empty State -->
    <div id="emptyState" class="hidden px-6 py-8 text-center">
        <p class="text-gray-500">No unsettled bills found</p>
    </div>

    <!-- Pagination -->
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <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>

            <!-- Pagination controls -->
            <div id="paginationControls" class="flex items-center space-x-1">
                <!-- Will be populated by JavaScript -->
            </div>
        </div>
    </div>
</div>

<!-- Bill Detail Modal -->
<div id="billDetailModal" 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="closeBillDetailModal()"></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-4xl sm:w-full">
            <!-- Modal Header -->
            <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 Settlement: View Bill Details</h3>
                    <button onclick="closeBillDetailModal()" 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>

            <!-- Modal Error -->
            <div id="billModalError" class="hidden mx-6 mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>

            <!-- Modal Success -->
            <div id="billModalSuccess" class="hidden mx-6 mt-4 p-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm"></div>

            <!-- Modal Loading -->
            <div id="billModalLoading" class="hidden px-6 py-8 text-center">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-teal-600"></div>
                <p class="mt-2 text-sm text-gray-500">Loading bill details...</p>
            </div>

            <!-- Modal Content -->
            <div id="billModalContent" class="hidden px-6 py-4 max-h-[70vh] overflow-y-auto">
                <!-- Record Details & Notes Row -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
                    <!-- Record Details -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-semibold text-gray-900 mb-3">Record Details</h4>
                        <table class="w-full text-sm">
                            <tbody>
                                <tr>
                                    <td class="py-1 text-gray-600">Template Type</td>
                                    <td class="py-1 text-gray-900 text-right" id="modalTemplateType">Assessment</td>
                                </tr>
                                <tr>
                                    <td class="py-1 text-gray-600">Date</td>
                                    <td class="py-1 text-gray-900 text-right" id="modalBillDate"></td>
                                </tr>
                                <tr>
                                    <td class="py-1 text-gray-600">Tax Payer Type</td>
                                    <td class="py-1 text-gray-900 text-right" id="modalTaxPayerType"></td>
                                </tr>
                                <tr>
                                    <td class="py-1 text-gray-600">Tax Payer Name</td>
                                    <td class="py-1 text-gray-900 text-right" id="modalTaxPayerName"></td>
                                </tr>
                                <tr>
                                    <td class="py-1 text-gray-600">Due Date</td>
                                    <td class="py-1 text-gray-900 text-right" id="modalDueDate"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Notes -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-semibold text-gray-900 mb-3">Notes</h4>
                        <p class="text-sm text-gray-600" id="modalNotes">No notes available</p>
                    </div>
                </div>

                <!-- Reference & Status -->
                <div class="bg-gray-50 rounded-lg p-4 mb-4">
                    <div class="flex items-center justify-between flex-wrap gap-2">
                        <div>
                            <span class="text-sm text-gray-600">Reference:</span>
                            <span class="ml-1 text-sm font-semibold text-gray-900" id="modalBillRef"></span>
                        </div>
                        <div>
                            <span class="text-sm text-gray-600">Status:</span>
                            <span class="ml-1 text-sm font-semibold" id="modalStatus"></span>
                        </div>
                    </div>
                </div>

                <!-- Assessment Rules Table -->
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden mb-4">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Assessment Rule</th>
                                <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Amount Charged</th>
                                <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Amount Paid</th>
                                <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Outstanding</th>
                                <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">Tax Year</th>
                            </tr>
                        </thead>
                        <tbody id="modalAssessmentRules" class="divide-y divide-gray-200">
                            <!-- Rows will be inserted dynamically -->
                        </tbody>
                    </table>
                </div>

                <!-- Summary Section -->
                <div class="border border-gray-200 rounded-lg overflow-hidden mb-4">
                    <div class="divide-y divide-gray-200">
                        <div class="flex justify-between items-center px-4 py-3">
                            <span class="text-sm text-gray-600">Total Amount</span>
                            <span class="text-sm font-semibold text-gray-900" id="modalTotalAmount"></span>
                        </div>
                        <div class="flex justify-between items-center px-4 py-3">
                            <span class="text-sm text-gray-600">
                                Total Paid
                                <button type="button" onclick="showPaymentHistory()" class="ml-2 text-teal-600 hover:text-teal-700 text-xs">[View Payments]</button>
                            </span>
                            <span class="text-sm font-semibold text-gray-900" id="modalTotalPaid"></span>
                        </div>
                        <div class="flex justify-between items-center px-4 py-3">
                            <span class="text-sm text-gray-600">Outstanding</span>
                            <span class="text-sm font-semibold text-gray-900" id="modalOutstanding"></span>
                        </div>
                        <div class="flex justify-between items-center px-4 py-3">
                            <span class="text-sm text-gray-600">PoA Balance</span>
                            <span class="text-sm font-semibold text-teal-600" id="modalPoaBalance"></span>
                        </div>
                        <div class="flex justify-between items-center px-4 py-3 bg-gray-50">
                            <span class="text-base font-semibold text-red-600">Amount to Pay</span>
                            <span class="text-lg font-bold text-red-600" id="modalAmountToPay"></span>
                        </div>
                    </div>
                </div>

                <!-- Insufficient Balance Warning -->
                <div id="insufficientBalanceWarning" class="hidden mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                        <span class="text-sm text-yellow-700" id="insufficientBalanceMsg"></span>
                    </div>
                </div>

                <!-- Already Settled Message -->
                <div id="alreadySettledMsg" class="hidden mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span class="text-sm text-green-700">This assessment has been fully settled.</span>
                    </div>
                </div>

                <!-- Notes Input -->
                <div id="notesInputSection" class="mb-4">
                    <label for="settlementNotes" class="block text-sm font-medium text-gray-700 mb-2">Add Notes</label>
                    <textarea id="settlementNotes" 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>

                <!-- Hidden Fields -->
                <input type="hidden" id="modalAssessmentID" value="">
                <input type="hidden" id="modalBillTypeID" value="">
            </div>

            <!-- Modal Footer -->
            <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                <button type="button" onclick="closeBillDetailModal()" 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="btnMakePayment" onclick="processSettlement()" class="hidden px-6 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
                    Make Payment
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Payment History Modal -->
<div id="paymentHistoryModal" class="hidden fixed inset-0 z-[60] 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="closePaymentHistoryModal()"></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">Payment History</h3>
                    <button onclick="closePaymentHistoryModal()" 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-[50vh] overflow-y-auto" id="paymentHistoryContent">
                <p class="text-sm text-gray-500">Loading payment history...</p>
            </div>
            <div class="bg-gray-50 px-6 py-3 flex justify-end">
                <button type="button" onclick="closePaymentHistoryModal()" 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>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentPage = 1;
    let itemsPerPage = 10;
    let searchTerm = '';
    let totalRecords = 0;
    let filteredRecords = 0;
    let sortColumn = 0;
    let sortDirection = 'desc';

    // Current bill data for settlement
    let currentBillData = null;

    // Load initial data
    loadData();

    // Items per page change
    $('#itemsPerPage').on('change', function() {
        itemsPerPage = parseInt($(this).val());
        currentPage = 1;
        loadData();
    });

    // Search input with debounce
    let searchTimeout;
    $('#tableSearch').on('keyup', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            searchTerm = $('#tableSearch').val();
            currentPage = 1;
            loadData();
        }, 300);
    });

    // Column header click for sorting
    $('th[data-column]').on('click', function() {
        const column = parseInt($(this).data('column'));
        if (sortColumn === column) {
            sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            sortColumn = column;
            sortDirection = 'asc';
        }
        updateSortIcons();
        loadData();
    });

    function updateSortIcons() {
        $('.sort-icon').html('');
        const activeHeader = $('th[data-column="' + sortColumn + '"] .sort-icon');
        if (sortDirection === 'asc') {
            activeHeader.html('<svg class="inline w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>');
        } else {
            activeHeader.html('<svg class="inline w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>');
        }
    }

    function loadData() {
        $('#loadingSpinner').removeClass('hidden');
        $('#poaSettlementTableBody').html('');
        $('#emptyState').addClass('hidden');

        $.ajax({
            url: '{{ route("operation-manager.poa-settlement-data") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                draw: 1,
                start: (currentPage - 1) * itemsPerPage,
                length: itemsPerPage,
                'search[value]': searchTerm,
                'order[0][column]': sortColumn,
                'order[0][dir]': sortDirection
            },
            success: function(response) {
                $('#loadingSpinner').addClass('hidden');
                totalRecords = response.recordsTotal;
                filteredRecords = response.recordsFiltered;

                if (response.data && response.data.length > 0) {
                    renderTable(response.data);
                    updatePagination();
                } else {
                    $('#emptyState').removeClass('hidden');
                    updatePaginationInfo(0, 0, 0);
                    $('#paginationControls').html('');
                }
            },
            error: function(xhr, status, error) {
                $('#loadingSpinner').addClass('hidden');
                $('#emptyState').removeClass('hidden').find('p').text('Error loading data. Please try again.');
                console.error('Error loading PoA Settlement data:', error);
            }
        });
    }

    // Expose loadData to global scope for refresh after settlement
    window.refreshSettlementList = loadData;

    function formatDate(dateString) {
        if (!dateString) return '';
        try {
            const date = new Date(dateString);
            if (isNaN(date.getTime())) return '';

            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            const day = String(date.getDate()).padStart(2, '0');
            const month = months[date.getMonth()];
            const year = date.getFullYear();
            return day + '-' + month + '-' + year;
        } catch (e) {
            return '';
        }
    }

    window.formatDate = formatDate;

    function formatMoney(amount) {
        if (amount === null || amount === undefined) return '0.00';
        return parseFloat(amount).toLocaleString('en-NG', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    window.formatMoney = formatMoney;

    function getStatusBadge(statusName) {
        let bgClass = 'bg-gray-100 text-gray-800';
        if (statusName) {
            const status = statusName.toLowerCase();
            if (status === 'pending' || status === 'unpaid') {
                bgClass = 'bg-yellow-100 text-yellow-800';
            } else if (status === 'partial') {
                bgClass = 'bg-orange-100 text-orange-800';
            } else if (status === 'settled' || status === 'paid') {
                bgClass = 'bg-green-100 text-green-800';
            }
        }
        return '<span class="px-2 py-1 text-xs font-medium rounded-full ' + bgClass + '">' + (statusName || 'N/A') + '</span>';
    }

    function renderTable(data) {
        let html = '';
        data.forEach(function(row) {
            html += '<tr class="hover:bg-gray-50">';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">' + formatDate(row.BillDate) + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">' + (row.BillRefNo || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 hidden lg:table-cell">' + (row.TaxPayerName || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">' + formatMoney(row.BillAmount) + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm hidden lg:table-cell">' + getStatusBadge(row.SettlementStatusName) + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-center">';
            html += '<div class="relative inline-block text-left">';
            html += '<button type="button" class="action-dropdown-btn inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">';
            html += 'Action ';
            html += '<svg class="-mr-1 ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">';
            html += '<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />';
            html += '</svg>';
            html += '</button>';
            html += '<div class="action-dropdown-menu hidden origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">';
            html += '<div class="py-1">';
            html += '<a href="#" onclick="openBillDetailModal(' + row.BillTypeID + ', ' + row.BillID + ', \'' + (row.BillRefNo || '').replace(/'/g, "\\'") + '\'); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Bill</a>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</td>';
            html += '</tr>';
        });
        $('#poaSettlementTableBody').html(html);

        // Handle dropdown toggle
        $('.action-dropdown-btn').on('click', function(e) {
            e.stopPropagation();
            const menu = $(this).siblings('.action-dropdown-menu');
            $('.action-dropdown-menu').not(menu).addClass('hidden');
            menu.toggleClass('hidden');
        });

        // Close dropdown when clicking outside
        $(document).on('click', function() {
            $('.action-dropdown-menu').addClass('hidden');
        });
    }

    function updatePagination() {
        let start = filteredRecords > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0;
        let end = Math.min(currentPage * itemsPerPage, filteredRecords);
        updatePaginationInfo(start, end, filteredRecords);

        let totalPages = Math.ceil(filteredRecords / itemsPerPage);
        let paginationHtml = '';

        if (totalPages > 0) {
            paginationHtml += '<button class="px-3 py-1 text-sm border border-gray-300 rounded-md ' + (currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50') + '" ' + (currentPage === 1 ? 'disabled' : '') + ' data-page="' + (currentPage - 1) + '">Previous</button>';

            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, currentPage + 2);

            if (startPage > 1) {
                paginationHtml += '<button class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50" data-page="1">1</button>';
                if (startPage > 2) {
                    paginationHtml += '<span class="px-2 text-gray-500">...</span>';
                }
            }

            for (let i = startPage; i <= endPage; i++) {
                paginationHtml += '<button class="px-3 py-1 text-sm border rounded-md ' + (i === currentPage ? 'bg-teal-600 text-white border-teal-600' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50') + '" data-page="' + i + '">' + i + '</button>';
            }

            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    paginationHtml += '<span class="px-2 text-gray-500">...</span>';
                }
                paginationHtml += '<button class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50" data-page="' + totalPages + '">' + totalPages + '</button>';
            }

            paginationHtml += '<button class="px-3 py-1 text-sm border border-gray-300 rounded-md ' + (currentPage === totalPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50') + '" ' + (currentPage === totalPages ? 'disabled' : '') + ' data-page="' + (currentPage + 1) + '">Next</button>';
        }

        $('#paginationControls').html(paginationHtml);

        $('#paginationControls button:not(:disabled)').on('click', function() {
            currentPage = parseInt($(this).data('page'));
            loadData();
        });
    }

    function updatePaginationInfo(from, to, total) {
        $('#showingFrom').text(from);
        $('#showingTo').text(to);
        $('#totalRecords').text(total);
    }

    // Initialize sort icon
    updateSortIcons();
});

// Global functions for modal handling
function openBillDetailModal(billTypeId, billId, billRefNo) {
    // Close any open dropdowns
    $('.action-dropdown-menu').addClass('hidden');

    // Show modal with loading state
    $('#billDetailModal').removeClass('hidden');
    $('#billModalLoading').removeClass('hidden');
    $('#billModalContent').addClass('hidden');
    $('#billModalError').addClass('hidden');
    $('#billModalSuccess').addClass('hidden');
    $('#btnMakePayment').addClass('hidden');
    $('#insufficientBalanceWarning').addClass('hidden');
    $('#alreadySettledMsg').addClass('hidden');
    $('#notesInputSection').removeClass('hidden');
    $('#settlementNotes').val('');

    // Store bill info
    $('#modalAssessmentID').val(billId);
    $('#modalBillTypeID').val(billTypeId);

    // Fetch bill details via AJAX
    $.ajax({
        url: '{{ route("operation-manager.get-bill-details") }}',
        type: 'GET',
        data: {
            BillTypeID: billTypeId,
            BillID: billId
        },
        success: function(response) {
            $('#billModalLoading').addClass('hidden');

            if (response.success) {
                populateBillModal(response.data);
                $('#billModalContent').removeClass('hidden');
            } else {
                $('#billModalError').text(response.message || 'Failed to load bill details').removeClass('hidden');
            }
        },
        error: function(xhr, status, error) {
            $('#billModalLoading').addClass('hidden');
            $('#billModalError').text('Error loading bill details: ' + error).removeClass('hidden');
        }
    });
}

function populateBillModal(data) {
    // Store current bill data for settlement
    window.currentBillData = data;

    // Populate record details
    $('#modalTemplateType').text(data.billTypeId === 1 ? 'Assessment' : 'Service Bill');
    $('#modalBillDate').text(formatDate(data.billDate));
    $('#modalTaxPayerType').text(data.taxPayerTypeName || 'N/A');
    $('#modalTaxPayerName').text(data.taxPayerName || 'N/A');
    $('#modalDueDate').text(formatDate(data.dueDate));
    $('#modalNotes').html(data.notes || 'No notes available');
    $('#modalBillRef').text(data.billRefNo || 'N/A');
    $('#modalStatus').text(data.statusName || 'N/A');

    // Populate assessment rules table
    let rulesHtml = '';
    if (data.assessmentRules && data.assessmentRules.length > 0) {
        data.assessmentRules.forEach(function(rule) {
            const outstanding = (rule.AssessmentRuleAmount || 0) - (rule.SettledAmount || 0);
            rulesHtml += '<tr class="hover:bg-gray-50">';
            rulesHtml += '<td class="px-4 py-2 text-sm text-gray-900">' + (rule.AssessmentRuleName || 'N/A') + '</td>';
            rulesHtml += '<td class="px-4 py-2 text-sm text-gray-900 text-right">' + formatMoney(rule.AssessmentRuleAmount) + '</td>';
            rulesHtml += '<td class="px-4 py-2 text-sm text-gray-900 text-right">' + formatMoney(rule.SettledAmount) + '</td>';
            rulesHtml += '<td class="px-4 py-2 text-sm text-gray-900 text-right">' + formatMoney(outstanding) + '</td>';
            rulesHtml += '<td class="px-4 py-2 text-sm text-gray-900 text-center">' + (rule.TaxYear || 'N/A') + '</td>';
            rulesHtml += '</tr>';
        });
    } else {
        rulesHtml = '<tr><td colspan="5" class="px-4 py-4 text-center text-sm text-gray-500">No assessment rules found</td></tr>';
    }
    $('#modalAssessmentRules').html(rulesHtml);

    // Populate summary
    $('#modalTotalAmount').text(formatMoney(data.totalAmount));
    $('#modalTotalPaid').text(formatMoney(data.totalSettled));
    $('#modalOutstanding').text(formatMoney(data.totalAmount - data.totalSettled));
    $('#modalPoaBalance').text(formatMoney(data.walletBalance));
    $('#modalAmountToPay').text(formatMoney(data.amountToPay));

    // Handle payment button visibility based on conditions
    if (data.amountToPay <= 0) {
        // Already fully settled
        $('#alreadySettledMsg').removeClass('hidden');
        $('#notesInputSection').addClass('hidden');
        $('#btnMakePayment').addClass('hidden');
    } else if (data.amountToPay > data.walletBalance) {
        // Insufficient balance
        $('#insufficientBalanceWarning').removeClass('hidden');
        $('#insufficientBalanceMsg').text('Insufficient PoA Balance. Required: ' + formatMoney(data.amountToPay) + ', Available: ' + formatMoney(data.walletBalance));
        $('#btnMakePayment').addClass('hidden');
    } else {
        // Can make payment
        $('#btnMakePayment').removeClass('hidden');
    }
}

function closeBillDetailModal() {
    $('#billDetailModal').addClass('hidden');
    window.currentBillData = null;
}

function processSettlement() {
    if (!window.currentBillData) {
        $('#billModalError').text('No bill data available. Please try again.').removeClass('hidden');
        return;
    }

    const billTypeId = $('#modalBillTypeID').val();
    const billId = $('#modalAssessmentID').val();
    const notes = $('#settlementNotes').val();
    const amountToPay = window.currentBillData.amountToPay;

    // Confirm payment
    if (!confirm('Are you sure you want to make a payment of ' + formatMoney(amountToPay) + '?')) {
        return;
    }

    // Disable button and show loading
    $('#btnMakePayment').prop('disabled', true).text('Processing...');
    $('#billModalError').addClass('hidden');
    $('#billModalSuccess').addClass('hidden');

    $.ajax({
        url: '{{ route("operation-manager.process-settlement-ajax") }}',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            BillTypeID: billTypeId,
            BillID: billId,
            Notes: notes
        },
        success: function(response) {
            if (response.success) {
                $('#billModalSuccess').text(response.message || 'Settlement processed successfully!').removeClass('hidden');
                $('#billModalContent').addClass('hidden');
                $('#btnMakePayment').addClass('hidden');

                // Refresh the list after 2 seconds
                setTimeout(function() {
                    closeBillDetailModal();
                    window.refreshSettlementList();
                }, 2000);
            } else {
                $('#billModalError').text(response.message || 'Failed to process settlement').removeClass('hidden');
                $('#btnMakePayment').prop('disabled', false).text('Make Payment');
            }
        },
        error: function(xhr, status, error) {
            $('#billModalError').text('Error processing settlement: ' + error).removeClass('hidden');
            $('#btnMakePayment').prop('disabled', false).text('Make Payment');
        }
    });
}

function showPaymentHistory() {
    const billId = $('#modalAssessmentID').val();
    const billTypeId = $('#modalBillTypeID').val();

    $('#paymentHistoryModal').removeClass('hidden');
    $('#paymentHistoryContent').html('<p class="text-sm text-gray-500">Loading payment history...</p>');

    $.ajax({
        url: '{{ route("operation-manager.get-payment-details") }}',
        type: 'GET',
        data: {
            AssessmentID: billId,
            BillTypeID: billTypeId
        },
        success: function(response) {
            if (response.success && response.data && response.data.length > 0) {
                let html = '<div class="divide-y divide-gray-200">';
                response.data.forEach(function(payment) {
                    html += '<div class="py-3">';
                    html += '<div class="flex justify-between">';
                    html += '<span class="text-sm text-gray-600">' + payment.SettlementDate + '</span>';
                    html += '<span class="text-sm font-medium text-gray-900">' + payment.Amount + '</span>';
                    html += '</div>';
                    html += '<div class="text-xs text-gray-500 mt-1">' + payment.TransactionRefNo + '</div>';
                    html += '</div>';
                });
                html += '</div>';
                $('#paymentHistoryContent').html(html);
            } else {
                $('#paymentHistoryContent').html('<p class="text-sm text-gray-500">No payment history found.</p>');
            }
        },
        error: function() {
            $('#paymentHistoryContent').html('<p class="text-sm text-red-500">Error loading payment history.</p>');
        }
    });
}

function closePaymentHistoryModal() {
    $('#paymentHistoryModal').addClass('hidden');
}
</script>
@endpush