{% load lb_tags %}

<c-layouts.app title="{{ course.title }} | Lo Justo E-Learning">
    <!-- HERO CURSO -->
    <div class="bg-white text-zinc-900 py-10 border-b border-zinc-200 shadow-sm relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 space-y-6">
            <!-- Navegación de migas de pan -->
            <div class="flex items-center space-x-2 text-xs font-bold uppercase tracking-wider text-emerald-700">
                <a href="{% url 'campus:portal_elearning' %}" class="hover:text-emerald-900 transition-colors flex items-center gap-1">
                    <c-lbi.rmx.arrow-left w="0.875rem" h="0.875rem" />
                    <span>Volver al Catálogo</span>
                </a>
                <span class="text-zinc-400">/</span>
                <span class="text-zinc-600">{{ course.category.title }}</span>
            </div>

            <div class="max-w-4xl space-y-4">
                <div class="flex items-center gap-3 flex-wrap">
                    <span class="px-3 py-1 rounded-md text-xs font-black uppercase tracking-widest bg-amber-400 text-zinc-950 shadow-md">
                        {{ course.iso_standard }}
                    </span>
                    <span class="text-xs font-bold text-zinc-500 uppercase tracking-wider">
                        Acreditado por Lo Justo Metrología
                    </span>
                </div>

                <h1 class="text-3xl sm:text-5xl font-black tracking-tight text-zinc-900 leading-tight">
                    {{ course.title }}
                </h1>

                <p class="text-base sm:text-lg text-zinc-600 font-medium leading-relaxed">
                    {{ course.short_description }}
                </p>
            </div>
        </div>
    </div>

    <!-- CONTENIDO PRINCIPAL Y ACCIONES -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            <!-- Columna Izquierda: Temario y Descripción -->
            <div class="lg:col-span-2 space-y-10">
                <!-- Descripción del Curso -->
                <div class="bg-white border border-zinc-200 rounded-2xl p-6 sm:p-8 shadow-lg space-y-6">
                    <h2 class="text-xl font-black text-zinc-900 border-b border-zinc-100 pb-4">
                        Acerca del Programa Metrológico
                    </h2>
                    <div class="prose max-w-none text-sm sm:text-base text-zinc-700 leading-relaxed space-y-4 font-sans">
                        {{ course.description|linebreaks }}
                    </div>
                </div>

                <!-- Temario / Módulos y Lecciones -->
                <div class="bg-white border border-zinc-200 rounded-2xl p-6 sm:p-8 shadow-lg space-y-6">
                    <div class="flex items-center justify-between border-b border-zinc-100 pb-4">
                        <h2 class="text-xl font-black text-zinc-900">
                            Temario Oficial y Estructura
                        </h2>
                        <span class="text-xs font-bold text-emerald-600 uppercase tracking-wider">
                            {{ course.get_total_lessons }} lecciones en total
                        </span>
                    </div>

                    <div class="space-y-4">
                        {% for module in course.modules.all %}
                        <div class="border border-zinc-200 rounded-xl overflow-hidden">
                            <!-- Cabezal del Módulo -->
                            <div class="bg-zinc-50 px-5 py-3.5 flex items-center justify-between border-b border-zinc-200">
                                <span class="font-black text-sm sm:text-base text-zinc-900 flex items-center space-x-2">
                                    <span class="w-6 h-6 rounded-full bg-emerald-600 text-white flex items-center justify-center text-xs font-bold">{{ module.order }}</span>
                                    <span>{{ module.title }}</span>
                                </span>
                                <span class="text-xs font-bold text-zinc-400">{{ module.lessons.count }} clases</span>
                            </div>

                            <!-- Lista de Lecciones -->
                            <div class="divide-y divide-zinc-100 bg-white">
                                {% for lesson in module.lessons.all %}
                                <div class="px-5 py-3 flex items-center justify-between text-sm hover:bg-zinc-50 transition-colors">
                                    <div class="flex items-center space-x-3 text-zinc-700">
                                        <c-lbi.rmx.play-circle w="1.125rem" h="1.125rem" class="text-emerald-600 shrink-0" />
                                        <span class="font-medium">{{ lesson.title }}</span>
                                    </div>
                                    {% if is_enrolled %}
                                    <a href="{% url 'campus:lesson_player' slug=course.slug lesson_slug=lesson.slug %}" class="text-xs font-bold text-emerald-600 hover:underline">
                                        Ir al aula →
                                    </a>
                                    {% else %}
                                    <span class="text-xs text-zinc-400 font-mono">🔒 Inscripción requerida</span>
                                    {% endif %}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Columna Derecha: Tarjeta Lateral de Matrícula / Acceso -->
            <div class="lg:col-span-1">
                <div class="sticky top-28 bg-white border-2 border-emerald-500/30 rounded-2xl p-6 sm:p-8 shadow-2xl space-y-6">
                    <div class="text-center space-y-2 border-b border-zinc-100 pb-6">
                        <span class="text-xs font-black uppercase tracking-widest text-emerald-600">Certificación Institucional</span>
                        <div class="text-2xl font-black text-zinc-900">Matrícula y Diploma</div>
                        
                        <div class="py-2">
                            {% if course.price > 0 %}
                                {% if course.discount_price %}
                                <div class="text-zinc-400 line-through text-sm font-bold">S/ {{ course.price }}</div>
                                <div class="text-3xl font-black text-amber-500">S/ {{ course.discount_price }}</div>
                                {% else %}
                                <div class="text-3xl font-black text-emerald-600">S/ {{ course.price }}</div>
                                {% endif %}
                            {% else %}
                                <div class="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-black uppercase tracking-wider bg-emerald-100 text-emerald-800 border border-emerald-300">
                                    Acceso Gratuito ($0)
                                </div>
                            {% endif %}
                        </div>

                        <p class="text-xs text-zinc-500">
                            Incluye material de apoyo técnico, evaluaciones automatizadas y diploma digital con QR verificable.
                        </p>
                    </div>

                    {% if user.is_authenticated %}
                        {% if is_enrolled %}
                            <div class="space-y-4">
                                <div class="bg-emerald-50 border border-emerald-500/30 rounded-xl p-4 text-center">
                                    <div class="text-xs font-bold text-emerald-800 uppercase tracking-wider">Tu estado actual:</div>
                                    <div class="text-lg font-black text-emerald-600 mt-1">✓ Matriculado en el curso</div>
                                </div>
                                <a href="{% url 'campus:resume_course' slug=course.slug %}" class="btn btn-block bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase tracking-wider rounded-xl shadow-lg border-0 h-12 flex items-center justify-center space-x-2">
                                    <c-lbi.rmx.play-circle w="1.25rem" h="1.25rem" />
                                    <span>Continuar en el Aula</span>
                                </a>
                            </div>
                        {% else %}
                            <form method="post" action="{% url 'campus:enroll_course' slug=course.slug %}">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-block bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase tracking-wider rounded-xl shadow-xl hover:shadow-emerald-600/30 border-0 h-14 flex items-center justify-center space-x-2 cursor-pointer w-full">
                                    <c-lbi.rmx.checkbox-circle w="1.25rem" h="1.25rem" />
                                    <span>Matricularme Ahora</span>
                                </button>
                            </form>
                            <p class="text-[11px] text-center text-zinc-500 mt-3 font-medium">
                                Inscripción directa e instantánea.
                            </p>
                        {% endif %}
                    {% else %}
                        <div class="space-y-4 text-center">
                            <a href="{% url 'users:register' %}?next={% url 'courses:course_detail' slug=course.slug %}" class="btn btn-block bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase tracking-wider rounded-xl shadow-xl hover:shadow-emerald-600/30 border-0 h-14 flex items-center justify-center space-x-2">
                                <span>Crear Cuenta y Matricularme</span>
                            </a>
                            <p class="text-xs font-medium text-zinc-500">
                                ¿Ya tienes cuenta? <a href="{% url 'users:login' %}?next={% url 'courses:course_detail' slug=course.slug %}" class="text-emerald-600 font-bold hover:underline">Inicia sesión</a>
                            </p>
                        </div>
                    {% endif %}

                    <!-- Características incluidas -->
                    <div class="space-y-3 pt-2 text-xs text-zinc-600">
                        <div class="flex items-center space-x-2">
                            <span class="text-emerald-500 font-bold">✓</span>
                            <span>Acceso 24/7 multiplataforma y móvil</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-emerald-500 font-bold">✓</span>
                            <span>Protocolos de calibración según OIML</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-emerald-500 font-bold">✓</span>
                            <span>Diploma descargable e infalsificable con QR</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</c-layouts.app>