@extends('layouts.auth.app')

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

@section('content')
<input type="hidden" id="hdnCompanyID" value="{{ $company->CompanyID }}">
<input type="hidden" id="hdnTaxPayerTypeID" value="{{ $company->TaxPayerTypeID ?? 2 }}">
<input type="hidden" id="hdnCorporateID" value="{{ $company->CompanyID }}">

<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.corporate.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">Corporate 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_CorporateInformation({{ $company->CompanyID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Full Details</a>
                                    <a href="#" onclick="openEditModal({{ $company->CompanyID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit Details</a>
                                    <a href="#" onclick="openEditTaxOfficeModal({{ $company->CompanyID }}); 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({{ $company->CompanyID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                        {{ $company->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">Company Name</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $company->CompanyName ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Company RIN</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $company->CompanyRIN ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">TIN</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $company->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">CAC Registration Number</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $company->CACRegistrationNumber ?? '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">{{ $company->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">Email</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $company->EmailAddress1 ?? '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">{{ $company->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">Contact Address</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $company->ContactAddress ?? 'N/A' }}</dd>
                    </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('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>
                        <!-- Controls -->
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-700">Show</span>
                                <select id="assetLength" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <span class="text-sm text-gray-700">entries</span>
                            </div>
                            <div>
                                <input id="assetSearch" type="text" placeholder="Search" class="w-64 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                            </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>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Footer controls -->
                        <div id="assetFooter" class="flex items-center justify-between mt-4">
                            <p id="assetInfo" class="text-sm text-gray-700">Showing 0 to 0 of 0 entries</p>
                            <div id="assetPagination" class="flex items-center space-x-1"></div>
                        </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>

                        <!-- Controls -->
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-700">Show</span>
                                <select id="profileLength" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <span class="text-sm text-gray-700">entries</span>
                            </div>
                            <div>
                                <input id="profileSearch" type="text" placeholder="Search" class="w-64 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                            </div>
                        </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">
                                            <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_ProfileDetails({{ $profile->ProfileID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Quick View</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Footer controls -->
                        <div id="profileFooter" class="flex items-center justify-between mt-4 hidden">
                            <p id="profileInfo" class="text-sm text-gray-700"></p>
                            <div id="profilePagination" class="flex items-center space-x-1"></div>
                        </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="javascript:void(0)" onclick="openGenerateAssessmentModal(); open = false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Assessment Bill</a>
                                        <a href="javascript:void(0)" onclick="openGenerateServiceBillModal(); open = false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">MDA Service Bill</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Controls -->
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-700">Show</span>
                                <select id="billLength" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <span class="text-sm text-gray-700">entries</span>
                            </div>
                            <div>
                                <input id="billSearch" type="text" placeholder="Search" class="w-64 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                            </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">{{ $bill->BillDate ? date('M d, Y', strtotime($bill->BillDate)) : '' }}</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">{{ isset($bill->BillAmount) ? '₦'.number_format($bill->BillAmount,2) : '' }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $bill->SettlementStatusName }}</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-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
                                                    <div class="py-1">
                                                        <a href="#" onclick="jsfn_BillQuickView({{ $bill->BillID }}, {{ $bill->BillTypeID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Quick View</a>
                                                        <a href="#" onclick="openViewBillModal({{ $company->CompanyID }}, {{ $bill->BillID }}, '{{ $bill->BillRefNo }}'); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Bill</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Footer controls -->
                        <div id="billFooter" class="flex items-center justify-between mt-4 hidden">
                            <p id="billInfo" class="text-sm text-gray-700"></p>
                            <div id="billPagination" class="flex items-center space-x-1"></div>
                        </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="filterRulesByYear({{ $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>

                        <!-- Controls -->
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-700">Show</span>
                                <select id="ruleLength" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <span class="text-sm text-gray-700">entries</span>
                            </div>
                            <div>
                                <input id="ruleSearch" type="text" placeholder="Search" class="w-64 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                            </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>
                                                        <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>

                        <!-- Footer controls -->
                        <div id="ruleFooter" class="flex items-center justify-between mt-4 hidden">
                            <p id="ruleInfo" class="text-sm text-gray-700"></p>
                            <div id="rulePagination" class="flex items-center space-x-1"></div>
                        </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="filterMDAByYear({{ $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>

                        <!-- Controls -->
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-700">Show</span>
                                <select id="mdaLength" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <span class="text-sm text-gray-700">entries</span>
                            </div>
                            <div>
                                <input id="mdaSearch" type="text" placeholder="Search" class="w-64 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                            </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>

                        <!-- Footer controls -->
                        <div id="mdaFooter" class="flex items-center justify-between mt-4 hidden">
                            <p id="mdaInfo" class="text-sm text-gray-700"></p>
                            <div id="mdaPagination" class="flex items-center space-x-1"></div>
                        </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 ?? 0, 2) }}
                            </div>
                        </div>

                        <!-- Controls -->
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-700">Show</span>
                                <select id="paymentLength" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <span class="text-sm text-gray-700">entries</span>
                            </div>
                            <div>
                                <input id="paymentSearch" type="text" placeholder="Search" class="w-64 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                            </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 Ref</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>

                        <!-- Footer controls -->
                        <div class="flex items-center justify-between mt-4">
                            <p id="paymentInfo" class="text-sm text-gray-700">Showing 0 to 0 of 0 entries</p>
                            <div id="paymentPagination" class="flex items-center space-x-1"></div>
                        </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({{ $company->CompanyID }}); 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({{ $company->CompanyID }}, {{ $document->TPDID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Document</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">Messages</h3>
                        <div id="dvMessaging">
                            @include('components.auth.taxpayer-messages', ['taxPayerId' => $company->CompanyID, 'taxPayerTypeId' => $company->TaxPayerTypeID ?? 2])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Asset Quick View Modals --}}
<!-- Building Asset Modal -->
<div id="dvBuildingModal" 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('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 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">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">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">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">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">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">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">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">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>
            </div>
        </div>
    </div>
</div>

{{-- Document Modals --}}
@include('pages.taxpayer.corporate.modals.document-modal')
<!-- Business Asset Modal --}}
@include('pages.taxpayer.corporate.modals.business-asset-modal')
<!-- Building Asset Modal -->
@include('pages.taxpayer.corporate.modals.building-asset-modal')
<!-- Land Asset Modal --}}
@include('pages.taxpayer.corporate.modals.land-asset-modal')
<!-- Vehicle Asset Modal --}}
@include('pages.taxpayer.corporate.modals.vehicle-asset-modal')
{{-- Edit Corporate Modal --}}
@include('pages.taxpayer.corporate.modals.edit-modal')
{{-- Edit Tax Office Modal --}}
@include('pages.taxpayer.corporate.modals.edit-tax-office-modal')
{{-- View Bill Modal --}}
@include('pages.taxpayer.corporate.modals.bills-modal')
{{-- Generate Assessment Modal --}}
@include('pages.taxpayer.corporate.modals.generate-assessment-modal')
{{-- Generate Service Bill Modal --}}
@include('pages.taxpayer.corporate.modals.generate-service-bill-modal')

@endsection

@push('scripts')
<!-- Loading helper -->

<script src="{{ asset('js/corporate-details.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/corporate-documents.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/corporate/corporate-search-business.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/corporate/corporate-search-building.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/corporate/corporate-search-land.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/corporate/corporate-search-vehicle.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/corporate/corporate-edit.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/corporate/corporate-edit-tax-office.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/corporate/corporate-view-bill.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/corporate/corporate-generate-bill.js') }}?v={{ time() }}"></script>
<script>
// Pass PHP data to JavaScript
window.corporateData = {
    id: {{ $company->CompanyID ?? 0 }},
    rin: '{{ $company->CompanyRIN ?? '' }}',
    taxPayerTypeId: {{ $company->TaxPayerTypeID ?? 2 }}, // Corporate
    active: {{ $company->Active ? 'true' : 'false' }}
};

// Full corporate data for the modal
window.corporateFullData = {
    CompanyID: {{ $company->CompanyID ?? 0 }},
    CompanyRIN: '{{ $company->CompanyRIN ?? '' }}',
    CompanyName: '{{ $company->CompanyName ?? '' }}',
    TIN: '{{ $company->TIN ?? '' }}',
    CACRegistrationNumber: '{{ $company->CACRegistrationNumber ?? '' }}',
    MobileNumber1: '{{ $company->MobileNumber1 ?? '' }}',
    MobileNumber2: '{{ $company->MobileNumber2 ?? '' }}',
    EmailAddress1: '{{ $company->EmailAddress1 ?? '' }}',
    EmailAddress2: '{{ $company->EmailAddress2 ?? '' }}',
    TaxOfficeName: '{{ $company->TaxOfficeName ?? '' }}',
    CompanyTypeName: '{{ $company->CompanyTypeName ?? '' }}',
    BusinessTypeName: '{{ $company->BusinessTypeName ?? '' }}',
    Active: {{ $company->Active ? 'true' : 'false' }},
    ContactAddress: '{{ addslashes($company->ContactAddress ?? '') }}'
};

// Pass routes to JavaScript
window.routes = {
    getAssetDetails: '{{ route("capture.corporate.get-asset-details") }}',
    updateAssetStatus: '{{ route("capture.corporate.update-asset-status") }}',
    getProfileDetails: '{{ route("capture.corporate.get-profile-details") }}',
    getBillDetails: '{{ route("capture.corporate.get-bill-details") }}',
    getPaymentDetails: '{{ route("capture.corporate.get-payment-details") }}',
    getAssessmentRuleDetails: '{{ route("capture.corporate.get-assessment-rule-details") }}',
    getMDAServiceDetails: '{{ route("capture.corporate.get-mda-service-details") }}',
    getMDAServiceItems: '{{ route("capture.corporate.get-mda-service-items") }}',
    addDocument: '{{ route("capture.corporate.add-document", ["id" => ":id"]) }}',
    addDocumentPost: '{{ route("capture.corporate.add-document.post") }}',
    getDocumentForView: '{{ route("capture.corporate.get-document-for-view", ["docId" => ":docId"]) }}',
    searchBusinessAjax: '{{ route("capture.corporate.search-business-ajax") }}',
    getBusinessDetailsAjax: '{{ route("capture.corporate.get-business-details-ajax") }}',
    linkBusinessToTaxpayer: '{{ route("capture.corporate.link-business-to-taxpayer") }}',
    getTaxPayerRoleForBusiness: '{{ route("capture.corporate.get-taxpayer-role-business") }}',
    getAddBusinessForm: '{{ route("capture.corporate.get-add-business-form", ":id") }}',
    addBusinessAjax: '{{ route("capture.corporate.add-business-ajax") }}',
    searchBuildingAjax: '{{ route("capture.corporate.search-building-ajax") }}',
    getBuildingDetailsAjax: '{{ route("capture.corporate.get-building-details-ajax") }}',
    linkBuildingToTaxpayer: '{{ route("capture.corporate.link-building-to-taxpayer") }}',
    getTaxPayerRoleForBuilding: '{{ route("capture.corporate.get-taxpayer-role-building") }}',
    getBuildingUnitsForBuilding: '{{ route("capture.corporate.get-building-units") }}',
    getAddBuildingForm: '{{ route("capture.corporate.get-add-building-form", ":id") }}',
    addBuildingAjax: '{{ route("capture.corporate.add-building-ajax") }}',
    addBuildingUnitAjax: '{{ route("capture.corporate.add-building-unit-ajax") }}',
    removeBuildingUnitAjax: '{{ route("capture.corporate.remove-building-unit-ajax") }}',
    searchLandAjax: '{{ route("capture.corporate.search-land-ajax") }}',
    getLandDetailsAjax: '{{ route("capture.corporate.get-land-details-ajax") }}',
    linkLandToTaxpayer: '{{ route("capture.corporate.link-land-to-taxpayer") }}',
    getTaxPayerRoleForLand: '{{ route("capture.corporate.get-taxpayer-role-land") }}',
    getAddLandForm: '{{ route("capture.corporate.get-add-land-form", ":id") }}',
    addLandAjax: '{{ route("capture.corporate.add-land-ajax") }}',
    searchVehicleAjax: '{{ route("capture.corporate.search-vehicle-ajax") }}',
    getVehicleDetailsAjax: '{{ route("capture.corporate.get-vehicle-details-ajax") }}',
    linkVehicleToTaxpayer: '{{ route("capture.corporate.link-vehicle-to-taxpayer") }}',
    getTaxPayerRoleForVehicle: '{{ route("capture.corporate.get-taxpayer-role-vehicle") }}',
    getAddVehicleForm: '{{ route("capture.corporate.get-add-vehicle-form", ":id") }}',
    addVehicleAjax: '{{ route("capture.corporate.add-vehicle-ajax") }}',
    edit: '{{ route("capture.corporate.edit", ":id") }}',
    getForEdit: '{{ route("capture.corporate.get-for-edit", ":id") }}',
    updateAjax: '{{ route("capture.corporate.update-ajax") }}',
    getCorporateTaxOfficeForEdit: '{{ route("capture.corporate.get-tax-office-for-edit", ":id") }}',
    updateCorporateTaxOfficeAjax: '{{ route("capture.corporate.update-tax-office-ajax") }}',
    viewBill: '{{ route("capture.corporate.view-bill", ["id" => ":id", "billId" => ":billId"]) }}',
    // Billing routes - Assessment Bill & MDA Service Bill
    getAssessmentRulesData: '{{ route("capture.corporate.get-assessment-rules-data") }}',
    generateAssessmentPost: '{{ route("capture.corporate.generate-assessment") }}',
    getAssessmentItems: '{{ route("capture.corporate.get-assessment-items") }}',
    getMDAServicesData: '{{ route("capture.corporate.get-mda-services-data") }}',
    generateServiceBillPost: '{{ route("capture.corporate.generate-service-bill") }}'
};

// CSRF Token for AJAX requests
window.csrfToken = '{{ csrf_token() }}';

// Initialize module
$(document).ready(function() {
    console.log('Initializing CorporateDetailsModule');
    console.log('jQuery version:', $.fn.jquery);
    console.log('switchTab function exists:', typeof window.switchTab);
    CorporateDetailsModule.init(window.corporateData);
    console.log('CorporateDetailsModule initialized');

    // ========== 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) {
            const companyId = window.corporateData?.id || {{ $company->CompanyID ?? 0 }};
            if (companyId && typeof openViewBillModal === 'function') {
                // Open the View Bill modal with the provided parameters
                openViewBillModal(companyId, billId, billRefNo);
                // Clean the URL to remove query parameters
                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