<c-layouts.app title="Temario: {{ course.title }} | Studio Lo Justo">
    <div class="bg-zinc-100 min-h-screen pb-20">
        <!-- BARRA SUPERIOR DEL DASHBOARD SAAS -->
        <div class="bg-white border-b border-zinc-200/80 px-4 sm:px-6 lg:px-8 py-5 shadow-sm">
            <div class="max-w-7xl mx-auto flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-zinc-400 mb-1">
                        <span>Gestión Docente</span>
                        <span>/</span>
                        <span class="text-emerald-700 font-black">Temario Académico</span>
                    </div>
                    <h1 class="text-2xl font-black text-zinc-900 flex items-center gap-2.5">
                        <c-lbi.rmx.file-list w="1.5rem" h="1.5rem" class="text-emerald-600" />
                        <span>Estructura: {{ course.title }}</span>
                    </h1>
                </div>

                <div class="flex items-center gap-3">
                    <a href="{% url 'studio:studio_course_edit' course.slug %}" class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold text-xs uppercase tracking-wider shadow-sm transition-all flex items-center gap-1.5">
                        <c-lbi.rmx.settings-3 w="1rem" h="1rem" />
                        <span>Configuración del Curso</span>
                    </a>
                    <a href="{% url 'studio:studio_courses' %}" class="px-4 py-2.5 bg-zinc-800 hover:bg-zinc-900 text-white rounded-xl font-bold text-xs uppercase tracking-wider shadow-sm transition-all flex items-center gap-1.5">
                        <c-lbi.rmx.arrow-left w="1rem" h="1rem" />
                        <span>Volver a Cursos</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10">
            {% if messages %}
                <div class="mb-6 space-y-2">
                    {% for message in messages %}
                        <div class="p-4 rounded-xl text-xs font-bold {% if message.tags == 'error' %}bg-red-50 text-red-700 border border-red-200{% else %}bg-emerald-50 text-emerald-800 border border-emerald-200{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Formulario Agregar Módulo (1 span) -->
                <div class="lg:col-span-1 space-y-6">
                    <div class="bg-white rounded-3xl border border-zinc-200/80 shadow-xl p-6 sm:p-8 sticky top-28">
                        <h2 class="text-lg font-black text-zinc-900 mb-2">+ Nuevo Módulo Metrológico</h2>
                        <p class="text-xs text-zinc-500 font-medium mb-6">Crea un bloque temático o unidad académica en este programa.</p>

                        <form method="post" action="{% url 'studio:studio_course_curriculum' course.slug %}" class="space-y-4">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="add_module">
                            <div>
                                <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Título del Módulo</label>
                                <input type="text" name="module_title" required
                                       class="w-full px-4 py-2.5 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                       placeholder="Ej: Módulo 1: Verificación Ambiental y OIML">
                            </div>
                            <button type="submit"
                                    class="w-full py-3 px-6 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 text-white font-black rounded-xl shadow-lg shadow-emerald-600/20 uppercase tracking-wider text-xs transition-all">
                                Agregar Módulo →
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Lista de Módulos y Lecciones (2 spans) -->
                <div class="lg:col-span-2 space-y-6">
                    {% for mod in modules %}
                        <div class="bg-white rounded-3xl border border-zinc-200/80 shadow-xl overflow-hidden">
                            <!-- Cabecera del módulo -->
                            <div class="bg-zinc-900 text-white p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-zinc-800">
                                <div>
                                    <span class="text-[10px] font-black uppercase tracking-widest text-amber-400">Módulo #{{ mod.order }}</span>
                                    <h3 class="text-lg font-black text-white mt-0.5">{{ mod.title }}</h3>
                                </div>
                                <form method="post" action="{% url 'studio:studio_course_curriculum' course.slug %}" onsubmit="return confirm('¿Eliminar este módulo y todas sus lecciones?');">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="delete_module">
                                    <input type="hidden" name="module_id" value="{{ mod.id }}">
                                    <button type="submit" class="px-3 py-1.5 bg-red-500/10 hover:bg-red-500/20 text-red-600 rounded-lg text-xs font-bold transition-colors flex items-center gap-1.5">
                                        <c-lbi.rmx.delete-bin w="0.9rem" h="0.9rem" />
                                        <span>Eliminar Módulo</span>
                                    </button>
                                </form>
                            </div>

                            <!-- Lista de Lecciones de este módulo -->
                            <div class="p-6 space-y-4">
                                <h4 class="text-xs font-black uppercase tracking-wider text-zinc-400">Lecciones Asignadas ({{ mod.lessons.count }})</h4>
                                
                                <div class="space-y-3">
                                    {% for lesson in mod.lessons.all %}
                                        <div class="p-4 rounded-xl bg-zinc-50 border border-zinc-200/70 flex items-center justify-between gap-4 hover:border-emerald-500 transition-colors">
                                            <div class="flex items-center space-x-3">
                                                <div class="w-8 h-8 rounded-lg bg-emerald-100 text-emerald-800 font-black flex items-center justify-center text-xs shrink-0">
                                                    {{ lesson.order }}
                                                </div>
                                                <div>
                                                    <h5 class="font-bold text-sm text-zinc-900">{{ lesson.title }}</h5>
                                                    <p class="text-[11px] text-zinc-500 font-medium truncate max-w-md flex items-center gap-1.5 mt-0.5">
                                                        {% if lesson.video_url %}
                                                            <c-lbi.rmx.play-circle w="0.9rem" h="0.9rem" class="text-emerald-600 shrink-0" />
                                                            <span>{{ lesson.video_url }}</span>
                                                        {% else %}
                                                            <c-lbi.rmx.file-list w="0.9rem" h="0.9rem" class="text-zinc-400 shrink-0" />
                                                            <span>Material de lectura / Evaluación</span>
                                                        {% endif %}
                                                    </p>
                                                </div>
                                            </div>

                                            <form method="post" action="{% url 'studio:studio_course_curriculum' course.slug %}" onsubmit="return confirm('¿Eliminar esta lección?');">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="delete_lesson">
                                                <input type="hidden" name="lesson_id" value="{{ lesson.id }}">
                                                <button type="submit" class="text-zinc-400 hover:text-red-600 font-bold text-xs p-1 flex items-center justify-center">
                                                    <c-lbi.rmx.close w="1rem" h="1rem" />
                                                </button>
                                            </form>
                                        </div>
                                    {% empty %}
                                        <p class="text-center py-4 text-xs text-zinc-400 font-medium">No hay lecciones en este módulo aún.</p>
                                    {% endfor %}
                                </div>

                                <!-- Formulario para agregar lección a este módulo -->
                                <div class="mt-6 pt-6 border-t border-zinc-100">
                                    <h5 class="text-xs font-black text-emerald-800 uppercase tracking-wider mb-3">+ Agregar Lección a {{ mod.title }}</h5>
                                    <form method="post" action="{% url 'studio:studio_course_curriculum' course.slug %}" class="space-y-3">
                                        {% csrf_token %}
                                        <input type="hidden" name="action" value="add_lesson">
                                        <input type="hidden" name="module_id" value="{{ mod.id }}">

                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                            <input type="text" name="lesson_title" required placeholder="Título de la lección..."
                                                   class="w-full px-3 py-2 bg-white border border-zinc-300 rounded-lg text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                            <input type="url" name="video_url" placeholder="Video URL (Ej: https://youtube.com/...)"
                                                   class="w-full px-3 py-2 bg-white border border-zinc-300 rounded-lg text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                        </div>
                                        <textarea name="content" rows="2" placeholder="Contenido o apuntes teóricos de la lección (Markdown)..."
                                                  class="w-full px-3 py-2 bg-white border border-zinc-300 rounded-lg text-xs font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500"></textarea>
                                        <button type="submit" class="px-4 py-2 bg-zinc-900 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs uppercase tracking-wider transition-colors">
                                            + Guardar Lección
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <div class="bg-white rounded-3xl border border-zinc-200/80 p-12 text-center">
                            <h3 class="text-base font-black text-zinc-900">Aún no existen módulos en este curso</h3>
                            <p class="text-xs text-zinc-500 mt-1">Utiliza el panel izquierdo para crear el primer módulo o bloque temático.</p>
                        </div>
                    {% endfor %}

                    <!-- SECCIÓN DE EXAMEN Y PREGUNTAS DE CERTIFICACIÓN -->
                    <div class="bg-white rounded-3xl border border-zinc-200/80 shadow-xl overflow-hidden mt-8">
                        <div class="bg-gradient-to-r from-emerald-900 via-emerald-800 to-zinc-900 text-white p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                            <div>
                                <span class="text-[10px] font-black uppercase tracking-widest text-amber-400">Examen Final de Certificación</span>
                                <h3 class="text-lg font-black text-white mt-0.5">{{ evaluation.title }}</h3>
                            </div>
                            <span class="px-3 py-1 bg-white/10 backdrop-blur-md rounded-xl text-xs font-bold text-emerald-300 border border-white/10">
                                Mínimo para Aprobar: {{ evaluation.passing_score }}%
                            </span>
                        </div>

                        <div class="p-6 space-y-6">
                            <!-- Ajustar Título y Puntaje -->
                            <form method="post" action="{% url 'studio:studio_course_curriculum' course.slug %}" class="grid grid-cols-1 sm:grid-cols-3 gap-3 p-4 bg-zinc-50 rounded-2xl border border-zinc-200">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="save_evaluation_meta">
                                <div class="sm:col-span-2">
                                    <label class="block text-[11px] font-bold text-zinc-600 uppercase mb-1">Título del Examen</label>
                                    <input type="text" name="eval_title" value="{{ evaluation.title }}" required class="w-full px-3 py-2 bg-white border border-zinc-300 rounded-xl text-xs font-bold focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                </div>
                                <div>
                                    <label class="block text-[11px] font-bold text-zinc-600 uppercase mb-1">Puntaje Mínimo (%)</label>
                                    <div class="flex gap-2">
                                        <input type="number" name="passing_score" min="50" max="100" value="{{ evaluation.passing_score }}" required class="w-full px-3 py-2 bg-white border border-zinc-300 rounded-xl text-xs font-bold focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                        <button type="submit" class="px-3 py-2 bg-zinc-900 hover:bg-zinc-800 text-white rounded-xl text-xs font-bold uppercase shrink-0">
                                            Guardar
                                        </button>
                                    </div>
                                </div>
                            </form>

                            <!-- Lista de Preguntas Registradas -->
                            <div class="space-y-4">
                                <h4 class="text-xs font-black uppercase tracking-wider text-zinc-500">Preguntas del Examen ({{ evaluation.questions|length }})</h4>
                                
                                {% for q in evaluation.questions %}
                                    <div class="p-4 rounded-2xl bg-zinc-50 border border-zinc-200 space-y-3">
                                        <div class="flex items-start justify-between gap-4">
                                            <div class="flex items-start gap-2.5">
                                                <span class="w-6 h-6 rounded-lg bg-emerald-600 text-white font-black text-xs flex items-center justify-center shrink-0">
                                                    {{ forloop.counter }}
                                                </span>
                                                <h5 class="font-bold text-sm text-zinc-900 leading-snug">{{ q.text }}</h5>
                                            </div>
                                            <form method="post" action="{% url 'studio:studio_course_curriculum' course.slug %}" onsubmit="return confirm('¿Eliminar esta pregunta?');">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="delete_question">
                                                <input type="hidden" name="question_id" value="{{ q.id }}">
                                                <button type="submit" class="text-zinc-400 hover:text-red-600 font-bold text-xs p-1">
                                                    <c-lbi.rmx.delete-bin w="1rem" h="1rem" />
                                                </button>
                                            </form>
                                        </div>

                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 pt-1 pl-8">
                                            {% for opt in q.options %}
                                                <div class="p-2.5 rounded-xl text-xs flex items-center gap-2 {% if forloop.counter0 == q.correct %}bg-emerald-100 text-emerald-900 font-bold border border-emerald-300{% else %}bg-white text-zinc-600 border border-zinc-200{% endif %}">
                                                    <span class="w-4 h-4 rounded-full flex items-center justify-center text-[10px] {% if forloop.counter0 == q.correct %}bg-emerald-600 text-white font-black{% else %}bg-zinc-200 text-zinc-600{% endif %}">
                                                        {% if forloop.counter0 == q.correct %}✓{% else %}{{ forloop.counter }}{% endif %}
                                                    </span>
                                                    <span class="truncate">{{ opt }}</span>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% empty %}
                                    <p class="text-xs text-zinc-400 py-3 text-center">Este examen aún no tiene preguntas. Agrega la primera abajo.</p>
                                {% endfor %}
                            </div>

                            <!-- Formulario Agregar Nueva Pregunta -->
                            <div class="mt-6 pt-6 border-t border-zinc-100">
                                <h4 class="text-xs font-black uppercase tracking-wider text-emerald-800 mb-3">+ Agregar Nueva Pregunta de Opción Múltiple</h4>
                                <form method="post" action="{% url 'studio:studio_course_curriculum' course.slug %}" class="space-y-4">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="add_question">

                                    <div>
                                        <label class="block text-[11px] font-bold text-zinc-600 uppercase mb-1">Enunciado de la Pregunta</label>
                                        <input type="text" name="question_text" required placeholder="Ej: ¿Qué documento avala la trazabilidad metrológica de un patrón?" class="w-full px-4 py-2.5 bg-zinc-50 border border-zinc-300 rounded-xl text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                    </div>

                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-[11px] font-bold text-zinc-600 uppercase mb-1">Opción A (Índice 0)</label>
                                            <input type="text" name="option_a" required placeholder="Respuesta A..." class="w-full px-3 py-2 bg-zinc-50 border border-zinc-300 rounded-xl text-xs font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                        </div>
                                        <div>
                                            <label class="block text-[11px] font-bold text-zinc-600 uppercase mb-1">Opción B (Índice 1)</label>
                                            <input type="text" name="option_b" required placeholder="Respuesta B..." class="w-full px-3 py-2 bg-zinc-50 border border-zinc-300 rounded-xl text-xs font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                        </div>
                                        <div>
                                            <label class="block text-[11px] font-bold text-zinc-600 uppercase mb-1">Opción C (Índice 2 - Opcional)</label>
                                            <input type="text" name="option_c" placeholder="Respuesta C..." class="w-full px-3 py-2 bg-zinc-50 border border-zinc-300 rounded-xl text-xs font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                        </div>
                                        <div>
                                            <label class="block text-[11px] font-bold text-zinc-600 uppercase mb-1">Opción D (Índice 3 - Opcional)</label>
                                            <input type="text" name="option_d" placeholder="Respuesta D..." class="w-full px-3 py-2 bg-zinc-50 border border-zinc-300 rounded-xl text-xs font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                        </div>
                                    </div>

                                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-2">
                                        <div class="flex items-center gap-3">
                                            <label class="text-xs font-bold text-zinc-700 uppercase">Respuesta Correcta:</label>
                                            <select name="correct_option" class="px-3 py-1.5 bg-white border border-zinc-300 rounded-xl text-xs font-bold text-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                                <option value="0">Opción A es la Correcta</option>
                                                <option value="1">Opción B es la Correcta</option>
                                                <option value="2">Opción C es la Correcta</option>
                                                <option value="3">Opción D es la Correcta</option>
                                            </select>
                                        </div>

                                        <button type="submit" class="py-2.5 px-6 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl text-xs uppercase tracking-wider transition-colors shadow-md">
                                            + Agregar Pregunta al Examen
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</c-layouts.app>
