{% load lb_tags %}

<c-layouts.base title="Evaluación: {{ evaluation.title }} | Lo Justo E-Learning">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-8" 
         x-data="{ 
             timeRemaining: 1800,
             formattedTime() {
                 let mins = Math.floor(this.timeRemaining / 60);
                 let secs = this.timeRemaining % 60;
                 return (mins < 10 ? '0' : '') + mins + ':' + (secs < 10 ? '0' : '') + secs;
             },
             initTimer() {
                 setInterval(() => {
                     if (this.timeRemaining > 0) {
                         this.timeRemaining--;
                     } else if (this.timeRemaining === 0) {
                         alert('¡El tiempo se ha agotado! Enviando evaluación...');
                         document.getElementById('quiz-form').submit();
                         this.timeRemaining = -1;
                     }
                 }, 1000);
             }
         }" x-init="initTimer()">

        <!-- ENCABEZADO Y CRONÓMETRO -->
        <div class="bg-gradient-to-r from-emerald-950 to-zinc-900 rounded-3xl p-8 text-white border border-emerald-800/60 shadow-2xl flex flex-col md:flex-row items-center justify-between gap-6 relative overflow-hidden">
            <div class="space-y-2 relative z-10">
                <span class="inline-flex items-center px-3 py-1 rounded-full bg-amber-400/10 border border-amber-400/30 text-amber-300 text-xs font-black uppercase tracking-widest">
                    📝 Acreditación Oficial ISO 17025 / Metrología
                </span>
                <h1 class="text-2xl sm:text-3xl font-black text-white">
                    {{ evaluation.title }}
                </h1>
                <p class="text-zinc-300 text-sm">
                    Curso: <strong class="text-white">{{ course.title }}</strong> · Puntaje mínimo de aprobación: <span class="text-amber-400 font-bold">{{ evaluation.passing_score }}%</span>
                </p>
            </div>

            <!-- CRONÓMETRO VISUAL -->
            <div class="bg-black/40 backdrop-blur-md px-6 py-4 rounded-2xl border border-white/15 flex flex-col items-center shrink-0">
                <span class="text-[11px] font-bold uppercase tracking-wider text-zinc-400 block">Tiempo Restante</span>
                <span class="text-3xl font-black font-mono tracking-wider text-amber-400" x-text="formattedTime()">30:00</span>
            </div>
        </div>

        <!-- FORMULARIO DE EVALUACIÓN -->
        <form id="quiz-form" method="POST" action="{% url 'campus:quiz_submit' slug=course.slug evaluation_id=evaluation.id %}" class="space-y-8">
            {% csrf_token %}

            {% if evaluation.questions %}
                {% for q in evaluation.questions %}
                <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 sm:p-8 shadow-lg space-y-6 transition-all duration-300 hover:border-emerald-500/50">
                    <div class="flex items-start justify-between gap-4 border-b border-zinc-100 dark:border-zinc-800 pb-4">
                        <div class="flex items-center space-x-3">
                            <span class="flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-black text-sm">
                                {{ forloop.counter }}
                            </span>
                            <h3 class="text-lg sm:text-xl font-bold text-zinc-900 dark:text-white leading-snug">
                                {{ q.text }}
                            </h3>
                        </div>
                    </div>

                    <!-- OPCIONES -->
                    <div class="grid grid-cols-1 gap-3 pt-2">
                        {% for option in q.options %}
                        <label class="relative flex items-center p-4 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-800/40 cursor-pointer transition-all duration-200 hover:bg-emerald-500/5 dark:hover:bg-emerald-500/10 hover:border-emerald-500/40 has-[:checked]:bg-emerald-500/10 dark:has-[:checked]:bg-emerald-500/20 has-[:checked]:border-emerald-500 has-[:checked]:shadow-md">
                            <input type="radio" name="question_{{ q.id|default:forloop.parentloop.counter }}" value="{{ forloop.counter0 }}" required class="w-5 h-5 text-emerald-600 border-zinc-300 focus:ring-emerald-500 mr-4" />
                            <span class="text-sm sm:text-base font-medium text-zinc-800 dark:text-zinc-200">
                                {{ option }}
                            </span>
                        </label>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}

                <!-- BOTÓN DE ENVÍO -->
                <div class="bg-gradient-to-b from-transparent to-zinc-900/40 p-6 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-4 border border-zinc-200/50 dark:border-zinc-800/80">
                    <div class="text-xs text-zinc-500 dark:text-zinc-400">
                        * Al enviar, se calculará tu nota y si apruebas se emitirá tu diploma oficial automáticamente.
                    </div>
                    <button type="submit" class="btn bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-400 text-white font-black uppercase text-sm tracking-wider rounded-xl px-10 py-4 shadow-xl hover:shadow-emerald-500/20 transition-all duration-300 w-full sm:w-auto">
                        📤 Enviar Evaluación y Calificar
                    </button>
                </div>
            {% else %}
                <div class="bg-white dark:bg-zinc-900 rounded-3xl p-12 text-center border border-zinc-200 dark:border-zinc-800">
                    <p class="text-zinc-500 dark:text-zinc-400">No hay preguntas disponibles para este cuestionario en este momento.</p>
                </div>
            {% endif %}
        </form>
    </div>
</c-layouts.base>