<x-app-layout>
    <div class="px-8 py-12 lg:px-16 min-h-screen">
        <div class="max-w-7xl mx-auto space-y-16">
            <!-- Professional Hub Header (Dark Edition) -->
            <div class="space-y-4 border-l-4 border-white/20 pl-8">
                <h2 class="text-4xl md:text-5xl font-display font-black text-white uppercase italic tracking-tighter leading-none">Portal Intelijen</h2>
                <p class="text-[11px] font-black text-slate-500 uppercase tracking-[0.5em] italic leading-none text-balance">Akses Database Global — Jaringan Intelijen Terpadu v2.5</p>
            </div>

            <!-- Enhanced Strategic Search & Filter Bar (Dark Edition) -->
            <div class="bg-white/5 rounded-[56px] p-12 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.6)] border border-white/5 relative overflow-hidden group">
                <form action="{{ route('member.search.index') }}" method="GET" class="grid lg:grid-cols-12 gap-10 items-end relative z-10">
                    <div class="lg:col-span-5 space-y-4">
                        <label class="text-[9px] font-black uppercase tracking-[0.4em] text-slate-500 px-3 italic">Identitas Kueri Pencarian</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-7 flex items-center pointer-events-none text-slate-700 group-focus-within:text-indigo-500 transition-colors">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                            </div>
                            <input type="text" name="query" value="{{ $filters['query'] ?? '' }}" placeholder="Nopol, Rangka, atau Mesin..." 
                                class="w-full pl-16 pr-8 h-20 bg-white/5 border border-white/10 rounded-[32px] text-[16px] font-bold text-white focus:ring-0 focus:border-indigo-500 transition-all placeholder:text-slate-800 shadow-2xl" />
                        </div>
                    </div>
                    
                    <div class="lg:col-span-4 space-y-4">
                        <label class="text-[9px] font-black uppercase tracking-[0.4em] text-slate-500 px-3 italic">Jaringan Federasi</label>
                        <div class="relative">
                            <select name="leasing_id" class="w-full h-20 pl-8 pr-12 bg-white/5 border border-white/10 rounded-[32px] text-[13px] font-black text-white focus:ring-0 focus:border-indigo-500 transition-all appearance-none uppercase tracking-widest italic shadow-2xl">
                                <option value="" class="bg-slate-900">Seluruh Jaringan Nasional</option>
                                @foreach($leasings as $leasing)
                                    <option value="{{ $leasing->id }}" {{ ($filters['leasing_id'] ?? '') == $leasing->id ? 'selected' : '' }} class="bg-slate-900">{{ $leasing->company_name }}</option>
                                @endforeach
                            </select>
                            <div class="absolute inset-y-0 right-0 pr-6 flex items-center pointer-events-none text-slate-700">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"></path></svg>
                            </div>
                        </div>
                    </div>

                    <div class="lg:col-span-3">
                        <button type="submit" class="w-full h-20 bg-white text-slate-950 rounded-[32px] font-black uppercase tracking-widest text-[11px] italic hover:bg-indigo-600 hover:text-white transition-all transform hover:scale-[1.02] active:scale-95 shadow-2xl flex items-center justify-center gap-4">
                            <span>Eksekusi Analisis</span>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                        </button>
                    </div>
                </form>
                
                <!-- Background Decoration -->
                <div class="absolute right-[-20px] top-[-20px] opacity-[0.03] text-white pointer-events-none group-hover:rotate-12 transition-transform duration-1000">
                    <svg class="w-72 h-72" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path></svg>
                </div>
            </div>

            <!-- Results Data Grid (Dark Edition) -->
            <div class="bg-white/5 rounded-[56px] border border-white/5 shadow-3xl overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="bg-white/5 border-b border-white/5 text-slate-500 text-[9px] font-black uppercase tracking-[0.4em] italic">
                            <tr>
                                <th class="px-12 py-8">Sumber Operasional</th>
                                <th class="px-12 py-8">Identitas Aset</th>
                                <th class="px-12 py-8">Signature Produksi</th>
                                <th class="px-12 py-8 text-center">Status Keamanan</th>
                                <th class="px-12 py-8 text-right">Operasi Unit</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/5">
                            @forelse($results as $record)
                                <tr class="hover:bg-white/5 transition-all duration-300 group">
                                    <td class="px-12 py-10">
                                        <div class="font-display font-black text-white text-[15px] mb-1.5 uppercase tracking-tight group-hover:text-indigo-400 transition-colors">{{ $record->leasingProfile->company_name }}</div>
                                        <div class="text-[9px] font-black text-slate-600 uppercase tracking-[0.3em] leading-none italic">{{ $record->branch->name ?? 'Pusat Utama' }}</div>
                                    </td>
                                    <td class="px-12 py-10">
                                        <div class="font-display font-black text-white text-3xl tracking-tighter uppercase leading-none group-hover:translate-x-1 transition-transform italic">{{ $record->nopol }}</div>
                                        <div class="mt-3 text-[10px] font-black text-slate-600 uppercase tracking-[0.3em] leading-none italic">{{ $record->kendaraan }} <span class="text-white/5 mx-2">/</span> {{ $record->model }}</div>
                                    </td>
                                    <td class="px-12 py-10 font-mono">
                                        <div class="flex flex-col gap-3">
                                            <div class="flex items-center gap-4">
                                                <span class="text-[8px] font-black text-slate-700 uppercase tracking-widest min-w-[36px] italic">VIN</span>
                                                <span class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">{{ $record->rangka }}</span>
                                            </div>
                                            <div class="flex items-center gap-4">
                                                <span class="text-[8px] font-black text-slate-700 uppercase tracking-widest min-w-[36px] italic">MSN</span>
                                                <span class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">{{ $record->mesin }}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-12 py-10 text-center">
                                        @if($record->legal_flag)
                                            <div class="inline-flex items-center gap-3 px-6 py-2.5 bg-rose-500/10 text-rose-400 rounded-full text-[9px] font-black uppercase tracking-widest border border-rose-500/20 shadow-2xl shadow-rose-500/10 animate-pulse italic">
                                                <span class="w-1.5 h-1.5 bg-rose-500 rounded-full"></span>
                                                PERINGATAN HUKUM
                                            </div>
                                        @else
                                            <div class="inline-flex items-center gap-3 px-6 py-2.5 bg-emerald-500/10 text-emerald-400 rounded-full text-[9px] font-black uppercase tracking-widest border border-emerald-500/20 italic">
                                                <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>
                                                AMAN TERPERIKSA
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-12 py-10 text-right">
                                        <div class="flex justify-end items-center gap-6">
                                            <div class="px-8 py-3 bg-slate-950 rounded-full text-[9px] font-black text-white uppercase tracking-[0.5em] shadow-2xl shadow-indigo-100 italic">
                                                Akses <span class="text-indigo-400">Nasional</span>
                                            </div>
                                            <a href="{{ route('member.search.show', $record->id) }}" class="inline-flex items-center gap-4 h-14 px-10 bg-white/5 border border-white/10 rounded-2xl text-white font-black text-[10px] uppercase tracking-widest hover:bg-white hover:text-slate-950 hover:border-white transition-all duration-500 shadow-2xl active:scale-95 group-hover:shadow-3xl italic">
                                                <span>Laporan Lengkap</span>
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-12 py-40 text-center">
                                        <div class="w-24 h-24 bg-white/5 rounded-[40px] flex items-center justify-center mx-auto mb-10 border border-white/10 shadow-3xl">
                                            <svg class="w-12 h-12 text-slate-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                                        </div>
                                        <h4 class="text-3xl font-display font-black text-white uppercase tracking-tighter mb-4 leading-none italic">Data Tidak Ditemukan</h4>
                                        <p class="text-slate-700 text-[10px] font-black uppercase tracking-[0.4em] max-w-sm mx-auto leading-relaxed italic">Analisis intelijen mengembalikan nol hasil untuk kueri spesifik ini.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($results->hasPages())
                    <div class="p-12 bg-white/[0.02] border-t border-white/5">
                        <div class="dark-pagination">
                            {{ $results->links() }}
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>
