@extends('layouts.auth.app')
@section('title', 'Land Use Charges')
@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.land-use-charge') }}" class="hover:text-purple-600">Land Use Charge</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">LUC</span></nav><h3 class="text-lg font-semibold text-gray-900">Land Use Charges</h3><p class="text-sm text-gray-500 mt-1">Land Use Charge profiles</p></div>@if(isset($stats))<div class="text-center px-4 py-2 bg-purple-50 rounded-lg"><p class="text-2xl font-bold text-purple-600">{{ $stats->totalProfiles ?? 0 }}</p><p class="text-xs text-gray-500">Total Profiles</p></div>@endif</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-purple-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">Profile Ref</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Profile Name</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">Assets</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.land-use-charge.partials.profile-details-modal')
@endsection
@push('scripts')
<script>const dataUrl = "{{ route('profile.luc.data') }}"; const taxPayerBaseUrl = "{{ url('Profile/LUC_TaxPayer') }}"; const assetBaseUrl = "{{ url('Profile/LUC_Asset') }}";</script>
<script src="{{ asset('js/profile/luc-list.js') }}"></script>
@endpush