<?php
include '../config.php';

if (!isSiswa()) {
    redirect('../login.php');
}

$user_id = $_SESSION['user_id'];

// Cek parameter
if (!isset($_GET['attempt_id']) || empty($_GET['attempt_id'])) {
    $_SESSION['error'] = "Attempt quiz tidak valid!";
    redirect('quizzes.php');
}

$attempt_id = sanitize($_GET['attempt_id']);

// Ambil data attempt dan hasil quiz
$sql_attempt = "SELECT qa.*, q.judul_quiz, q.deskripsi, q.waktu_menit, q.passing_grade, 
                       q.jumlah_soal, q.tampilkan_nilai,
                       l.judul_lesson, l.id_course, c.judul as course_title,
                       u.nama_lengkap as nama_guru,
                       (SELECT COUNT(*) FROM lms_questions WHERE id_quiz = q.id) as total_lms_questions
                FROM lms_quiz_attempts qa
                JOIN lms_quizzes q ON qa.id_quiz = q.id
                JOIN lms_lessons l ON q.id_lesson = l.id
                JOIN lms_courses c ON l.id_course = c.id
                JOIN lms_users u ON c.id_guru = u.id
                WHERE qa.id = ? AND qa.id_siswa = ?";
$stmt_attempt = $conn->prepare($sql_attempt);
$stmt_attempt->bind_param('ii', $attempt_id, $user_id);
$stmt_attempt->execute();
$result_attempt = $stmt_attempt->get_result();

if ($result_attempt->num_rows == 0) {
    $_SESSION['error'] = "Hasil quiz tidak ditemukan!";
    redirect('quizzes.php');
}

$attempt = $result_attempt->fetch_assoc();

// Cek jika quiz belum selesai
if ($attempt['status'] != 'completed') {
    $_SESSION['warning'] = "Quiz belum selesai dikerjakan!";
    redirect("take_quiz.php?attempt_id=" . $attempt_id);
}

// Hitung statistik
$is_passed = $attempt['nilai'] >= $attempt['passing_grade'];
$time_taken = strtotime($attempt['waktu_selesai']) - strtotime($attempt['waktu_mulai']);
$time_taken_minutes = round($time_taken / 60, 1);

// Ambil detail soal dan jawaban
$sql_lms_questions = "SELECT q.*, 
                  (SELECT COUNT(*) FROM lms_questions q2 
                   WHERE q2.id_quiz = q.id_quiz AND q2.id <= q.id) as question_number
                  FROM lms_questions q 
                  WHERE q.id_quiz = ? 
                  ORDER BY q.id";
$stmt_lms_questions = $conn->prepare($sql_lms_questions);
$stmt_lms_questions->bind_param('i', $attempt['id_quiz']);
$stmt_lms_questions->execute();
$result_lms_questions = $stmt_lms_questions->get_result();

// Ambil attempt history untuk quiz ini
$sql_history = "SELECT * FROM lms_quiz_attempts 
                WHERE id_quiz = ? AND id_siswa = ? AND status = 'completed'
                ORDER BY waktu_selesai DESC 
                LIMIT 5";
$stmt_history = $conn->prepare($sql_history);
$stmt_history->bind_param('ii', $attempt['id_quiz'], $user_id);
$stmt_history->execute();
$result_history = $stmt_history->get_result();

// Hitung rata-rata nilai
$sql_avg = "SELECT AVG(nilai) as avg_nilai, COUNT(*) as total_attempts 
            FROM lms_quiz_attempts 
            WHERE id_quiz = ? AND id_siswa = ? AND status = 'completed'";
$stmt_avg = $conn->prepare($sql_avg);
$stmt_avg->bind_param('ii', $attempt['id_quiz'], $user_id);
$stmt_avg->execute();
$result_avg = $stmt_avg->get_result();
$stats = $result_avg->fetch_assoc();
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hasil Quiz - <?php echo $attempt['judul_quiz']; ?> - SMANSAB LMS</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #3f51b5;
            --secondary-color: #f5f5f5;
        }
        
        .result-header {
            background: white;
            border-bottom: 1px solid #e9ecef;
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .result-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .score-card {
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            color: white;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }
        
        .score-card.passed {
            background: linear-gradient(135deg, #28a745, #20c997);
        }
        
        .score-card.failed {
            background: linear-gradient(135deg, #dc3545, #fd7e14);
        }
        
        .score-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            border: 4px solid rgba(255, 255, 255, 0.3);
        }
        
        .question-card {
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            background: white;
        }
        
        .question-card.correct {
            border-left: 4px solid #28a745;
            background: #f8fff9;
        }
        
        .question-card.incorrect {
            border-left: 4px solid #dc3545;
            background: #fff8f8;
        }
        
        .option {
            padding: 10px 15px;
            margin: 5px 0;
            border-radius: 8px;
            border: 2px solid #e9ecef;
        }
        
        .option.correct-answer {
            background: #d4edda;
            border-color: #28a745;
            color: #155724;
        }
        
        .option.user-correct {
            background: #d4edda;
            border-color: #28a745;
            color: #155724;
            font-weight: bold;
        }
        
        .option.user-incorrect {
            background: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
            font-weight: bold;
        }
        
        .stats-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .progress-ring {
            transform: rotate(-90deg);
        }
        
        .progress-ring-circle {
            transition: stroke-dashoffset 0.35s;
            transform: rotate(90deg);
            transform-origin: 50% 50%;
        }
        
        .history-item {
            padding: 10px 15px;
            border-left: 3px solid #e9ecef;
            margin-bottom: 10px;
            background: white;
            border-radius: 5px;
        }
        
        .history-item.current {
            border-left-color: var(--primary-color);
            background: #f0f4ff;
        }
        
        .badge-score {
            font-size: 0.8rem;
            padding: 4px 8px;
        }
        
        .comparison-chart {
            height: 200px;
            position: relative;
        }
        
        .chart-bar {
            position: absolute;
            bottom: 0;
            width: 30px;
            border-radius: 5px 5px 0 0;
            transition: height 0.5s ease;
        }
    </style>
</head>
<body>
    <!-- Result Header -->
    <header class="result-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <a href="quizzes.php" class="btn btn-outline-primary btn-sm me-3">
                            <i class="bi bi-arrow-left"></i>
                        </a>
                        <div>
                            <h6 class="mb-0 fw-bold">Hasil Quiz: <?php echo $attempt['judul_quiz']; ?></h6>
                            <small class="text-muted">
                                <?php echo $attempt['course_title']; ?> - <?php echo $attempt['nama_guru']; ?>
                            </small>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex justify-content-end align-items-center">
                        <div class="dropdown">
                            <button class="btn btn-outline-primary dropdown-toggle" type="button" 
                                    data-bs-toggle="dropdown">
                                <i class="bi bi-person-circle me-2"></i>
                                <?php echo $_SESSION['nama_lengkap']; ?>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="dashboard.php">
                                    <i class="bi bi-speedometer2 me-2"></i>Dashboard
                                </a></li>
                                <li><a class="dropdown-item" href="quizzes.php">
                                    <i class="bi bi-pencil-square me-2"></i>Kuis & Ujian
                                </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="../logout.php">
                                    <i class="bi bi-box-arrow-right me-2"></i>Logout
                                </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="container-fluid">
        <div class="result-container">
            <!-- Score Summary -->
            <div class="score-card <?php echo $is_passed ? 'passed' : 'failed'; ?>">
                <div class="score-circle">
                    <div class="text-center">
                        <h2 class="mb-0 fw-bold"><?php echo $attempt['nilai']; ?></h2>
                        <small>/ 100</small>
                    </div>
                </div>
                
                <h3 class="fw-bold mb-2">
                    <?php echo $is_passed ? 'SELAMAT! ANDA LULUS' : 'ANDA TIDAK LULUS'; ?>
                </h3>
                
                <p class="mb-3">
                    <?php echo $is_passed ? 
                        'Anda telah berhasil melewati passing grade quiz ini.' : 
                        'Nilai Anda belum mencapai passing grade yang ditentukan.'; ?>
                </p>
                
                <div class="row">
                    <div class="col-md-4">
                        <div class="text-center">
                            <h5 class="fw-bold mb-1"><?php echo $attempt['total_lms_questions']; ?></h5>
                            <small>Total Soal</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center">
                            <h5 class="fw-bold mb-1"><?php echo $attempt['passing_grade']; ?>%</h5>
                            <small>Nilai Minimal</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center">
                            <h5 class="fw-bold mb-1"><?php echo $time_taken_minutes; ?>m</h5>
                            <small>Waktu Pengerjaan</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Left Column - Statistics -->
                <div class="col-lg-4 mb-4">
                    <!-- Quick Stats -->
                    <div class="stats-card">
                        <h6 class="fw-bold mb-3">Statistik Quiz</h6>
                        
                        <div class="mb-3">
                            <small class="text-muted">Nilai Anda</small>
                            <div class="d-flex align-items-center">
                                <div class="progress flex-grow-1 me-2" style="height: 8px;">
                                    <div class="progress-bar <?php echo $is_passed ? 'bg-success' : 'bg-danger'; ?>" 
                                         style="width: <?php echo $attempt['nilai']; ?>%"></div>
                                </div>
                                <span class="fw-bold"><?php echo $attempt['nilai']; ?>%</span>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <small class="text-muted">Passing Grade</small>
                            <div class="fw-bold text-<?php echo $is_passed ? 'success' : 'danger'; ?>">
                                <?php echo $attempt['passing_grade']; ?>%
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <small class="text-muted">Status</small>
                            <div>
                                <span class="badge bg-<?php echo $is_passed ? 'success' : 'danger'; ?>">
                                    <?php echo $is_passed ? 'LULUS' : 'TIDAK LULUS'; ?>
                                </span>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <small class="text-muted">Waktu Pengerjaan</small>
                            <div class="fw-bold"><?php echo $time_taken_minutes; ?> menit</div>
                        </div>
                        
                        <div class="mb-3">
                            <small class="text-muted">Tanggal Selesai</small>
                            <div class="fw-bold">
                                <?php echo date('d M Y H:i', strtotime($attempt['waktu_selesai'])); ?>
                            </div>
                        </div>
                    </div>

                    <!-- Attempt History -->
                    <div class="stats-card">
                        <h6 class="fw-bold mb-3">Riwayat Attempt</h6>
                        
                        <?php if ($result_history->num_rows > 0): ?>
                            <div class="history-list">
                                <?php while($history = $result_history->fetch_assoc()): 
                                    $is_current = $history['id'] == $attempt_id;
                                    $history_passed = $history['nilai'] >= $attempt['passing_grade'];
                                ?>
                                    <div class="history-item <?php echo $is_current ? 'current' : ''; ?>">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <small class="text-muted">
                                                    <?php echo date('d M H:i', strtotime($history['waktu_selesai'])); ?>
                                                </small>
                                                <div class="fw-bold">Nilai: <?php echo $history['nilai']; ?>%</div>
                                            </div>
                                            <span class="badge-score badge bg-<?php echo $history_passed ? 'success' : 'danger'; ?>">
                                                <?php echo $history_passed ? 'Lulus' : 'Gagal'; ?>
                                            </span>
                                        </div>
                                    </div>
                                <?php endwhile; ?>
                            </div>
                        <?php else: ?>
                            <p class="text-muted text-center mb-0">Tidak ada riwayat attempt</p>
                        <?php endif; ?>
                        
                        <div class="mt-3 text-center">
                            <small class="text-muted">
                                Total Attempt: <?php echo $stats['total_attempts']; ?> | 
                                Rata-rata: <?php echo number_format($stats['avg_nilai'] ?? 0, 1); ?>%
                            </small>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="stats-card">
                        <h6 class="fw-bold mb-3">Aksi</h6>
                        <div class="d-grid gap-2">
                            <a href="quizzes.php" class="btn btn-outline-primary">
                                <i class="bi bi-list-ul me-2"></i>Kembali ke Daftar Quiz
                            </a>
                            <a href="course_learn.php?id=<?php echo $attempt['id_course']; ?>" 
                               class="btn btn-outline-success">
                                <i class="bi bi-book me-2"></i>Lanjut Belajar
                            </a>
                            <?php if ($result_history->num_rows > 1): ?>
                                <button class="btn btn-outline-info" onclick="showProgressChart()">
                                    <i class="bi bi-graph-up me-2"></i>Lihat Progress
                                </button>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Right Column - Question Review -->
                <div class="col-lg-8">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            <h6 class="mb-0 fw-bold">
                                <i class="bi bi-list-check me-2"></i>
                                Review Jawaban
                            </h6>
                        </div>
                        <div class="card-body">
                            <?php if ($result_lms_questions->num_rows > 0): ?>
                                <?php while($question = $result_lms_questions->fetch_assoc()): 
                                    $question_number = $question['question_number'];
                                    // Note: Dalam implementasi nyata, Anda perlu menyimpan jawaban user
                                    // dan membandingkannya dengan jawaban benar
                                    $user_answer = ''; // Ambil dari tabel jawaban user
                                    $is_correct = true; // Logika perbandingan jawaban
                                ?>
                                    <div class="question-card <?php echo $is_correct ? 'correct' : 'incorrect'; ?>">
                                        <div class="d-flex justify-content-between align-items-start mb-3">
                                            <h6 class="fw-bold mb-0">Soal #<?php echo $question_number; ?></h6>
                                            <span class="badge bg-<?php echo $is_correct ? 'success' : 'danger'; ?>">
                                                <?php echo $is_correct ? 'Benar' : 'Salah'; ?>
                                            </span>
                                        </div>
                                        
                                        <p class="mb-3"><?php echo $question['pertanyaan']; ?></p>
                                        
                                        <?php if ($question['tipe'] == 'pilihan_ganda'): ?>
                                            <div class="options-review">
                                                <?php if (!empty($question['opsi_a'])): ?>
                                                    <div class="option <?php 
                                                        echo ($question['jawaban_benar'] == 'a') ? 'correct-answer' : '';
                                                        echo ($user_answer == 'a') ? ' user-' . ($is_correct ? 'correct' : 'incorrect') : '';
                                                    ?>">
                                                        <strong>A.</strong> <?php echo $question['opsi_a']; ?>
                                                        <?php if ($question['jawaban_benar'] == 'a'): ?>
                                                            <i class="bi bi-check-circle-fill text-success ms-2"></i>
                                                        <?php endif; ?>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                <?php if (!empty($question['opsi_b'])): ?>
                                                    <div class="option <?php 
                                                        echo ($question['jawaban_benar'] == 'b') ? 'correct-answer' : '';
                                                        echo ($user_answer == 'b') ? ' user-' . ($is_correct ? 'correct' : 'incorrect') : '';
                                                    ?>">
                                                        <strong>B.</strong> <?php echo $question['opsi_b']; ?>
                                                        <?php if ($question['jawaban_benar'] == 'b'): ?>
                                                            <i class="bi bi-check-circle-fill text-success ms-2"></i>
                                                        <?php endif; ?>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                <?php if (!empty($question['opsi_c'])): ?>
                                                    <div class="option <?php 
                                                        echo ($question['jawaban_benar'] == 'c') ? 'correct-answer' : '';
                                                        echo ($user_answer == 'c') ? ' user-' . ($is_correct ? 'correct' : 'incorrect') : '';
                                                    ?>">
                                                        <strong>C.</strong> <?php echo $question['opsi_c']; ?>
                                                        <?php if ($question['jawaban_benar'] == 'c'): ?>
                                                            <i class="bi bi-check-circle-fill text-success ms-2"></i>
                                                        <?php endif; ?>
                                                    </div>
                                                <?php endif; ?>
                                                
                                                <?php if (!empty($question['opsi_d'])): ?>
                                                    <div class="option <?php 
                                                        echo ($question['jawaban_benar'] == 'd') ? 'correct-answer' : '';
                                                        echo ($user_answer == 'd') ? ' user-' . ($is_correct ? 'correct' : 'incorrect') : '';
                                                    ?>">
                                                        <strong>D.</strong> <?php echo $question['opsi_d']; ?>
                                                        <?php if ($question['jawaban_benar'] == 'd'): ?>
                                                            <i class="bi bi-check-circle-fill text-success ms-2"></i>
                                                        <?php endif; ?>
                                                    </div>
                                                <?php endif; ?>
                                            </div>
                                            
                                            <div class="mt-3">
                                                <small class="text-muted">
                                                    <strong>Jawaban Anda:</strong> 
                                                    <span class="fw-bold"><?php echo strtoupper($user_answer); ?></span> | 
                                                    <strong>Jawaban Benar:</strong> 
                                                    <span class="fw-bold text-success"><?php echo strtoupper($question['jawaban_benar']); ?></span>
                                                </small>
                                            </div>
                                        <?php else: ?>
                                            <div class="form-group">
                                                <label class="form-label"><strong>Jawaban Essay Anda:</strong></label>
                                                <textarea class="form-control" rows="4" readonly><?php echo $user_answer; ?></textarea>
                                            </div>
                                        <?php endif; ?>
                                        
                                        <div class="mt-3 d-flex justify-content-between align-items-center">
                                            <small class="text-muted">
                                                <i class="bi bi-star-fill text-warning"></i>
                                                Poin: <?php echo $question['poin']; ?>
                                            </small>
                                            <?php if (!$is_correct): ?>
                                                <small class="text-danger">
                                                    <i class="bi bi-x-circle me-1"></i>
                                                    Kehilangan <?php echo $question['poin']; ?> poin
                                                </small>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endwhile; ?>
                            <?php else: ?>
                                <div class="text-center py-4">
                                    <i class="bi bi-pencil-square text-muted" style="font-size: 3rem;"></i>
                                    <p class="text-muted mt-2">Tidak ada data review soal</p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- Performance Summary -->
                    <div class="card border-0 shadow-sm mt-4">
                        <div class="card-header bg-white">
                            <h6 class="mb-0 fw-bold">
                                <i class="bi bi-graph-up me-2"></i>
                                Ringkasan Performa
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-3 mb-3">
                                    <div class="fw-bold text-primary fs-4">
                                        <?php echo $attempt['nilai']; ?>%
                                    </div>
                                    <small class="text-muted">Nilai Akhir</small>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="fw-bold text-success fs-4">
                                        <?php 
                                        // Hitung jumlah soal benar (dummy data)
                                        $correct_count = round(($attempt['nilai'] / 100) * $attempt['total_lms_questions']);
                                        echo $correct_count; 
                                        ?>
                                    </div>
                                    <small class="text-muted">Soal Benar</small>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="fw-bold text-danger fs-4">
                                        <?php echo $attempt['total_lms_questions'] - $correct_count; ?>
                                    </div>
                                    <small class="text-muted">Soal Salah</small>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="fw-bold text-info fs-4">
                                        <?php echo $time_taken_minutes; ?>m
                                    </div>
                                    <small class="text-muted">Waktu</small>
                                </div>
                            </div>
                            
                            <div class="progress" style="height: 20px;">
                                <div class="progress-bar bg-success" 
                                     style="width: <?php echo ($correct_count / $attempt['total_lms_questions']) * 100; ?>%">
                                    <?php echo round(($correct_count / $attempt['total_lms_questions']) * 100); ?>% Benar
                                </div>
                                <div class="progress-bar bg-danger" 
                                     style="width: <?php echo (($attempt['total_lms_questions'] - $correct_count) / $attempt['total_lms_questions']) * 100; ?>%">
                                    <?php echo round((($attempt['total_lms_questions'] - $correct_count) / $attempt['total_lms_questions']) * 100); ?>% Salah
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Progress Chart Modal -->
    <div class="modal fade" id="progressChartModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Progress Nilai Quiz</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="comparison-chart" id="progressChart">
                        <!-- Chart akan di-generate oleh JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function showProgressChart() {
            const modal = new bootstrap.Modal(document.getElementById('progressChartModal'));
            modal.show();
            
            // Simulasi data progress (dalam implementasi nyata, ambil dari database)
            const attempts = [
                { score: 65, date: 'Attempt 1' },
                { score: 72, date: 'Attempt 2' },
                { score: 85, date: 'Attempt 3' },
                { score: <?php echo $attempt['nilai']; ?>, date: 'Attempt Terkini' }
            ];
            
            const chart = document.getElementById('progressChart');
            chart.innerHTML = '';
            
            const maxScore = 100;
            const barWidth = 60;
            const spacing = 30;
            
            attempts.forEach((attempt, index) => {
                const barHeight = (attempt.score / maxScore) * 180;
                const bar = document.createElement('div');
                bar.className = 'chart-bar';
                bar.style.left = (index * (barWidth + spacing)) + 'px';
                bar.style.height = barHeight + 'px';
                bar.style.backgroundColor = attempt.score >= <?php echo $attempt['passing_grade']; ?> ? '#28a745' : '#dc3545';
                
                const label = document.createElement('div');
                label.style.position = 'absolute';
                label.style.bottom = '-25px';
                label.style.left = '0';
                label.style.width = '100%';
                label.style.textAlign = 'center';
                label.style.fontSize = '12px';
                label.innerHTML = `<div>${attempt.date}</div><div class="fw-bold">${attempt.score}%</div>`;
                
                bar.appendChild(label);
                chart.appendChild(bar);
            });
        }

        // Print result
        function printResult() {
            window.print();
        }

        // Share result (simulasi)
        function shareResult() {
            if (navigator.share) {
                navigator.share({
                    title: 'Hasil Quiz: <?php echo $attempt['judul_quiz']; ?>',
                    text: `Saya mendapatkan nilai <?php echo $attempt['nilai']; ?>% pada quiz <?php echo $attempt['judul_quiz']; ?>!`,
                    url: window.location.href
                });
            } else {
                alert('Fitur share tidak didukung di browser ini. Anda bisa copy link secara manual.');
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Add animation to score card
            const scoreCard = document.querySelector('.score-card');
            setTimeout(() => {
                scoreCard.style.transform = 'scale(1.02)';
                setTimeout(() => {
                    scoreCard.style.transform = 'scale(1)';
                }, 200);
            }, 500);
        });
    </script>
</body>
</html>