@extends('layouts.auth.app')

@section('title', 'Individual Taxpayer Details')

@push('styles')
<style>
    .passport {
        width: 51mm;
        height: 51mm;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid #e5e7eb;
    }
    .nin-status-indicator {
        display: inline-block;
        width: 18px;
        height: 18px;
        border-radius: 2px;
        margin-left: 8px;
    }
    /* DataTables styling for new design */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.5rem 0.75rem;
        margin-left: 0.25rem;
        border-radius: 0.375rem;
    }
</style>
@endpush

@section('content')
<input type="hidden" id="hdnTaxPayerID" value="{{ $individual->IndividualID }}">
<input type="hidden" id="hdnTaxPayerTypeID" value="{{ $individual->TaxPayerTypeID }}">
<input type="hidden" id="hdnIndividualID" value="{{ $individual->IndividualID }}">

<div class="fixed inset-0 z-50 overflow-y-auto bg-gray-50">
    <div class="min-h-screen">
        <!-- Header -->
        <div class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-10">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between h-16">
                    <div class="flex items-center space-x-4">
                        <a href="{{ route('capture.individual.list') }}" class="text-gray-400 hover:text-gray-600 transition-colors" title="Close">
                            <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>
                        </a>
                        <h1 class="text-xl font-bold text-gray-900">Individual Taxpayer Details</h1>
                    </div>
                    <div class="flex items-center space-x-3">
                        <div class="relative inline-block text-left" x-data="{ open: false }">
                            <button @click="open = !open" type="button" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors">
                                Actions
                                <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>
                            </button>
                            <div x-show="open" @click.away="open = false" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-20">
                                <div class="py-1">
                                    <a href="#" onclick="jsfn_IndividualInformation({{ $individual->IndividualID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Full Details</a>
                                    <a href="#" onclick="openEditModal({{ $individual->IndividualID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit Details</a>
                                    <a href="#" onclick="openEditTaxOfficeModal({{ $individual->IndividualID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit Tax Office</a>
                                    <a href="#" onclick="jsfn_ChangeStatus({{ $individual->IndividualID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                        {{ $individual->Active ? 'Mark Inactive' : 'Mark Active' }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- Overview Section -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Overview</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Tax Payer Type</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->TaxPayerTypeName ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Full Name</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->FirstName ?? '' }} {{ $individual->LastName ?? '' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Tax Payer TIN</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->TIN ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Tax Payer EIN</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->IndividualRIN ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Mobile Number</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->MobileNumber1 ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Contact Address</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->ContactAddress ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Tax Office</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->TaxOfficeName ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Tax Officer</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->TaxOfficerName ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">NIN</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->NIN ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">NIN Status</dt>
                        <dd class="text-sm text-gray-900 font-semibold flex items-center">
                            {{ $individual->NINStatus ?? 'No NIN' }}
                            @php
                                $statusColor = match($individual->NINStatus ?? null) {
                                    'Valid' => 'bg-green-500',
                                    'Invalid' => 'bg-red-500',
                                    'Not Verified' => 'bg-yellow-500',
                                    default => 'bg-gray-400'
                                };
                            @endphp
                            <span class="nin-status-indicator {{ $statusColor }}"></span>
                        </dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Status</dt>
                        <dd class="text-sm text-gray-900 font-semibold">
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full
                                {{ $individual->Active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $individual->Active ? 'Active' : 'Inactive' }}
                            </span>
                        </dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg flex items-center justify-center">
                        <img src="{{ $imageSrc }}" alt="Taxpayer Photo" class="passport">
                    </div>
                </div>
            </div>

            <!-- Tabs Section -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <!-- Tab Navigation -->
                <div class="border-b border-gray-200">
                    <nav class="flex space-x-8 px-6 overflow-x-auto" aria-label="Tabs">
                        <button onclick="switchTab('assets')" id="tab-assets" class="tab-button active py-4 px-1 border-b-2 border-teal-500 font-medium text-sm text-teal-600 whitespace-nowrap">
                            Assets
                        </button>
                        <button onclick="switchTab('profiles')" id="tab-profiles" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors whitespace-nowrap">
                            Profiles
                        </button>
                        <button onclick="switchTab('bills')" id="tab-bills" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors whitespace-nowrap">
                            Bills
                        </button>
                        <button onclick="switchTab('assessment')" id="tab-assessment" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors whitespace-nowrap">
                            Assessment Rules
                        </button>
                        <button onclick="switchTab('mda')" id="tab-mda" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors whitespace-nowrap">
                            MDA Services
                        </button>
                        <button onclick="switchTab('payment')" id="tab-payment" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors whitespace-nowrap">
                            Payments
                        </button>
                        <button onclick="switchTab('tcc')" id="tab-tcc" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors whitespace-nowrap">
                            TCC
                        </button>
                        <button onclick="switchTab('documents')" id="tab-documents" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors whitespace-nowrap">
                            Documents
                        </button>
                        <button onclick="switchTab('messages')" id="tab-messages" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors whitespace-nowrap">
                            Messages
                        </button>
                    </nav>
                </div>

                <!-- Tab Content -->
                <div class="p-6">
                    <!-- Assets Tab -->
                    <div id="content-assets" class="tab-content">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Associated Assets</h3>
                            <div class="relative inline-block text-left" x-data="{ open: false }">
                                <button @click="open = !open" type="button" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors">
                                    Add New
                                    <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>
                                </button>
                                <div x-show="open" @click.away="open = false" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
                                    <div class="py-1">
                                        <a href="#" onclick="openSearchBusinessModal(); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Business</a>

                                        <a href="#" onclick="openSearchBuildingModal(); return false;"  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Building</a>

                                        <a href="#" onclick="openSearchLandModal(); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Land</a>
                                        <a href="#" onclick="openSearchVehicleModal(); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Vehicles</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table id="tblAssetList" 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">Asset Type</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset Name</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Payer Role</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($assets as $asset)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $asset->AssetTypeName }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $asset->AssetName }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $asset->TaxPayerRoleName }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="relative inline-block text-left" x-data="{ open: false }">
                                                <button @click="open = !open" type="button" class="inline-flex items-center px-3 py-1 bg-gray-600 text-white text-xs font-medium rounded hover:bg-gray-700">
                                                    Action
                                                    <svg class="ml-1 h-3 w-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>
                                                </button>
                                                <div x-show="open" @click.away="open = false" 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-10">
                                                    <div class="py-1">
                                                        <a href="#" onclick="jsfn_AssetDetails({{ $asset->TPAID }}, {{ $asset->AssetTypeID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Quick View</a>
                                                        <a href="#" onclick="jsfn_RemoveAsset({{ $asset->TPAID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove</a>
                                                    </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Profiles Tab -->
<div id="content-profiles" class="tab-content hidden">
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-900">Associated Profiles</h3>
    </div>
    <div class="overflow-x-auto">
        <table id="tblProfileList" 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">Profile Description</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset Type</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset RIN</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Payer Role</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach($profileInfo as $profile)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $profile->ProfileDescription }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $profile->AssetTypeName }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $profile->AssetName }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $profile->AssetRIN }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $profile->TaxPayerRoleName }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <button onclick="jsfn_ProfileDetails({{ $profile->ProfileID }})" class="inline-flex items-center px-3 py-1 bg-gray-600 text-white text-xs font-medium rounded hover:bg-gray-700">
                            Quick View
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Bills Tab -->
<div id="content-bills" class="tab-content hidden">
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-900">Associated Bills</h3>
        <div class="relative inline-block text-left" x-data="{ open: false }">
            <button @click="open = !open" type="button" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors">
                Add New
                <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>
            </button>
            <div x-show="open" @click.away="open = false" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
                <div class="py-1">
                    <a href="#" onclick="openGenerateAssessmentModal(); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Assessment Bill</a>
                    <a href="#" onclick="openGenerateServiceBillModal(); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">MDA Service Bill</a>
                </div>
            </div>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table id="tblBillList" 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">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bill Type</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bill ID</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bill Amount</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bill Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach($bills as $bill)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ \Carbon\Carbon::parse($bill->BillDate)->format('M d, Y') }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $bill->BillTypeName }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $bill->BillRefNo }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">₦{{ number_format($bill->BillAmount, 2) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full
                            {{ $bill->SettlementStatusName == 'Settled' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                            {{ $bill->SettlementStatusName }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="relative inline-block text-left" x-data="{ open: false }">
                            <button @click="open = !open" type="button" class="inline-flex items-center px-3 py-1 bg-gray-600 text-white text-xs font-medium rounded hover:bg-gray-700">
                                Action
                                <svg class="ml-1 h-3 w-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>
                            </button>
                            <div x-show="open" @click.away="open = false" 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-10">
                                <div class="py-1">
                                    <a href="#" onclick="jsfn_BillDetails({{ $bill->BillID }}, {{ $bill->BillTypeID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Quick View</a>
                                    @if($bill->SettlementStatusID < 3)
                                    {{-- <a href=" route('capture.individual.edit-bill', ['id' => $individual->IndividualID, 'billId' => $bill->BillID]) " class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit Bill</a> --}}
                                    <a href="#" onclick="openEditBillModal({{ $individual->IndividualID }}, {{ $bill->BillID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit Bill</a>
                                    @endif

                                    <a href="#" onclick="openViewBillModal({{ $individual->IndividualID }}, {{ $bill->BillID }}, '{{ $bill->BillRefNo }}'); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Bill</a>
                                    <a href="{{ route('capture.individual.generate-bill-pdf', ['id' => $individual->IndividualID, 'billId' => $bill->BillID]) }}?billrefno={{ $bill->BillRefNo }}" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> Generate PDF</a>
                                    <a href="#" onclick="jsfn_BillPaymentDetails({{ $bill->BillID }}, {{ $bill->BillTypeID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Payments</a>

                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

                    <!-- Assessment Rules Tab -->
                    <div id="content-assessment" class="tab-content hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Associated Assessment Rules</h3>
                            <div class="relative inline-block text-left" x-data="{ open: false }">
                                <button @click="open = !open" type="button" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors">
                                    Filter by Year
                                    <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>
                                </button>
                                <div x-show="open" @click.away="open = false" class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
                                    <div class="py-1">
                                        @foreach($yearList as $year)
                                        <a href="#" onclick="jsfn_FilterAssessmentRuleTable({{ $year['id'] }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ $year['text'] }}</a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table id="tblAssessmentRules" 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">Rule Year</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rule Name</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rule Amount</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Billed 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 class="bg-white divide-y divide-gray-200">
                                    @foreach($assessmentRules as $rule)
                                    <tr class="hover:bg-gray-50" data-year="{{ $rule->TaxYear }}">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $rule->TaxYear }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $rule->AssessmentRuleName }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">₦{{ number_format($rule->AssessmentAmount ?? 0, 2) }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">₦{{ number_format($rule->BilledAmount ?? 0, 2) }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="relative inline-block text-left" x-data="{ open: false }">
                                                <button @click="open = !open" type="button" class="inline-flex items-center px-3 py-1 bg-gray-600 text-white text-xs font-medium rounded hover:bg-gray-700">
                                                    Action
                                                    <svg class="ml-1 h-3 w-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>
                                                </button>
                                                <div x-show="open" @click.away="open = false" 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-10">
                                                    <div class="py-1">
                                                        <a href="#" onclick="jsfn_AssessmentRuleDetails({{ $rule->AssessmentRuleID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Quick View</a>
                                                        <a href="#" onclick="jsfn_AssessmentRuleItemList({{ $rule->AssessmentRuleID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Items</a>
                                                        {{-- jsfn_ProfileDetails is shared with profiles tab --}}
                                                        <a href="#" onclick="jsfn_ProfileDetails({{ $rule->ProfileID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Profiles</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- MDA Services Tab -->
                    <div id="content-mda" class="tab-content hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Associated MDA Services</h3>
                            <div class="relative inline-block text-left" x-data="{ open: false }">
                                <button @click="open = !open" type="button" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors">
                                    Filter by Year
                                    <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>
                                </button>
                                <div x-show="open" @click.away="open = false" class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
                                    <div class="py-1">
                                        @foreach($yearList as $year)
                                        <a href="#" onclick="jsfn_FilterMDAServiceTable({{ $year['id'] }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ $year['text'] }}</a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table id="tblMDAServiceList" 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">Service Year</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Name</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Amount</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Billed 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 class="bg-white divide-y divide-gray-200">
                                    @foreach($mdaServices as $service)
                                    <tr class="hover:bg-gray-50" data-year="{{ $service->TaxYear }}">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $service->TaxYear }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $service->MDAServiceName }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">₦{{ number_format($service->ServiceAmount ?? 0, 2) }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">₦{{ number_format($service->BilledAmount ?? 0, 2) }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="relative inline-block text-left" x-data="{ open: false }">
                                                <button @click="open = !open" type="button" class="inline-flex items-center px-3 py-1 bg-gray-600 text-white text-xs font-medium rounded hover:bg-gray-700">
                                                    Action
                                                    <svg class="ml-1 h-3 w-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>
                                                </button>
                                                <div x-show="open" @click.away="open = false" 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-10">
                                                    <div class="py-1">
                                                        <a href="#" onclick="jsfn_MDAServiceDetails({{ $service->MDAServiceID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Quick View</a>
                                                        <a href="#" onclick="jsfn_MDAServiceItemList({{ $service->MDAServiceID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Items</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Payments Tab -->
                    <div id="content-payment" class="tab-content hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Associated Payments</h3>
                            <div class="text-sm text-gray-700">
                                <span class="font-semibold">PoA Balance:</span> ₦{{ number_format($poaBalance, 2) }}
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table id="tblPaymentList" 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">Date</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment Type</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment ID</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">Transaction Ref</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($payments as $payment)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ \Carbon\Carbon::parse($payment->PaymentDate)->format('M d, Y') }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $payment->PaymentTypeName }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $payment->PaymentRefNo }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">₦{{ number_format($payment->Amount ?? 0, 2) }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $payment->TransactionRefNo }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <button onclick="jsfn_PaymentDetails({{ $payment->PaymentID }}, {{ $payment->PaymentTypeID }})" class="inline-flex items-center px-3 py-1 bg-gray-600 text-white text-xs font-medium rounded hover:bg-gray-700">
                                                Quick View
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- TCC Tab -->
                    <div id="content-tcc" class="tab-content hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Tax Clearance Certificates</h3>
                            <button id="btnAddTCCRequest" class="px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors">
                                Add Request
                            </button>
                        </div>
                        <div class="overflow-x-auto" id="dvTCCRequest">
                            <table id="tblTCCList" 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">Request No</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Year</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Request Date</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">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                     @include('pages.taxpayer.individual.partials.tcc-request-table', ['tccRequests' => $tccRequests ?? []])
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Documents Tab -->
                    <div id="content-documents" class="tab-content hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Associated Documents</h3>
                            <a href="#" onclick="openAddDocumentModal({{ $individual->IndividualID }}); return false;" class="px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors">
                                Add New Document
                            </a>
                        </div>
                        <div class="overflow-x-auto">
                            <table id="tblDocumentList" 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">Document Ref No</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Document Date</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Upload By</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($documents as $document)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $document->DocumentRefNo }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ \Carbon\Carbon::parse($document->DocumentDate)->format('M d, Y') }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $document->StaffName }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $document->DocumentTitle }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="relative inline-block text-left" x-data="{ open: false }">
                                                <button @click="open = !open" type="button" class="inline-flex items-center px-3 py-1 bg-gray-600 text-white text-xs font-medium rounded hover:bg-gray-700">
                                                    Action
                                                    <svg class="ml-1 h-3 w-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>
                                                </button>
                                                <div x-show="open" @click.away="open = false" 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-10">
                                                    <div class="py-1">
                                                        <a href="#" onclick="openViewDocumentModal({{ $individual->IndividualID }}, {{ $document->TPDID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Document</a>


                                                        {{-- <a href="{{ route('capture.individual.download-document', ['id' => $individual->IndividualID, 'docId' => $document->TPDID]) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Download</a>
                                                        <a href="#" onclick="jsfn_RemoveDocument({{ $document->TPDID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove</a> --}}
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Messages Tab -->
                    <div id="content-messages" class="tab-content hidden">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Associated Messages</h3>
                        <div id="dvMessaging">
                            @include('components.auth.taxpayer-messages', ['taxPayerId' => $individual->IndividualID, 'taxPayerTypeId' => $individual->TaxPayerTypeID])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- TCC Request Modal -->
{{-- <div id="dvAddTCCRequestModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" x-data="{ show: false }" x-show="show">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Add New TCC Request</h3>
            <button @click="show = false" class="text-gray-400 hover:text-gray-600">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div id="dvTCCRMessage"></div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">Select Tax Year <span class="text-red-600">*</span></label>
            <select id="cboTaxYear" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500">
                <option value="">Select Tax Year</option>
                @foreach($yearList as $year)
                <option value="{{ $year['id'] }}">{{ $year['text'] }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex justify-end">
            <button id="btnSaveRequest" class="px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors">
                Save
            </button>
        </div>
    </div>
</div> --}}


<!-- Individual Details Modal -->
<div id="individualDetailsModal" 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="closeIndividualDetailsModal()"></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">Individual Tax Payer Details</h3>
                    <button onclick="closeIndividualDetailsModal()" 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="individualModalContent" class="bg-white px-6 py-4 max-h-[70vh] overflow-y-auto">
                <!-- Content will be loaded here -->
            </div>

            <div class="bg-gray-50 px-6 py-4 flex items-center justify-end">
                <button onclick="closeIndividualDetailsModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Individual Modal -->
<div id="editIndividualModal" 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="closeEditModal()"></div>

        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
            <form id="frmEditIndividual">
                @csrf
                <input type="hidden" id="edit_IndividualID" name="IndividualID">
                <input type="hidden" id="edit_IndividualRIN" name="IndividualRIN">

                <div class="bg-teal-600 px-6 py-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-white">Edit Individual Tax Payer</h3>
                        <button type="button" onclick="closeEditModal()" class="text-white hover:text-gray-200 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 6L6 18M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="bg-white px-6 py-4 max-h-[70vh] overflow-y-auto">
                    <!-- Error Message Container -->
                    <div id="editErrorMessage" class="hidden mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg"></div>

                    <!-- Form Fields -->
                    <div class="space-y-6">
                        <!-- Tax Payer Type & Gender -->
                        <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</label>
                                <select id="edit_TaxPayerTypeID" name="TaxPayerTypeID" disabled class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100">
                                    <option value="1">Individual</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Gender <span class="text-red-600">*</span></label>
                                <select id="edit_GenderID" name="GenderID" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500">
                                    <option value="">Select Gender</option>
                                </select>
                            </div>
                        </div>

                        <!-- Title & Names -->
                        <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">Title <span class="text-red-600">*</span></label>
                                <select id="edit_TitleID" name="TitleID" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500">
                                    <option value="">Select Title</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">First Name <span class="text-red-600">*</span></label>
                                <input type="text" id="edit_FirstName" name="FirstName" required maxlength="250" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter Individual's first name">
                            </div>
                        </div>

                        <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">Last Name <span class="text-red-600">*</span></label>
                                <input type="text" id="edit_LastName" name="LastName" required maxlength="250" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter Individual's last name">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Middle Name</label>
                                <input type="text" id="edit_MiddleName" name="MiddleName" maxlength="250" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter Individual's middle name">
                            </div>
                        </div>

                        <!-- DOB & TIN -->
                        <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">Date of Birth</label>
                                <input type="date" id="edit_DOB" name="DOB" placeholder="DD/MM/YYYY" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">TIN</label>
                                <input type="text" id="edit_TIN" name="TIN" maxlength="10" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter tax identification number">
                            </div>
                        </div>

                        <!-- Mobile Numbers -->
                        <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">Mobile Number 1 <span class="text-red-600">*</span></label>
                                <div class="flex">
                                    <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-r-0 border-gray-300 rounded-l-lg">234-0-</span>
                                    <input type="text" id="edit_MobileNumber1" name="MobileNumber1" required maxlength="10" class="flex-1 px-3 py-2 border border-gray-300 rounded-r-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter mobile phone number">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number 2</label>
                                <div class="flex">
                                    <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-r-0 border-gray-300 rounded-l-lg">234-0-</span>
                                    <input type="text" id="edit_MobileNumber2" name="MobileNumber2" maxlength="10" class="flex-1 px-3 py-2 border border-gray-300 rounded-r-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter alternative mobile phone">
                                </div>
                            </div>
                        </div>

                        <!-- Email Addresses -->
                        <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">Email Address 1</label>
                                <input type="email" id="edit_EmailAddress1" name="EmailAddress1" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter email address">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Email Address 2</label>
                                <input type="email" id="edit_EmailAddress2" name="EmailAddress2" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter alternative email">
                            </div>
                        </div>

                        <!-- NIN & Tax Office -->
                        <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">NIN <span class="text-red-600">*</span></label>
                                <div class="flex">
                                    <input type="text" id="edit_NIN" name="NIN" required maxlength="13" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter NIN Details">
                                    <span id="edit_NINStatusIcon" class="inline-flex items-center justify-center w-12 border border-l-0 border-gray-300 rounded-r-lg bg-gray-50">
                                        <i class="fa fa-square text-gray-400" style="font-size:18px"></i>
                                    </span>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tax Office <span class="text-red-600">*</span></label>
                                <select id="edit_TaxOfficeID" name="TaxOfficeID" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500">
                                    <option value="">Select Tax Office</option>
                                </select>
                            </div>
                        </div>

                        <!-- Marital Status & Nationality -->
                        <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">Marital Status</label>
                                <select id="edit_MaritalStatusID" name="MaritalStatusID" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500">
                                    <option value="">Select Marital Status</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Nationality <span class="text-red-600">*</span></label>
                                <select id="edit_NationalityID" name="NationalityID" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500">
                                    <option value="">Select Nationality</option>
                                </select>
                            </div>
                        </div>

                        <!-- Economic Activities & Notification Method -->
                        <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">Economic Activities <span class="text-red-600">*</span></label>
                                <select id="edit_EconomicActivitiesID" name="EconomicActivitiesID" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500">
                                    <option value="">Select Economic Activities</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Notification Method <span class="text-red-600">*</span></label>
                                <select id="edit_NotificationMethodID" name="NotificationMethodID" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500">
                                    <option value="">Select Notification Method</option>
                                </select>
                            </div>
                        </div>

                        <!-- Biometric Details -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Biometric Details</label>
                            <input type="text" id="edit_BiometricDetails" name="BiometricDetails" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter Biometric Details">
                        </div>

                        <!-- Contact Address -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Contact Address <span class="text-red-600">*</span></label>
                            <textarea id="edit_ContactAddress" name="ContactAddress" required rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500" placeholder="Enter Contact Address"></textarea>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 px-6 py-4 flex items-center justify-end space-x-3">
                    <button type="button" onclick="closeEditModal()" 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="btnSaveEdit" class="px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
                        <span id="saveEditText">Save Changes</span>
                        <span id="saveEditSpinner" class="hidden">
                            <svg class="inline animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            Saving...
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Tax Office Modal -->
<div id="editTaxOfficeModal" 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="closeEditTaxOfficeModal()"></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">
            <form id="frmEditTaxOffice">
                @csrf
                <input type="hidden" id="taxoffice_IndividualID" name="IndividualID">
                <input type="hidden" id="taxoffice_IndividualRIN" name="IndividualRIN">
                <input type="hidden" id="taxoffice_PresentTaxOfficeID" name="PresentTaxOfficeID">

                <div class="bg-teal-600 px-6 py-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-white">Edit Individual Tax Office</h3>
                        <button type="button" onclick="closeEditTaxOfficeModal()" class="text-white hover:text-gray-200 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 6L6 18M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="bg-white px-6 py-4">
                    <!-- Error Message Container -->
                    <div id="editTaxOfficeErrorMessage" class="hidden mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg"></div>

                    <!-- Form Fields -->
                    <div class="space-y-6">
                        <!-- Basic Info (Read-only) -->
                        <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</label>
                                <select id="taxoffice_TaxPayerTypeID" disabled class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100">
                                    <option value="1">Individual</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Gender</label>
                                <select id="taxoffice_GenderID" disabled class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100">
                                </select>
                            </div>
                        </div>

                        <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">Title</label>
                                <select id="taxoffice_TitleID" disabled class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100">
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                                <input type="text" id="taxoffice_FirstName" disabled class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100">
                            </div>
                        </div>

                        <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">Last Name</label>
                                <input type="text" id="taxoffice_LastName" disabled class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Middle Name</label>
                                <input type="text" id="taxoffice_MiddleName" disabled class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100">
                            </div>
                        </div>

                        <!-- Tax Office Fields -->
                        <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">Present Tax Office</label>
                                <select id="taxoffice_PresentTaxOfficeIDDisplay" disabled class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100">
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">New Tax Office <span class="text-red-600">*</span></label>
                                <select id="taxoffice_NewTaxOfficeID" name="NewTaxOfficeID" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500">
                                    <option value="">Select Tax Office</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 px-6 py-4 flex items-center justify-end space-x-3">
                    <button type="button" onclick="closeEditTaxOfficeModal()" 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="btnSaveTaxOffice" class="px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
                        <span id="saveTaxOfficeText">Save Changes</span>
                        <span id="saveTaxOfficeSpinner" class="hidden">
                            <svg class="inline animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            Saving...
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Asset Quick View --}}
<!-- Building Asset Modal -->
<div id="dvBuildingModal" class="hidden fixed inset-0 z-[70] overflow-y-auto">
  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20">
    <div
      class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
      onclick="closeAssetModal('dvBuildingModal')"
    ></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">
            Building Asset Details
          </h3>
          <button
            onclick="closeAssetModal('dvBuildingModal')"
            class="text-gray-400 hover:text-gray-600"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
      <div class="bg-white px-6 py-4 max-h-[70vh] overflow-y-auto">
        <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">Building RIN</dt>
            <dd
              id="dvBuildingRIN"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">
              Building Tag Number
            </dt>
            <dd
              id="dvBuildingTagNumber"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Building Name</dt>
            <dd
              id="dvBuildingName"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Building Number</dt>
            <dd
              id="dvBuildingNumber"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Street Name</dt>
            <dd
              id="dvBuildStreetName"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Off Street Name</dt>
            <dd
              id="dvBuildOffStreetName"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Town</dt>
            <dd
              id="dvBuildTown"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">LGA</dt>
            <dd
              id="dvBuildLGA"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Ward</dt>
            <dd
              id="dvBuildWard"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Building Type</dt>
            <dd
              id="dvBuildingType"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">
              Building Completion
            </dt>
            <dd
              id="dvBuildingCompletion"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Building Purpose</dt>
            <dd
              id="dvBuildingPurpose"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">
              Building Ownership
            </dt>
            <dd
              id="dvBuildingOwnership"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Latitude</dt>
            <dd
              id="dvBuildingLatitude"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Longitude</dt>
            <dd
              id="dvBuildingLongitude"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Status</dt>
            <dd
              id="dvBuildingStatus"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Vehicle Asset Modal -->
<div id="dvVehicleModal" 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">
    <div
      class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
      onclick="closeAssetModal('dvVehicleModal')"
    ></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">
            Vehicle Asset Details
          </h3>
          <button
            onclick="closeAssetModal('dvVehicleModal')"
            class="text-gray-400 hover:text-gray-600"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
      <div class="bg-white px-6 py-4 max-h-[70vh] overflow-y-auto">
        <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">Vehicle RIN</dt>
            <dd
              id="dvVehicleRIN"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">
              Vehicle Reg Number
            </dt>
            <dd
              id="dvVehicleRegNumber"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">VIN</dt>
            <dd
              id="dvVIN"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Vehicle Type</dt>
            <dd
              id="dvVehicleType"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Vehicle Sub Type</dt>
            <dd
              id="dvVehicleSubType"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">LGA</dt>
            <dd
              id="dvVLGA"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Vehicle Purpose</dt>
            <dd
              id="dvVehiclePurpose"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Vehicle Function</dt>
            <dd
              id="dvVehicleFunction"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Vehicle Ownership</dt>
            <dd
              id="dvVehicleOwnership"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Status</dt>
            <dd
              id="dvVStatus"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Business Asset Modal -->
<div id="dvBusinessModal" class="hidden fixed inset-0 z-[80] overflow-y-auto">
  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20">
    <div
      class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
      onclick="closeAssetModal('dvBusinessModal')"
    ></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">
            Business Asset Details
          </h3>
          <button
            onclick="closeAssetModal('dvBusinessModal')"
            class="text-gray-400 hover:text-gray-600"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
      <div class="bg-white px-6 py-4 max-h-[70vh] overflow-y-auto">
        <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">Business RIN</dt>
            <dd
              id="dvBusinessRIN"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Business Name</dt>
            <dd
              id="dvBusinessName"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Business Type</dt>
            <dd
              id="dvBusinessType"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">LGA</dt>
            <dd
              id="dvBusinessLGA"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Business Category</dt>
            <dd
              id="dvBusinessCategory"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Business Sector</dt>
            <dd
              id="dvBusinessSector"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">
              Business Sub Sector
            </dt>
            <dd
              id="dvBusinessSubSector"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">
              Business Structure
            </dt>
            <dd
              id="dvBusinessStructure"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">
              Business Operations
            </dt>
            <dd
              id="dvBusinessOperations"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Contact Name</dt>
            <dd
              id="dvContactName"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Business Number</dt>
            <dd
              id="dvBusinessNumber"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Business Address</dt>
            <dd
              id="dvBusinessAddress"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Status</dt>
            <dd
              id="dvBusinessStatus"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Land Asset Modal -->
<div id="dvLandModal" 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">
    <div
      class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
      onclick="closeAssetModal('dvLandModal')"
    ></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">
            Land Asset Details
          </h3>
          <button
            onclick="closeAssetModal('dvLandModal')"
            class="text-gray-400 hover:text-gray-600"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
      <div class="bg-white px-6 py-4 max-h-[70vh] overflow-y-auto">
        <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">Land RIN</dt>
            <dd
              id="dvLandRIN"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Street Name</dt>
            <dd
              id="dvLandStreetName"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Town</dt>
            <dd
              id="dvLandTown"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">LGA</dt>
            <dd
              id="dvLandLGA"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Ward</dt>
            <dd
              id="dvLandWard"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Land Size Length</dt>
            <dd
              id="dvLandSize_Length"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Land Size Width</dt>
            <dd
              id="dvLandSize_Width"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">C of O Ref</dt>
            <dd
              id="dvC_OF_O_Ref"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Land Purpose</dt>
            <dd
              id="dvLandPurpose"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Land Ownership</dt>
            <dd
              id="dvLandOwnership"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Latitude</dt>
            <dd
              id="dvLandLatitude"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Longitude</dt>
            <dd
              id="dvLandLongitude"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <dt class="text-sm font-medium text-gray-500">Status</dt>
            <dd
              id="dvLandStatus"
              class="mt-1 text-sm text-gray-900 font-semibold"
            ></dd>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Profile Details Modal -->
<div id="dvProfileModal" 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">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeAssetModal('dvProfileModal')"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
            <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">Profile Details</h3>
                    <button onclick="closeAssetModal('dvProfileModal')" class="text-gray-400 hover:text-gray-600">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M18 6L6 18M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="bg-white px-6 py-4 max-h-[70vh] overflow-y-auto">
                <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">Profile Ref No</dt>
                        <dd id="dvProfileRefNo" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Asset Type</dt>
                        <dd id="dvAssetType" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Tax Payer Type</dt>
                        <dd id="dvTaxPayerType" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Tax Payer Role</dt>
                        <dd id="dvTaxPayerRole" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg col-span-2">
                        <dt class="text-sm font-medium text-gray-500">Profile Description</dt>
                        <dd id="dvProfileDescription" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Asset Status</dt>
                        <dd id="dvAssetStatus" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Profile Status</dt>
                        <dd id="dvProfileStatus" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Profile Sector</dt>
                        <dd id="dvProfileSector" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Profile Sub Sector</dt>
                        <dd id="dvProfileSubSector" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Profile Group</dt>
                        <dd id="dvProfileGroup" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Profile Sub Group</dt>
                        <dd id="dvProfileSubGroup" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Sector Element</dt>
                        <dd id="dvSectorElement" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Sector Sub Element</dt>
                        <dd id="dvSectorSubElement" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Profile Attribute</dt>
                        <dd id="dvProfileAttribute" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Profile Sub Attribute</dt>
                        <dd id="dvProfileSubAttribute" class="mt-1 text-sm text-gray-900 font-semibold"></dd>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bills Modal -->
@include('pages.taxpayer.individual.modals.bills-modal')
<!-- Assessment Rule Modal -->
@include('pages.taxpayer.individual.modals.assessment-rule-modal')
<!-- MDA Services Modal -->
@include('pages.taxpayer.individual.modals.mda-services-modal')
<!-- Payment Modal -->
@include('pages.taxpayer.individual.modals.payments-modal')
<!-- TCC Modal -->
@include('pages.taxpayer.individual.modals.tcc-modal')
<!-- Document Modal -->
@include('pages.taxpayer.individual.modals.document-modal')
<!-- Business Asset Modal -->
@include('pages.taxpayer.individual.modals.business-asset-modal')
<!-- Building Asset Modal -->
@include('pages.taxpayer.individual.modals.building-asset-modal')
<!-- Land Asset Modal -->
@include('pages.taxpayer.individual.modals.land-asset-modal')
<!-- Vehicle Asset Modal -->
@include('pages.taxpayer.individual.modals.vehicle-asset-modal')
<!-- Generate Assessment Modal -->
@include('pages.taxpayer.individual.modals.generate-assessment-modal')
<!-- Generate Service Bill Modal -->
@include('pages.taxpayer.individual.modals.generate-service-bill-modal')

<style>
    .error-input {
        border: 2px solid #ef4444 !important;
    }
    /* Ensure modals stack properly */
.z-50 {
    z-index: 50;
}

.z-\[60\] {
    z-index: 60;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}
</style>

@endsection

@push('scripts')
<script>
    // Pass PHP data to JavaScript
    window.individualData = {
        id: {{ $individual->IndividualID ?? 0 }},
        rin: '{{ $individual->IndividualRIN ?? '' }}',
        taxPayerTypeId: {{ $individual->TaxPayerTypeID ?? 1 }},
        active: {{ $individual->Active ? 'true' : 'false' }}
    };

    // Full individual data for the modal
    window.individualFullData = {
        IndividualID: {{ $individual->IndividualID ?? 0 }},
        IndividualRIN: '{{ $individual->IndividualRIN ?? '' }}',
        GenderName: '{{ $individual->GenderName ?? 'N/A' }}',
        TitleName: '{{ $individual->TitleName ?? 'Mr' }}',
        FirstName: '{{ $individual->FirstName ?? '' }}',
        LastName: '{{ $individual->LastName ?? '' }}',
        MiddleName: '{{ $individual->MiddleName ?? '' }}',
        DOB: '{{ $individual->DOB ? \Carbon\Carbon::parse($individual->DOB)->format('d/m/Y') : '' }}',
        TIN: '{{ $individual->TIN ?? '' }}',
        MobileNumber1: '{{ $individual->MobileNumber1 ?? '' }}',
        MobileNumber2: '{{ $individual->MobileNumber2 ?? '' }}',
        EmailAddress1: '{{ $individual->EmailAddress1 ?? '' }}',
        EmailAddress2: '{{ $individual->EmailAddress2 ?? '' }}',
        BiometricDetails: '{{ $individual->BiometricDetails ?? '' }}',
        TaxOfficeName: '{{ $individual->TaxOfficeName ?? '' }}',
        MaritalStatusName: '{{ $individual->MaritalStatusName ?? '' }}',
        NationalityName: '{{ $individual->NationalityName ?? '' }}',
        EconomicActivitiesName: '{{ $individual->EconomicActivitiesName ?? '' }}',
        NIN: '{{ $individual->NIN ?? '' }}',
        Active: {{ $individual->Active ? 'true' : 'false' }},
        NINStatus: '{{ $individual->NINStatus ?? 'N/A' }}',
        ContactAddress: '{{ addslashes($individual->ContactAddress ?? '') }}'
    };

    // Pass routes to JavaScript
    window.routes = {
        updateStatus: '{{ route("capture.individual.update-status") }}',
        getAssetDetails: '{{ route("capture.individual.get-asset-details") }}',
        updateAssetStatus: '{{ route("capture.individual.update-asset-status") }}',
        getProfileDetails: '{{ route("capture.individual.get-profile-details") }}',
        getBillPaymentDetails: '{{ route("capture.individual.get-bill-payment-details") }}',
        getAssessmentRuleDetails: '{{ route("capture.individual.get-assessment-rule-details") }}',
        getAssessmentRuleItems: '{{ route("capture.individual.get-assessment-rule-items") }}',
        getMDAServiceDetails: '{{ route("capture.individual.get-mda-service-details") }}',
        getMDAServiceItems: '{{ route("capture.individual.get-mda-service-items") }}',
        getPaymentDetails: '{{ route("capture.individual.get-payment-details") }}',
        getTCCDetails: '{{ route("capture.individual.get-tcc-details") }}',
        removeDocument: '{{ route("capture.individual.remove-document") }}',
        getForEdit: '{{ route("capture.individual.get-for-edit", ":id") }}',
        updateAjax: '{{ route("capture.individual.update-ajax") }}',
        getTitlesByGender: '{{ route("capture.individual.get-titles-by-gender") }}',
        getTaxOfficeForEdit: '{{ route("capture.individual.get-tax-office-for-edit", ":id") }}',
        updateTaxOfficeAjax: '{{ route("capture.individual.update-tax-office-ajax") }}',
        getServiceBillDetails: '{{ route("capture.individual.get-service-bill-details") }}',
        getEditBillData: '{{ route("capture.individual.get-edit-bill-data") }}',
        getMDAServiceData: '{{ route("capture.individual.get-mda-service-data") }}',
        addMDAService: '{{ route("capture.individual.add-mda-service") }}',
        removeMDAService: '{{ route("capture.individual.remove-mda-service") }}',
        getMDAServiceItemView: '{{ route("capture.individual.get-mda-service-item-view") }}',
        getMDAServiceItemEdit: '{{ route("capture.individual.get-mda-service-item-edit") }}',
        updateMDAServiceItem: '{{ route("capture.individual.update-mda-service-item") }}',
        updateServiceBill: '{{ route("capture.individual.update-service-bill") }}',
        getBillPaymentList: '{{ route("capture.individual.get-bill-payment-list") }}',
        viewBill: '{{ route("capture.individual.view-bill", ["id" => ":id", "billId" => ":billId"]) }}',
        //  getMDAServiceDetails: '{{ route("capture.individual.get-mda-service-details") }}',
        getMDAServiceItemList: '{{ route("capture.individual.get-mda-service-item-list") }}',
        getAssessmentItems: '{{ route("capture.individual.get-assessment-items") }}',

        addTccRequest : "{{ route('capture.individual.add-tcc-request') }}",
        downloadTcc : "{{ route('capture.individual.tcc-download', ':id') }}",

        addDocument: '{{ route("capture.individual.add-document", ":id") }}',
        addDocumentPost: '{{ route("capture.individual.add-document.post") }}',
        getDocumentForView: '{{ route("capture.individual.get-document-for-view", ":docId") }}',

        searchBusinessAjax: '{{ route("capture.individual.search-business-ajax") }}',
        getBusinessDetailsAjax: '{{ route("capture.individual.get-business-details-ajax") }}',
        linkBusinessToTaxpayer: '{{ route("capture.individual.link-business-to-taxpayer") }}',
        getTaxPayerRoleForBusiness: '{{ route("capture.individual.get-taxpayer-role-business") }}',
        getAddBusinessForm: '{{ route("capture.individual.get-add-business-form", ":id") }}',
        addBusinessAjax: '{{ route("capture.individual.add-business-ajax") }}',

        searchBuildingAjax: '{{ route("capture.individual.search-building-ajax") }}',
        getBuildingDetailsAjax: '{{ route("capture.individual.get-building-details-ajax") }}',
        linkBuildingToTaxpayer: '{{ route("capture.individual.link-building-to-taxpayer") }}',
        getTaxPayerRoleForBuilding: '{{ route("capture.individual.get-taxpayer-role-building") }}',
        getBuildingUnitsForBuilding: '{{ route("capture.individual.get-building-units") }}',
        getAddBuildingForm: '{{ route("capture.individual.get-add-building-form", ":id") }}',
        addBuildingAjax: '{{ route("capture.individual.add-building-ajax") }}',
        addBuildingUnitAjax: '{{ route("capture.individual.add-building-unit-ajax") }}',
        removeBuildingUnitAjax: '{{ route("capture.individual.remove-building-unit-ajax") }}',
        getWardByLGA: '{{ route("capture.individual.get-ward-by-lga") }}',
        getTownDetails: '{{ route("capture.individual.get-town-details") }}',
        getUnitFunctionByPurpose: '{{ route("capture.individual.get-unit-function-by-purpose") }}',

        // Land routes
        searchLandAjax: '{{ route("capture.individual.search-land-ajax") }}',
        getLandDetailsAjax: '{{ route("capture.individual.get-land-details-ajax") }}',
        linkLandToTaxpayer: '{{ route("capture.individual.link-land-to-taxpayer") }}',
        getTaxPayerRoleForLand: '{{ route("capture.individual.get-taxpayer-role-land") }}',
        getAddLandForm: '{{ route("capture.individual.get-add-land-form", ":id") }}',
        addLandAjax: '{{ route("capture.individual.add-land-ajax") }}',

        // Vehicle routes
        searchVehicleAjax: '{{ route("capture.individual.search-vehicle-ajax") }}',
        getVehicleDetailsAjax: '{{ route("capture.individual.get-vehicle-details-ajax") }}',
        linkVehicleToTaxpayer: '{{ route("capture.individual.link-vehicle-to-taxpayer") }}',
        getTaxPayerRoleForVehicle: '{{ route("capture.individual.get-taxpayer-role-vehicle") }}',
        getAddVehicleForm: '{{ route("capture.individual.get-add-vehicle-form", ":id") }}',
        addVehicleAjax: '{{ route("capture.individual.add-vehicle-ajax") }}',
        getVehicleFunctionByPurpose: '{{ route("capture.individual.get-vehicle-function-by-purpose") }}',

        // Bill generation routes
        getAssessmentRulesForBill: '{{ route("capture.individual.get-assessment-rules-for-bill") }}',
        getAssessmentRulesData: '{{ route("capture.individual.get-assessment-rules-data") }}',
        generateAssessmentPost: '{{ route("capture.individual.generate-assessment.post") }}',
        getMDAServicesForBill: '{{ route("capture.individual.get-mda-services-for-bill") }}',
        getMDAServicesData: '{{ route("capture.individual.get-mda-services-data") }}',
        getMDAServiceItems: '{{ route("capture.individual.get-mda-service-items") }}',
        generateServiceBillPost: '{{ route("capture.individual.generate-service-bill.post") }}'
    };


    // Helper to prevent body scroll when modal opens
// function preventBodyScroll(prevent) {
//     if (prevent) {
//         document.body.classList.add('modal-open');
//     } else {
//         document.body.classList.remove('modal-open');
//     }
// }

// // Update modal functions to prevent body scroll
// const originalOpenViewBillModal = window.openViewBillModal;
// window.openViewBillModal = function() {
//     preventBodyScroll(true);
//     originalOpenViewBillModal.apply(this, arguments);
// };

// const originalCloseViewBillModal = window.closeViewBillModal;
// window.closeViewBillModal = function() {
//     preventBodyScroll(false);
//     originalCloseViewBillModal.apply(this, arguments);
// };
</script>
<script src="{{ asset('js/individual/individual-details.js') }}"></script>
<script src="{{ asset('js/individual/individual-edit.js') }}"></script>
<script src="{{ asset('js/individual/individual-edit-tax-office.js') }}"></script>
<script src="{{ asset('js/individual/individual-edit-bill.js') }}"></script>
<script src="{{ asset('js/individual/individual-view-bill.js') }}"></script>
<script src="{{ asset('js/individual/individual-bill-payments.js') }}"></script>
<script src="{{ asset('js/individual/individual-assessment-rule.js') }}"></script>
<script src="{{ asset('js/individual/individual-mda-services.js') }}"></script>
<script src="{{ asset('js/individual/individual-payments.js') }}"></script>
<script src="{{ asset('js/individual/individual-tcc-request.js') }}"></script>
<script src="{{ asset('js/individual/individual-search-business.js') }}"></script>
<script src="{{ asset('js/individual/individual-search-building.js') }}"></script>
<script src="{{ asset('js/individual/individual-search-land.js') }}"></script>
<script src="{{ asset('js/individual/individual-search-vehicle.js') }}"></script>
<script src="{{ asset('js/individual/individual-generate-bill.js') }}"></script>
{{-- Documents js --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="{{ asset('js/individual/individual-documents.js') }}"></script>
<script src="{{ asset('js/individual/taxpayermessages.js') }}"></script>

<script>
        // Initialize module
    $(document).ready(function() {
        IndividualDetailsModule.init(window.individualData);

        // ========== AUTO-OPEN VIEW BILL MODAL ==========
        // Check URL parameters for action=viewbill with bill info
        function checkUrlParametersForViewBill() {
            const urlParams = new URLSearchParams(window.location.search);
            const action = urlParams.get('action');
            const billId = urlParams.get('billid');
            const billRefNo = urlParams.get('billrefno');

            if (action === 'viewbill' && billId && billRefNo) {
                // Get the individual ID from the page data
                const individualId = window.individualData?.IndividualID || {{ $individual->IndividualID ?? 0 }};

                if (individualId && typeof openViewBillModal === 'function') {
                    // Auto-open the View Bill modal
                    openViewBillModal(individualId, billId, billRefNo);

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

        // Run the check after page load (slight delay to ensure modal JS is loaded)
        setTimeout(checkUrlParametersForViewBill, 500);
    });
</script>
@endpush