@extends('layouts.cbt')
@section('title', 'Admin Dashboard')
@section('page-title', 'Dashboard Administrator')
@section('sidebar')@include('components.admin-sidebar')@endsection

@section('content')
<div class="flex justify-end mb-4"><span id="live-indicator"></span></div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8" id="stats-grid">
    <div class="stat-card red"><p class="text-sm opacity-80">Total Siswa</p><p class="text-4xl font-extrabold mt-1" id="stat-students">{{ $stats['students'] }}</p></div>
    <div class="stat-card orange"><p class="text-sm opacity-80">Total Guru</p><p class="text-4xl font-extrabold mt-1" id="stat-teachers">{{ $stats['teachers'] }}</p></div>
    <div class="stat-card yellow"><p class="text-sm opacity-80">Ujian Aktif</p><p class="text-4xl font-extrabold mt-1" id="stat-exams">{{ $stats['exams_active'] }}</p></div>
    <div class="stat-card blue"><p class="text-sm opacity-80">Rata-rata Nilai</p><p class="text-4xl font-extrabold mt-1" id="stat-avg">{{ $stats['avg_score'] }}</p></div>
</div>

<div class="card-sdn">
    <div class="flex justify-between items-center mb-4">
        <h3 class="font-extrabold text-lg">Aktivitas Ujian Terbaru</h3>
        <span class="text-xs text-gray-400" id="dashboard-sync"></span>
    </div>
    <div class="table-wrap">
    <table class="table-sdn">
        <thead><tr><th>Siswa</th><th>Ujian</th><th>Skor</th><th>Waktu (WIB)</th></tr></thead>
        <tbody id="activity-body">
            @forelse($recentAttempts as $a)
            <tr data-attempt-id="{{ $a->id }}">
                <td>{{ $a->student->user->name }}</td>
                <td>{{ $a->exam->title }}</td>
                <td><span class="font-bold {{ $a->isPassed() ? 'text-green-600' : 'text-red-500' }}">{{ $a->score }}</span></td>
                <td>
                    <span class="font-mono">{{ $a->submitted_at?->format('d/m/Y H:i:s') }}</span>
                    <span class="text-xs text-gray-400 block">{{ $a->submitted_at?->diffForHumans() }}</span>
                </td>
            </tr>
            @empty
            <tr><td colspan="4" class="text-center text-gray-500">Belum ada aktivitas</td></tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>

@push('scripts')
<script>
(function() {
    const indicator = document.getElementById('live-indicator');
    const tbody = document.getElementById('activity-body');
    const syncEl = document.getElementById('dashboard-sync');

    Realtime.pulseIndicator(indicator, true);

    Realtime.poll('{{ route('admin.realtime.dashboard') }}', data => {
        Realtime.pulseIndicator(indicator, true);
        syncEl.textContent = 'Sync: ' + data.server_time_formatted + ' WIB';

        document.getElementById('stat-students').textContent = data.stats.students;
        document.getElementById('stat-teachers').textContent = data.stats.teachers;
        document.getElementById('stat-exams').textContent = data.stats.exams_active;
        document.getElementById('stat-avg').textContent = data.stats.avg_score;

        tbody.innerHTML = data.recent_attempts.length ? data.recent_attempts.map(a => `
            <tr data-attempt-id="${a.id}">
                <td>${a.student}</td>
                <td>${a.exam}</td>
                <td><span class="font-bold ${a.passed ? 'text-green-600' : 'text-red-500'}">${a.score}</span></td>
                <td><span class="font-mono">${a.submitted_at}</span><span class="text-xs text-gray-400 block">${a.submitted_ago}</span></td>
            </tr>
        `).join('') : '<tr><td colspan="4" class="text-center text-gray-500">Belum ada aktivitas</td></tr>';
    }, 3000);
})();
</script>
@endpush
@endsection