{% extends 'main/base.html' %} 
{% load static %}

{% block scripts %}
<script src="{% static 'course/course_info.js' %}" defer></script>
{% endblock scripts %}

{% block title %}
{{each_one.course_name}}
{% endblock %}

{% load humanize %} 
{% block content %} 

    <!-- Page Content-->
    <div class="container px-4 px-lg-5">
        <!-- Heading Row-->
        <div class="row gx-4 gx-lg-5 align-items-top my-5">
            <div class="col-lg-7"><img class="img-fluid rounded mb-4 mb-lg-0" src="../../static/course-image.jpg" alt="..." /></div>
            <div class="col-lg-5">
                <div class="d-flex" >
                    <div class="col flex-fill">
                        <h1 class="font-weight-light">{{each_one.name}}</h1>
                        <p>{{ instructor }}</p>
                        <p class="mb-0"><em>Description</em></p>
                        <p>{{ each_one.description }}</p>
                        {% if request.user.userprofile.student_id != "" %}
                        <hr />
                        <p class="mb-0">Set Reminder: <b>{{ notification.time_to_send }}</b></p>
                        <p class="text-muted">This daily reminder is personal to your account. Depending whether there are questions available for the day, you will be sent an email notification. Go to <b>Options</b> to change the time.</p>
                        {% elif request.user.userprofile.instructor_id != "" %}
                        <hr />
                        <p class="mb-0">Students: 
                        {% for s in students %}
                            {{s}},
                        {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                    <div class="col d-flex justify-content-end">
                        <div class="dropdown">
                            <button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Options
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                {% if request.user.userprofile.instructor_id != "" %}
                                <a class="dropdown-item" href="{% url 'course:course-edit' each_one.course_id %}">
                                    Update Course
                                </a>
                                <a class="dropdown-item" href="{% url 'course:course-delete' each_one.course_id %}">
                                    Delete Course
                                </a>
                                {% else %}
                                <a class="dropdown-item" href="{% url 'course:course-edit' each_one.course_id %}">
                                    Change Reminder Time
                                </a>
                                <a class="dropdown-item" href="{% url 'course:course-delete' each_one.course_id %}">
                                    Un-Enroll
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="card text-white bg-black my-5 py-4 text-center">
        </div>
        <!-- Content Row-->
        <div class="row gx-4 gx-lg-5">
            <!-- instructor at all -->
            {% if request.user.userprofile.instructor_id != "" %}
                <div class="col-md-4 mb-5">
                    <div class="card h-100">
                        <div class="card-body">
                            <h2 class="card-title">Course Statistics</h2>
                            <p class="card-text">Here you will be able to see your students' score and response to each section.</p>
                        </div>
                        <div class="card-footer"><a
                                class="btn btn-secondary float-left px-4"
                                href="{% url 'course:course-stats-view' pk=each_one.course_id %}"
                        >Statistics</a></div>
                    </div>
                </div>
                <div class="col-md-4 mb-5">
                    <div class="card h-100">
                        <div class="card-body">
                            <h2 class="card-title">Create a section</h2>
                            <p class="card-text">Here you can add a new section to the course. <b>NOTE</b>: only section can be activated at a time.</p>
                        </div>
                        <div class="card-footer"><a class="btn btn-primary btn" href="{% url 'course:questions:create-section' pk=each_one.course_id %}">
                            Create a section
                        </a></div>
                    </div>
                </div>
            {% endif %}

            <!-- Question Section -->
            <!-- check static/course/course_info.js -->
            {% if open_section %}
            <hr />
            <h5 id="current-section-title"
                class="text-primary mb-0"
                data-section-id="{{ open_section.section_id }}"
            >Current Section: {{ open_section }}</h5>
            {% if request.user.userprofile.instructor_id != "" %}
            <a class="btn btn-success btn" style="float: right;" href="{% url 'course:questions:create-question' pk=each_one.course_id %}">
                Add Questions
            </a>
            {% endif %}
            <p class="text-muted mb-0">{{ open_section.start_date }} - {{ open_section.end_date}}</p>
            <p class="mb-3">Below you will see the questions currently active.</p>
            <div class="card mb-5">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs pull-right"  id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="today-tab" data-toggle="tab" href="#today" role="tab" aria-controls="today" aria-selected="true">Today</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="past-tab" data-toggle="tab" href="#past" role="tab" aria-controls="past" aria-selected="false">Past</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="today" role="tabpanel" aria-labelledby="today-tab">
                            <div id="today-box"></div>
                        </div>
                        <div class="tab-pane fade" id="past" role="tabpanel" aria-labelledby="past-tab">
                            <div id="past-box"></div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Other Sections Section -->
            {% if upcoming_sections or closed_sections %}
            <h4 class="text mb-0">Other sections</h4>
            <p class="text-muted mb-3">Below you will see all the other sections for this course. One section is activated at a time. All the questions you will receive will be from the currently activated section.</p>
            <p class="text-white m-0">
                
                {% if upcoming_sections %}
                <hr />
                <h5 class="text mb-0">Upcoming sections</h5>
                <p class="text-muted mb-3">These sections are not yet open and questions from these sections are not answerable.</p>
                
                {% for section in upcoming_sections|dictsort:"start_date" %}
                <hr />
                <a>{{ section.topic }}</a>
                {% if request.user.userprofile.instructor_id != "" %}
                <a class="btn btn-success btn m-1" href="{% url 'course:questions:section-view' pk=section.course.course_id id=section.section_id %}" style="float: right;">
                    Go to section
                </a>
                {% endif %}
                <br>
                <a class="text-muted text-decoration-none mb-3" >{{ section.start_date }} - {{ section.end_date}}</a>
                {% endfor %}

                {% endif %}
                
                {% if closed_sections %}
                <hr />
                <h5 class="text mb-0">Closed sections</h5>
                <p class="text-decoration-none mb-3">These sections are closed and questions from these sections are not answerable.</p>

                {% for section in closed_sections|dictsort:"start_date" %}
                <hr />
                <a>{{ section.topic }}</a>
                {% if request.user.userprofile.instructor_id != "" %}
                <a class="btn btn-success btn m-1" style="float: right;">
                    Go to section
                </a>
                {% endif %}
                <br>
                <a class="text-muted text-decoration-none mb-3" >{{ section.start_date }} - {{ section.end_date}}</a>
                {% endfor %}

                {% endif %}
            
            </p>
            {% endif %}
    </div>
</div>
{% endblock %}