{% extends 'base.html' %}
{% load static %}

{% block title %}Hasil Tes RMIB - {{ student.name }}{% endblock %}

{% block extra_css %}
<style>
/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }
.animate-slideInLeft { animation: slideInLeft 0.5s ease-out forwards; }
.animate-scaleIn { animation: scaleIn 0.4s ease-out forwards; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ==================== CARD DESIGN ==================== */
.result-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* ==================== RANK BADGE ==================== */
.rank-badge {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border: 3px solid #fff8dc;
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    border: 3px solid #f1f5f9;
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    border: 3px solid #fff7ed;
}

/* ==================== PROGRESS BAR ==================== */
.score-bar {
    height: 12px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.score-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.score-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==================== CATEGORY LIST ==================== */
.category-item {
    padding: 18px;
    background: white;
    border-radius: 12px;
    border-left: 4px solid #667eea;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-item:hover {
    transform: translateX(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-left-color: #764ba2;
}

.category-item.rank-1 {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-left-color: #f59e0b;
}

/* ==================== ICON CIRCLE ==================== */
.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==================== INFO BOX ==================== */
.info-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
}

.info-box:hover {
    border-left-color: #764ba2;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

/* ==================== ACHIEVEMENT CARD ==================== */
.achievement-card {
    background: white;
    border: 2px solid #fbbf24;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.achievement-card:hover {
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
    transform: translateY(-2px);
}

.achievement-badge {
    display: inline-block;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

/* ==================== SCORE TABS ==================== */
.score-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #f0fdf4;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
}

.score-tab.test { background: #dbeafe; color: #0369a1; }
.score-tab.achievement { background: #fef3c7; color: #92400e; }
.score-tab.combined { background: #f0fdf4; color: #15803d; }

/* ==================== PRINT STYLES ==================== */
@media print {
    .no-print { display: none !important; }
    .result-card { 
        box-shadow: none; 
        border: 1px solid #e5e7eb;
        page-break-inside: avoid;
    }
    body { background: white; }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .rank-badge {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
    
    .category-item {
        padding: 14px;
    }
    
    .icon-circle {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
    
    <!-- HEADER SECTION -->
    <header class="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 rounded-2xl shadow-2xl p-8 lg:p-12 mb-8 text-white animate-fadeInUp">
        <div class="text-center">
            <div class="inline-flex items-center justify-center w-20 h-20 lg:w-24 lg:h-24 bg-white/20 backdrop-blur-lg rounded-full shadow-lg mb-4 lg:mb-6">
                <i class="fas fa-trophy text-4xl lg:text-5xl"></i>
            </div>
            
            <h1 class="text-3xl lg:text-5xl font-bold mb-2">Hasil Tes RMIB & Prestasi</h1>
            <p class="text-base lg:text-lg text-indigo-100 mb-4 lg:mb-6">Ranking Minat + Analisis Prestasi Karir</p>
            
            <div class="bg-white/10 backdrop-blur-lg rounded-xl px-6 lg:px-8 py-3 lg:py-4 inline-block">
                <p class="text-indigo-100 text-xs lg:text-sm">Nama Siswa</p>
                <p class="text-2xl lg:text-3xl font-bold mb-2">{{ student.name }}</p>
                <div class="flex flex-wrap justify-center gap-4 lg:gap-6 text-indigo-100 text-sm lg:text-base">
                    <span><i class="fas fa-id-card mr-1"></i>{{ student.nisn }}</span>
                    <span><i class="fas fa-chalkboard mr-1"></i>{{ student.student_class }}</span>
                </div>
            </div>
        </div>
    </header>

    <!-- SUCCESS MESSAGE -->
    <div class="bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl shadow-lg p-6 mb-8 text-center animate-scaleIn">
        <i class="fas fa-check-circle text-4xl lg:text-5xl mb-3"></i>
        <h2 class="text-xl lg:text-2xl font-bold mb-2">Selamat! Tes Berhasil Diselesaikan</h2>
        <p class="text-sm lg:text-base text-green-50">Berikut adalah hasil analisis minat, bakat, dan prestasi karir Anda berdasarkan Tes RMIB</p>
    </div>

    <!-- TOTAL SCORE SECTION -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Test Score -->
        <div class="result-card p-6 lg:p-8 animate-slideInLeft">
            <div class="text-center">
                <div class="inline-block w-16 h-16 lg:w-20 lg:h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white mb-4 shadow-lg">
                    <i class="fas fa-chart-line text-2xl lg:text-3xl"></i>
                </div>
                <p class="text-gray-600 text-sm lg:text-base mb-2">
                    <i class="fas fa-book mr-1"></i>Skor Tes RMIB
                </p>
                <div class="text-4xl lg:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 mb-2">
                    {{ test_score }}
                </div>
                <p class="text-xs lg:text-sm text-gray-600">dari maksimal 720 poin</p>
            </div>
        </div>

        <!-- Achievement Score -->
        <div class="result-card p-6 lg:p-8 animate-slideInLeft delay-100">
            <div class="text-center">
                <div class="inline-block w-16 h-16 lg:w-20 lg:h-20 bg-gradient-to-br from-yellow-500 to-orange-600 rounded-full flex items-center justify-center text-white mb-4 shadow-lg">
                    <i class="fas fa-trophy text-2xl lg:text-3xl"></i>
                </div>
                <p class="text-gray-600 text-sm lg:text-base mb-2">
                    <i class="fas fa-star mr-1"></i>Skor Prestasi
                </p>
                <div class="text-4xl lg:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-600 to-orange-600 mb-2">
                    {{ achievement_score }}
                </div>
                <p class="text-xs lg:text-sm text-gray-600">dari {{ achievements|length }} prestasi</p>
            </div>
        </div>

        <!-- Combined Score -->
        <div class="result-card p-6 lg:p-8 animate-slideInLeft delay-200">
            <div class="text-center">
                <div class="inline-block w-16 h-16 lg:w-20 lg:h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center text-white mb-4 shadow-lg">
                    <i class="fas fa-check-double text-2xl lg:text-3xl"></i>
                </div>
                <p class="text-gray-600 text-sm lg:text-base mb-2">
                    <i class="fas fa-sum mr-1"></i>Total Skor
                </p>
                <div class="text-4xl lg:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-emerald-600 mb-2">
                    {{ combined_score }}
                </div>
                <p class="text-xs lg:text-sm text-gray-600">Tes + Prestasi</p>
            </div>
        </div>
    </div>

    <!-- TOP 3 INTERESTS - DENGAN RANKING JELAS -->
    <div class="result-card p-6 lg:p-8 mb-8 animate-slideInLeft delay-300">
        <h2 class="text-xl lg:text-3xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-medal text-yellow-500 mr-3"></i>
            Top 3 Minat Dominan Anda
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            {% for interest in categories|dictsort:"rank"|slice:":3" %}
            <div class="relative group animate-scaleIn delay-{{ forloop.counter }}00">
                <div class="bg-gradient-to-br from-white to-gray-50 border-2 
                    {% if interest.rank == 1 %}border-yellow-400{% elif interest.rank == 2 %}border-gray-400{% else %}border-orange-400{% endif %} 
                    rounded-xl p-6 text-center transform transition-all duration-300 group-hover:scale-105 group-hover:shadow-2xl">
                    
                    <!-- Rank Badge -->
                    <div class="flex justify-center mb-4">
                        <div class="rank-badge rank-{{ interest.rank }}">
                            {{ interest.rank }}
                        </div>
                    </div>

                    <!-- Category Name -->
                    <h3 class="text-base lg:text-lg font-bold text-gray-900 mb-3">{{ interest.category_name }}</h3>

                    <!-- Ranking Info -->
                    <div class="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg p-3 mb-4 border border-yellow-200">
                        <p class="text-xs text-gray-600 mb-1">Ranking</p>
                        <p class="text-2xl font-bold text-yellow-600">#{{ interest.rank }}</p>
                    </div>

                    <!-- Level Info -->
                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-3 mb-4 border border-blue-200">
                        <p class="text-xs text-gray-600 mb-1">Level Tes</p>
                        <p class="text-2xl font-bold text-indigo-600">{{ interest.level }}<span class="text-sm text-gray-500">/12</span></p>
                    </div>

                    <!-- Score Display -->
                    <div class="text-center mb-4">
                        <p class="text-sm text-gray-600 mb-1">Skor Kategori</p>
                        <p class="text-2xl lg:text-3xl font-bold text-green-600">{{ interest.score }}</p>
                    </div>

                    <!-- Progress Bar -->
                    <div class="score-bar">
                        <div class="score-bar-fill" style="width: {% widthratio interest.score 60 100 %}%;"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">{% widthratio interest.score 60 100 %}% dari maksimal</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- ALL CATEGORIES RANKING - ASCENDING ORDER -->
    <div class="result-card p-6 lg:p-8 mb-8 animate-slideInLeft delay-400">
        <h2 class="text-xl lg:text-3xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-list-ol text-blue-600 mr-3"></i>
            Peringkat Lengkap Semua Kategori
        </h2>

        <div class="space-y-3">
            {% for cat in categories|dictsort:"rank" %}
            <div class="category-item {% if cat.rank == 1 %}rank-1{% endif %}">
                <!-- Rank Number -->
                <div class="text-xl lg:text-2xl font-bold 
                    {% if cat.rank == 1 %}text-yellow-600{% elif cat.rank == 2 %}text-gray-600{% elif cat.rank == 3 %}text-orange-600{% else %}text-indigo-600{% endif %} 
                    w-10 text-center flex-shrink-0">
                    #{{ cat.rank }}
                </div>

                <!-- Icon Circle -->
                <div class="icon-circle flex-shrink-0" style="background: linear-gradient(135deg, {% if cat.rank == 1 %}#fbbf24, #f59e0b{% elif cat.rank == 2 %}#94a3b8, #64748b{% elif cat.rank == 3 %}#fb923c, #f97316{% else %}#3b82f6, #8b5cf6{% endif %});">
                    <i class="fas {{ cat.icon }} text-white"></i>
                </div>

                <!-- Category Info -->
                <div class="flex-1 min-w-0">
                    <h4 class="font-bold text-gray-900 text-sm lg:text-base">{{ cat.category_name }}</h4>
                    <p class="text-xs lg:text-sm text-gray-600">
                        <span class="font-semibold">Ranking #{{ cat.rank }}</span> • Level {{ cat.level }}/12
                    </p>
                </div>

                <!-- Score -->
                <div class="text-right flex-shrink-0">
                    <p class="text-xl lg:text-2xl font-bold text-green-600">{{ cat.score }}</p>
                    <p class="text-xs text-gray-500">poin</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- ACHIEVEMENTS SECTION -->
    {% if achievements %}
    <div class="result-card p-6 lg:p-8 mb-8 animate-slideInLeft delay-500">
        <h2 class="text-xl lg:text-3xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-award text-yellow-500 mr-3"></i>
            Prestasi Siswa ({{ achievements|length }} total)
        </h2>

        {% if achievement_contributions %}
        <div class="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg p-4 lg:p-6 mb-6 border-2 border-yellow-200">
            <h3 class="font-bold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-chart-pie mr-2 text-yellow-600"></i>
                Kontribusi Prestasi ke Kategori RMIB
            </h3>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {% for category, points in achievement_contributions.items %}
                <div class="bg-white rounded-lg p-4 text-center border border-yellow-200">
                    <p class="text-xs text-gray-600 mb-1">{{ category|upper }}</p>
                    <p class="text-2xl font-bold text-yellow-600">+{{ points }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <div class="space-y-4">
            {% for achievement in achievements %}
            <div class="achievement-card">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <h4 class="font-bold text-gray-900 text-sm lg:text-base">{{ achievement.achievement_type.name }}</h4>
                            {% if achievement.is_verified %}
                            <span class="achievement-badge">
                                <i class="fas fa-check-circle mr-1"></i>Terverifikasi
                            </span>
                            {% else %}
                            <span class="achievement-badge" style="background: #e5e7eb; color: #374151;">
                                <i class="fas fa-clock mr-1"></i>Pending
                            </span>
                            {% endif %}
                        </div>
                        <p class="text-xs lg:text-sm text-gray-600 mb-2">
                            <i class="fas fa-layer-group mr-1 text-blue-600"></i>
                            {{ achievement.get_level_display }} - {{ achievement.get_rank_display }} ({{ achievement.year }})
                        </p>
                        {% if achievement.notes %}
                        <p class="text-xs text-gray-600 italic">{{ achievement.notes }}</p>
                        {% endif %}
                    </div>
                    <div class="text-right flex-shrink-0">
                        <p class="text-2xl lg:text-3xl font-bold text-yellow-600">+{{ achievement.points }}</p>
                        <p class="text-xs text-gray-500">poin</p>
                    </div>
                </div>
                
                {% if achievement.rmib_contributions %}
                <div class="mt-3 pt-3 border-t border-gray-200">
                    <p class="text-xs font-bold text-gray-700 mb-2">Kontribusi RMIB:</p>
                    <div class="flex flex-wrap gap-2">
                        {% for cat, pts in achievement.rmib_contributions.items %}
                        <span class="score-tab achievement text-xs">
                            {{ cat|upper }}: +{{ pts }}
                        </span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- COMBINED SCORES BREAKDOWN -->
    {% if combined_scores %}
    <div class="result-card p-6 lg:p-8 mb-8 animate-slideInLeft delay-500">
        <h2 class="text-xl lg:text-3xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-chart-bar text-blue-600 mr-3"></i>
            Analisis Skor Gabungan per Kategori
        </h2>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {% for category, scores in combined_scores.items %}
            <div class="bg-white border-2 border-gray-200 rounded-lg p-4 lg:p-6 hover:border-blue-400 hover:shadow-lg transition-all">
                <div class="flex justify-between items-start mb-3">
                    <h4 class="font-bold text-gray-900 capitalize text-sm lg:text-base">{{ category|title }}</h4>
                    <p class="text-2xl font-bold text-green-600">{{ scores.total_score }}</p>
                </div>
                
                <div class="space-y-2 mb-3">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">
                            <i class="fas fa-book mr-1 text-blue-600"></i>Skor Tes
                        </span>
                        <span class="font-bold text-blue-600">{{ scores.test_score }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">
                            <i class="fas fa-trophy mr-1 text-yellow-600"></i>Skor Prestasi
                        </span>
                        <span class="font-bold text-yellow-600">+{{ scores.achievement_score }}</span>
                    </div>
                </div>
                
                <div class="score-bar">
                    <div class="score-bar-fill" style="background: linear-gradient(90deg, #3b82f6 0%, #fbbf24 100%); width: {% widthratio scores.total_score 1 5 %}%;"></div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- ANALYSIS SECTION -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Primary Interest Analysis -->
        <div class="result-card p-6 lg:p-8 animate-slideInLeft delay-500">
            <h3 class="text-lg lg:text-xl font-bold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-star text-yellow-500 mr-2"></i>
                Minat Utama Anda
            </h3>
            <div class="bg-gradient-to-br from-yellow-50 to-orange-50 rounded-lg p-6 border-2 border-yellow-200">
                <p class="text-sm lg:text-base text-gray-600 mb-2">Kategori Dominan:</p>
                <p class="text-2xl lg:text-3xl font-bold text-gray-900 mb-4">{{ primary_interest }}</p>
                
                <div class="space-y-3">
                    <div class="bg-white rounded-lg p-3 border border-yellow-200">
                        <p class="text-xs text-gray-600 mb-1">Ranking Tertinggi</p>
                        <p class="text-2xl font-bold text-yellow-600">#1</p>
                    </div>
                    
                    <div class="bg-white rounded-lg p-3 border border-blue-200">
                        <p class="text-xs text-gray-600 mb-1">Level Tes</p>
                        <p class="text-2xl font-bold text-indigo-600">{{ primary_level }}<span class="text-sm text-gray-500">/12</span></p>
                    </div>
                    
                    <div class="bg-white rounded-lg p-3 border border-green-200">
                        <p class="text-xs text-gray-600 mb-1">Skor Tes</p>
                        <p class="text-2xl font-bold text-green-600">{% widthratio primary_level 1 5 %}</p>
                    </div>
                </div>

                <p class="text-xs text-gray-600 mt-4 p-3 bg-white rounded-lg border border-blue-200">
                    <i class="fas fa-info-circle mr-1 text-blue-600"></i>
                    Ini adalah kategori dengan tingkat kesesuaian tertinggi terhadap minat dan bakat Anda berdasarkan hasil tes RMIB
                </p>
            </div>
        </div>

        <!-- Score Distribution -->
        <div class="result-card p-6 lg:p-8 animate-slideInLeft delay-500">
            <h3 class="text-lg lg:text-xl font-bold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-chart-line text-blue-600 mr-2"></i>
                Statistik Skor Total
            </h3>
            <div class="space-y-4">
                <div class="bg-blue-50 border-2 border-blue-200 rounded-lg p-4">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm lg:text-base text-gray-700 font-semibold flex items-center">
                            <i class="fas fa-book mr-2 text-blue-600"></i>Skor Tes RMIB
                        </span>
                        <span class="text-xl lg:text-2xl font-bold text-blue-600">{{ test_score }}</span>
                    </div>
                    <div class="text-xs text-gray-600">Hasil jawaban tes minat dari semua kategori</div>
                </div>

                <div class="bg-yellow-50 border-2 border-yellow-200 rounded-lg p-4">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm lg:text-base text-gray-700 font-semibold flex items-center">
                            <i class="fas fa-trophy mr-2 text-yellow-600"></i>Skor Prestasi
                        </span>
                        <span class="text-xl lg:text-2xl font-bold text-yellow-600">+{{ achievement_score }}</span>
                    </div>
                    <div class="text-xs text-gray-600">Dari {{ achievements|length }} prestasi terverifikasi</div>
                </div>

                <div class="bg-green-50 border-2 border-green-200 rounded-lg p-4">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm lg:text-base text-gray-700 font-semibold flex items-center">
                            <i class="fas fa-check-double mr-2 text-green-600"></i>Total Skor Akhir
                        </span>
                        <span class="text-xl lg:text-2xl font-bold text-green-600">{{ combined_score }}</span>
                    </div>
                    <div class="text-xs text-gray-600">Skor tes + prestasi gabungan</div>
                </div>
            </div>
        </div>
    </div>

    <!-- INFO BOXES -->
    <div class="space-y-4 mb-8">
        <div class="info-box animate-slideInLeft delay-500">
            <div class="flex items-start space-x-3">
                <i class="fas fa-lightbulb text-blue-600 text-lg lg:text-xl mt-1 flex-shrink-0"></i>
                <div>
                    <p class="font-bold text-gray-900 text-sm lg:text-base">Tips Menggunakan Hasil Tes</p>
                    <p class="text-xs lg:text-sm text-gray-700 mt-1">
                        Hasil tes RMIB ini menunjukkan <strong>ranking minat</strong> (urutan 1-12) dan <strong>level kemampuan</strong> (1-12) untuk setiap bidang karir. 
                        Ranking #1 adalah minat utama Anda dengan skor tertinggi. Gunakan hasil ini sebagai panduan dalam memilih jurusan dan karir di masa depan. 
                        Diskusikan dengan guru BK atau orang tua untuk menggali lebih dalam.
                    </p>
                </div>
            </div>
        </div>

        <div class="info-box animate-slideInLeft delay-500">
            <div class="flex items-start space-x-3">
                <i class="fas fa-calendar-alt text-blue-600 text-lg lg:text-xl mt-1 flex-shrink-0"></i>
                <div>
                    <p class="font-bold text-gray-900 text-sm lg:text-base">Waktu Pengerjaan</p>
                    <p class="text-xs lg:text-sm text-gray-700 mt-1">
                        Tes diselesaikan pada: <strong>{{ rmib_result.submitted_at|date:"d F Y, H:i" }} WIB</strong>
                    </p>
                </div>
            </div>
        </div>

        {% if rmib_result.status == 'edited' %}
        <div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-4">
            <p class="text-sm text-blue-700 flex items-center">
                <i class="fas fa-info-circle mr-2"></i>
                <strong>Hasil Ter-edit:</strong> Terakhir diperbarui pada {{ rmib_result.edited_at|date:"d F Y, H:i" }} WIB
            </p>
        </div>
        {% endif %}
    </div>

    <!-- ACTION BUTTONS -->
    <div class="flex flex-wrap justify-center gap-3 lg:gap-4 no-print mb-8">
        <a href="{% url 'students:rmib_edit_confirmation' student.pk %}" 
           class="inline-flex items-center px-6 lg:px-8 py-2.5 lg:py-3 bg-gradient-to-r from-yellow-500 to-amber-600 hover:from-yellow-600 hover:to-amber-700 text-white text-sm lg:text-base font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300">
            <i class="fas fa-edit mr-2"></i>
            Edit Hasil
        </a>
        
        <button onclick="window.print()" 
                class="inline-flex items-center px-6 lg:px-8 py-2.5 lg:py-3 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white text-sm lg:text-base font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300">
            <i class="fas fa-print mr-2"></i>
            Cetak Hasil
        </button>
        
        <a href="{% url 'students:detail' student.pk %}" 
           class="inline-flex items-center px-6 lg:px-8 py-2.5 lg:py-3 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white text-sm lg:text-base font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300">
            <i class="fas fa-user mr-2"></i>
            Profil Siswa
        </a>
        
        <a href="{% url 'students:list' %}" 
           class="inline-flex items-center px-6 lg:px-8 py-2.5 lg:py-3 bg-gray-600 hover:bg-gray-700 text-white text-sm lg:text-base font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300">
            <i class="fas fa-list mr-2"></i>
            Daftar Siswa
        </a>
    </div>

    <!-- FOOTER -->
    <div class="bg-gradient-to-r from-indigo-50 to-purple-50 border-2 border-indigo-200 rounded-xl p-6 text-center">
        <p class="text-gray-700 text-xs lg:text-sm">
            <i class="fas fa-shield-alt text-indigo-600 mr-2"></i>
            Data hasil tes ini bersifat privat dan hanya dapat diakses oleh pemilik akun dan admin sistem
        </p>
        <p class="text-xs text-gray-500 mt-3">
            © 2025 Sistem Penilaian Minat RMIB - MTs Muhammadiyah 1 Samarinda
        </p>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
    console.log('✅ RMIB Result Page Loaded');
    console.log('📊 Test Score:', {{ test_score }});
    console.log('🏆 Achievement Score:', {{ achievement_score }});
    console.log('📈 Combined Score:', {{ combined_score }});
    console.log('👤 Student:', '{{ student.name|escapejs }}');
    console.log('📝 Primary Interest:', '{{ primary_interest|escapejs }}');
    console.log('🎯 Primary Ranking:', 1);
    
    window.scrollTo({ top: 0, behavior: 'smooth' });
</script>
{% endblock %}