@extends('layouts.auth.app')

@section('title', 'Vehicle Details - ' . ($vehicle->VehicleRIN ?? 'N/A'))

@section('content')
<div class="container-fluid p-6">
    <!-- Header Section -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <a href="{{ route('profile.vehicle.list') }}" class="text-teal-600 hover:text-teal-800 mb-2 inline-block">
                <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                Back to List
            </a>
            <h1 class="text-2xl font-semibold text-gray-900">Vehicle Details</h1>
            <p class="text-sm text-gray-600 mt-1">RIN: {{ $vehicle->VehicleRIN ?? 'N/A' }}</p>
        </div>

        <div class="relative">
            <button onclick="toggleActionDropdown()" class="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 flex items-center">
                Actions
                <svg class="w-4 h-4 ml-2" 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"></path>
                </svg>
            </button>

            <div id="actionDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-50">
                <button onclick="jsfn_ViewVehicleDetails({{ $vehicle->VehicleID }})" class="block w-full text-left px-4 py-2 hover:bg-gray-100">View Details</button>
                <button onclick="openEditVehicleModal({{ $vehicle->VehicleID }})" class="block w-full text-left px-4 py-2 hover:bg-gray-100">Edit Vehicle</button>
                <button onclick="jsfn_ChangeStatus({{ $vehicle->VehicleID }}, {{ $vehicle->Active ? 'true' : 'false' }})" class="block w-full text-left px-4 py-2 hover:bg-gray-100">
                    {{ $vehicle->Active ? 'Mark as Inactive' : 'Mark as Active' }}
                </button>
            </div>
        </div>
    </div>

    <!-- 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">Vehicle RIN</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->VehicleRIN ?? 'N/A' }}</dd>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
                <dt class="text-sm font-medium text-gray-500 mb-1">Vehicle Registration Number</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->VehicleRegNumber ?? 'N/A' }}</dd>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
                <dt class="text-sm font-medium text-gray-500 mb-1">VIN (17 Characters)</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->VIN ?? 'N/A' }}</dd>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
                <dt class="text-sm font-medium text-gray-500 mb-1">Vehicle Type</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->VehicleTypeName ?? 'N/A' }}</dd>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
                <dt class="text-sm font-medium text-gray-500 mb-1">Vehicle Sub-Type</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->VehicleSubTypeName ?? 'N/A' }}</dd>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
                <dt class="text-sm font-medium text-gray-500 mb-1">LGA (Registration)</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->LGAName ?? 'N/A' }}</dd>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
                <dt class="text-sm font-medium text-gray-500 mb-1">Vehicle Purpose</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->VehiclePurposeName ?? 'N/A' }}</dd>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
                <dt class="text-sm font-medium text-gray-500 mb-1">Vehicle Function</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->VehicleFunctionName ?? 'N/A' }}</dd>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
                <dt class="text-sm font-medium text-gray-500 mb-1">Vehicle Ownership</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->VehicleOwnershipName ?? 'N/A' }}</dd>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg md:col-span-2 lg:col-span-2">
                <dt class="text-sm font-medium text-gray-500 mb-1">Vehicle Description</dt>
                <dd class="text-sm text-gray-900 font-semibold">{{ $vehicle->VehicleDescription ?? '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 {{ $vehicle->Active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                        {{ $vehicle->Active ? 'Active' : 'Inactive' }}
                    </span>
                </dd>
            </div>
        </div>
    </div>

    <!-- Tab Navigation -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
                <button onclick="switchTab('taxpayers')"
                        id="tab-taxpayers"
                        class="tab-button border-b-2 border-teal-500 py-4 px-1 text-center text-sm font-medium text-teal-600">
                    Associated Tax Payers
                </button>
            </nav>
        </div>

        <!-- Tab Content -->
        <div class="p-6">
            <!-- Associated Tax Payers Tab -->
            <div id="content-taxpayers" class="tab-content">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-base font-semibold text-gray-900">Associated Tax Payers</h3>

                    <div class="relative">
                        <button onclick="toggleAddTaxPayerDropdown()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
                            Add New
                            <svg class="ml-2 -mr-1 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"></path>
                            </svg>
                        </button>

                        <div id="addTaxPayerDropdown" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
                            <div class="py-1" role="menu">
                                <button onclick="jsfn_OpenSearchModal('Individual')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Individual</button>
                                <button onclick="jsfn_OpenSearchModal('Corporate')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Corporate</button>
                                <button onclick="jsfn_OpenSearchModal('Government')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Government</button>
                                <button onclick="jsfn_OpenSearchModal('Special')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Special</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table id="tblTaxPayerAssetList" class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">S/N</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Payer Type</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Payer RIN</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Payer Name</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th scope="col" 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($taxPayerAssets as $index => $asset)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $index + 1 }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $asset->TaxPayerTypeName ?? '-' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $asset->TaxPayerRIN ?? '-' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $asset->TaxPayerName ?? '-' }}</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 text-sm">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $asset->ActiveText == 'Active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                        {{ $asset->ActiveText ?? '-' }}
                                    </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_ViewProfileDetails({{ $asset->TaxPayerID }}, {{ $asset->TaxPayerTypeID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Quick View</a>
                                                <a href="#" onclick="jsfn_RemoveTaxPayerLink({{ $asset->TPAID }}); return false;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove Link</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include Modals -->
@include('pages.profile.vehicle.modals.view-details-modal')
@include('pages.profile.vehicle.modals.edit-modal')
@include('pages.profile.vehicle.modals.search-individual-modal')
@include('pages.profile.vehicle.modals.search-corporate-modal')
@include('pages.profile.vehicle.modals.search-government-modal')
@include('pages.profile.vehicle.modals.search-special-modal')
@include('pages.profile.vehicle.modals.profile-details-modal')

@endsection

@push('scripts')
<script>
// Global data
window.vehicleData = {
    id: {{ $vehicle->VehicleID ?? 0 }},
    rin: '{{ $vehicle->VehicleRIN ?? '' }}',
    assetTypeId: {{ $assetTypeId ?? 0 }},
    active: {{ $vehicle->Active ? 'true' : 'false' }}
};

window.vehicleRoutes = {
    updateStatus: '{{ route('profile.vehicle.update-status') }}',
    getForEdit: '{{ route('profile.vehicle.getForEdit', ['id' => '__ID__']) }}',
    updateAjax: '{{ route('profile.vehicle.updateAjax') }}',
    getTaxPayerAssets: '{{ route('profile.vehicle.getTaxPayerAssets') }}',
    updateTaxPayerAssetStatus: '{{ route('profile.vehicle.updateTaxPayerAssetStatus') }}',
    searchIndividual: '{{ route('profile.vehicle.searchIndividualAjax') }}',
    searchCorporate: '{{ route('profile.vehicle.searchCorporateAjax') }}',
    searchGovernment: '{{ route('profile.vehicle.searchGovernmentAjax') }}',
    searchSpecial: '{{ route('profile.vehicle.searchSpecialAjax') }}',
    linkIndividual: '{{ route('profile.vehicle.linkIndividualToAsset') }}',
    linkCorporate: '{{ route('profile.vehicle.linkCorporateToAsset') }}',
    linkGovernment: '{{ route('profile.vehicle.linkGovernmentToAsset') }}',
    linkSpecial: '{{ route('profile.vehicle.linkSpecialToAsset') }}',
    getTaxPayerRoleForVehicle: '{{ route('profile.vehicle.getTaxPayerRoleForVehicle') }}',
    getAddIndividualForm: '{{ route('profile.vehicle.getAddIndividualForm') }}',
    addIndividualAjax: '{{ route('profile.vehicle.addIndividualAjax') }}',
    getAddCorporateForm: '{{ route('profile.vehicle.getAddCorporateForm') }}',
    addCorporateAjax: '{{ route('profile.vehicle.addCorporateAjax') }}',
    getAddGovernmentForm: '{{ route('profile.vehicle.getAddGovernmentForm') }}',
    addGovernmentAjax: '{{ route('profile.vehicle.addGovernmentAjax') }}',
    getAddSpecialForm: '{{ route('profile.vehicle.getAddSpecialForm') }}',
    addSpecialAjax: '{{ route('profile.vehicle.addSpecialAjax') }}',
    getProfileDetails: '{{ route('profile.vehicle.getProfileDetails') }}',
};

// Keep backward compatibility
window.routes = window.vehicleRoutes;

// Base controller routes for cascading dropdowns
window.baseRoutes = {
    getVehicleSubType: '{{ route('base.get-vehicle-sub-type') }}'
};

window.csrfToken = '{{ csrf_token() }}';

// Tab switching function
function switchTab(tabName) {
    document.querySelectorAll('.tab-content').forEach(function(content) {
        content.classList.add('hidden');
    });

    document.querySelectorAll('.tab-button').forEach(function(tab) {
        tab.classList.remove('border-teal-500', 'text-teal-600');
        tab.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    });

    document.getElementById('content-' + tabName).classList.remove('hidden');

    const activeTab = document.getElementById('tab-' + tabName);
    activeTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    activeTab.classList.add('border-teal-500', 'text-teal-600');
}

function toggleActionDropdown() {
    document.getElementById('actionDropdown').classList.toggle('hidden');
}

function toggleAddTaxPayerDropdown() {
    document.getElementById('addTaxPayerDropdown').classList.toggle('hidden');
}

document.addEventListener('click', function(event) {
    const actionDropdown = document.getElementById('actionDropdown');
    const addTaxPayerDropdown = document.getElementById('addTaxPayerDropdown');

    if (!event.target.closest('button')) {
        if (actionDropdown && !actionDropdown.classList.contains('hidden')) {
            actionDropdown.classList.add('hidden');
        }
        if (addTaxPayerDropdown && !addTaxPayerDropdown.classList.contains('hidden')) {
            addTaxPayerDropdown.classList.add('hidden');
        }
    }
});
</script>

<script src="{{ asset('js/profile/profile-vehicle-edit.js') }}"></script>
<script src="{{ asset('js/profile/profile-vehicle-details.js') }}"></script>
@endpush