<x-app-layout>
    <div class="py-12 px-6 lg:px-12 min-h-screen">
        <div class="max-w-7xl mx-auto space-y-12">
            <!-- Phase 15: Nerve Center Audit Log -->
            <header class="flex flex-col md:flex-row md:items-end justify-between gap-10 animate-in fade-in slide-in-from-top-4 duration-1000">
                <div class="space-y-4 border-l-4 border-white/20 pl-6">
                    <h2 class="font-display text-4xl font-black text-white tracking-tighter italic uppercase leading-none">Security Audit Logs</h2>
                    <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em] italic leading-none">Global Event Stream — Real-time Security Monitoring v2.5</p>
                </div>
            </header>

            <div class="bg-white/5 rounded-[48px] border border-white/5 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.6)] 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">Operator Identity</th>
                                <th class="px-12 py-8">Action Signature</th>
                                <th class="px-12 py-8">Auditable Artifact</th>
                                <th class="px-12 py-8">Timeline Coordinates</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/5">
                            @forelse($logs as $log)
                                <tr class="hover:bg-white/5 transition-all duration-300 group font-mono">
                                    <td class="px-12 py-10">
                                        <div class="font-display font-black text-white text-[15px] mb-1.5 uppercase italic tracking-tight group-hover:text-indigo-400 transition-colors">
                                            {{ $log->user->name ?? 'CORE_SYSTEM' }}
                                        </div>
                                        <div class="text-[8px] font-black text-slate-700 uppercase tracking-widest leading-none italic">Verified Authority</div>
                                    </td>
                                    <td class="px-12 py-10">
                                        <span class="inline-flex items-center px-4 py-1.5 bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 rounded-xl text-[9px] font-black uppercase tracking-widest italic shadow-2xl shadow-indigo-500/10">
                                            {{ $log->action }}
                                        </span>
                                    </td>
                                    <td class="px-12 py-10">
                                        <div class="text-[11px] font-bold text-slate-500 italic leading-none group-hover:text-slate-300 transition-colors">
                                            {{ str_replace('App\\Models\\', '', $log->auditable_type) }} <span class="text-slate-800 mx-1">/</span> <span class="text-indigo-500">ID#{{ $log->auditable_id }}</span>
                                        </div>
                                    </td>
                                    <td class="px-12 py-10">
                                        <div class="text-[11px] font-bold text-slate-600 uppercase tracking-widest leading-none tabular-nums">
                                            {{ $log->created_at->format('d/m/Y') }}
                                        </div>
                                        <div class="text-[9px] font-black text-slate-800 uppercase tracking-[0.2em] mt-2 italic tabular-nums leading-none">
                                            {{ $log->created_at->format('H:i:s') }}
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" 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="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A10.003 10.003 0 0012 3m0 18a10.003 10.003 0 01-8.213-4.333L4 16m8 2a8.967 8.967 0 01-1.892-1.072m1.892 1.072c1.131 0 2.232-.222 3.247-.627m-8.247.627L8 18m5-9.136a4 4 0 110 5.828M12 14a4.493 4.493 0 01-3.416-1.411m3.416 1.411c1.353 0 2.526-.693 3.416-1.411m-3.416-1.411V10"></path></svg>
                                        </div>
                                        <h4 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter mb-4 leading-none text-balance">Stream Log Inactive</h4>
                                        <p class="text-slate-700 text-[10px] font-black uppercase tracking-[0.3em] max-w-sm mx-auto leading-relaxed italic text-balance">Belum ada aktivitas transaksional atau administratif yang tercatat dalam log audit sistem.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($logs->hasPages())
                    <div class="p-12 bg-white/[0.02] border-t border-white/5">
                        {{ $logs->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>
