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

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

{% block extra_css %}
<style>
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
</style>
{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    
    <!-- Header -->
    <div class="bg-gradient-to-r from-yellow-500 to-orange-600 rounded-2xl shadow-2xl p-8 mb-8 text-white text-center animate-fadeInUp">
        <i class="fas fa-edit text-5xl mb-4"></i>
        <h1 class="text-4xl font-bold mb-2">Edit Hasil Tes RMIB</h1>
        <p class="text-xl">{{ student.name }} ({{ student.nisn }})</p>
    </div>
    
    <!-- Warning Alert -->
    <div class="bg-red-50 border-l-4 border-red-500 rounded-lg p-6 mb-8 animate-fadeInUp delay-100">
        <div class="flex">
            <div class="text-red-600 text-2xl mr-4">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div>
                <h3 class="font-bold text-red-900 text-lg mb-2">⚠️ Perhatian</h3>
                <p class="text-red-800">Anda akan mengedit hasil tes RMIB yang sudah diselesaikan. Hasil tes sebelumnya akan digantikan dengan hasil baru. Pastikan Anda ingin melanjutkan.</p>
            </div>
        </div>
    </div>
    
    <!-- Current Results -->
    <div class="bg-white rounded-lg shadow-lg p-6 mb-8 animate-fadeInUp delay-200">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">
            <i class="fas fa-chart-bar text-blue-600 mr-2"></i>Hasil Saat Ini
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="bg-blue-50 rounded-lg p-4">
                <p class="text-sm text-gray-600 mb-1">Total Skor</p>
                <p class="text-3xl font-bold text-blue-600">{{ rmib_result.total_score }}</p>
            </div>
            <div class="bg-yellow-50 rounded-lg p-4">
                <p class="text-sm text-gray-600 mb-1">Minat Utama</p>
                <p class="text-2xl font-bold text-yellow-600">{{ rmib_result.primary_interest|default:"N/A" }}</p>
            </div>
            <div class="bg-green-50 rounded-lg p-4">
                <p class="text-sm text-gray-600 mb-1">Tanggal Submit</p>
                <p class="text-lg font-bold text-green-600">{{ rmib_result.submitted_at|date:"d/m/Y" }}</p>
            </div>
        </div>
    </div>
    
    <!-- Action Buttons -->
    <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
        <div class="flex flex-col sm:flex-row gap-4">
            <!-- Start Edit Button -->
            <button onclick="startEditing()" 
                    class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300">
                <i class="fas fa-pencil-alt mr-2"></i>
                Lanjutkan Edit Tes
            </button>
            
            <!-- Cancel Button -->
            <a href="{% url 'students:rmib_result' student.pk %}" 
               class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300">
                <i class="fas fa-times mr-2"></i>
                Batal
            </a>
        </div>
    </div>
    
    <!-- Info Box -->
    <div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-6">
        <p class="text-sm text-blue-800">
            <i class="fas fa-info-circle mr-2"></i>
            <strong>Info:</strong> Setelah Anda menyelesaikan edit, hasil tes sebelumnya akan sepenuhnya digantikan dengan data baru. Pastikan semua ranking sudah benar sebelum menyimpan.
        </p>
    </div>

</div>

<!-- Hidden CSRF Token Form untuk JavaScript -->
<form id="csrfForm" style="display:none;">
    {% csrf_token %}
</form>

<script>
function getCsrfToken() {
    return document.querySelector('#csrfForm [name=csrfmiddlewaretoken]')?.value || '';
}

function startEditing() {
    console.log('🔄 Restarting RMIB test for editing...');
    
    const studentId = {{ student.pk }};
    const csrfToken = getCsrfToken();
    
    console.log('CSRF Token:', csrfToken ? 'Found' : 'Not found');
    
    if (!csrfToken) {
        alert('❌ CSRF Token tidak ditemukan. Refresh halaman dan coba lagi.');
        return;
    }
    
    fetch(`/students/${studentId}/rmib/restart/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        },
        body: JSON.stringify({})
    })
    .then(response => {
        console.log('Response status:', response.status);
        if (response.ok) {
            return response.json();
        } else {
            throw new Error(`HTTP Error: ${response.status}`);
        }
    })
    .then(data => {
        console.log('✅ Response:', data);
        window.location.href = `/students/${studentId}/rmib/test/`;
    })
    .catch(error => {
        console.error('❌ Fetch error:', error);
        alert('❌ Gagal memulai edit. Error: ' + error.message);
    });
}

console.log('✅ Edit Confirmation Page Ready');
</script>

{% endblock %}