@extends('layouts.auth.app')

@section('title', 'Special 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="{{ $special->SpecialID }}">
<input type="hidden" id="hdnTaxPayerTypeID" value="{{ $special->TaxPayerTypeID }}">
<input type="hidden" id="hdnSpecialID" value="{{ $special->SpecialID }}">

<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.special.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">Special 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_SpecialInformation({{ $special->SpecialID }})" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Full Details</a>
                                    <a href="#" onclick="openEditSpecialModal({{ $special->SpecialID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit Details</a>
                                    @if($special->Active)
                                    <a href="#" onclick="toggleSpecialStatus({{ $special->SpecialID }}, 0); return false;" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Mark Inactive</a>
                                    @else
                                    <a href="#" onclick="toggleSpecialStatus({{ $special->SpecialID }}, 1); return false;" class="block px-4 py-2 text-sm text-green-600 hover:bg-gray-100">Mark Active</a>
                                    @endif
                                </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">{{ $special->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">Tax Payer Name</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $special->SpecialTaxPayerName ?? '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 TIN</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $special->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 RIN</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $special->SpecialRIN ?? '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">{{ $special->ContactNumber ?? '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">{{ $special->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">{{ $special->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">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
                                {{ $special->Active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $special->Active ? 'Active' : 'Inactive' }}
                            </span>
                        </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('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>
                    </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 ?? 'N/A' }}</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>
                    </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="#" onclick="openEditBillModal({{ $special->SpecialID }}, {{ $bill->BillID }}, {{ $bill->BillTypeID }}); 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({{ $special->SpecialID }}, {{ $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.special.generate-bill', ['special' => $special->SpecialID]) }}?name={{ $special->SpecialRIN }}&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">
                                    Tax 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>
                                                    </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>
                        <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>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Include Modal Files --}}
@include('pages.taxpayer.special.modals.special-info-modal')
@include('pages.taxpayer.special.modals.asset-modal')
@include('pages.taxpayer.special.modals.assessment-modal')
@include('pages.taxpayer.special.modals.edit-special-modal')
@include('pages.taxpayer.special.modals.mda-service-modal')
@include('pages.taxpayer.special.modals.bill-modal')
@include('pages.taxpayer.special.modals.payment-modal')
@include('pages.taxpayer.special.modals.business-asset-modal')
@include('pages.taxpayer.special.modals.building-asset-modal')
@include('pages.taxpayer.special.modals.land-asset-modal')
@include('pages.taxpayer.special.modals.vehicle-asset-modal')
@include('pages.taxpayer.special.modals.generate-assessment-modal')
@include('pages.taxpayer.special.modals.generate-service-bill-modal')

@endsection

@push('scripts')

<script src="{{ asset('js/special/special-details.js') }}"></script>
<script src="{{ asset('js/special/special-search-business.js') }}"></script>
<script src="{{ asset('js/special/special-search-building.js') }}"></script>
<script src="{{ asset('js/special/special-search-land.js') }}"></script>
<script src="{{ asset('js/special/special-search-vehicle.js') }}"></script>
<script src="{{ asset('js/special/special-generate-bill.js') }}"></script>

<script>
    // Pass PHP data to JavaScript
	window.specialData = {
			id: {{ $special->SpecialID ?? 0 }},
			rin: '{{ $special->SpecialRIN ?? '' }}',
			taxPayerTypeId: {{ $special->TaxPayerTypeID ?? 5 }},
			active: {{ $special->Active ? 'true' : 'false' }}
	};

	window.specialFullData = {
		SpecialID: {{ $special->SpecialID ?? 0}},
		SpecialRIN: '{{ $special->SpecialRIN ?? '' }}',
		TIN: '{{ $special->TIN ?? '' }}',
		ContactEmail: '{{ $special->ContactEmail ?? '' }}',
		ContactName: '{{ $special->ContactName ?? '' }}',
		ContactNumber: '{{ $special->ContactNumber ?? '' }}',
		SpecialTaxPayerName: '{{ $special->SpecialTaxPayerName ?? '' }}',
		Description: '{{ $special->Description ?? '' }}',
		TaxOfficeName: '{{ $special->TaxOfficeName ?? '' }}',
		TaxOfficerName: '{{ $special->TaxOfficerName ?? '' }}',
		Active: {{ $special->Active ? 'true' : 'false' }},
	}

	window.routes = {		
		// Asset routes
		getAssetDetails: '{{ route("capture.special.get-asset-details") }}',
		
		// Assessment Rule routes
		getAssessmentRuleDetails: '{{ route("capture.special.get-assessment-rule-details") }}',
		getAssessmentRuleItemList: '{{ route("capture.special.get-assessment-rule-item-list") }}',
		getProfileDetails: '{{ route("capture.special.get-profile-details") }}',
		
		// MDA Service routes
		getMDAServiceDetails: '{{ route("capture.special.get-mda-service-details") }}',
		getMDAServiceItemList: '{{ route("capture.special.get-mda-service-item-list") }}',
		
		// Building asset routes (Special)
		searchBuildingAjax: '{{ route("capture.special.search-building-ajax") }}',
		getBuildingDetailsAjax: '{{ route("capture.special.get-building-details-ajax") }}',
		getTaxPayerRoleForBuilding: '{{ route("capture.special.get-taxpayer-role-building") }}',
		getBuildingUnitsForBuilding: '{{ route("capture.special.get-building-units") }}',
		getAddBuildingForm: '{{ route("capture.special.get-add-building-form", ":id") }}',
		addBuildingAjax: '{{ route("capture.special.add-building-ajax") }}',
		addBuildingUnitAjax: '{{ route("capture.special.add-building-unit-ajax") }}',
		removeBuildingUnitAjax: '{{ route("capture.special.remove-building-unit-ajax") }}',
		
		// Land asset routes (Special)
		searchLandAjax: '{{ route("capture.special.search-land-ajax") }}',
		getLandDetailsAjax: '{{ route("capture.special.get-land-details-ajax") }}',
		linkLandToTaxpayer: '{{ route("capture.special.link-land-to-taxpayer") }}',
		getTaxPayerRoleForLand: '{{ route("capture.special.get-taxpayer-role-land") }}',
		getAddLandForm: '{{ route("capture.special.get-add-land-form", ":id") }}',
		addLandAjax: '{{ route("capture.special.add-land-ajax") }}',
		getWardsByLGA: '{{ route("capture.special.get-ward-by-lga") }}',
		getTownDetails: '{{ route("capture.special.get-town-details") }}',
		getUnitFunctionsByPurpose: '{{ route("capture.special.get-unit-function-by-purpose") }}',
		
		// Bill routes
		getAssessmentDetails: '{{ route("capture.special.get-assessment-details") }}',
		getServiceBillDetails: '{{ route("capture.special.get-service-bill-details") }}',
		getBillPaymentList: '{{ route("capture.special.get-bill-payment-list") }}',
		
		// Payment routes
		getSettlementDetails: '{{ route("capture.special.get-settlement-details") }}',
		getPoADetails: '{{ route("capture.special.get-poa-details") }}',
		
		// Status update route
		updateStatus: '{{ route("capture.special.update-status") }}',
		
		// Business asset search/link routes for Special taxpayers
		searchBusinessAjax: '{{ route("capture.special.search-business-ajax") }}',
		getBusinessDetailsAjax: '{{ route("capture.special.get-business-details-ajax") }}',
		linkBusinessToTaxpayer: '{{ route("capture.special.link-business-to-taxpayer") }}',
		getTaxPayerRoleForBusiness: '{{ route("capture.special.get-taxpayer-role-business") }}',
		getAddBusinessForm: '{{ route("capture.special.get-add-business-form", ":id") }}',
		addBusinessAjax: '{{ route("capture.special.add-business-ajax") }}',

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

		// Edit special taxpayer routes
		getSpecialDetails: '{{ route("capture.special.get-details-ajax") }}',
		updateSpecial: '{{ route("capture.special.update-ajax") }}',
		toggleSpecialStatus: '{{ route("capture.special.toggle-status") }}',

		// Bill management routes (for reference links if needed)
		viewBill: '{{ route("capture.special.view-bill", ["id" => ":id", "billId" => ":billId"]) }}',
		viewBillPage: '{{ route("capture.special.bill-detail", ["special" => $special->SpecialID ?? 0]) }}?name={{ $special->SpecialRIN ?? "" }}&billid=:billId&billrefno=:billRefNo',
		editAssessment: '{{ route("capture.special.edit-assessment", ["special" => $special->SpecialID ?? 0]) }}?name={{ $special->SpecialRIN ?? "" }}&aid=:billId',
		editServiceBill: '{{ route("capture.special.edit-service-bill", ["special" => $special->SpecialID ?? 0]) }}?name={{ $special->SpecialRIN ?? "" }}&sbid=:billId',
		generateBillPdf: '{{ route("capture.special.generate-bill", ["special" => $special->SpecialID ?? 0]) }}?name={{ $special->SpecialRIN ?? "" }}&billid=:billId&billrefno=:billRefNo',

		// Billing - Generate Assessment Bill (2-Step Modal Flow)
		getAssessmentRulesData: '{{ route("capture.special.get-assessment-rules-data") }}',
		generateAssessmentPost: '{{ route("capture.special.generate-assessment") }}',
		getAssessmentItemsForBilling: '{{ route("capture.special.get-assessment-items-for-billing") }}',

		// Billing - Generate Service Bill (2-Step Modal Flow)
		getMDAServicesData: '{{ route("capture.special.get-mda-services-data") }}',
		generateServiceBillPost: '{{ route("capture.special.generate-service-bill") }}',
		getMDAServiceItemsForBilling: '{{ route("capture.special.get-mda-service-items-for-billing") }}'
	}

	// Initialize module
	$(document).ready(function() {
		SpecialDetailsModule.init(window.specialData);

		// ========== 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 specialId = window.specialData?.SpecialID || {{ $special->SpecialID ?? 0 }};
				if (specialId && typeof openViewBillModal === 'function') {
					// Open the View Bill modal with the provided parameters
					openViewBillModal(specialId, 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