@extends('layouts.admin_lbb')

@section('page-title', 'Leaderboard Ujian')

@section('content')
<!-- 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.detail', $exam->exam_code) }}">{{ $exam->name }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Leaderboard</li>
    </ol>
</nav>

<!-- Exam Info -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h4 class="fw-bold mb-2">Leaderboard - {{ $exam->name }}</h4>
                <p class="text-muted mb-2">{{ $exam->description ?? 'Tanpa deskripsi' }}</p>
                <div class="d-flex flex-wrap gap-3">
                    <div><i class="bi bi-people me-2 text-primary"></i>{{ $totalParticipants }} Peserta</div>
                    <div><i class="bi bi-check-circle me-2 text-primary"></i>{{ $totalParticipants }} Selesai</div>
                    <div><i class="bi bi-trophy me-2 text-primary"></i>Passing Grade: {{ $exam->passing_grade }}</div>
                </div>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="d-flex gap-2 justify-content-md-end">
                    <button class="btn btn-outline-primary" onclick="location.href='{{ route('admin.exam.detail', $exam->exam_code) }}'">
                        <i class="bi bi-arrow-left me-1"></i>
                        Kembali
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Leaderboard Stats -->
<div class="row g-3 mb-4">
    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon primary">
                    <i class="bi bi-trophy-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $totalParticipants }}</div>
                <div class="stat-label">Total Peserta</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon" style="background: linear-gradient(135deg, var(--success) 0%, #059669 100%); color: white;">
                    <i class="bi bi-star-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $highestScore }}</div>
                <div class="stat-label">Skor Tertinggi</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon warning">
                    <i class="bi bi-bar-chart-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ number_format($averageScore, 1) }}</div>
                <div class="stat-label">Rata-rata Skor</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon danger">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $passingCount }}</div>
                <div class="stat-label">Siswa Lulus</div>
            </div>
        </div>
    </div>
</div>

@if($top3->count() >= 3)
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;margin-bottom:1.5rem;">

  {{-- 2nd Place Silver --}}
  <div style="background:#fff;border:0.5px solid #e5e5e5;border-radius:16px;overflow:hidden;text-align:center;padding-bottom:1.25rem;">
    <div style="height:8px;background:#B4B2A9;"></div>
    <div style="padding:1rem 1rem 0;">
      <div style="font-size:11px;font-weight:500;background:#F1EFE8;color:#5F5E5A;border-radius:6px;padding:3px 10px;display:inline-block;margin-bottom:8px;">Peringkat 2</div>
      <div style="margin:0 auto 10px;display:flex;align-items:center;justify-content:center;">
        <svg width="64" height="72" viewBox="0 0 64 72" fill="none">
          <rect x="27" y="0" width="5" height="18" rx="2.5" fill="#B4B2A9"/>
          <rect x="32" y="0" width="5" height="18" rx="2.5" fill="#888780"/>
          <circle cx="32" cy="46" r="24" fill="#D3D1C7"/>
          <circle cx="32" cy="46" r="20" fill="#B4B2A9"/>
          <circle cx="32" cy="46" r="16" fill="#D3D1C7"/>
          <text x="32" y="51" text-anchor="middle" font-size="16" font-weight="500" fill="#444441">2</text>
        </svg>
      </div>
      <p style="font-size:14px;font-weight:500;margin:0 0 3px;">{{ $top3[1]->student->user->name ?? 'Tanpa Nama' }}</p>
      <p style="font-size:12px;color:#888;margin:0 0 12px;">{{ $top3[1]->student->classModel->name ?? '-' }}</p>
      <span style="background:#F1EFE8;color:#444441;border-radius:8px;padding:5px 14px;font-weight:500;font-size:18px;">{{ number_format($top3[1]->highest_score, 1) }}</span>
    </div>
  </div>

  {{-- 1st Place Gold --}}
  <div style="background:#fff;border:1.5px solid #EF9F27;border-radius:16px;overflow:hidden;text-align:center;padding-bottom:1.25rem;">
    <div style="height:8px;background:#EF9F27;"></div>
    <div style="padding:1rem 1rem 0;">
      <div style="font-size:11px;font-weight:500;background:#FAEEDA;color:#854F0B;border-radius:6px;padding:3px 10px;display:inline-block;margin-bottom:8px;">Juara 1</div>
      <div style="margin:0 auto 10px;display:flex;align-items:center;justify-content:center;">
        <svg width="72" height="84" viewBox="0 0 72 84" fill="none">
          <rect x="30" y="0" width="6" height="20" rx="3" fill="#BA7517"/>
          <rect x="36" y="0" width="6" height="20" rx="3" fill="#EF9F27"/>
          <circle cx="36" cy="54" r="28" fill="#FAC775"/>
          <circle cx="36" cy="54" r="24" fill="#EF9F27"/>
          <circle cx="36" cy="54" r="20" fill="#FAC775"/>
          <line x1="36" y1="34" x2="36" y2="30" stroke="#BA7517" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="36" y1="74" x2="36" y2="78" stroke="#BA7517" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="16" y1="54" x2="12" y2="54" stroke="#BA7517" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="56" y1="54" x2="60" y2="54" stroke="#BA7517" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="22" y1="40" x2="19" y2="37" stroke="#BA7517" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="50" y1="40" x2="53" y2="37" stroke="#BA7517" stroke-width="1.5" stroke-linecap="round"/>
          <text x="36" y="60" text-anchor="middle" font-size="20" font-weight="500" fill="#633806">1</text>
        </svg>
      </div>
      <p style="font-size:15px;font-weight:500;margin:0 0 3px;">{{ $top3[0]->student->user->name ?? 'Tanpa Nama' }}</p>
      <p style="font-size:12px;color:#888;margin:0 0 12px;">{{ $top3[0]->student->classModel->name ?? '-' }}</p>
      <span style="background:#FAEEDA;color:#854F0B;border-radius:8px;padding:5px 14px;font-weight:500;font-size:22px;">{{ number_format($top3[0]->highest_score, 1) }}</span>
    </div>
  </div>

  {{-- 3rd Place Bronze --}}
  <div style="background:#fff;border:0.5px solid #e5e5e5;border-radius:16px;overflow:hidden;text-align:center;padding-bottom:1.25rem;">
    <div style="height:8px;background:#D85A30;"></div>
    <div style="padding:1rem 1rem 0;">
      <div style="font-size:11px;font-weight:500;background:#FAECE7;color:#993C1D;border-radius:6px;padding:3px 10px;display:inline-block;margin-bottom:8px;">Peringkat 3</div>
      <div style="margin:0 auto 10px;display:flex;align-items:center;justify-content:center;">
        <svg width="64" height="72" viewBox="0 0 64 72" fill="none">
          <rect x="27" y="0" width="5" height="18" rx="2.5" fill="#993C1D"/>
          <rect x="32" y="0" width="5" height="18" rx="2.5" fill="#D85A30"/>
          <circle cx="32" cy="46" r="24" fill="#F5C4B3"/>
          <circle cx="32" cy="46" r="20" fill="#F0997B"/>
          <circle cx="32" cy="46" r="16" fill="#F5C4B3"/>
          <text x="32" y="51" text-anchor="middle" font-size="16" font-weight="500" fill="#712B13">3</text>
        </svg>
      </div>
      <p style="font-size:14px;font-weight:500;margin:0 0 3px;">{{ $top3[2]->student->user->name ?? 'Tanpa Nama' }}</p>
      <p style="font-size:12px;color:#888;margin:0 0 12px;">{{ $top3[2]->student->classModel->name ?? '-' }}</p>
      <span style="background:#FAECE7;color:#993C1D;border-radius:8px;padding:5px 14px;font-weight:500;font-size:18px;">{{ number_format($top3[2]->highest_score, 1) }}</span>
    </div>
  </div>

</div>
@endif

<!-- Leaderboard Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
            <i class="bi bi-list-ol me-2"></i>
            Peringkat Lengkap
        </div>
        <div class="div">
            <a href="{{ route('admin.exam.leaderboard.export', $exam->exam_code) }}{{ request('search') ? '?search=' . urlencode(request('search')) : '' }}{{ request('status') ? (request('search') ? '&' : '?') . 'status=' . request('status') : '' }}" class="btn btn-outline-success">
                <i class="bi bi-file-earmark-excel me-1"></i>
                Export Excel
            </a>
        </div>
    </div>
    <div class="card-body">
        <!-- Search & Filter -->
        <form action="{{ route('admin.exam.leaderboard', $exam->exam_code) }}" method="GET" class="row g-3 mb-4">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" class="form-control" placeholder="Cari nama atau kelas..." name="search" value="{{ request('search') }}">
                    @if(request('status')) <input type="hidden" name="status" value="{{ request('status') }}"> @endif
                    @if(request('per_page') && !in_array(request('per_page'), [10, 25, 50, 100])) <input type="hidden" name="per_page" value="{{ request('per_page') }}"> @endif
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i> Filter
                    </button>
                </div>
            </div>
            <div class="col-md-3">
                <select class="form-select" name="status" onchange="this.form.submit()">
                    <option value="">Semua Status</option>
                    <option value="lulus" {{ request('status') === 'lulus' ? 'selected' : '' }}>Lulus</option>
                    <option value="tidak_lulus" {{ request('status') === 'tidak_lulus' ? 'selected' : '' }}>Tidak Lulus</option>
                </select>
            </div>
            <div class="col-md-3">
                <div class="alert alert-info mb-0">
                    <i class="bi bi-info-circle me-1"></i>
                    <span>{{ $participants->count() }}</span> peserta
                </div>
            </div>
        </form>
        
        <div class="table-responsive">
            <table class="table table-hover align-middle" id="leaderboardTable">
                <thead class="table-light">
                    <tr>
                        <th width="60">Rank</th>
                        <th>Nama</th>
                        <th>Kelas</th>
                        <th width="110">Tanggal</th>
                        <th width="100">Durasi</th>
                        <th width="100">Nilai</th>
                        <th width="80">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $currentRank = ($participants->currentPage() - 1) * $participants->perPage() + 1;
                    @endphp
                    @foreach($participants as $participant)
                    @php
                        $isPassed = $participant->highest_score >= $exam->passing_grade;
                        $scoreColor = $isPassed ? 'text-success' : 'text-danger';
                        // Hitung durasi dari end_time - start_time
                        $duration = null;
                        if ($participant->end_time && $participant->start_time) {
                            $diffSeconds = $participant->start_time->diffInSeconds($participant->end_time);
                            $duration = floor($diffSeconds / 60) . 'm ' . ($diffSeconds % 60) . 's';
                        }
                    @endphp
                    <tr class="participant-row" data-name="{{ strtolower($participant->student->user->name ?? '') }}" data-class="{{ strtolower($participant->student->classModel->name ?? '') }}" data-status="{{ $isPassed ? 'lulus' : 'tidak_lulus' }}" data-rank="{{ $currentRank }}">
                        <td data-label="Rank">
                            @if($currentRank <= 3)
                                <span class="badge bg-warning text-dark fs-6">{{ $currentRank }}</span>
                            @else
                                <span class="badge bg-secondary fs-6">{{ $currentRank }}</span>
                            @endif
                        </td>
                        <td data-label="Nama">
                            <div class="fw-bold">{{ $participant->student->user->name ?? 'Tanpa Nama' }}</div>
                        </td>
                        <td data-label="Kelas"><span class="badge bg-secondary">{{ $participant->student->classModel->name ?? '-' }}</span></td>
                        <td data-label="Tanggal">
                            @if($participant->created_at)
                                {{ $participant->created_at->format('d M y') }}
                            @else
                                -
                            @endif
                        </td>
                        <td data-label="Durasi">
                            @if($duration)
                                {{ $duration }}
                            @else
                                -
                            @endif
                        </td>
                        <td data-label="Nilai"><strong class="{{ $scoreColor }} fs-6">{{ number_format($participant->highest_score, 1) }}</strong></td>
                        <td data-label="Aksi">
                            <button
                                class="btn btn-sm btn-outline-primary btn-detail"
                                data-bs-toggle="modal"
                                data-bs-target="#detailModal"
                                data-attempt-id="{{ $participant->attempt_id }}"
                                data-student-name="{{ $participant->student->user->name ?? 'Tanpa Nama' }}"
                                data-student-email="{{ $participant->student->user->email ?? '-' }}"
                                data-student-class="{{ $participant->student->classModel->name ?? '-' }}"
                                data-exam-name="{{ $exam->name }}"
                                data-exam-date="{{ $participant->created_at ? $participant->created_at->format('d M Y') : '-' }}"
                                data-score="{{ number_format($participant->highest_score, 1) }}"
                                data-correct="{{ $participant->correct_answers ?? 0 }}"
                                data-total="{{ ($participant->correct_answers ?? 0) + ($participant->wrong_answers ?? 0) }}"
                                data-time="{{ $duration ?? '-' }}"
                                data-status="{{ $isPassed ? 'passed' : 'failed' }}"
                                data-created-at="{{ $participant->created_at ? $participant->created_at->format('d M Y') : '-' }}"
                                data-passing-grade="{{ $exam->passing_grade }}"
                            >
                                <i class="bi bi-eye me-1"></i>
                            </button>
                        </td>
                    </tr>
                    @php
                        $currentRank++;
                    @endphp
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="card-footer d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <span class="me-2">Tampilkan:</span>
                <select class="form-select form-select-sm" style="width: auto;" onchange="changePerPage(this.value)">
                    <option value="10" {{ $participants->perPage() == 10 ? 'selected' : '' }}>10</option>
                    <option value="25" {{ $participants->perPage() == 25 ? 'selected' : '' }}>25</option>
                    <option value="50" {{ $participants->perPage() == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ $participants->perPage() == 100 ? 'selected' : '' }}>100</option>
                </select>
                <span class="ms-2">per halaman</span>
            </div>
            <nav>
                <ul class="pagination pagination-sm mb-0">
                    @if($participants->onFirstPage())
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                        </li>
                    @else
                        <li class="page-item">
                            <a class="page-link" href="{{ $participants->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a>
                        </li>
                    @endif
                    
                    @foreach($participants->getUrlRange(1, $participants->lastPage()) as $page => $url)
                        @if($page == $participants->currentPage())
                            <li class="page-item active">
                                <span class="page-link">{{ $page }}</span>
                            </li>
                        @elseif($page == 1 || $page == $participants->lastPage() || ($page >= $participants->currentPage() - 1 && $page <= $participants->currentPage() + 1))
                            <li class="page-item">
                                <a class="page-link" href="{{ $participants->appends(request()->query())->url($page) }}">{{ $page }}</a>
                            </li>
                        @elseif($page == $participants->currentPage() - 2 || $page == $participants->currentPage() + 2)
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        @endif
                    @endforeach

                    @if($participants->hasMorePages())
                        <li class="page-item">
                            <a class="page-link" href="{{ $participants->appends(request()->query())->nextPageUrl() }}"><i class="bi bi-chevron-right"></i></a>
                        </li>
                    @else
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                        </li>
                    @endif
                </ul>
            </nav>
        </div>
    </div>
</div>

<script>
let currentparticipantId = null;
window._passingGradeRaw = '-'; // ✅ Global untuk simpan passing grade

document.addEventListener('DOMContentLoaded', function() {
    const detailModal = document.getElementById('detailModal');
    if (!detailModal) return;

    function onModalHidden() {
        const el = (id) => document.getElementById(id);
        if (el('topicBreakdown')) el('topicBreakdown').innerHTML = '';
        if (el('topicBaik'))     el('topicBaik').textContent = '0';
        if (el('topicCukup'))    el('topicCukup').textContent = '0';
        if (el('topicBuruk'))    el('topicBuruk').textContent = '0';
        currentparticipantId = null;
        window._passingGradeRaw = '-';
    }

    function onModalShow(event) {
        const button = event.relatedTarget;
        if (!button) return;

        const studentName  = button.getAttribute('data-student-name');
        const studentEmail = button.getAttribute('data-student-email');
        const studentClass = button.getAttribute('data-student-class');
        const examName     = button.getAttribute('data-exam-name');
        const examDate     = button.getAttribute('data-exam-date');
        const score        = button.getAttribute('data-score');
        const correct      = button.getAttribute('data-correct');
        const total        = button.getAttribute('data-total');
        const time         = button.getAttribute('data-time');
        const status       = button.getAttribute('data-status');
        const passingGrade = button.getAttribute('data-passing-grade');
        const attemptId    = button.getAttribute('data-attempt-id');

        currentattemptId = attemptId;
        window._passingGradeRaw = passingGrade; // ✅ Simpan sebelum DOM diubah

        const wrong = parseInt(total || 0) - parseInt(correct || 0);

        const setEl = (id, val) => {
            const el = document.getElementById(id);
            if (el) el.textContent = val;
        };

        setEl('detailScore',           score);
        setEl('detailCorrect',         correct);
        setEl('detailWrong',           wrong);
        setEl('detailTimeSmall',       time);
        setEl('detailStudentNameCard', studentName);
        setEl('detailStudentEmail',    studentEmail);
        setEl('detailStudentClass',    studentClass);
        setEl('detailExamDate',        examDate);
        setEl('detailStudentName',     studentName);
        setEl('detailStudentName2',    studentName);

        const statusText  = status === 'passed' ? 'Lulus' : 'Tidak Lulus';
        const passingText = status === 'passed'
            ? `(di atas Passing Grade ${passingGrade})`
            : `(di bawah Passing Grade ${passingGrade})`;

        setEl('detailStatus',      statusText);
        setEl('detailScore2',      score);
        setEl('detailPassingGrade', passingText);

        const statusAlert = document.getElementById('detailStatusAlert');
        if (statusAlert) {
            const isPassed = status === 'passed';

            // Ambil elemen ikon & teks title tanpa ngubah subtitle.
            const iconEl = statusAlert.querySelector('div:first-child');
            const contentDiv = statusAlert.querySelector('div:last-child');
            const titleElement = contentDiv ? contentDiv.querySelector('div:first-child') : null;

            if (isPassed) {
                statusAlert.style.background = '#EAF3DE';
                statusAlert.style.borderLeftColor = '#639922';
                if (iconEl) {
                    iconEl.style.background = '#639922';
                    iconEl.textContent = '✓';
                }
                if (titleElement) {
                    titleElement.innerHTML = `Selamat! <span id="detailStudentName2">${studentName}</span> dinyatakan <span id="detailStatus">${statusText}</span>`;
                }
            } else {
                statusAlert.style.background = '#FCEBEB';
                statusAlert.style.borderLeftColor = '#E24B4A';
                if (iconEl) {
                    iconEl.style.background = '#E24B4A';
                    iconEl.textContent = '✗';
                }
                if (titleElement) {
                    titleElement.innerHTML = `Maaf! <span id="detailStudentName2">${studentName}</span> dinyatakan <span id="detailStatus">${statusText}</span>`;
                }
            }
        }

        if (currentattemptId) {
            loadTopicBreakdown(currentattemptId);
        }
    }

    detailModal.addEventListener('hidden.bs.modal', onModalHidden);
    detailModal.addEventListener('show.bs.modal',   onModalShow);
});

function loadTopicBreakdown(attemptID) {
    const topicBreakdown = document.getElementById('topicBreakdown');
    if (!topicBreakdown) return;

    const timestamp = new Date().toISOString();

    topicBreakdown.innerHTML = `
        <div class="col-12 text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="text-muted mt-3">Memuat data topik...</p>
        </div>
    `;

    const setCount = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
    setCount('topicBaik',  '0');
    setCount('topicCukup', '0');
    setCount('topicBuruk', '0');

    const url = `{{ route('admin.exam.attempt.topic-breakdown', [$exam->exam_code, ':id']) }}`
        .replace(':id', attemptID);

    fetch(`${url}?_=${timestamp}`, {
        cache: 'no-store',
        headers: { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.error) {
            topicBreakdown.innerHTML = `
                <div class="col-12">
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle me-2"></i>${data.error}
                    </div>
                </div>`;
            return;
        }

        if (!data.topics || data.topics.length === 0) {
            topicBreakdown.innerHTML = `
                <div class="col-12 text-center">
                    <small class="text-muted">Belum ada data topik yang tersedia</small>
                </div>`;
            return;
        }

        // ✅ GANTI BLOK INI (baris 485-524):
        let topicsHTML = '';
        let baikCount = 0, cukupCount = 0, burukCount = 0;

        data.topics.forEach(topic => {
            const s           = topic.status_lower;
            const isGood      = s === 'baik', isMid = s === 'cukup';
            const accentColor = isGood ? '#639922' : isMid ? '#EF9F27' : '#E24B4A';
            const bgColor     = isGood ? '#EAF3DE' : isMid ? '#FAEEDA' : '#FCEBEB';
            const textColor   = isGood ? '#27500A' : isMid ? '#854F0B' : '#791F1F';

            if (s === 'baik') baikCount++;
            else if (s === 'cukup') cukupCount++;
            else burukCount++;

            topicsHTML += `
                <div style="flex:1 1 calc(50% - 4px);min-width:180px;border:0.5px solid #e8e8e8;border-left:3px solid ${accentColor};border-radius:10px;padding:10px 12px;box-sizing:border-box;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
                        <span style="font-size:12px;font-weight:600;color:#1a1a1a;">${topic.topic}</span>
                        <span style="font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;background:${bgColor};color:${textColor};">${topic.status}</span>
                    </div>
                    <div style="background:#f0f0f0;border-radius:3px;height:5px;margin-bottom:5px;">
                        <div style="background:${accentColor};height:5px;border-radius:3px;width:${topic.percentage_value}%;"></div>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;color:#888;">
                        <span>${topic.correct_display}</span>
                        <span style="font-weight:700;color:${textColor};">${topic.percentage}</span>
                    </div>
                </div>`;
        });

        // ✅ Set SEKALI di akhir — bukan append bertahap
        topicBreakdown.innerHTML = topicsHTML;

        setCount('topicBaik',  baikCount);
        setCount('topicCukup', cukupCount);
        setCount('topicBuruk', burukCount);
    })
    .catch(() => {
        topicBreakdown.innerHTML = `
            <div class="col-12">
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    Gagal memuat data topik. Silakan refresh halaman.
                </div>
            </div>`;
    });
}

function printResult() {
    const getEl = (id, fallback = '-') => {
        const el = document.getElementById(id);
        return el ? el.textContent.trim() : fallback;
    };

    const studentName  = getEl('detailStudentNameCard');
    const studentEmail = getEl('detailStudentEmail');
    const studentClass = getEl('detailStudentClass');
    const examName     = getEl('detailStudentName');
    const examDate     = getEl('detailExamDate');
    const score        = getEl('detailScore');
    const correct      = getEl('detailCorrect');
    const wrong        = getEl('detailWrong');
    const time         = getEl('detailTimeSmall');
    const status       = getEl('detailStatus');
    const printDate    = new Date().toLocaleDateString('id-ID', { day:'numeric', month:'long', year:'numeric' });
    const printTime    = new Date().toLocaleTimeString('id-ID', { hour:'2-digit', minute:'2-digit' });

    // ✅ Ambil dari global variable, bukan parse DOM
    const passingGradeRaw = window._passingGradeRaw || '-';

    const lbbName = '{{ $exam->lbb->name ?? "LBB" }}';
    // Use session logo URL first (might be full URL), then fall back to LBB settings logo_path
    @php
        $sessionLogoUrl = session('logo_url');
        // session logo_url is already a full URL, LBB logo_path needs asset()
        $lbbLogoPath = $exam->lbb->settings->logo_path ?? null;
        $lbbLogoUrl = $sessionLogoUrl 
            ? $sessionLogoUrl 
            : ($lbbLogoPath ? asset($lbbLogoPath) : null);
    @endphp
    const lbbLogo = '{{auth()->user()->lbb->logo_url}}';
    // Debug logging
    console.log('PRINT DEBUG - Logo Info:', {
        lbbName,
        lbbLogo,
        sessionLogoUrl: '{{ $sessionLogoUrl ?? "null" }}',
        lbbLogoPath: '{{ $lbbLogoPath ?? "null" }}'
    });

    // Build topic HTML
    const topicBreakdownEl = document.getElementById('topicBreakdown');
    let topicsHTML = '';
    if (topicBreakdownEl) {
        // Find all topic cards by their inline style
        const topicCards = Array.from(topicBreakdownEl.children).filter(
            child => child.style && child.style.borderLeft && child.style.borderLeft.includes('3px solid')
        );
        
        topicCards.forEach(card => {
            // Get topic name from first span with font-weight:600
            const topicName = card.querySelector('span[style*="font-weight:600"]')?.textContent?.trim() || '';
            // Get badge from span with border-radius:10px
            const badge = card.querySelector('span[style*="border-radius:10px"]')?.textContent?.trim() || '';
            // Get progress percentage from the last span with font-weight:700
            const pctSpans = card.querySelectorAll('span[style*="font-weight:700"]');
            const pct = pctSpans[pctSpans.length - 1]?.textContent?.trim() || '';
            // Get correct display - iterate through child divs and find the one with "/"
            let correctDisp = '';
            Array.from(card.children).forEach(child => {
                if (child.style && child.style.display === 'flex' && child.style.justifyContent === 'space-between') {
                    const firstSpan = child.querySelector('span:first-child');
                    if (firstSpan && firstSpan.textContent.includes('/')) {
                        correctDisp = firstSpan.textContent.trim();
                    }
                }
            });

            const bl = badge.toLowerCase();
            const isGood = bl === 'baik', isMid = bl === 'cukup';
            const accentColor = isGood ? '#639922' : isMid ? '#EF9F27' : '#E24B4A';
            const bgColor     = isGood ? '#EAF3DE' : isMid ? '#FAEEDA' : '#FCEBEB';
            const textColor   = isGood ? '#27500A' : isMid ? '#854F0B' : '#791F1F';
            const pctNum      = parseFloat(pct) || 0;

            topicsHTML += `
                <div class="topic-card" style="border-left-color:${accentColor};">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
                        <span style="font-size:12px;font-weight:700;color:#1a1a1a;">${topicName}</span>
                        <span style="font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;background:${bgColor};color:${textColor};-webkit-print-color-adjust:exact;print-color-adjust:exact;">${badge}</span>
                    </div>
                    <div style="background:#e8e8e8;border-radius:3px;height:6px;margin-bottom:5px;-webkit-print-color-adjust:exact;print-color-adjust:exact;">
                        <div style="background:${accentColor};height:6px;border-radius:3px;width:${Math.min(pctNum,100)}%;-webkit-print-color-adjust:exact;print-color-adjust:exact;"></div>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;color:#666;">
                        <span>${correctDisp}</span>
                        <span style="font-weight:700;color:${textColor};">${pct}</span>
                    </div>
                </div>`;
        });
    }
    if (!topicsHTML) {
        topicsHTML = `<div style="grid-column:span 2;text-align:center;color:#aaa;padding:16px;font-size:12px;">Belum ada data topik</div>`;
    }

    const isPassed     = String(status).trim().toLowerCase() === 'lulus';
    const bannerBg     = isPassed ? '#EAF3DE' : '#FCEBEB';
    const bannerBorder = isPassed ? '#639922'  : '#E24B4A';
    const iconBg       = isPassed ? '#639922'  : '#E24B4A';
    const iconChar     = isPassed ? '&#10003;' : '&#10007;';
    const statusTitle  = isPassed
        ? `Selamat! ${studentName} dinyatakan Lulus`
        : `Maaf! ${studentName} dinyatakan Tidak Lulus`;

    const logoHTML = lbbLogo
        ? `<img src="${lbbLogo}" style="width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff;"
               onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
           <div style="display:none;width:38px;height:38px;background:#fff;border-radius:50%;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#185FA5;">${lbbName.charAt(0)}</div>`
        : `<div style="width:38px;height:38px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#185FA5;">${lbbName.charAt(0)}</div>`;

    const printWindow = window.open('', '_blank');
    if (!printWindow) { alert('Popup diblokir browser. Izinkan popup untuk mencetak.'); return; }

    printWindow.document.write(`<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Hasil Ujian - ${studentName}</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:Arial,sans-serif;font-size:13px;color:#1a1a1a;background:#f5f5f5;padding:2rem}
        .page{background:#fff;max-width:720px;margin:0 auto;border:0.5px solid #ddd}
        .header-bar{background:{{$exam->lbb->settings->theme_primary_color}};padding:1.25rem 2rem;display:flex;align-items:center;-webkit-print-color-adjust:exact;print-color-adjust:exact;gap:1rem;}
        .header-bar h1{color:#fff;font-size:17px;font-weight:700}
        .header-bar .sub{color:{{$exam->lbb->settings->theme_font_color}};font-size:11px;margin-bottom:2px}
        .body{padding:1.5rem 2rem}
        .student-section{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:1.25rem}
        .info-box{border:0.5px solid #e0e0e0;border-radius:6px;padding:9px 11px}
        .info-box .lbl{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px}
        .info-box .val{font-size:13px;font-weight:600;color:#1a1a1a}
        .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.25rem}
        .stat-box{text-align:center;border-radius:6px;padding:12px 8px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
        .stat-box .num{font-size:22px;font-weight:700;line-height:1}
        .stat-box .lbl{font-size:10px;margin-top:4px;text-transform:uppercase;letter-spacing:0.04em}
        .divider{border:none;border-top:0.5px solid #e8e8e8;margin:1rem 0}
        .section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#888;margin-bottom:8px}
        .topic-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.25rem}
        .topic-card{flex:1 1 calc(50% - 4px);min-width:180px;border:0.5px solid #e0e0e0;border-left:3px solid;border-radius:6px;padding:10px 12px;break-inside:avoid;box-sizing:border-box;}
        .status-banner{border-radius:6px;padding:12px 14px;display:flex;align-items:center;gap:12px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
        .status-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
        .footer-bar{background:#f9f9f9;border-top:0.5px solid #e8e8e8;padding:9px 2rem;display:flex;justify-content:space-between;font-size:10px;color:#aaa;-webkit-print-color-adjust:exact;print-color-adjust:exact}
        @media print{
            body{background:#fff;padding:0}
            .page{border:none;max-width:100%}
            *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
        }
    </style>
    </head><body>
    <div class="page">
        <div class="header-bar">
            <div style="display:flex;align-items:center;">${logoHTML}</div>
            <div>
                <div class="sub">${lbbName} </div>
                <h1>Laporan Hasil Ujian</h1>
            </div>
        </div>
        <div class="body">
            <div class="student-section">
                <div class="info-box">
                    <div class="lbl">Nama Peserta</div>
                    <div class="val">${studentName}</div>
                </div>
                <div class="info-box">
                    <div class="lbl">Kelas</div>
                    <div class="val">${studentClass}</div>
                </div>
                <div class="info-box">
                    <div class="lbl">Tanggal Ujian</div>
                    <div class="val">${examDate}</div>
                </div>
            </div>
            <div class="stats-row">
                <div class="stat-box" style="background:#E6F1FB">
                    <div class="num" style="color:#0C447C">${score}</div>
                    <div class="lbl" style="color:#378ADD">Total Nilai</div>
                </div>
                <div class="stat-box" style="background:#EAF3DE">
                    <div class="num" style="color:#27500A">${correct}</div>
                    <div class="lbl" style="color:#639922">Benar</div>
                </div>
                <div class="stat-box" style="background:#FCEBEB">
                    <div class="num" style="color:#791F1F">${wrong}</div>
                    <div class="lbl" style="color:#E24B4A">Salah</div>
                </div>
                <div class="stat-box" style="background:#F1EFE8">
                    <div class="num" style="color:#444441;font-size:15px;padding-top:4px">${time}</div>
                    <div class="lbl" style="color:#888780">Durasi</div>
                </div>
            </div>
            <hr class="divider">
            <div class="section-title">Pencapaian per topik</div>
            <div class="topic-grid">${topicsHTML}</div>
            <hr class="divider">
            <div class="status-banner" style="background:${bannerBg};border-left:4px solid ${bannerBorder}">
                <div class="status-icon" style="background:${iconBg}">${iconChar}</div>
                <div>
                    <div style="font-size:13px;font-weight:700;color:#1a1a1a">${statusTitle}</div>
                    <div style="font-size:11px;color:#555;margin-top:2px">
                        Nilai ${score} &nbsp;&middot;&nbsp; Passing Grade: ${passingGradeRaw} &nbsp;&middot;&nbsp; ${printDate}
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bar">
            <span>Dicetak: ${printDate}, ${printTime}</span>
            <span>Passing Grade: ${passingGradeRaw}</span>
        </div>
    </div>
    </body></html>`);

    printWindow.document.close();
    setTimeout(() => { printWindow.print(); printWindow.close(); }, 600);
}

function changePerPage(value) {
    const url = new URL(window.location.href);
    url.searchParams.set('per_page', value);
    url.searchParams.set('page', 1);
    window.location.href = url.toString();
}

function showGenerateModal() {
    let passingCount = 0;
    document.querySelectorAll('#leaderboardTable tbody tr').forEach(row => {
        if (row.style.display != 'none' && row.dataset.status === 'lulus') passingCount++;
    });

    if (passingCount === 0) {
        alert('Tidak ada siswa yang lulus untuk diberikan sertifikat.');
        return;
    }

    const tokenCost = passingCount * 5;
    const el = (id) => document.getElementById(id);
    if (el('totalPassing'))   el('totalPassing').textContent   = passingCount;
    if (el('totalTokenCost')) el('totalTokenCost').textContent = tokenCost;

    new bootstrap.Modal(document.getElementById('generateCertificateModal')).show();
}
</script>

@include('admin.modal.exam-leaderboard.detail')
@endsection