@extends('layouts.auth.app')

@section('title', 'PoA Operation List')

@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">PoA Operations List</h3>
                <p class="text-sm text-gray-500 mt-1">Payment on Account Operations</p>
            </div>
            <div>
                <button onclick="openTransferModal()" class="inline-flex items-center px-4 py-2 bg-teal-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-teal-700 focus:bg-teal-700 active:bg-teal-900 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <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="M12 4v16m8-8H4" />
                    </svg>
                    New Transfer
                </button>
            </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="poaOperationTable" 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">
                        Operation 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">
                        Operation Type
                        <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">
                        From Tax Payer
                        <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="3">
                        From
                        <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">
                        To Tax Payer
                        <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="5">
                        To
                        <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="6">
                        Amount
                        <span class="sort-icon ml-1"></span>
                    </th>
                </tr>
            </thead>
            <tbody id="poaTableBody" 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 POA operations 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>

<!-- PoA Transfer Modal -->
<div id="poaTransferModal" 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="closeTransferModal()"></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-3xl 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 Transfer</h3>
                    <button onclick="closeTransferModal()" 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="transferModalError" 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="transferModalSuccess" class="hidden mx-6 mt-4 p-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm"></div>

            <form id="poaTransferForm">
                @csrf
                <div class="bg-white px-6 py-4 max-h-[500px] overflow-y-auto">
                    <!-- FROM Section -->
                    <div class="mb-6">
                        <h4 class="text-md font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">From Tax Payer</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tax Payer Type <span class="text-red-500">*</span></label>
                                <select id="fromTaxPayerType" name="FromTaxPayerTypeID" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                                    <option value="">Select Tax Payer Type</option>
                                    <option value="1">Individual</option>
                                    <option value="2">Company</option>
                                    <option value="3">Government</option>
                                    <option value="4">Special</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tax Payer Name <span class="text-red-500">*</span></label>
                                <input type="hidden" id="fromTaxPayerID" name="FromTaxPayerID" value="">
                                <input type="text" id="fromTaxPayerName" name="FromTaxPayerName" placeholder="Search Tax Payer..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" autocomplete="off" required>
                                <div id="fromTaxPayerSuggestions" class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg hidden max-h-48 overflow-y-auto"></div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Transaction Ref No <span class="text-red-500">*</span></label>
                                <div class="flex space-x-2">
                                    <input type="text" id="transactionRefNo" name="TransactionRefNo" placeholder="Enter Transaction Ref No" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                                    <button type="button" id="btnConfirmRef" onclick="confirmTransactionRef()" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
                                        Confirm
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">From Wallet Balance</label>
                                <div class="px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-gray-700">
                                    <span id="fromWalletBalance">0.00</span>
                                </div>
                            </div>
                        </div>

                        <!-- Transaction Details (shown after confirmation) -->
                        <div id="transactionDetails" class="hidden mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                            <div class="grid grid-cols-3 gap-4 text-sm">
                                <div>
                                    <span class="text-gray-600">Received Amount:</span>
                                    <div class="font-semibold text-gray-900" id="receivedAmount">0.00</div>
                                </div>
                                <div>
                                    <span class="text-gray-600">Transferred Amount:</span>
                                    <div class="font-semibold text-gray-900" id="transferredAmount">0.00</div>
                                </div>
                                <div>
                                    <span class="text-gray-600">Available Balance:</span>
                                    <div class="font-semibold text-green-600" id="availableBalance">0.00</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- TO Section -->
                    <div class="mb-6">
                        <h4 class="text-md font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">To Tax Payer</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tax Payer Type <span class="text-red-500">*</span></label>
                                <select id="toTaxPayerType" name="ToTaxPayerTypeID" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                                    <option value="">Select Tax Payer Type</option>
                                    <option value="1">Individual</option>
                                    <option value="2">Company</option>
                                    <option value="3">Government</option>
                                    <option value="4">Special</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tax Payer Name <span class="text-red-500">*</span></label>
                                <input type="hidden" id="toTaxPayerID" name="ToTaxPayerID" value="">
                                <input type="text" id="toTaxPayerName" name="ToTaxPayerName" placeholder="Search Tax Payer..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" autocomplete="off" required>
                                <div id="toTaxPayerSuggestions" class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg hidden max-h-48 overflow-y-auto"></div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">To Wallet Balance</label>
                                <div class="px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-gray-700">
                                    <span id="toWalletBalance">0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Transfer Amount Section -->
                    <div class="mb-4">
                        <h4 class="text-md font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">Transfer Amount</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Amount <span class="text-red-500">*</span></label>
                                <input type="number" id="transferAmount" name="Amount" placeholder="Enter Transfer Amount" step="0.01" min="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                    <button type="button" onclick="closeTransferModal()" 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="btnSaveTransfer" onclick="saveTransfer()" class="px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        Save Transfer
                    </button>
                </div>
            </form>
        </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';

    // Transfer modal state
    let transferState = {
        fromTaxPayerID: 0,
        fromTaxPayerTypeID: 0,
        toTaxPayerID: 0,
        toTaxPayerTypeID: 0,
        paymentAccountID: 0,
        transactionRefNo: '',
        availableBalance: 0,
        isConfirmed: false
    };

    // 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');
        $('#poaTableBody').html('');
        $('#emptyState').addClass('hidden');

        $.ajax({
            url: '{{ route("operation-manager.poa-operation-list-data") }}',
            type: 'GET',
            data: {
                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 operations:', error);
            }
        });
    }

    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 '';
        }
    }

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

    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.OperationDate) + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">' + (row.Operation_TypesName || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 hidden lg:table-cell">' + (row.FromTaxPayer || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">' + (row.FromName || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 hidden lg:table-cell">' + (row.ToTaxPayer || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">' + (row.ToName || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">' + formatMoney(row.Amount) + '</td>';
            html += '</tr>';
        });
        $('#poaTableBody').html(html);
    }

    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();

    // ========== TRANSFER MODAL FUNCTIONS ==========

    // Tax payer type change handlers
    $('#fromTaxPayerType').on('change', function() {
        resetFromTaxPayer();
    });

    $('#toTaxPayerType').on('change', function() {
        resetToTaxPayer();
    });

    // Tax payer search - FROM
    let fromSearchTimeout;
    $('#fromTaxPayerName').on('keyup', function() {
        clearTimeout(fromSearchTimeout);
        const query = $(this).val();
        const typeId = $('#fromTaxPayerType').val();

        if (query.length < 2 || !typeId) {
            $('#fromTaxPayerSuggestions').addClass('hidden').html('');
            return;
        }

        fromSearchTimeout = setTimeout(function() {
            searchTaxPayers('from', typeId, query);
        }, 300);
    });

    // Tax payer search - TO
    let toSearchTimeout;
    $('#toTaxPayerName').on('keyup', function() {
        clearTimeout(toSearchTimeout);
        const query = $(this).val();
        const typeId = $('#toTaxPayerType').val();

        if (query.length < 2 || !typeId) {
            $('#toTaxPayerSuggestions').addClass('hidden').html('');
            return;
        }

        toSearchTimeout = setTimeout(function() {
            searchTaxPayers('to', typeId, query);
        }, 300);
    });

    // Close suggestions when clicking outside
    $(document).on('click', function(e) {
        if (!$(e.target).closest('#fromTaxPayerName, #fromTaxPayerSuggestions').length) {
            $('#fromTaxPayerSuggestions').addClass('hidden');
        }
        if (!$(e.target).closest('#toTaxPayerName, #toTaxPayerSuggestions').length) {
            $('#toTaxPayerSuggestions').addClass('hidden');
        }
    });

    window.searchTaxPayers = function(target, typeId, query) {
        $.ajax({
            url: '{{ route("operation-manager.search-taxpayers") }}',
            type: 'GET',
            data: {
                TaxPayerTypeID: typeId,
                query: query
            },
            success: function(response) {
                const suggestionsDiv = target === 'from' ? '#fromTaxPayerSuggestions' : '#toTaxPayerSuggestions';

                if (response.data && response.data.length > 0) {
                    let html = '';
                    response.data.forEach(function(item) {
                        html += '<div class="taxpayer-suggestion px-4 py-2 hover:bg-gray-100 cursor-pointer text-sm" data-id="' + item.id + '" data-name="' + item.text + '" data-target="' + target + '">' + item.text + '</div>';
                    });
                    $(suggestionsDiv).html(html).removeClass('hidden');
                } else {
                    $(suggestionsDiv).html('<div class="px-4 py-2 text-sm text-gray-500">No results found</div>').removeClass('hidden');
                }
            },
            error: function() {
                console.error('Error searching taxpayers');
            }
        });
    };

    // Handle suggestion click
    $(document).on('click', '.taxpayer-suggestion', function() {
        const target = $(this).data('target');
        const id = $(this).data('id');
        const name = $(this).data('name');

        if (target === 'from') {
            $('#fromTaxPayerID').val(id);
            $('#fromTaxPayerName').val(name);
            $('#fromTaxPayerSuggestions').addClass('hidden');
            transferState.fromTaxPayerID = id;
            transferState.fromTaxPayerTypeID = $('#fromTaxPayerType').val();
            getWalletBalance('from', transferState.fromTaxPayerTypeID, id);
        } else {
            $('#toTaxPayerID').val(id);
            $('#toTaxPayerName').val(name);
            $('#toTaxPayerSuggestions').addClass('hidden');
            transferState.toTaxPayerID = id;
            transferState.toTaxPayerTypeID = $('#toTaxPayerType').val();
            getWalletBalance('to', transferState.toTaxPayerTypeID, id);
        }

        checkEnableSaveButton();
    });

    window.getWalletBalance = function(target, typeId, taxPayerId) {
        $.ajax({
            url: '{{ route("operation-manager.get-wallet-balance") }}',
            type: 'GET',
            data: {
                TaxPayerTypeID: typeId,
                TaxPayerID: taxPayerId
            },
            success: function(response) {
                const balanceSpan = target === 'from' ? '#fromWalletBalance' : '#toWalletBalance';
                if (response.success) {
                    $(balanceSpan).text(formatMoney(response.balance));
                } else {
                    $(balanceSpan).text('0.00');
                }
            },
            error: function() {
                console.error('Error getting wallet balance');
            }
        });
    };

    window.confirmTransactionRef = function() {
        const refNo = $('#transactionRefNo').val();
        const fromTypeId = $('#fromTaxPayerType').val();
        const fromTaxPayerId = $('#fromTaxPayerID').val();

        if (!refNo) {
            showTransferError('Please enter Transaction Ref No');
            return;
        }

        if (!fromTypeId || !fromTaxPayerId) {
            showTransferError('Please select From Tax Payer first');
            return;
        }

        $('#btnConfirmRef').prop('disabled', true).text('Confirming...');

        $.ajax({
            url: '{{ route("operation-manager.validate-transaction-ref") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                TransactionRefNo: refNo,
                TaxPayerTypeID: fromTypeId,
                TaxPayerID: fromTaxPayerId
            },
            success: function(response) {
                $('#btnConfirmRef').prop('disabled', false).text('Confirm');

                if (response.success) {
                    transferState.paymentAccountID = response.paymentAccountID;
                    transferState.transactionRefNo = refNo;
                    transferState.availableBalance = response.availableBalance;
                    transferState.isConfirmed = true;

                    $('#receivedAmount').text(formatMoney(response.receivedAmount));
                    $('#transferredAmount').text(formatMoney(response.transferredAmount));
                    $('#availableBalance').text(formatMoney(response.availableBalance));
                    $('#transactionDetails').removeClass('hidden');

                    hideTransferError();
                    checkEnableSaveButton();
                } else {
                    showTransferError(response.message || 'Invalid Transaction Ref No');
                    transferState.isConfirmed = false;
                    $('#transactionDetails').addClass('hidden');
                }
            },
            error: function() {
                $('#btnConfirmRef').prop('disabled', false).text('Confirm');
                showTransferError('Error validating transaction reference');
            }
        });
    };

    window.resetFromTaxPayer = function() {
        $('#fromTaxPayerID').val('');
        $('#fromTaxPayerName').val('');
        $('#fromWalletBalance').text('0.00');
        $('#transactionRefNo').val('');
        $('#transactionDetails').addClass('hidden');
        transferState.fromTaxPayerID = 0;
        transferState.fromTaxPayerTypeID = 0;
        transferState.paymentAccountID = 0;
        transferState.transactionRefNo = '';
        transferState.availableBalance = 0;
        transferState.isConfirmed = false;
        checkEnableSaveButton();
    };

    window.resetToTaxPayer = function() {
        $('#toTaxPayerID').val('');
        $('#toTaxPayerName').val('');
        $('#toWalletBalance').text('0.00');
        transferState.toTaxPayerID = 0;
        transferState.toTaxPayerTypeID = 0;
        checkEnableSaveButton();
    };

    window.checkEnableSaveButton = function() {
        const canSave = transferState.isConfirmed &&
                       transferState.fromTaxPayerID > 0 &&
                       transferState.toTaxPayerID > 0 &&
                       transferState.fromTaxPayerID != transferState.toTaxPayerID;
        $('#btnSaveTransfer').prop('disabled', !canSave);
    };

    window.saveTransfer = function() {
        const amount = parseFloat($('#transferAmount').val());

        if (!amount || amount <= 0) {
            showTransferError('Please enter a valid transfer amount');
            return;
        }

        if (amount > transferState.availableBalance) {
            showTransferError('Insufficient balance. Available: ' + formatMoney(transferState.availableBalance));
            return;
        }

        if (transferState.fromTaxPayerID == transferState.toTaxPayerID) {
            showTransferError('Cannot transfer to the same taxpayer');
            return;
        }

        $('#btnSaveTransfer').prop('disabled', true).text('Processing...');

        $.ajax({
            url: '{{ route("operation-manager.execute-poa-transfer") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                FromTaxPayerTypeID: transferState.fromTaxPayerTypeID,
                FromTaxPayerID: transferState.fromTaxPayerID,
                FromTaxPayerName: $('#fromTaxPayerName').val(),
                ToTaxPayerTypeID: transferState.toTaxPayerTypeID,
                ToTaxPayerID: transferState.toTaxPayerID,
                ToTaxPayerName: $('#toTaxPayerName').val(),
                PaymentAccountID: transferState.paymentAccountID,
                TransactionRefNo: transferState.transactionRefNo,
                Amount: amount
            },
            success: function(response) {
                $('#btnSaveTransfer').prop('disabled', false).text('Save Transfer');

                if (response.success) {
                    showTransferSuccess(response.message || 'Transfer completed successfully');
                    setTimeout(function() {
                        closeTransferModal();
                        loadData(); // Refresh table
                    }, 2000);
                } else {
                    showTransferError(response.message || 'Transfer failed');
                }
            },
            error: function(xhr) {
                $('#btnSaveTransfer').prop('disabled', false).text('Save Transfer');
                let errorMsg = 'Error processing transfer';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                showTransferError(errorMsg);
            }
        });
    };

    window.showTransferError = function(message) {
        $('#transferModalError').text(message).removeClass('hidden');
        $('#transferModalSuccess').addClass('hidden');
    };

    window.hideTransferError = function() {
        $('#transferModalError').addClass('hidden');
    };

    window.showTransferSuccess = function(message) {
        $('#transferModalSuccess').text(message).removeClass('hidden');
        $('#transferModalError').addClass('hidden');
    };

    window.openTransferModal = function() {
        resetTransferForm();
        $('#poaTransferModal').removeClass('hidden');
    };

    window.closeTransferModal = function() {
        $('#poaTransferModal').addClass('hidden');
        resetTransferForm();
    };

    window.resetTransferForm = function() {
        $('#poaTransferForm')[0].reset();
        $('#fromTaxPayerID').val('');
        $('#toTaxPayerID').val('');
        $('#fromWalletBalance').text('0.00');
        $('#toWalletBalance').text('0.00');
        $('#transactionDetails').addClass('hidden');
        $('#transferModalError').addClass('hidden');
        $('#transferModalSuccess').addClass('hidden');
        $('#btnSaveTransfer').prop('disabled', true);

        transferState = {
            fromTaxPayerID: 0,
            fromTaxPayerTypeID: 0,
            toTaxPayerID: 0,
            toTaxPayerTypeID: 0,
            paymentAccountID: 0,
            transactionRefNo: '',
            availableBalance: 0,
            isConfirmed: false
        };
    };

    // ========== AUTO-OPEN MODAL WITH PRE-POPULATED DATA ==========
    // Check URL parameters for action=transfer with taxpayer info
    function checkUrlParametersForTransfer() {
        const urlParams = new URLSearchParams(window.location.search);
        const action = urlParams.get('action');
        const taxPayerId = urlParams.get('taxpayerid');
        const taxPayerTypeId = urlParams.get('taxpayertypeid');

        if (action === 'transfer' && taxPayerId && taxPayerTypeId) {
            // Open the modal first
            openTransferModal();

            // Set the From Tax Payer Type
            $('#fromTaxPayerType').val(taxPayerTypeId);

            // Update transfer state
            transferState.fromTaxPayerTypeID = parseInt(taxPayerTypeId);
            transferState.fromTaxPayerID = parseInt(taxPayerId);

            // Fetch taxpayer details and pre-populate the name
            fetchTaxPayerDetails(taxPayerTypeId, taxPayerId);

            // Clean up the URL (remove query params) without page refresh
            const cleanUrl = window.location.pathname;
            window.history.replaceState({}, document.title, cleanUrl);
        }
    }

    // Fetch taxpayer details by ID and type
    function fetchTaxPayerDetails(taxPayerTypeId, taxPayerId) {
        $.ajax({
            url: '{{ route("operation-manager.get-taxpayer-details") }}',
            type: 'GET',
            data: {
                TaxPayerTypeID: taxPayerTypeId,
                TaxPayerID: taxPayerId
            },
            success: function(response) {
                if (response.success && response.data) {
                    // Pre-populate the From Tax Payer fields
                    $('#fromTaxPayerID').val(taxPayerId);
                    $('#fromTaxPayerName').val(response.data.TaxPayerName);

                    // Get wallet balance
                    getWalletBalance('from', taxPayerTypeId, taxPayerId);
                }
            },
            error: function(xhr) {
                console.error('Error fetching taxpayer details:', xhr);
            }
        });
    }

    // Run the check after page load
    checkUrlParametersForTransfer();
});
</script>
@endpush