@extends('layouts.app')

@section('title', 'Audit Trail & Riwayat Aktivitas')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-900">Contextual Audit Trail</h1>
        <p class="text-sm text-gray-500">Pantauan riwayat kendali master saklar dan rekam jejak aktivitas operasional KA SKPD
            / UKPD secara real-time.</p>
    </div>

    <div class="space-y-6">

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-6 flex items-center gap-2">
                <i class="fa-solid fa-clock-rotate-left text-amber-500"></i> Riwayat Kendali Saklar Sistem
            </h3>

            <div class="relative pl-6 border-l-2 border-gray-100 space-y-6">
                @forelse($riwayatFase as $fase)
                    <div class="relative">
                        <div
                            class="absolute -left-[31px] top-1 w-4 h-4 rounded-full border-4 border-white shadow {{ $fase->action == 'OPEN' ? 'bg-emerald-500' : 'bg-rose-500' }}">
                        </div>

                        <div
                            class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 bg-gray-50 p-4 rounded-lg border border-gray-100">
                            <div>
                                <span
                                    class="text-[10px] font-bold px-2 py-0.5 rounded {{ $fase->action == 'OPEN' ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800' }}">
                                    SAKLAR: {{ $fase->action }}
                                </span>
                                <h4 class="text-sm font-semibold text-slate-800 mt-1">{{ $fase->context }}</h4>
                                <p class="text-xs text-gray-400 mt-0.5">Eksekutor: {{ $fase->user->name ?? 'Sistem' }}</p>
                            </div>
                            <div class="text-left sm:text-right">
                                <p class="text-xs font-mono text-gray-500"><i class="fa-regular fa-calendar mr-1"></i>
                                    {{ $fase->created_at->format('d M Y - H:i') }} WIB</p>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8">
                        <i class="fa-solid fa-toggle-off text-gray-300 text-3xl mb-2 block"></i>
                        <p class="text-xs text-gray-400 font-medium">Belum ada riwayat perubahan saklar pada database
                            PostgreSQL.</p>
                    </div>
                @endforelse
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
                    <i class="fa-solid fa-users-gear text-blue-500"></i> Rekam Aktivitas Transaksi SKPD & UKPD
                </h3>
                <span
                    class="text-xs bg-blue-50 text-blue-600 px-2.5 py-1 rounded-full font-semibold flex items-center gap-1.5">
                    <span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span> Live Database Sync
                </span>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-gray-50 border-b border-gray-200 text-xs font-bold text-gray-500 uppercase">
                            <th class="p-3">Waktu Transaksi</th>
                            <th class="p-3">Instansi / SKPD</th>
                            <th class="p-3">Aktivitas Kerja</th>
                            <th class="p-3 text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm divide-y divide-gray-100">
                        @forelse($logAktivitasDinas as $log)
                            <tr class="hover:bg-gray-50/70 transition-colors">
                                <td class="p-3 font-mono text-xs text-gray-400">
                                    {{ $log->created_at->format('d M Y - H:i') }} WIB</td>
                                <td class="p-3 font-semibold text-slate-800">{{ $log->instansi }}</td>
                                <td class="p-3 text-gray-600">{{ $log->action }}</td>
                                <td class="p-3 text-center">
                                    <span
                                        class="text-[11px] font-bold px-2 py-1 rounded-md {{ $log->status == 'success' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700' }}">
                                        {{ ucfirst($log->status) }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="p-12 text-center text-gray-400">
                                    <div class="flex flex-col items-center justify-center gap-2">
                                        <i class="fa-solid fa-folder-open text-gray-200 text-5xl"></i>
                                        <p class="text-xs font-semibold italic mt-2">Menunggu pergerakan aktivitas transaksi
                                            dari pihak KA SKPD / UKPD...</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection