<x-app-layout>
    <div class="py-12 px-6 lg:px-12 min-h-screen">
        <div class="max-w-[1600px] mx-auto space-y-16">
            
            <!-- Phase 15: Enterprise Elite Control Hero (Dark Edition) -->
            <div class="relative group">
                <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500/10 to-slate-500/10 rounded-[48px] blur-2xl opacity-20 group-hover:opacity-40 transition duration-1000"></div>
                <div class="relative bg-white/5 border border-white/5 rounded-[48px] p-8 md:p-20 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.6)] overflow-hidden">
                    <!-- Ambient Mesh Gradient -->
                    <div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-bl from-indigo-500/5 via-transparent to-transparent pointer-events-none"></div>
                    
                    <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-12">
                        <div class="space-y-8">
                            <div class="space-y-6">
                                <div class="inline-flex items-center gap-3 px-4 py-2 bg-indigo-500/10 rounded-full border border-indigo-500/20">
                                    <span class="w-2 h-2 bg-indigo-500 rounded-full animate-pulse"></span>
                                    <span class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.2em] italic">System Status: Optimized</span>
                                </div>
                                <h1 class="text-3xl md:text-7xl font-display font-black text-white tracking-tighter leading-[0.9] italic uppercase">
                                    Pusat Kendali<br>
                                    <span class="text-indigo-500">Enterprise Elite</span>
                                </h1>
                                <p class="text-lg text-slate-400 font-medium leading-relaxed max-w-lg italic">
                                    Selamat datang di hub administratif utama. Pantau ekosistem digital <span class="text-white font-bold underline decoration-indigo-500/30 decoration-4 underline-offset-4">Leasing Pro</span> v2.5 secara real-time.
                                </p>
                            </div>

                            <div class="flex items-center gap-6">
                                <div class="px-6 py-3 bg-white/5 border border-white/5 rounded-2xl shadow-xl text-[10px] font-black text-slate-400 uppercase tracking-widest italic flex items-center gap-3">
                                    <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v12a2 2 0 002 2z"></path></svg>
                                    {{ now()->translatedFormat('d F Y') }}
                                </div>
                                <div class="h-10 w-px bg-white/5"></div>
                                <div class="text-[10px] font-black text-slate-600 uppercase tracking-[0.3em] italic leading-none">Admin Identity Verified</div>
                            </div>
                        </div>

                        <!-- Active Review Badge (Large CTA) -->
                        @if($stats['pending_payments'] > 0)
                            <a href="{{ route('admin.payment-reviews.index') }}" class="group/cta relative flex items-center gap-8 p-10 bg-indigo-600 rounded-[40px] text-white shadow-3xl shadow-indigo-500/20 transition-all duration-700 hover:scale-[1.02] active:scale-[0.98] border border-indigo-400/20">
                                <div class="relative z-10 space-y-2">
                                    <div class="text-5xl font-display font-black italic tracking-tighter leading-none">{{ $stats['pending_payments'] }}</div>
                                    <p class="text-[10px] font-black uppercase tracking-widest text-white/70 italic">Tinjauan Pending</p>
                                </div>
                                <div class="relative z-10 w-16 h-16 bg-white/10 rounded-3xl flex items-center justify-center backdrop-blur-md group-hover/cta:rotate-12 transition-transform duration-500">
                                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                </div>
                                <div class="absolute -right-4 -bottom-4 w-32 h-32 bg-white opacity-[0.05] rounded-full group-hover/cta:scale-150 transition-transform duration-1000"></div>
                            </a>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Global Insights Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
                <!-- Leasing Network -->
                <div class="bg-white/5 border border-white/5 rounded-[48px] p-8 md:p-12 group hover:border-indigo-500/20 transition-all duration-700 shadow-2xl">
                    <div class="flex flex-col h-full justify-between gap-12">
                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] italic">Jaringan Mitra</p>
                            <h3 class="text-sm font-black text-white uppercase italic tracking-wider">Partner Leasing</h3>
                        </div>
                        <div class="flex items-end justify-between">
                            <div class="text-7xl font-display font-black text-white tracking-tighter leading-none italic group-hover:text-indigo-400 transition-colors duration-500">{{ number_format($stats['total_leasing']) }}</div>
                            <div class="w-16 h-16 rounded-2xl bg-white/5 border border-white/5 flex items-center justify-center text-slate-500 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-500 shadow-xl">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- User Ecosystem -->
                <div class="bg-white/5 border border-white/5 rounded-[48px] p-8 md:p-12 group hover:border-emerald-500/20 transition-all duration-700 shadow-2xl">
                    <div class="flex flex-col h-full justify-between gap-12">
                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] italic">Basis Pengguna</p>
                            <h3 class="text-sm font-black text-white uppercase italic tracking-wider">Member Terarsip</h3>
                        </div>
                        <div class="flex items-end justify-between">
                            <div class="text-7xl font-display font-black text-white tracking-tighter leading-none italic group-hover:text-emerald-400 transition-colors duration-500">{{ number_format($stats['total_member']) }}</div>
                            <div class="w-16 h-16 rounded-2xl bg-white/5 border border-white/5 flex items-center justify-center text-slate-500 group-hover:bg-emerald-600 group-hover:text-white transition-all duration-500 shadow-xl">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1z"></path></svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Financial Queue -->
                <div class="bg-white/5 border border-white/5 rounded-[48px] p-8 md:p-12 group transition-all duration-700 shadow-2xl {{ $stats['pending_payments'] > 0 ? 'border-amber-500/30 bg-amber-500/5' : '' }}">
                    <div class="flex flex-col h-full justify-between gap-12">
                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] italic">Antrean Audit</p>
                            <h3 class="text-sm font-black text-white uppercase italic tracking-wider">Review Manual</h3>
                        </div>
                        <div class="flex items-end justify-between">
                            <div class="text-7xl font-display font-black tracking-tighter leading-none italic transition-colors duration-500 {{ $stats['pending_payments'] > 0 ? 'text-amber-500' : 'text-white' }}">{{ number_format($stats['pending_payments']) }}</div>
                            <div class="w-16 h-16 rounded-2xl border border-white/5 flex items-center justify-center transition-all duration-500 shadow-xl {{ $stats['pending_payments'] > 0 ? 'bg-amber-600 text-white' : 'bg-white/5 text-slate-500' }}">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Big Data Inventory -->
                <div class="bg-indigo-600/10 border border-indigo-500/20 rounded-[48px] p-8 md:p-12 group hover:bg-indigo-600 transition-all duration-700 shadow-2xl">
                    <div class="flex flex-col h-full justify-between gap-12">
                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.3em] italic group-hover:text-white/60">Volume Data</p>
                            <h3 class="text-sm font-black text-white uppercase italic tracking-wider">Global Records</h3>
                        </div>
                        <div class="flex items-end justify-between">
                            <div class="text-7xl font-display font-black text-white tracking-tighter leading-none italic group-hover:text-white transition-colors duration-500">{{ number_format($stats['total_records']) }}</div>
                            <div class="w-16 h-16 rounded-2xl bg-white/5 border border-white/5 flex items-center justify-center text-indigo-400 group-hover:bg-white group-hover:text-indigo-600 transition-all duration-500 shadow-xl">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Operational Sections -->
            <div class="grid lg:grid-cols-12 gap-16">
                <!-- Activity Newsfeed -->
                <div class="lg:col-span-8 flex flex-col gap-10">
                    <div class="flex items-end justify-between px-2">
                        <div class="space-y-2 border-l-4 border-white/20 pl-6">
                            <h3 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter leading-none">Newsfeed Aktivitas</h3>
                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em] italic leading-none">Real-time Activity Stream</p>
                        </div>
                        <a href="{{ route('admin.audit-logs.index') }}" class="flex items-center gap-2 group text-[10px] font-black text-indigo-400 uppercase tracking-widest italic hover:text-white transition-all">
                            Seluruh Log Audit
                            <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                        </a>
                    </div>
                    
                    <div class="space-y-6">
                        @foreach($recentLogs as $log)
                            <div class="bg-white/5 border border-white/5 rounded-[40px] group hover:bg-white/10 hover:translate-y-[-4px] transition-all duration-500 shadow-2xl overflow-hidden p-6">
                                <div class="flex items-center gap-8">
                                    <div class="hidden sm:flex flex-col items-center justify-center w-20 h-20 rounded-[28px] bg-white/5 border border-white/5 group-hover:bg-indigo-600 group-hover:border-indigo-500 transition-all duration-500 shrink-0">
                                        <span class="text-lg font-black text-white leading-none group-hover:text-white">{{ $log->created_at->format('H:i') }}</span>
                                        <span class="text-[8px] font-black text-slate-500 uppercase tracking-widest mt-1 group-hover:text-white/60 italic">{{ $log->created_at->format('d M') }}</span>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
                                            <div class="space-y-3">
                                                <div class="text-[16px] font-black text-white leading-tight">
                                                    {{ $log->user->name ?? 'System' }}
                                                    <span class="mx-3 text-[10px] text-slate-600 font-extrabold uppercase tracking-[0.2em] italic">Action:</span>
                                                    <span class="px-3 py-1 bg-indigo-500/10 text-indigo-400 rounded-lg text-[10px] uppercase font-black tracking-tight italic border border-indigo-500/20">{{ str_replace('_', ' ', $log->action) }}</span>
                                                </div>
                                                <div class="flex items-center gap-5 text-[10px] font-bold text-slate-500 uppercase tracking-widest italic">
                                                    <span class="flex items-center gap-2"><svg class="w-3.5 h-3.5 text-indigo-500/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 20l4-16m4 4l4 4m4 4l-4 4M6 16l-4-4 4-4"></path></svg> #{{ str_pad($log->id, 6, '0', STR_PAD_LEFT) }}</span>
                                                    <span class="w-1 h-1 bg-white/10 rounded-full"></span>
                                                    <span>{{ $log->created_at->diffForHumans() }}</span>
                                                </div>
                                            </div>
                                            <div class="flex -space-x-2">
                                                <div class="w-12 h-12 rounded-[18px] border-4 border-slate-950 bg-indigo-600 flex items-center justify-center text-[10px] font-black text-white shadow-2xl transform group-hover:rotate-6 transition-all">{{ substr($log->user->name ?? 'S', 0, 1) }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @if($recentLogs->isEmpty())
                            <div class="bg-white/5 border-2 border-dashed border-white/5 rounded-[48px] p-24 text-center">
                                <div class="w-24 h-24 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-8 border border-white/5">
                                    <svg class="w-12 h-12 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                                </div>
                                <h4 class="text-slate-600 font-black uppercase tracking-[0.4em] italic mb-3 leading-none text-xl">Newsfeed Kosong</h4>
                                <p class="text-[10px] font-bold text-slate-700 uppercase tracking-widest italic">Data Aktivitas Sistem Masih Belum Terarsip</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Tactical Headquarters Panel -->
                <div class="lg:col-span-4 space-y-12">
                    <div class="space-y-2 border-l-4 border-white/20 pl-6">
                        <h3 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter leading-none">Markas Taktis</h3>
                        <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em] italic leading-none">Admin Headquarters</p>
                    </div>

                    <div class="space-y-8">
                        <a href="{{ route('admin.payment-reviews.index') }}" class="bg-white text-slate-950 p-10 md:p-12 group hover:bg-indigo-600 hover:text-white hover:translate-y-[-6px] transition-all duration-700 relative overflow-hidden block rounded-[48px] shadow-3xl">
                            <div class="relative z-10 flex flex-col h-full justify-between gap-12">
                                <div class="w-16 h-16 bg-slate-950 rounded-[28px] flex items-center justify-center border border-white/10 group-hover:scale-110 group-hover:bg-white group-hover:text-slate-950 transition-all duration-700 shadow-2xl">
                                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                </div>
                                <div class="space-y-4">
                                    <div class="inline-flex px-4 py-1.5 bg-slate-950 text-white group-hover:bg-white group-hover:text-indigo-600 rounded-lg text-[9px] uppercase font-black tracking-widest italic leading-none transition-colors border border-white/10">Priority Action</div>
                                    <h4 class="text-2xl md:text-4xl font-display font-black uppercase italic leading-[1.1] tracking-tighter">Review<br>Pembayaran</h4>
                                    <p class="text-[11px] font-bold uppercase tracking-widest leading-relaxed italic opacity-60">Otorisasi Verifikasi Member →</p>
                                </div>
                            </div>
                        </a>

                        <div class="grid grid-cols-1 gap-6 pt-8 border-t border-white/5">
                            <a href="{{ route('admin.plans.index') }}" class="bg-white/5 border border-white/5 rounded-[40px] p-12 group flex justify-between items-center hover:bg-white/10 hover:translate-x-2 transition-all duration-500 shadow-2xl">
                                <div class="space-y-4">
                                    <h4 class="text-md font-black text-white uppercase italic tracking-wider group-hover:text-indigo-400 transition-colors">Paket Layanan</h4>
                                    <p class="text-[9px] font-bold text-slate-500 uppercase tracking-widest italic">Pricing & Subscription Engine</p>
                                </div>
                                <div class="w-16 h-16 rounded-2xl bg-white/5 border border-white/10 text-slate-600 group-hover:bg-indigo-600 group-hover:text-white flex items-center justify-center transition-all duration-500 shadow-xl">
                                    <svg class="w-7 h-7 rotate-[-15deg] group-hover:rotate-0 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                                </div>
                            </a>

                            <a href="{{ route('admin.users.index') }}" class="bg-white/5 border border-white/5 rounded-[40px] p-12 group flex justify-between items-center hover:bg-white/10 hover:translate-x-2 transition-all duration-500 shadow-2xl">
                                <div class="space-y-4">
                                    <h4 class="text-md font-black text-white uppercase italic tracking-wider group-hover:text-indigo-400 transition-colors">Yuridiksi User</h4>
                                    <p class="text-[9px] font-bold text-slate-500 uppercase tracking-widest italic">Global Access Control & Roles</p>
                                </div>
                                <div class="w-16 h-16 rounded-2xl bg-white/5 border border-white/5 text-slate-600 group-hover:bg-indigo-600 group-hover:text-white flex items-center justify-center transition-all duration-500 shadow-xl">
                                    <svg class="w-7 h-7 rotate-[-15deg] group-hover:rotate-0 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1z"></path></svg>
                                </div>
                            </a>

                            <a href="{{ route('admin.cms.index') }}" class="bg-white/5 border border-white/5 rounded-[40px] p-12 group flex justify-between items-center hover:bg-white/10 hover:translate-x-2 transition-all duration-500 shadow-2xl">
                                <div class="space-y-4">
                                    <h4 class="text-md font-black text-white uppercase italic tracking-wider group-hover:text-indigo-400 transition-colors">Portal CMS</h4>
                                    <p class="text-[9px] font-bold text-slate-500 uppercase tracking-widest italic">Public Web Branding Hub</p>
                                </div>
                                <div class="w-16 h-16 rounded-2xl bg-white/5 border border-white/10 text-slate-600 group-hover:bg-indigo-600 group-hover:text-white flex items-center justify-center transition-all duration-500 shadow-xl">
                                    <svg class="w-7 h-7 rotate-[-15deg] group-hover:rotate-0 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9-9c1.657 0 3 4.03 3 9s-1.343 9-3 9m0-18c-1.657 0-3 4.03-3 9s1.343 9 3 9m-9-9a9 9 0 019-9"></path></svg>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
