@extends('layouts.cbt')
@section('page-title', $exam->title)
@section('sidebar')@include('components.guru-sidebar')@endsection
@section('content')
<div class="page-actions mb-6">
    @if($exam->status->value === 'draft')
    <form method="POST" action="{{ route('guru.exams.publish', $exam) }}">@csrf<button class="btn-sdn-primary">Publikasikan</button></form>
    @endif
    @if($exam->status->value === 'published')
    <form method="POST" action="{{ route('guru.exams.close', $exam) }}">@csrf<button class="btn-sdn-danger">Tutup Ujian</button></form>
    @endif
    <a href="{{ route('guru.exams.monitor', $exam) }}" class="btn-sdn-secondary">Monitor Real-time</a>
    <a href="{{ route('guru.exams.export', $exam) }}" class="btn-sdn-secondary">Export Nilai</a>
    <a href="{{ route('guru.exams.cards', $exam) }}" class="btn-sdn-secondary">Cetak Kartu Ujian</a>
    <a href="{{ route('guru.exams.edit', $exam) }}" class="btn-sdn-secondary">Edit</a>
    <form method="POST" action="{{ route('guru.exams.destroy', $exam) }}" class="inline"
        onsubmit="return confirm('Hapus ujian ini? Semua data peserta ({{ $exam->attempts->count() }}) dan jawaban ikut terhapus permanen.')">
        @csrf @method('DELETE')
        <button type="submit" class="btn-sdn-danger">Hapus Ujian</button>
    </form>
</div>

<div class="grid md:grid-cols-2 gap-6 mb-6">
    <div class="card-sdn">
        <h3 class="font-bold mb-3">Informasi Ujian</h3>
        <div class="space-y-2 text-sm">
            <p><span class="text-gray-500">Mapel:</span> {{ $exam->subject->name }}</p>
            <p><span class="text-gray-500">Kelas:</span> {{ $exam->schoolClass->name }}</p>
            <p><span class="text-gray-500">Durasi:</span> {{ $exam->duration_minutes }} menit</p>
            <p><span class="text-gray-500">Jadwal:</span> {{ $exam->start_at->format('d/m/Y H:i') }} - {{ $exam->end_at->format('d/m/Y H:i') }}</p>
            <p><span class="text-gray-500">Token:</span> {{ $exam->token ?? '-' }}</p>
            <p><span class="text-gray-500">KKM:</span> {{ $exam->passing_score }}</p>
            <p><span class="text-gray-500">Status:</span> <strong>{{ $exam->status->label() }}</strong></p>
            <p><span class="text-gray-500">Soal:</span> {{ $exam->examQuestions->count() }} ({{ $exam->totalPoints() }} poin)</p>
            <p><span class="text-gray-500">Keamanan:</span> {{ ($exam->security_strict_mode ?? true) ? 'Aktif' : 'Nonaktif' }} (ambang tab: {{ $exam->tab_switch_flag_threshold ?? 3 }})</p>
        </div>
    </div>
    <div class="card-sdn">
        <div class="flex justify-between items-center mb-3">
            <h3 class="font-bold">Hasil Ujian</h3>
            <span id="live-indicator"></span>
        </div>
        <div class="table-wrap">
        <table class="table-sdn text-sm min-w-[32rem]">
            <thead><tr><th>Siswa</th><th>Skor</th><th>Keamanan</th><th>Status</th><th>Waktu</th><th></th></tr></thead>
            <tbody id="results-body">
                @forelse($exam->attempts as $a)
                @php $flag = app(\App\Services\ExamSecurityService::class)->getFlagLevel($a); @endphp
                <tr>
                    <td>{{ $a->student->user->name }}</td>
                    <td class="font-bold">{{ $a->score ?? '-' }}</td>
                    <td><span class="text-xs font-bold px-2 py-1 rounded-full exam-flag-{{ $flag }}">{{ strtoupper($flag) }}</span></td>
                    <td><span class="{{ $a->isInProgress() ? 'text-orange-500' : 'text-green-600' }} font-semibold">{{ $a->status->label() }}</span></td>
                    <td class="text-xs font-mono">{{ $a->submitted_at?->format('d/m/Y H:i:s') ?? $a->started_at->format('H:i:s') . ' (berlangsung)' }}</td>
                    <td><button type="button" class="text-xs text-blue-600 font-semibold" onclick="showSecurityLogs({{ $a->id }})">Riwayat</button></td>
                </tr>
                @empty
                <tr><td colspan="6" class="text-center text-gray-500">Belum ada peserta</td></tr>
                @endforelse
            </tbody>
        </table>
        </div>
    </div>
</div>

<div id="security-modal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">
    <div class="card-sdn max-w-2xl w-full max-h-[80vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-extrabold text-lg">Riwayat Keamanan</h3>
            <button type="button" onclick="closeSecurityModal()" class="text-gray-500 font-bold text-xl">&times;</button>
        </div>
        <div id="security-modal-content" class="text-sm text-gray-600">Memuat...</div>
    </div>
</div>

@push('scripts')
<script>
(function() {
    const tbody = document.getElementById('results-body');
    const indicator = document.getElementById('live-indicator');
    Realtime.pulseIndicator(indicator, true);

    Realtime.poll('{{ route('guru.exams.monitor.feed', $exam) }}', data => {
        Realtime.pulseIndicator(indicator, true);
        const flagClass = f => 'exam-flag-' + (f || 'green');
        tbody.innerHTML = data.attempts.length ? data.attempts.map(a => `
            <tr>
                <td>${a.student}</td>
                <td class="font-bold">${a.score ?? '-'}</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><span class="font-semibold ${a.in_progress ? 'text-orange-500' : 'text-green-600'}">${a.status}</span></td>
                <td class="text-xs font-mono">${a.submitted_at || a.started_at + ' (berlangsung)'}</td>
                <td><button type="button" class="text-xs text-blue-600 font-semibold" onclick="showSecurityLogs(${a.id})">Riwayat</button></td>
            </tr>
        `).join('') : '<tr><td colspan="6" class="text-center text-gray-500">Belum ada peserta</td></tr>';
    }, 3000);

    window.showSecurityLogs = function(attemptId) {
        const modal = document.getElementById('security-modal');
        const content = document.getElementById('security-modal-content');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        content.textContent = 'Memuat...';
        fetch(`{{ url('guru/attempts') }}/${attemptId}/security-logs`)
            .then(r => r.json())
            .then(d => {
                content.innerHTML = `
                    <p class="mb-2"><strong>${d.student}</strong> &bull; IP: ${d.ip_address || '-'} &bull; Tab: ${d.tab_switch_count} &bull; Flag: <span class="exam-flag-${d.flag} px-2 py-0.5 rounded text-xs font-bold">${d.flag.toUpperCase()}</span></p>
                    <table class="table-sdn text-xs">
                        <thead><tr><th>Waktu</th><th>Event</th><th>IP</th></tr></thead>
                        <tbody>${d.logs.length ? d.logs.map(l => `<tr><td>${l.time}</td><td>${l.event}</td><td>${l.ip || '-'}</td></tr>`).join('') : '<tr><td colspan="3">Tidak ada log</td></tr>'}</tbody>
                    </table>`;
            });
    };
    window.closeSecurityModal = function() {
        const modal = document.getElementById('security-modal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    };
})();
</script>
@endpush
@endsection