@extends('layouts.admin_lbb')

@section('title', "Log Kecurangan - {$exam->name}")

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.exams.index') }}">Ujian</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.exam.participants.index', $exam->exam_code) }}">Peserta</a></li>
            <li class="breadcrumb-item active" aria-current="page">Log Kecurangan</li>
        </ol>
    </nav>

    <!-- Header Card -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-1">
                        <i class="bi bi-shield-exclamation text-warning me-2"></i>
                        Log Kecurangan
                    </h5>
                    <p class="text-muted mb-0">
                        Ujian: <strong>{{ $exam->name }}</strong> ({{ $exam->exam_code }})
                    </p>
                </div>
                <a href="{{ route('admin.exam.participants.index', $exam->exam_code) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i> Kembali
                </a>
            </div>
        </div>
    </div>

    <!-- Attempt Selector Card -->
    @if($allAttempts->count() > 1)
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <label class="form-label fw-bold">
                        <i class="bi bi-list-ul me-2"></i>Pilih Attempt:
                    </label>
                    <select class="form-select" id="attemptSelector" onchange="loadAttemptLogs(this.value)">
                        @foreach($allAttempts as $index => $att)
                            <option value="{{ $att->id }}"
                                    data-score="{{ $att->score }}"
                                    data-start="{{ $att->start_time->format('d/m/Y H:i:s') }}"
                                    data-end="{{ $att->end_time ? $att->end_time->format('d/m/Y H:i:s') : '-' }}"
                                    data-duration="{{ $att->end_time ? $att->start_time->diffInMinutes($att->end_time) . ' menit' : '-' }}"
                                    data-status="{{ $att->status->value }}"
                                    {{ $att->id === $attempt->id ? 'selected' : '' }}>
                                Attempt {{ $index + 1 }} - Nilai: {{ $att->score }}
                                ({{ $att->start_time->format('d M H:i') }})
                                @if($att->id === $allAttempts->first()->id)
                                    ⭐ Terbaik
                                @endif
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted">
                        <i class="bi bi-info-circle me-1"></i>
        {{ $allAttempts->count() }} attempt tersedia. Pilih untuk melihat log kecurangan.
                    </small>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="mt-3 mt-md-0">
                        <span class="badge bg-primary fs-6">
                            <i class="bi bi-flag-fill me-1"></i>
                            Total {{ $allAttempts->count() }} Attempt
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Participant Info -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <h6 class="card-title mb-3">Informasi Peserta</h6>
            <div class="row">
                <div class="col-md-4">
                    <p class="mb-1"><strong>Nama Siswa:</strong></p>
                    <p class="text-primary">{{ $participant->student->user->name }}</p>
                </div>
                <div class="col-md-4">
                    <p class="mb-1"><strong>NIS/NISN:</strong></p>
                    <p>{{ $participant->student->nis ?? '-' }} / {{ $participant->student->nisn ?? '-' }}</p>
                </div>
                <div class="col-md-4">
                    <p class="mb-1"><strong>Kelas:</strong></p>
                    <p>{{ $participant->student->classModel->name ?? '-' }}</p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-4">
                    <p class="mb-1"><strong>Waktu Mulai:</strong></p>
                    <p id="attemptStartTime">{{ $attempt->start_time->format('d/m/Y H:i:s') }}</p>
                </div>
                <div class="col-md-4">
                    <p class="mb-1"><strong>Waktu Selesai:</strong></p>
                    <p id="attemptEndTime">{{ $attempt->end_time ? $attempt->end_time->format('d/m/Y H:i:s') : '-' }}</p>
                </div>
                <div class="col-md-4">
                    <p class="mb-1"><strong>Nilai:</strong></p>
                    <p id="attemptScore">
                        @if($attempt->score)
                            <span class="badge bg-{{ $attempt->score >= 70 ? 'success' : ($attempt->score >= 50 ? 'warning' : 'danger') }} fs-6">
                                {{ $attempt->score }}
                            </span>
                        @else
                            -
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card border-primary">
                <div class="card-body text-center">
                    <h6 class="card-title text-primary">Total Pelanggaran</h6>
                    <h2 class="display-4 fw-bold text-primary" id="statTotal">{{ $statistics['total'] }}</h2>
                </div>
            </div>
        </div>
        {{-- <div class="col-md-6">
            <div class="card border-warning">
                <div class="card-body text-center">
                    <h6 class="card-title text-warning">Pindah Tab</h6>
                    <h2 class="display-5 fw-bold text-warning" id="statTabSwitch">{{ $statistics['by_type']['tab_switch'] }}</h2>
                </div>
            </div>
        </div> --}}
        <div class="col-md-6">
            <div class="card border-info">
                <div class="card-body text-center">
                    <h6 class="card-title text-info">Kehilangan Fokus</h6>
                    <h2 class="display-5 fw-bold text-info" id="statBlur">{{ $statistics['by_type']['blur'] }}</h2>
                </div>
            </div>
        </div>
        {{-- <div class="col-md-6">
            <div class="card border-danger">
                <div class="card-body text-center">
                    <h6 class="card-title text-danger">DevTools</h6>
                    <h2 class="display-5 fw-bold text-danger" id="statDevtools">{{ $statistics['by_type']['devtools'] }}</h2>
                </div>
            </div>
        </div> --}}
    </div>

    <!-- Cheating Logs Table -->
    <div class="card shadow-sm">
        <div class="card-header bg-white">
            <h6 class="mb-0">
                <i class="bi bi-list-ul me-2"></i>
                Daftar Pelanggaran
            </h6>
        </div>
        <div class="card-body">
            @if($cheatingLogs->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th width="50">#</th>
                                <th>Jenis Pelanggaran</th>
                                <th>Waktu</th>
                                <th>IP Address</th>
                                <th>User Agent</th>
                            </tr>
                        </thead>
                        <tbody id="logsTableBody">
                            @foreach($cheatingLogs as $index => $log)
                                <tr>
                                    <td data-label="#">{{ $index + 1 }}</td>
                                    <td data-label="Jenis Pelanggaran">
                                        @php
                                            $badgeClass = match($log->type) {
                                                'tab_switch' => 'warning',
                                                'blur' => 'info',
                                                'devtools' => 'danger',
                                                default => 'secondary'
                                            };
                                        @endphp
                                        <span class="badge bg-{{ $badgeClass }}">
                                            {{ $typeLabels[$log->type] ?? $log->type }}
                                        </span>
                                    </td>
                                    <td data-label="Waktu">
                                        <i class="bi bi-clock me-1"></i>
                                        {{ $log->created_at->format('d/m/Y H:i:s') }}
                                    </td>
                                    <td data-label="IP Address">
                                        <code class="small">{{ $log->ip_address }}</code>
                                    </td>
                                    <td data-label="User Agent">
                                        <small class="text-muted text-truncate d-block" style="max-width: 300px;">
                                            {{ $log->user_agent }}
                                        </small>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-shield-check text-success" style="font-size: 4rem;"></i>
                    <h5 class="mt-3">Tidak Ada Pelanggaran</h5>
                    <p class="text-muted">Siswa ini tidak terdeteksi melakukan kecurangan selama ujian.</p>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
    // Store all attempts data from backend
    window.attemptsData = @json($attemptsData);

    // Store cheating logs by attempt ID
    window.cheatingLogsByAttempt = {};
    window.statisticsByAttempt = @json($statisticsByAttempt);

    // Store current logs from backend (for initial attempt)
    window.cheatingLogsByAttempt[{{ $attempt->id }}] = @json($cheatingLogs);

    // Get type labels
    window.typeLabels = @json($typeLabels);

    // Fetch logs for all other attempts on page load
    async function loadAllAttemptsLogs() {
        const attemptIds = window.attemptsData
            .filter(a => a.id !== {{ $attempt->id }})
            .map(a => a.id);

        for (const attemptId of attemptIds) {
            try {
                const response = await fetch(`/admin/api/cheating-logs/${attemptId}`);
                if (!response.ok) throw new Error('Failed to load logs');

                const data = await response.json();
                window.cheatingLogsByAttempt[attemptId] = data.logs;
            } catch (error) {
                console.error(`Failed to load logs for attempt ${attemptId}:`, error);
                window.cheatingLogsByAttempt[attemptId] = [];
            }
        }
    }

    function loadAttemptLogs(attemptId) {
        const attempt = window.attemptsData.find(a => a.id == attemptId);
        if (!attempt) {
            console.error('Attempt not found:', attemptId);
            return;
        }

        const stats = window.statisticsByAttempt[attemptId];
        const logs = window.cheatingLogsByAttempt[attemptId] || [];

        // Update attempt info
        document.getElementById('attemptStartTime').textContent = attempt.start_time;
        document.getElementById('attemptEndTime').textContent = attempt.end_time || '-';

        // Update score badge
        const scoreElement = document.getElementById('attemptScore');
        if (attempt.score) {
            const badgeClass = attempt.score >= 70 ? 'success' : (attempt.score >= 50 ? 'warning' : 'danger');
            scoreElement.innerHTML = `<span class="badge bg-${badgeClass} fs-6">${attempt.score}</span>`;
        } else {
            scoreElement.innerHTML = '-';
        }

        // Update statistics
        document.getElementById('statTotal').textContent = stats.total;
        document.getElementById('statTabSwitch').textContent = stats.by_type.tab_switch;
        document.getElementById('statBlur').textContent = stats.by_type.blur;
        document.getElementById('statDevtools').textContent = stats.by_type.devtools;

        // Update logs table
        const tbody = document.getElementById('logsTableBody');

        if (logs.length > 0) {
            tbody.innerHTML = logs.map((log, index) => {
                const badgeClass = {
                    'tab_switch': 'warning',
                    'blur': 'info',
                    'devtools': 'danger'
                }[log.type] || 'secondary';

                return `
                    <tr>
                        <td>${index + 1}</td>
                        <td>
                            <span class="badge bg-${badgeClass}">
                                ${window.typeLabels[log.type] || log.type}
                            </span>
                        </td>
                        <td>
                            <i class="bi bi-clock me-1"></i>
                            ${log.created_at}
                        </td>
                        <td>
                            <code class="small">${log.ip_address}</code>
                        </td>
                        <td>
                            <small class="text-muted text-truncate d-block" style="max-width: 300px;">
                                ${log.user_agent}
                            </small>
                        </td>
                    </tr>
                `;
            }).join('');
        } else {
            tbody.innerHTML = `
                <tr>
                    <td colspan="5" class="text-center py-5">
                        <i class="bi bi-shield-check text-success" style="font-size: 3rem;"></i>
                        <h5 class="mt-3">Tidak Ada Pelanggaran</h5>
                        <p class="text-muted">Tidak ada pelanggaran untuk attempt ini.</p>
                    </td>
                </tr>
            `;
        }
    }

    // Load all logs on page load
    document.addEventListener('DOMContentLoaded', () => {
        if (window.attemptsData.length > 1) {
            loadAllAttemptsLogs();
        }
    });
</script>
@endsection