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

{% block title %}{{ course.name }} | آکادمی مهبد نتاج{% endblock %}

{% block content %}
<section class="detail-hero">
    <div class="detail-grid">
        <div class="detail-main">
            <div style="display: flex; gap: 0.75rem; margin-bottom: 1rem; align-items: center;">
                <span class="badge-gold">{{ course.category.name|default:"آموزش کسب‌وکار" }}</span>
                <span class="card-level-badge" style="position: static;">{{ course.level }}</span>
            </div>
            
            <h1>{{ course.name }}</h1>
            <p class="detail-tagline">{{ course.tagline }}</p>
            
            <div class="detail-instructor-box">
                <img src="{{ course.instructor.avatar_url|default:'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=200&q=80' }}" alt="{{ course.instructor.name }}" class="detail-instructor-avatar">
                <div>
                    <strong style="display: block; color: var(--text-main);">{{ course.instructor.name|default:"مهبد نتاج" }}</strong>
                    <span style="font-size: 0.85rem; color: var(--text-muted);">{{ course.instructor.title|default:"مدرس و مشاور کسب‌وکار" }}</span>
                </div>
            </div>
            
            <div class="card-meta" style="border-bottom: none; padding-bottom: 0; font-size: 0.95rem;">
                <div class="card-meta-item">
                    <i class="bi bi-clock" style="color: var(--gold-light);"></i> {{ course.duration }} محتوای ویدیویی
                </div>
                <div class="card-meta-item">
                    <i class="bi bi-star-fill" style="color: var(--gold-light);"></i> امتیاز {{ course.rating }}
                </div>
                <div class="card-meta-item">
                    <i class="bi bi-people" style="color: var(--gold-light);"></i> {{ course.enrolled_count }} دانشجو
                </div>
            </div>
        </div>

        <!-- Sticky Purchase / Access Sidebar -->
        <div>
            <div class="detail-sidebar-card">
                <div style="position: relative; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem;">
                    <img src="{{ course.get_cover }}" alt="{{ course.name }}" style="width: 100%; height: 200px; object-fit: cover;">
                    <div class="play-button-overlay" onclick="openTrailerModal('{{ course.demo_video_url|default:"https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" }}')">
                        <div class="play-icon-circle" style="width: 60px; height: 60px; font-size: 1.5rem;">
                            <i class="bi bi-play-fill"></i>
                        </div>
                    </div>
                </div>

                <div style="margin-bottom: 1.5rem;">
                    {% if course.is_free %}
                        <div class="price-free" style="font-size: 1.8rem;">رایگان</div>
                    {% else %}
                        {% if course.discount_price and course.discount_price < course.price %}
                            <div style="display: flex; align-items: baseline; gap: 0.75rem;">
                                <span class="price-current" style="font-size: 2.2rem;">{{ course.discount_price|toman }}</span>
                                <span class="price-original" style="font-size: 1.1rem;">{{ course.price|toman }}</span>
                                <span class="discount-badge">{{ course.discount_percent|fa_number }}٪ تخفیف</span>
                            </div>
                        {% else %}
                            <div class="price-current" style="font-size: 2.2rem;">{{ course.price|toman }}</div>
                        {% endif %}
                    {% endif %}
                </div>

                {% if is_enrolled %}
                    <a href="{% url 'courses:player' course.id %}" class="btn-emerald" style="width: 100%; justify-content: center; margin-bottom: 1rem;">
                        <i class="bi bi-play-fill"></i> ورود به کلاس ویدیویی
                    </a>
                    <div style="text-align: center; font-size: 0.85rem; color: var(--emerald-accent);">
                        <i class="bi bi-check-circle-fill"></i> این دوره برای شما فعال است.
                    </div>
                {% else %}
                    <a href="{% url 'courses:checkout' course.id %}" class="btn-gold" style="width: 100%; justify-content: center; margin-bottom: 1rem;">
                        <i class="bi bi-shield-lock-fill"></i> خرید دوره و دریافت دسترسی
                    </a>
                    <div style="display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--border-subtle); padding-top: 1rem;">
                        <div><i class="bi bi-shield-check" style="color: var(--gold-light);"></i> ضمانت رضایت از دوره</div>
                        <div><i class="bi bi-device-hdd" style="color: var(--gold-light);"></i> دسترسی امن به محتوای دوره</div>
                        <div><i class="bi bi-file-earmark-arrow-down" style="color: var(--gold-light);"></i> دریافت فوری فایل‌های کاربردی</div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<!-- Course Details Content -->
<section style="padding: 4rem 6%; max-width: 1400px; margin: 0 auto;">
    <div class="course-content-grid">
        <div>
            <!-- Overview -->
            <div style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2.5rem; margin-bottom: 3rem;">
                <h2 style="font-size: 1.8rem; font-weight: 800; margin-bottom: 1.25rem;">
                    معرفی <span>دوره</span>
                </h2>
                <div style="color: var(--text-muted); font-size: 1.05rem; line-height: 1.8;">
                    {{ course.description|linebreaks }}
                </div>
            </div>

            <!-- Curriculum Accordion -->
            <div style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2.5rem; margin-bottom: 3rem;">
                <h2 style="font-size: 1.8rem; font-weight: 800; margin-bottom: 0.5rem;">
                    سرفصل‌های <span>آموزشی</span>
                </h2>
                <p style="color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem;">
                    ویدیوها و بخش‌های آموزشی این دوره را مشاهده کنید.
                </p>

                <div class="syllabus-accordion">
                    {% for headline in headlines %}
                        <div class="accordion-chapter">
                            <div class="chapter-header">
                                <div>
                                    <i class="bi bi-folder-fill" style="color: var(--gold-primary); margin-right: 0.5rem;"></i>
                                    سرفصل {{ forloop.counter }}: {{ headline.title }}
                                </div>
                                <span style="font-size: 0.85rem; color: var(--text-dim);">{{ headline.videos.count }} ویدیو</span>
                            </div>
                            
                            <div class="lesson-list">
                                {% for video in headline.videos.all %}
                                    <div class="lesson-item">
                                        <div style="display: flex; align-items: center; gap: 0.75rem;">
                                            {% if video.is_preview_free %}
                                                <i class="bi bi-play-circle-fill" style="color: var(--emerald-accent);"></i>
                                            {% else %}
                                                <i class="bi bi-lock-fill" style="color: var(--text-dim);"></i>
                                            {% endif %}
                                            <span>{{ video.title }}</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 1rem;">
                                            {% if video.is_preview_free %}
                                                <button class="badge-emerald" style="border: none; cursor: pointer;" onclick="openTrailerModal('{{ video.player_url }}')">
                                                    پیش‌نمایش رایگان
                                                </button>
                                            {% endif %}
                                            <span style="font-size: 0.85rem; color: var(--text-dim);">{{ video.duration }}</span>
                                        </div>
                                    </div>
                                {% empty %}
                                    <div style="padding: 1rem; color: var(--text-dim); font-size: 0.85rem;">هنوز درسی به این بخش اضافه نشده است.</div>
                                {% endfor %}
                            </div>
                        </div>
                    {% empty %}
                        <div style="text-align: center; color: var(--text-muted); padding: 2rem;">هنوز سرفصلی ثبت نشده است.</div>
                    {% endfor %}
                </div>
            </div>

            <!-- Downloadable Attachments -->
            {% if files %}
                <div style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2.5rem; margin-bottom: 3rem;">
                    <h2 style="font-size: 1.8rem; font-weight: 800; margin-bottom: 1.25rem;">
                        فایل‌ها و <span>ابزارهای دوره</span>
                    </h2>
                    <div style="display: flex; flex-direction: column; gap: 1rem;">
                        {% for file in files %}
                            <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); border-radius: 8px;">
                                <div style="display: flex; align-items: center; gap: 0.75rem;">
                                    <i class="bi bi-file-earmark-pdf-fill" style="color: var(--gold-light); font-size: 1.5rem;"></i>
                                    <div>
                                        <strong style="display: block; font-size: 0.95rem;">{{ file.title }}</strong>
                                        <span style="font-size: 0.8rem; color: var(--text-dim);">حجم: {{ file.file_size }}</span>
                                    </div>
                                </div>
                                {% if is_enrolled %}
                                    <a href="{{ file.file_url|default:'#' }}" class="btn-outline" style="padding: 0.4rem 0.85rem; font-size: 0.85rem;">
                                        <i class="bi bi-download"></i> دریافت فایل
                                    </a>
                                {% else %}
                                    <span style="font-size: 0.85rem; color: var(--text-dim);"><i class="bi bi-lock"></i> ویژه دانشجویان</span>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Instructor Spotlight Sidebar Card -->
        <div>
            <div style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2rem;">
                <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.75rem;">
                    درباره مدرس
                </h3>
                <div style="text-align: center; margin-bottom: 1.5rem;">
                    <img src="{{ course.instructor.avatar_url|default:'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=300&q=80' }}" alt="{{ course.instructor.name }}" style="width: 100px; height: 100px; border-radius: 50%; border: 3px solid var(--gold-primary); margin-bottom: 1rem; object-fit: cover;">
                    <h4 style="font-size: 1.2rem;">{{ course.instructor.name|default:"Senior Coach" }}</h4>
                    <span style="font-size: 0.85rem; color: var(--gold-light);">{{ course.instructor.title }}</span>
                </div>
                <p style="color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem;">
                    {{ course.instructor.bio|default:"مدرس باتجربه در زمینه رشد کسب‌وکار، مدیریت و توسعه فروش." }}
                </p>
                <div style="display: flex; justify-content: space-around; border-top: 1px solid var(--border-subtle); padding-top: 1rem; text-align: center;">
                    <div>
                        <strong style="display: block; font-size: 1.2rem; color: var(--gold-light);">{{ course.instructor.rating }}</strong>
                        <span style="font-size: 0.75rem; color: var(--text-dim);">امتیاز</span>
                    </div>
                    <div>
                        <strong style="display: block; font-size: 1.2rem; color: var(--gold-light);">{{ course.instructor.students_count }}+</strong>
                        <span style="font-size: 0.75rem; color: var(--text-dim);">دانشجو</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
