@extends('layouts.auth.app')

@section('title', 'Individual Taxpayers')

@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">Individual Taxpayers</h3>
                <p class="text-sm text-gray-500 mt-1">Manage and view individual taxpayer information</p>
            </div>
@include('components.taxpayer.add-new-taxpayer-modal', ['taxpayerType' => 'individual'])
        </div>
    </div>

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

    <!-- Table -->
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">RIN</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NIN</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                    {{-- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> --}}
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Payment</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                </tr>
            </thead>
            <tbody id="taxpayerTableBody" class="divide-y divide-gray-200">
                <!-- Data will be loaded here via AJAX -->
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
        <div class="flex items-center justify-between">
            <p class="text-sm text-gray-700">
                Showing <span id="showingFrom" class="font-medium">0</span> to <span id="showingTo" class="font-medium">0</span> of <span id="totalRecords" class="font-medium">0</span> results
            </p>

            <div class="flex items-center space-x-4">
                <!-- 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="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>

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


<!-- View Details Modal -->
<div id="viewModal" 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="closeViewModal()"></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-2xl 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">Taxpayer Details</h3>
                    <button onclick="closeViewModal()" 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 id="modalContent" class="bg-white px-6 py-4">
                <!-- Content will be loaded here -->
            </div>

            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between">
                <p class="text-sm text-gray-500">Showing snapshot information</p>
                <div class="flex space-x-3">
                    <button onclick="closeViewModal()" 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>
                    <button onclick="viewFullDetails()" class="px-4 py-2 text-sm font-medium text-white bg-teal-600 border border-transparent rounded-lg hover:bg-teal-700 transition-colors flex items-center space-x-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                        <span>See Full Details</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
let currentPage = 1;
let itemsPerPage = 10;
let searchQuery = '';
let sortColumn = 1; // Default sort by IndividualRIN
let sortDirection = 'asc';
let filteredData = [];
let currentTaxpayerId = null;
let currentTaxpayerRIN = null;


// Load initial data
document.addEventListener('DOMContentLoaded', function() {
    loadData();

    // Search functionality with debounce
    let searchTimeout;
    document.getElementById('searchInput').addEventListener('input', function(e) {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            searchQuery = e.target.value;
            currentPage = 1;
            loadData();
        }, 500); // 500ms debounce
    });

    // Items per page change
    document.getElementById('itemsPerPage').addEventListener('change', function(e) {
        itemsPerPage = parseInt(e.target.value);
        currentPage = 1;
        loadData();
    });

    // Add table header click handlers for sorting
    addSortHandlers();

    // Auto-open Add New Taxpayer modal if openModal=1 is in URL
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('openModal') === '1') {
        // Small delay to ensure modal component is ready
        setTimeout(function() {
            if (typeof openAddTaxpayerModal === 'function') {
                openAddTaxpayerModal();
            }
            // Clean up URL (remove the query parameter)
            const cleanUrl = window.location.pathname;
            window.history.replaceState({}, document.title, cleanUrl);
        }, 300);
    }
});

function addSortHandlers() {
    const headers = document.querySelectorAll('thead th');
    const sortableColumns = [0, 1, 2, 3, 4, 5, 6, 7, 8]; // All columns are sortable

    headers.forEach((header, index) => {
        if (sortableColumns.includes(index)) {
            header.style.cursor = 'pointer';
            header.addEventListener('click', function() {
                if (sortColumn === index) {
                    sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
                } else {
                    sortColumn = index;
                    sortDirection = 'asc';
                }
                updateSortIndicators();
                loadData();
            });
        }
    });
}

function updateSortIndicators() {
    const headers = document.querySelectorAll('thead th');
    headers.forEach((header, index) => {
        // Remove existing sort indicators
        header.classList.remove('sort-asc', 'sort-desc');
        const existingIcon = header.querySelector('.sort-icon');
        if (existingIcon) existingIcon.remove();

        // Add sort indicator to current column
        if (index === sortColumn) {
            const icon = document.createElement('span');
            icon.className = 'sort-icon ml-1';
            icon.innerHTML = sortDirection === 'asc' ? '▲' : '▼';
            header.appendChild(icon);
        }
    });
}

function loadData() {
    // Show loading state
    const tbody = document.getElementById('taxpayerTableBody');
    tbody.innerHTML = '<tr><td colspan="9" class="text-center py-4">Loading...</td></tr>';

    const start = (currentPage - 1) * itemsPerPage;

    fetch('{{ route("capture.individual.load-data") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            draw: 1,
            start: start,
            length: itemsPerPage,
            search: { value: searchQuery },
            order: [{ column: sortColumn, dir: sortDirection }]
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            tbody.innerHTML = '<tr><td colspan="9" class="text-center py-4 text-red-600">Error: ' + data.error + '</td></tr>';
            return;
        }

        if (!data.data || data.data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="9" class="text-center py-4">No records found</td></tr>';
            updatePaginationInfo(0, 0, 0);
             filteredData = []; // Clear the data
            return;
        }

         filteredData = data.data; // Store the current page data
        renderTable(data.data);
        updatePaginationInfo(start + 1, start + data.data.length, data.recordsFiltered);
        renderPagination(data.recordsFiltered);
    })
    .catch(error => {
        console.error('Error loading data:', error);
        tbody.innerHTML = '<tr><td colspan="9" class="text-center py-4 text-red-600">Error loading data</td></tr>';
        filteredData = []; // Clear the data on error
    });
}

function renderTable(data) {
    const tbody = document.getElementById('taxpayerTableBody');
    tbody.innerHTML = data.map(item => `
        <tr class="bg-white hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.rin || ''}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.name || ''}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.nin || ''}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.phone || ''}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.email || ''}</td>

            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.lastPayment || 'N/A'}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.amount || 'N/A'}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <button onclick="viewDetails(${item.id})" class="text-teal-600 hover:text-teal-900 transition-colors duration-200" title="View Details">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </button>
            </td>
        </tr>
    `).join('');
}

function filterData(searchQuery) {
    if (!searchQuery) {
        filteredData = allData;
    } else {
        const query = searchQuery.toLowerCase();
        filteredData = allData.filter(item => {
            return Object.values(item).some(value =>
                value && value.toString().toLowerCase().includes(query)
            );
        });
    }
    totalRecords = filteredData.length;
    currentPage = 1;
    renderTable();
}


function updatePaginationInfo(from, to, total) {
    document.getElementById('showingFrom').textContent = from;
    document.getElementById('showingTo').textContent = to;
    document.getElementById('totalRecords').textContent = total;
}

function renderPagination(totalRecords) {
    const totalPages = Math.ceil(totalRecords / itemsPerPage);
    const paginationControls = document.getElementById('paginationControls');

    if (totalPages === 0) {
        paginationControls.innerHTML = '';
        return;
    }

    let html = `
        <button onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}
            class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
            Previous
        </button>
    `;

    const pages = getPageNumbers(totalPages);
    pages.forEach(page => {
        if (page === '...') {
            html += `<span class="px-3 py-1 text-sm text-gray-500">...</span>`;
        } else {
            html += `
                <button onclick="changePage(${page})"
                    class="px-3 py-1 text-sm border rounded-md transition-colors ${page === currentPage ? 'bg-teal-600 text-white border-teal-600' : 'bg-white border-gray-300 hover:bg-gray-50'}">
                    ${page}
                </button>
            `;
        }
    });

    html += `
        <button onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}
            class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
            Next
        </button>
    `;

    paginationControls.innerHTML = html;
}

function getPageNumbers(totalPages) {
    const pages = [];
    const maxVisible = 5;

    if (totalPages <= maxVisible) {
        for (let i = 1; i <= totalPages; i++) pages.push(i);
    } else {
        if (currentPage <= 3) {
            for (let i = 1; i <= 4; i++) pages.push(i);
            pages.push('...');
            pages.push(totalPages);
        } else if (currentPage >= totalPages - 2) {
            pages.push(1);
            pages.push('...');
            for (let i = totalPages - 3; i <= totalPages; i++) pages.push(i);
        } else {
            pages.push(1);
            pages.push('...');
            for (let i = currentPage - 1; i <= currentPage + 1; i++) pages.push(i);
            pages.push('...');
            pages.push(totalPages);
        }
    }

    return pages;
}

function changePage(page) {
    const totalPages = Math.ceil(parseInt(document.getElementById('totalRecords').textContent) / itemsPerPage);
    if (page >= 1 && page <= totalPages) {
        currentPage = page;
        loadData();
    }
}

function viewDetails(id) {
    currentTaxpayerId = id;

    // Find the taxpayer from the already loaded data
    const taxpayer = filteredData.find(t => t.id == id);

    if (!taxpayer) {
        alert('Taxpayer details not found');
        return;
    }

    // Store the RIN for the full details link
    currentTaxpayerRIN = taxpayer.rin;

    const modalContent = document.getElementById('modalContent');
    modalContent.innerHTML = `
        <div class="mb-4">
            <h4 class="text-sm font-medium text-gray-700 mb-3">Quick Overview</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-gray-50 p-3 rounded-lg">
                    <dt class="text-sm font-medium text-gray-500">RIN</dt>
                    <dd class="mt-1 text-sm text-gray-900 font-semibold">${taxpayer.rin || 'N/A'}</dd>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <dt class="text-sm font-medium text-gray-500">Name</dt>
                    <dd class="mt-1 text-sm text-gray-900 font-semibold">${taxpayer.name || 'N/A'}</dd>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <dt class="text-sm font-medium text-gray-500">NIN</dt>
                    <dd class="mt-1 text-sm text-gray-900 font-semibold">${taxpayer.nin || 'N/A'}</dd>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <dt class="text-sm font-medium text-gray-500">Phone</dt>
                    <dd class="mt-1 text-sm text-gray-900 font-semibold">${taxpayer.phone || 'N/A'}</dd>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <dt class="text-sm font-medium text-gray-500">Email</dt>
                    <dd class="mt-1 text-sm text-gray-900 font-semibold">${taxpayer.email || 'N/A'}</dd>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <dt class="text-sm font-medium text-gray-500">Last Payment</dt>
                    <dd class="mt-1 text-sm text-gray-900 font-semibold">${taxpayer.lastPayment || 'N/A'}</dd>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg col-span-2">
                    <dt class="text-sm font-medium text-gray-500">Last Payment Amount</dt>
                    <dd class="mt-1 text-lg text-teal-600 font-bold">${taxpayer.amount || 'N/A'}</dd>
                </div>
                ${taxpayer.address ? `
                <div class="bg-gray-50 p-3 rounded-lg col-span-2">
                    <dt class="text-sm font-medium text-gray-500">Address</dt>
                    <dd class="mt-1 text-sm text-gray-900">${taxpayer.address}</dd>
                </div>
                ` : ''}
            </div>
        </div>
    `;

    document.getElementById('viewModal').classList.remove('hidden');
}

function closeViewModal() {
    document.getElementById('viewModal').classList.add('hidden');
    currentTaxpayerId = null;
    currentTaxpayerRIN = null;
}


function viewFullDetails() {

    if (currentTaxpayerId) {

        const detailsUrl = `{{ url('CaptureIndividual/Details') }}/${currentTaxpayerId}/${currentTaxpayerRIN || ''}`;
        window.location.href = detailsUrl;
    }
}
</script>
@endpush