@extends('layouts.auth.app')
@section('title', 'VL - Assets')
@section('content')
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200"><div class="flex items-center justify-between"><div><nav class="flex items-center space-x-2 text-sm text-gray-500 mb-2"><a href="{{ route('profile.vehicle-licence') }}" class="hover:text-indigo-600">Vehicle License</a><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg><a href="{{ route('profile.vl') }}" class="hover:text-indigo-600">VL</a><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg><span class="text-gray-900">Assets</span></nav><h3 class="text-lg font-semibold text-gray-900">Vehicle Licenses - Assets</h3><p class="text-sm text-gray-500 mt-1">Profile: {{ $profileData->ProfileReferenceNo ?? 'N/A' }}</p></div><a href="{{ route('profile.vl') }}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>Back</a></div></div>
    <div class="px-6 py-4 border-b border-gray-200"><div class="relative"><input type="text" id="searchInput" placeholder="Search..." class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"><svg class="absolute left-3 top-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg></div></div>
    <div class="overflow-x-auto"><table 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">Asset Type</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Asset Name</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Asset RIN</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tax Payers</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th></tr></thead><tbody id="tableBody" class="divide-y divide-gray-200"></tbody></table></div>
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200"><div class="flex items-center justify-between"><p class="text-sm text-gray-700">Showing <span id="showingFrom">0</span> to <span id="showingTo">0</span> of <span id="totalRecords">0</span></p><div class="flex items-center space-x-4"><select id="itemsPerPage" class="px-2 py-1 text-sm border border-gray-300 rounded-md"><option value="10">10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option></select><div id="paginationControls" class="flex items-center space-x-1"></div></div></div></div>
</div>
@include('pages.profile.vehicle-licence.partials.profile-details-modal')
@endsection
@push('scripts')
<script>const dataUrl = "{{ route('profile.vl.asset.data') }}"; const profileId = {{ $id }};</script>
<script src="{{ asset('js/profile/vl-asset-list.js') }}"></script>
@endpush