@extends('layouts.auth.app')

@section('title', 'Process TCC Requests')

@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">Process TCC Requests</h3>
                <p class="text-sm text-gray-500 mt-1">Tax Clearance Certificate Request Management</p>
            </div>
            <div>
                <button onclick="openAddRequestModal()" 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 TCC Request
                </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="tccRequestTable" 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">
                        Request Ref No
                        <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">
                        Tax Year
                        <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="2">
                        Tax Payer Name
                        <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="3">
                        Tax Payer RIN
                        <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">
                        Mobile Number
                        <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">
                        Request 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="6">
                        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="tccTableBody" 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 TCC requests 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>

<!-- Add TCC Request Modal -->
<div id="addRequestModal" 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="closeAddRequestModal()"></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">Create TCC Request</h3>
                    <button onclick="closeAddRequestModal()" 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="addRequestModalError" 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="addRequestModalSuccess" 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="addRequestForm">
                @csrf
                <div class="bg-white px-6 py-4">
                    <!-- Tax Payer Type -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Tax Payer Type <span class="text-red-500">*</span></label>
                        <select id="taxPayerType" name="TaxPayerTypeID" 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>

                    <!-- Tax Payer Search -->
                    <div class="mb-4 relative">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Tax Payer <span class="text-red-500">*</span></label>
                        <input type="hidden" id="taxPayerID" name="TaxPayerID" value="">
                        <input type="text" id="taxPayerName" name="TaxPayerName" 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="taxPayerSuggestions" 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>

                    <!-- Tax Payer Info Display -->
                    <div id="taxPayerInfoDisplay" class="hidden mb-4 p-3 bg-gray-50 border border-gray-200 rounded-lg">
                        <div class="grid grid-cols-2 gap-2 text-sm">
                            <div>
                                <span class="text-gray-500">RIN:</span>
                                <span id="displayRIN" class="font-medium text-gray-900"></span>
                            </div>
                            <div>
                                <span class="text-gray-500">Mobile:</span>
                                <span id="displayMobile" class="font-medium text-gray-900"></span>
                            </div>
                            <div class="col-span-2">
                                <span class="text-gray-500">Tax Office:</span>
                                <span id="displayTaxOffice" class="font-medium text-gray-900"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Tax Year -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Tax Year <span class="text-red-500">*</span></label>
                        <select id="taxYear" name="TaxYear" 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 Year</option>
                            @php
                                $currentYear = date('Y');
                                for($year = $currentYear; $year >= 2020; $year--) {
                                    echo "<option value=\"$year\">$year</option>";
                                }
                            @endphp
                        </select>
                    </div>
                </div>

                <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                    <button type="button" onclick="closeAddRequestModal()" 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="submit" id="btnCreateRequest" 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">
                        Create Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Revoke TCC Modal -->
<div id="revokeModal" 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="closeRevokeModal()"></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">Revoke TCC</h3>
                    <button onclick="closeRevokeModal()" 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="revokeModalError" class="hidden mx-6 mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>

            <form id="revokeForm">
                @csrf
                <input type="hidden" id="revokeRequestId" name="RequestId" value="">
                <div class="bg-white px-6 py-4">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Reason for Revocation <span class="text-red-500">*</span></label>
                        <textarea id="revokeReason" name="Reason" rows="4" 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 reason for revoking this TCC..." required></textarea>
                    </div>
                </div>

                <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                    <button type="button" onclick="closeRevokeModal()" 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="submit" id="btnRevoke" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
                        Revoke TCC
                    </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 = 5; // Request Date
    let sortDirection = 'desc';

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

        $.ajax({
            url: '{{ route("process-tcc-request.load-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 TCC requests:', 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 getStatusBadge(statusId, statusName) {
        const statusClasses = {
            1: 'bg-yellow-100 text-yellow-800', // In Progress
            2: 'bg-blue-100 text-blue-800',     // Validated
            3: 'bg-green-100 text-green-800',   // Approved/Issued
            4: 'bg-red-100 text-red-800',       // Rejected
            5: 'bg-gray-100 text-gray-800',     // On Hold
            9: 'bg-yellow-100 text-yellow-800', // In Progress
            15: 'bg-red-100 text-red-800'       // Revoked
        };
        const badgeClass = statusClasses[statusId] || 'bg-gray-100 text-gray-800';
        return '<span class="px-2 py-1 text-xs font-medium rounded-full ' + badgeClass + '">' + (statusName || 'Unknown') + '</span>';
    }

    function renderTable(data) {
        let html = '';
        data.forEach(function(row) {
            const isRevoked = row.StatusID === 15;
            html += '<tr class="hover:bg-gray-50">';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">' + (row.RequestRefNo || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">' + (row.TaxYear || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">' + (row.TaxPayerName || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 hidden lg:table-cell">' + (row.TaxPayerRIN || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 hidden lg:table-cell">' + (row.MobileNumber || '') + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">' + formatDate(row.RequestDate) + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-sm">' + getStatusBadge(row.StatusID, row.StatusName) + '</td>';
            html += '<td class="px-6 py-4 whitespace-nowrap text-center">';
            html += '<div class="relative inline-block text-left" x-data="{ open: false }">';
            html += '<button @click="open = !open" type="button" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm 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 <svg class="ml-2 h-4 w-4" 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>';
            html += '</button>';
            html += '<div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">';
            html += '<div class="py-1">';

            // Process Request - only show if not revoked (matches .NET: StatusID !== 15)
            if (!isRevoked) {
                html += '<a href="{{ url("ProcessTCCRequest/Details") }}/' + row.TCCRequestID + '" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">';
                html += '<svg class="inline w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>';
                html += 'Process Request';
                html += '</a>';
            }

            // Revoke TCC - only show for issued TCCs (StatusID 3 or 11) that are not already revoked
            if (!isRevoked && (row.StatusID === 3 || row.StatusID === 11)) {
                html += '<button onclick="openRevokeModal(' + row.TCCRequestID + ')" class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">';
                html += '<svg class="inline w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>';
                html += 'Revoke TCC';
                html += '</button>';
            }

            html += '</div></div></div>';
            html += '</td>';
            html += '</tr>';
        });
        $('#tccTableBody').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();

    // ========== ADD REQUEST MODAL FUNCTIONS ==========

    // Tax payer type change handler
    $('#taxPayerType').on('change', function() {
        resetTaxPayerSelection();
    });

    // Tax payer search with debounce
    let taxPayerSearchTimeout;
    $('#taxPayerName').on('keyup', function() {
        clearTimeout(taxPayerSearchTimeout);
        const query = $(this).val();
        const typeId = $('#taxPayerType').val();

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

        taxPayerSearchTimeout = setTimeout(function() {
            searchTaxPayers(typeId, query);
        }, 300);
    });

    function searchTaxPayers(typeId, query) {
        $.ajax({
            url: '{{ route("operation-manager.search-taxpayers") }}',
            type: 'GET',
            data: {
                TaxPayerTypeID: typeId,
                query: query
            },
            success: function(response) {
                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-rin="' + (item.rin || '') + '" data-mobile="' + (item.mobile || '') + '" data-taxoffice="' + (item.taxOffice || '') + '">' + item.text + '</div>';
                    });
                    $('#taxPayerSuggestions').html(html).removeClass('hidden');
                } else {
                    $('#taxPayerSuggestions').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 id = $(this).data('id');
        const name = $(this).data('name');
        const rin = $(this).data('rin');
        const mobile = $(this).data('mobile');
        const taxOffice = $(this).data('taxoffice');

        $('#taxPayerID').val(id);
        $('#taxPayerName').val(name);
        $('#taxPayerSuggestions').addClass('hidden');

        // Show tax payer info
        $('#displayRIN').text(rin || 'N/A');
        $('#displayMobile').text(mobile || 'N/A');
        $('#displayTaxOffice').text(taxOffice || 'N/A');
        $('#taxPayerInfoDisplay').removeClass('hidden');
    });

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

    function resetTaxPayerSelection() {
        $('#taxPayerID').val('');
        $('#taxPayerName').val('');
        $('#taxPayerInfoDisplay').addClass('hidden');
        $('#taxPayerSuggestions').addClass('hidden');
    }

    // Form submission
    $('#addRequestForm').on('submit', function(e) {
        e.preventDefault();

        const taxPayerId = $('#taxPayerID').val();
        const taxYear = $('#taxYear').val();

        if (!taxPayerId) {
            showAddRequestError('Please select a Tax Payer');
            return;
        }

        if (!taxYear) {
            showAddRequestError('Please select a Tax Year');
            return;
        }

        $('#btnCreateRequest').prop('disabled', true).text('Creating...');

        $.ajax({
            url: '{{ route("process-tcc-request.store") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                TaxPayerID: taxPayerId,
                TaxPayerTypeID: $('#taxPayerType').val(),
                TaxYear: taxYear
            },
            success: function(response) {
                $('#btnCreateRequest').prop('disabled', false).text('Create Request');

                if (response.success) {
                    showAddRequestSuccess(response.message || 'TCC Request created successfully');
                    setTimeout(function() {
                        closeAddRequestModal();
                        loadData();
                        // Optionally redirect to details page
                        if (response.requestId) {
                            window.location.href = '{{ url("ProcessTCCRequest/Details") }}/' + response.requestId;
                        }
                    }, 1500);
                } else {
                    showAddRequestError(response.message || 'Failed to create TCC request');
                }
            },
            error: function(xhr) {
                $('#btnCreateRequest').prop('disabled', false).text('Create Request');
                let errorMsg = 'Error creating TCC request';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                showAddRequestError(errorMsg);
            }
        });
    });

    window.openAddRequestModal = function() {
        resetAddRequestForm();
        $('#addRequestModal').removeClass('hidden');
    };

    window.closeAddRequestModal = function() {
        $('#addRequestModal').addClass('hidden');
        resetAddRequestForm();
    };

    function resetAddRequestForm() {
        $('#addRequestForm')[0].reset();
        $('#taxPayerID').val('');
        $('#taxPayerInfoDisplay').addClass('hidden');
        $('#taxPayerSuggestions').addClass('hidden');
        $('#addRequestModalError').addClass('hidden');
        $('#addRequestModalSuccess').addClass('hidden');
    }

    function showAddRequestError(message) {
        $('#addRequestModalError').text(message).removeClass('hidden');
        $('#addRequestModalSuccess').addClass('hidden');
    }

    function showAddRequestSuccess(message) {
        $('#addRequestModalSuccess').text(message).removeClass('hidden');
        $('#addRequestModalError').addClass('hidden');
    }

    // ========== REVOKE MODAL FUNCTIONS ==========

    window.openRevokeModal = function(requestId) {
        $('#revokeRequestId').val(requestId);
        $('#revokeReason').val('');
        $('#revokeModalError').addClass('hidden');
        $('#revokeModal').removeClass('hidden');
    };

    window.closeRevokeModal = function() {
        $('#revokeModal').addClass('hidden');
        $('#revokeRequestId').val('');
        $('#revokeReason').val('');
        $('#revokeModalError').addClass('hidden');
    };

    $('#revokeForm').on('submit', function(e) {
        e.preventDefault();

        const requestId = $('#revokeRequestId').val();
        const reason = $('#revokeReason').val();

        if (!reason || reason.trim() === '') {
            $('#revokeModalError').text('Please enter a reason for revocation').removeClass('hidden');
            return;
        }

        $('#btnRevoke').prop('disabled', true).text('Revoking...');

        $.ajax({
            url: '{{ route("process-tcc-request.revoke") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                RequestId: requestId,
                Reason: reason
            },
            success: function(response) {
                $('#btnRevoke').prop('disabled', false).text('Revoke TCC');

                if (response.success) {
                    closeRevokeModal();
                    loadData();
                    showAlert('success', response.message || 'TCC revoked successfully');
                } else {
                    $('#revokeModalError').text(response.message || 'Failed to revoke TCC').removeClass('hidden');
                }
            },
            error: function(xhr) {
                $('#btnRevoke').prop('disabled', false).text('Revoke TCC');
                let errorMsg = 'Error revoking TCC';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                $('#revokeModalError').text(errorMsg).removeClass('hidden');
            }
        });
    });

    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'bg-green-50 border-green-200 text-green-700' : 'bg-red-50 border-red-200 text-red-700';
        const alertHtml = '<div class="mx-6 mt-4 p-4 border rounded-lg ' + alertClass + '">' + message + '</div>';
        $('#alertContainer').html(alertHtml);
        setTimeout(function() {
            $('#alertContainer').html('');
        }, 5000);
    }
});
</script>
@endpush