@extends('admin.layout')

@section('title', 'Audit Trail')

@section('content')
<div>
<div class="flex justify-between items-center mb-8">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Audit Trail System</h2>
            <p class="text-sm text-on-surface-variant mt-1">Lacak dan monitor semua aktivitas perubahan di dalam sistem.</p>
        </div>
        <button class="flex items-center gap-2 px-6 py-2.5 border border-outline-variant rounded-xl font-semibold hover:bg-surface-variant/50 transition-all shadow-sm">
            <span class="material-symbols-outlined text-[20px]">download</span>
            <span>Download CSV</span>
        </button>
    </div>

    <!-- Filter & Table -->
    <div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 overflow-hidden">
        <!-- Filter Row -->
        <div class="p-4 border-b border-outline-variant/30 flex flex-wrap items-center justify-between gap-4 bg-surface-container-low/50">
            <div class="flex gap-4 items-center">
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold text-on-surface-variant uppercase">Tanggal</label>
                    <input type="date" class="bg-surface-container border border-outline-variant rounded-lg text-sm px-3 py-1.5 focus:ring-2 focus:ring-primary/20">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold text-on-surface-variant uppercase">Modul</label>
                    <select class="bg-surface-container border border-outline-variant rounded-lg text-sm px-3 py-1.5 focus:ring-2 focus:ring-primary/20 min-w-[150px]">
                        <option>Semua Modul</option>
                        <option>Pesanan</option>
                        <option>Mitra</option>
                        <option>Konsumen</option>
                        <option>Konfigurasi</option>
                        <option>Keuangan</option>
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold text-on-surface-variant uppercase">User (Aktor)</label>
                    <select class="bg-surface-container border border-outline-variant rounded-lg text-sm px-3 py-1.5 focus:ring-2 focus:ring-primary/20 min-w-[150px]">
                        <option>Semua User</option>
                        <option>Admin Utama</option>
                        <option>Operator Shift A</option>
                        <option>Sistem Bot</option>
                    </select>
                </div>
            </div>
            <div>
                <button class="px-4 py-1.5 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 font-semibold text-sm transition-colors">Terapkan Filter</button>
            </div>
        </div>
        
        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-surface-container-low/50 border-b border-outline-variant/30">
                    <tr>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Timestamp</th>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">User / Aktor</th>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Modul</th>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Aktivitas</th>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Detail / Info</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/20">
                    <tr class="hover:bg-surface-variant/10 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="font-bold text-sm">24 Okt 2023</span>
                                <span class="text-xs text-on-surface-variant">15:42:11 WIB</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-[18px]">admin_panel_settings</span>
                                <div class="flex flex-col">
                                    <span class="font-bold text-sm">Admin Utama</span>
                                    <span class="text-xs text-on-surface-variant">IP: 192.168.1.100</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded text-[10px] font-bold uppercase tracking-wider">Konfigurasi</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm font-semibold">Mengubah Biaya Admin</span>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs text-on-surface-variant">Dari <b>Rp 2.000</b> menjadi <b>Rp 2.500</b></p>
                        </td>
                    </tr>
                    
                    <tr class="hover:bg-surface-variant/10 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="font-bold text-sm">24 Okt 2023</span>
                                <span class="text-xs text-on-surface-variant">14:31:05 WIB</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-[18px]">support_agent</span>
                                <div class="flex flex-col">
                                    <span class="font-bold text-sm">Operator Shift A</span>
                                    <span class="text-xs text-on-surface-variant">IP: 103.111.22.4</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded text-[10px] font-bold uppercase tracking-wider">Pesanan</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm font-semibold">Membatalkan Pesanan</span>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs text-on-surface-variant">Membatalkan pesanan <b>#ORD-9821</b> dengan alasan: <i>Mitra tidak dapat dihubungi</i></p>
                        </td>
                    </tr>
                    
                    <tr class="hover:bg-surface-variant/10 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="font-bold text-sm">24 Okt 2023</span>
                                <span class="text-xs text-on-surface-variant">10:15:22 WIB</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-tertiary text-[18px]">smart_toy</span>
                                <div class="flex flex-col">
                                    <span class="font-bold text-sm">System Bot (Midtrans)</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded text-[10px] font-bold uppercase tracking-wider">Keuangan</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm font-semibold">Update Status Pembayaran</span>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs text-on-surface-variant">Pembayaran <b>#ORD-9825</b> berhasil diverifikasi (Callback 200)</p>
                        </td>
                    </tr>
                    
                    <tr class="hover:bg-surface-variant/10 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="font-bold text-sm">24 Okt 2023</span>
                                <span class="text-xs text-on-surface-variant">09:05:10 WIB</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-[18px]">admin_panel_settings</span>
                                <div class="flex flex-col">
                                    <span class="font-bold text-sm">Admin Utama</span>
                                    <span class="text-xs text-on-surface-variant">IP: 192.168.1.100</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded text-[10px] font-bold uppercase tracking-wider">Mitra</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm font-semibold">Menyetujui Registrasi</span>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs text-on-surface-variant">Menyetujui pendaftaran mitra <b>Siti Rahayu (ID: TRP-1092)</b></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="px-6 py-4 bg-surface-container-low/50 flex justify-between items-center border-t border-outline-variant/30">
            <p class="text-xs text-on-surface-variant">Menampilkan 1-4 dari 1,204 aktivitas</p>
            <div class="flex gap-1">
                <button class="px-3 py-1 bg-white border border-outline-variant/30 rounded-lg text-sm hover:bg-surface-variant/50 transition-colors disabled:opacity-50" disabled>Sebelumnya</button>
                <button class="px-3 py-1 bg-primary text-white rounded-lg text-sm">1</button>
                <button class="px-3 py-1 bg-white border border-outline-variant/30 rounded-lg text-sm hover:bg-surface-variant/50 transition-colors">2</button>
                <button class="px-3 py-1 bg-white border border-outline-variant/30 rounded-lg text-sm hover:bg-surface-variant/50 transition-colors">3</button>
                <span class="px-2 py-1 text-on-surface-variant">...</span>
                <button class="px-3 py-1 bg-white border border-outline-variant/30 rounded-lg text-sm hover:bg-surface-variant/50 transition-colors">Selanjutnya</button>
            </div>
        </div>
    </div>
</div>
@endsection