@extends('layouts.cbt')
@section('page-title', 'Monitor: '.$exam->title)
@section('sidebar')@include('components.guru-sidebar')@endsection
@section('content')
<div class="grid md:grid-cols-3 gap-4 mb-6" id="monitor-summary">
    <div class="stat-card orange"><p class="text-sm opacity-80">Total Peserta</p><p class="text-3xl font-extrabold" id="sum-total">{{ $attempts->count() }}</p></div>
    <div class="stat-card yellow"><p class="text-sm opacity-80">Sedang Mengerjakan</p><p class="text-3xl font-extrabold" id="sum-progress">{{ $attempts->filter(fn($a) => $a->isInProgress())->count() }}</p></div>
    <div class="stat-card blue"><p class="text-sm opacity-80">Selesai</p><p class="text-3xl font-extrabold" id="sum-done">{{ $attempts->reject(fn($a) => $a->isInProgress())->count() }}</p></div>
</div>

<div class="card-sdn">
    <div class="flex justify-between items-center mb-4">
        <p class="text-xs sm:text-sm text-gray-500">Pembaruan realtime setiap 2 detik. Badge kuning/merah = indikasi kecurangan.</p>
        <div class="flex items-center gap-3">
            <span id="monitor-sync-time" class="text-xs font-mono text-gray-500"></span>
            <span id="live-indicator"></span>
        </div>
    </div>
    <div class="table-wrap">
    <table class="table-sdn">
        <thead><tr><th>Siswa</th><th>Status</th><th>Keamanan</th><th>Progress</th><th>Mulai</th><th>Tab/Blur</th><th>IP</th><th>Skor</th></tr></thead>
        <tbody id="monitor-body">
            @foreach($attempts as $a)
            @php $flag = app(\App\Services\ExamSecurityService::class)->getFlagLevel($a); @endphp
            <tr data-attempt-id="{{ $a->id }}">
                <td>{{ $a->student->user->name }} ({{ $a->student->nis }})</td>
                <td><span class="font-semibold {{ $a->isInProgress() ? 'text-orange-500' : 'text-green-600' }}">{{ $a->status->label() }}</span></td>
                <td><span class="text-xs font-bold px-2 py-1 rounded-full exam-flag-{{ $flag }}">{{ strtoupper($flag) }}</span></td>
                <td>{{ $a->answers()->count() }}/{{ $exam->examQuestions()->count() }}</td>
                <td><span class="font-mono">{{ $a->started_at->format('H:i:s') }}</span><span class="text-xs text-gray-400 block">{{ $a->started_at->diffForHumans() }}</span></td>
                <td>{{ $a->tab_switch_count }}/{{ app(\App\Services\ExamSecurityService::class)->getEventCounts($a)['window_blur'] }}</td>
                <td class="text-xs font-mono">{{ $a->ip_address ?? '-' }}</td>
                <td class="font-bold">{{ $a->score ?? '-' }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
</div>

@push('scripts')
<script>
(function() {
    const tbody = document.getElementById('monitor-body');
    const syncTime = document.getElementById('monitor-sync-time');
    const indicator = document.getElementById('live-indicator');

    Realtime.pulseIndicator(indicator, true);

    function flagClass(flag) {
        return 'exam-flag-' + (flag || 'green');
    }

    function renderAttempts(data) {
        syncTime.textContent = 'Sync: ' + data.server_time_formatted + ' WIB';
        document.getElementById('sum-total').textContent = data.summary.total;
        document.getElementById('sum-progress').textContent = data.summary.in_progress;
        document.getElementById('sum-done').textContent = data.summary.submitted;

        tbody.innerHTML = data.attempts.map(a => `
            <tr data-attempt-id="${a.id}">
                <td>${a.student} (${a.nis})</td>
                <td><span class="font-semibold ${a.in_progress ? 'text-orange-500' : 'text-green-600'}">${a.status}</span></td>
                <td><span class="text-xs font-bold px-2 py-1 rounded-full ${flagClass(a.security_flag)}">${(a.security_flag || 'green').toUpperCase()}</span></td>
                <td>
                    <div class="flex items-center gap-2">
                        <div class="flex-1 bg-gray-200 rounded-full h-2"><div class="bg-sdn-orange h-2 rounded-full" style="width:${a.progress}%"></div></div>
                        <span class="text-xs font-bold">${a.answered_count}/${a.total_questions}</span>
                    </div>
                </td>
                <td><span class="font-mono">${a.started_at.split(' ')[1]}</span><span class="text-xs text-gray-400 block">${a.started_ago}</span></td>
                <td>${a.tab_switch_count}/${a.window_blur_count}</td>
                <td class="text-xs font-mono">${a.ip_address}</td>
                <td class="font-bold">${a.score ?? '-'}</td>
            </tr>
        `).join('') || '<tr><td colspan="8" class="text-center text-gray-500">Belum ada peserta</td></tr>';
    }

    Realtime.poll('{{ route('guru.exams.monitor.feed', $exam) }}', data => {
        Realtime.pulseIndicator(indicator, true);
        renderAttempts(data);
    }, 2000);
})();
</script>
@endpush
@endsection