{% extends 'base.html' %}

{% block title %}{{ course.title }} - Academic Excellence{% endblock %}

{% block content %}
<div class="bg-white border-bottom py-5 mb-5">
    <div class="container">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Courses</a></li>
                <li class="breadcrumb-item active">{{ course.title }}</li>
            </ol>
        </nav>
        <div class="row align-items-center">
            <div class="col-lg-8">
                <span class="badge bg-primary bg-opacity-10 text-primary mb-3">{{ course.level }}</span>
                <h1 class="display-4 fw-bold mb-4">{{ course.title }}</h1>
                <p class="lead text-muted mb-4">{{ course.description }}</p>
                <div class="d-flex align-items-center gap-4">
                    <div class="d-flex align-items-center">
                        {% if course.instructor.photo_url %}
                            <img src="{{ course.instructor.photo_url }}" class="rounded-circle me-2" width="40" height="40">
                        {% endif %}
                        <div>
                            <small class="text-muted d-block">Instructor</small>
                            <a href="{% url 'instructor_detail' course.instructor.pk %}" class="fw-bold text-decoration-none text-dark">{{ course.instructor.name }}</a>
                        </div>
                    </div>
                    <div>
                        <small class="text-muted d-block">Duration</small>
                        <span class="fw-bold">{{ course.duration }}</span>
                    </div>
                    <div>
                        <small class="text-muted d-block">Price</small>
                        <span class="fw-bold">${{ course.price }}</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mt-5 mt-lg-0">
                <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                    {% if course.image_url %}
                        <img src="{{ course.image_url }}" class="card-img-top" alt="{{ course.title }}">
                    {% endif %}
                    <div class="card-body p-4">
                        <h3 class="fw-bold mb-4">${{ course.price }}</h3>
                        <div class="d-grid gap-3">
                            <a href="{% url 'checkout_placeholder' course.id %}" class="btn btn-primary py-3">Enroll Now</a>
                            {% if user.is_authenticated %}
                                <a href="{% url 'toggle_wishlist' course.id %}" class="btn {% if is_in_wishlist %}btn-danger{% else %}btn-outline-primary{% endif %} py-3">
                                    {% if is_in_wishlist %}Remove from Wishlist{% else %}Add to Wishlist{% endif %}
                                </a>
                            {% else %}
                                <a href="{% url 'login' %}?next={{ request.path }}" class="btn btn-outline-primary py-3">Login to Save</a>
                            {% endif %}
                        </div>
                        <p class="text-center mt-3 mb-0 small text-muted">30-Day Money-Back Guarantee</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <h3 class="mb-4">Course Content</h3>
            <div class="accordion" id="courseAccordion">
                <div class="accordion-item border-0 mb-3 shadow-sm rounded-3 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#module1">
                            Module 1: Introduction & Fundamentals
                        </button>
                    </h2>
                    <div id="module1" class="accordion-collapse collapse show">
                        <div class="accordion-body">
                            Detailed overview of core concepts and initial setup.
                        </div>
                    </div>
                </div>
                <div class="accordion-item border-0 mb-3 shadow-sm rounded-3 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#module2">
                            Module 2: Advanced Techniques
                        </button>
                    </h2>
                    <div id="module2" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            Deep dive into complex topics and real-world applications.
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-5 p-4 bg-white shadow-sm rounded-4">
                <h3 class="mb-4">About the Instructor</h3>
                <div class="d-flex">
                    {% if course.instructor.photo_url %}
                        <img src="{{ course.instructor.photo_url }}" class="rounded-4 me-4" width="120" height="120" style="object-fit: cover;">
                    {% endif %}
                    <div>
                        <h4 class="mb-1">{{ course.instructor.name }}</h4>
                        <p class="text-primary fw-medium mb-3">{{ course.instructor.title }}</p>
                        <p class="text-muted">{{ course.instructor.bio }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}