@extends('layouts.cbt')
@section('page-title', 'Log Aktivitas')
@section('sidebar')@include('components.admin-sidebar')@endsection
@section('content')
<div class="card-sdn">
    <div class="flex justify-between items-center mb-4">
        <p class="text-sm text-gray-500">Pembaruan otomatis setiap 3 detik</p>
        <span id="live-indicator"></span>
    </div>
    <div class="table-wrap">
    <table class="table-sdn">
        <thead><tr><th>Waktu (WIB)</th><th>User</th><th>Aksi</th><th>IP</th></tr></thead>
        <tbody id="logs-body">
            @foreach($logs as $log)
            <tr data-log-id="{{ $log->id }}">
                <td>
                    <span class="font-mono">{{ $log->created_at->format('d/m/Y H:i:s') }}</span>
                    <span class="text-xs text-gray-400 block">{{ $log->created_at->diffForHumans() }}</span>
                </td>
                <td>{{ $log->user->name ?? 'System' }}</td>
                <td>{{ $log->action }}</td>
                <td>{{ $log->ip_address }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
    <div class="mt-4">{{ $logs->links() }}</div>
</div>

@push('scripts')
<script>
(function() {
    const tbody = document.getElementById('logs-body');
    const indicator = document.getElementById('live-indicator');
    let lastId = Math.max(...[...tbody.querySelectorAll('tr')].map(r => Number(r.dataset.logId) || 0), 0);

    Realtime.pulseIndicator(indicator, true);

    const fetchLogs = () => fetch('{{ route('admin.realtime.activity-logs') }}?since_id=' + lastId, {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    }).then(r => r.json()).then(data => {
        Realtime.pulseIndicator(indicator, true);
        if (!data.logs?.length) return;

        data.logs.reverse().forEach(log => {
            if (document.querySelector(`tr[data-log-id="${log.id}"]`)) return;
            const tr = document.createElement('tr');
            tr.dataset.logId = log.id;
            tr.className = 'bg-green-50';
            tr.innerHTML = `
                <td><span class="font-mono">${log.time}</span><span class="text-xs text-gray-400 block">${log.ago}</span></td>
                <td>${log.user}</td><td>${log.action}</td><td>${log.ip || '-'}</td>`;
            tbody.prepend(tr);
            setTimeout(() => tr.classList.remove('bg-green-50'), 3000);
            lastId = Math.max(lastId, log.id);
        });
    }).catch(() => Realtime.pulseIndicator(indicator, false));

    fetchLogs();
    setInterval(fetchLogs, 3000);
})();
</script>
@endpush
@endsection