@extends('layouts.auth.app')

@section('title', 'NIN Validation')

@section('content')
<!-- Page Header -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">My Operations - NIN Validation</h3>
        <p class="text-sm text-gray-500 mt-1">Validate NIN records for individuals</p>
    </div>
</div>

<!-- NIN Validation Table -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
        <div>
            <h3 class="text-lg font-semibold text-gray-900">Validate NIN</h3>
            <p class="text-sm text-gray-500">Total Records: {{ $viewModel['TotalRecords'] }}</p>
        </div>
        <button type="button" id="submitButton" class="hidden inline-flex items-center px-4 py-2 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors">
            Verify Selected
        </button>
    </div>

    @if(session('error'))
    <div class="px-6 py-3">
        <div class="p-3 rounded-md bg-red-50 text-red-800 text-sm">
            {{ session('error') }}
        </div>
    </div>
    @endif

    @if(session('success'))
    <div class="px-6 py-3">
        <div class="p-3 rounded-md bg-green-50 text-green-800 text-sm">
            {{ session('success') }}
        </div>
    </div>
    @endif

    <!-- Loading Spinner -->
    <div id="divLoader" 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">Please hold, your request is being processed...</p>
    </div>

    <!-- Table Container -->
    <div id="divLoaderPage">
        <!-- Table Controls -->
        <div class="px-6 py-3 bg-white border-b border-gray-200">
            <div class="flex items-center justify-between flex-wrap gap-4">
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-700">Show:</span>
                    <select id="itemsPerPage" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100" selected>100</option>
                    </select>
                    <span class="text-sm text-gray-700">entries</span>
                </div>
                <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="tblNinvalidation" 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">
                            RIN
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Individual Name
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            TIN
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            NIN
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Address
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            NIN Status
                        </th>
                        <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <div class="flex items-center justify-center space-x-2">
                                <span>Select All</span>
                                <input type="checkbox" id="checkAll" class="h-4 w-4 rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody id="tableBody" class="bg-white divide-y divide-gray-200">
                    @foreach($viewModel['NINIndividuals'] as $item)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->IndividualRIN }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->IndividualName }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->Tin }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->NIN }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900 max-w-xs truncate" title="{{ $item->ContactAddress }}">{{ $item->ContactAddress }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $item->NINStatus === 'Verified' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                {{ $item->NINStatus }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <input type="checkbox" class="rowCheckbox h-4 w-4 rounded border-gray-300 text-teal-600 focus:ring-teal-500" value="{{ $item->NIN }}">
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Empty State -->
        @if(count($viewModel['NINIndividuals']) === 0)
        <div class="px-6 py-8 text-center">
            <p class="text-gray-500">No records found requiring NIN validation</p>
        </div>
        @endif

        <!-- Pagination Info -->
        <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">
                    Page {{ $viewModel['CurrentPage'] }} of {{ $viewModel['TotalPages'] }} ({{ $viewModel['TotalRecords'] }} total records)
                </p>
                @if($viewModel['TotalRecords'] > count($viewModel['NINIndividuals']))
                <button type="button" id="loadNextBatchButton" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white font-medium rounded-lg hover:bg-gray-700 transition-colors">
                    Load Next {{ $viewModel['PageSize'] }}
                </button>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // 'Select All' checkbox functionality
    $('#checkAll').on('click', function() {
        $('.rowCheckbox').prop('checked', this.checked);
        updateSubmitButtonVisibility();
    });

    // Individual row checkbox click event
    $(document).on('click', '.rowCheckbox', function() {
        if (!this.checked) {
            $('#checkAll').prop('checked', false);
        } else {
            if ($('.rowCheckbox:checked').length === $('.rowCheckbox').length) {
                $('#checkAll').prop('checked', true);
            }
        }
        updateSubmitButtonVisibility();
    });

    // Update the visibility of the "Submit" button based on checkbox selection
    function updateSubmitButtonVisibility() {
        if ($('.rowCheckbox:checked').length > 0) {
            $('#submitButton').removeClass('hidden');
        } else {
            $('#submitButton').addClass('hidden');
        }
    }

    // Form submission
    $('#submitButton').on('click', function() {
        var selectedIds = [];
        $('.rowCheckbox:checked').each(function() {
            selectedIds.push($(this).val());
        });

        if (selectedIds.length === 0) {
            alert('Please select at least one item.');
            return;
        }

        if (!confirm('Are you sure you want to verify ' + selectedIds.length + ' NIN(s)?')) {
            return;
        }

        // Show loader
        $('#divLoaderPage').hide();
        $('#divLoader').removeClass('hidden');

        // AJAX call to process NIN validation
        $.ajax({
            url: '{{ route("operation-manager.process-nin-validation") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                selectedIds: selectedIds
            },
            success: function(response) {
                $('#divLoader').addClass('hidden');

                if (response.success) {
                    alert(response.message);
                    location.reload();
                } else {
                    alert('Error: ' + response.message);
                    $('#divLoaderPage').show();
                }
            },
            error: function(xhr, status, error) {
                $('#divLoader').addClass('hidden');
                $('#divLoaderPage').show();
                alert('Error: ' + error);
            }
        });
    });

    // Load next batch button
    $('#loadNextBatchButton').on('click', function() {
        const currentPage = {{ $viewModel['CurrentPage'] }};
        const nextPage = currentPage + 1;
        window.location.href = '{{ route("operation-manager.nin-validation") }}?page=' + nextPage;
    });

    // Client-side filtering
    let searchTimeout;
    $('#tableSearch').on('keyup', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            const searchTerm = $('#tableSearch').val().toLowerCase();
            $('#tableBody tr').each(function() {
                const text = $(this).text().toLowerCase();
                $(this).toggle(text.includes(searchTerm));
            });
        }, 300);
    });

    // Initialize visibility check
    updateSubmitButtonVisibility();
});
</script>
@endpush