@extends('layouts.app')

@section('content')
<div class="p-6 max-w-6xl mx-auto space-y-6">

    <div class="border-b pb-4">
        <h1 class="text-2xl font-bold text-[#1c1d56]">Log Aktivitas Sistem</h1>
        <p class="text-xs text-gray-500 mt-0.5">Jejak Aktivitas & Keamanan Data ONE DATA LPKA secara Real-Time.</p>
    </div>
    <!-- Container agar tombol berada di kanan -->
    <div class="flex justify-end mb-4">
        <form action="{{ route('admin.log.clear') }}" 
            method="POST" 
            onsubmit="return confirm('Yakin ingin menghapus semua log? Tindakan ini tidak bisa dibatalkan.');">
            @csrf
            @method('DELETE')
            
            <!-- Tombol diperkecil -->
            <button type="submit" class="bg-red-500 text-white text-sm px-3 py-1.5 rounded-md hover:bg-red-600 transition-colors shadow-sm">
                Hapus Semua Log
            </button>
        </form>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xs">
                <thead>
                    <tr class="bg-slate-50 text-slate-600 font-semibold uppercase border-b">
                        <th class="p-4 w-1/6">Waktu</th>
                        <th class="p-4 w-1/4">Nama Pengguna</th>
                        <th class="p-4 w-2/5">Tindakan / Aktivitas</th>
                        <th class="p-4 w-1/6">Modul Sistem</th>
                        <th class="p-4 w-1/12">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y text-slate-700">
                    
                    @forelse($logs as $log)
                    <tr class="hover:bg-slate-50 transition">
                        <td class="p-4 text-gray-400 whitespace-nowrap">
                            {{ $log->created_at->diffForHumans() }} 
                            <span class="text-[10px] block text-gray-300">{{ $log->created_at->format('d M Y, H:i') }}</span>
                        </td>
                        
                        <td class="p-4">
                            <div class="font-bold text-slate-800">{{ $log->username }}</div>
                            <div class="text-[10px] text-gray-400 mt-0.5">ID User: {{ $log->user_id ?? 'Terhapus' }}</div>
                        </td>
                        
                        <td class="p-4 text-gray-600 leading-relaxed">
                            {{ $log->aktivitas }}
                        </td>
                        
                        <td class="p-4 whitespace-nowrap">
                            @php
                                $badgeColor = match($log->modul) {
                                    'Monitoring Tracking', 'Input Tracking' => 'bg-blue-50 text-blue-700 border-blue-200',
                                    'Monitoring Kunjungan', 'Data Kunjungan' => 'bg-purple-50 text-purple-700 border-purple-200',
                                    'Monitoring Jurnal', 'Jurnal Harian (Staff)' => 'bg-amber-50 text-amber-700 border-amber-200',
                                    'Monitoring Pemanggilan', 'Pemanggilan Anak' => 'bg-orange-50 text-orange-700 border-orange-200',
                                    'Kelola User' => 'bg-teal-50 text-teal-700 border-teal-200',
                                    default => 'bg-gray-50 text-gray-700 border-gray-200'
                                };
                            @endphp
                            <span class="{{ $badgeColor }} border px-2 py-1 rounded-md font-medium text-[10px]">
                                {{ $log->modul }}
                            </span>
                        </td>
                        
                        <td class="p-4 whitespace-nowrap">
                            @if($log->status == 'Success' || $log->status == 'success')
                                <span class="inline-flex items-center gap-1.5 text-emerald-600 font-bold">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-600"></span> Success
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 text-red-600 font-bold">
                                    <span class="w-1.5 h-1.5 rounded-full bg-red-600"></span> Failed
                                </span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="p-12 text-center text-gray-400">
                            <div class="text-2xl mb-2">📭</div>
                            <div class="text-xs font-semibold text-slate-400">Belum ada rekaman aktivitas sistem.</div>
                            <div class="text-[10px] text-gray-400 mt-1">Log akan terisi otomatis saat Staff atau Admin melakukan aksi di sistem.</div>
                        </td>
                    </tr>
                    @endforelse

                </tbody>
            </table>
        </div>

        @if($logs->hasPages())
        <div class="p-4 border-t bg-slate-50 flex justify-end">
            {{ $logs->links() }}
        </div>
        @endif

    </div>

</div>
@endsection