{% extends 'game/base.html' %}

{% load static %}
{% load game.utils %}
{% load app_tags %}

{% block title %}Code for Life - Rapid Router - Scoreboard{% endblock %}

{% block scripts %}
    {{block.super}}
    <script src="{% static 'game/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'game/js/dataTables.fixedColumns.js' %}"></script>
    <script src="{% static 'game/js/widget-scroller.js' %}"></script>
    <script src="{% static 'game/js/pqselect.min.js' %}"></script>
    <script src="{% static 'game/js/jquery.outerhtml.js' %}"></script>
    <script src="{% static 'game/js/scoreboard.js' %}"></script>
{% endblock %}

{% block css %}
{{block.super}}
    <link href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/scoreboard.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/pqselect.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/pqselect.multiselect.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/jquery.dataTables.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/dataTables.fixedColumns.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/dataTables.jqueryui.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/dataTables.custom.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/dropdown.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/input.css' %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block header %}
<section class="banner banner--rapid-router">
    <img title="Rapid Router logo" alt="Rapid Router logo" src="{% static 'common/img/RR_logo.svg' %}">
</section>
{% endblock header %}

{% block nav_ocargo_scoreboard %}
{% if user|is_logged_in_as_teacher %}
    <a class="button button--secondary button--secondary--light sub-nav--teacher-active">Scoreboard</a>
{% else %}
    <a class="button button--secondary button--secondary--light sub-nav--student-active">Scoreboard</a>
{% endif %}
{% endblock nav_ocargo_scoreboard %}

{% block content %}

<form action="" method="post" id="scoreboardForm">
<div class="container">
    <h4 class="text-center" id="scoreboardTitle">Scoreboard</h4>
    {% csrf_token %}
    {% if user|is_logged_in_as_teacher %}
    <p>Choose your search criteria in the menus below to show the progress of your students. Our monitoring system is
        designed to highlight level performance. Stars
        (<span class="iconify scoreboard--completed" data-icon="mdi:star"></span>) indicate full points.</p>
    <div class="row form--row">
        <div class="col-sm-4">
            <div class="dropdown">
                <button class="button--secondary button--secondary--dark button--dropdown" type="button" data-toggle="dropdown" aria-expanded="false">
                    <div class="dropdown__text">Filter classes</div>
                </button>
                <div class="dropdown-menu">
                    <ul>
                        <li class="dropdown-menu__option">
                            <a class="button button--regular">
                                <p class="dropdown-menu__option__text">
                                    <label for="select-all-classes">
                                        <input type="checkbox" id="select-all-classes"><strong>Select all</strong>
                                    </label>
                                </p>
                            </a>
                        </li>
                        {% for class in form.classes %}
                            <li class="dropdown-menu__option">
                                <a class="button button--regular">
                                    <p class="dropdown-menu__option__text">{{ class }}</p>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>

                    <div class="row">
                        <div class="col-sm-6 text-right">
                            <a class="button button--secondary button--secondary--dark" id="clear-classes">Clear</a>
                        </div>
                        <div class="col-sm-6 text-left">
                            <button class="button button--primary" type="submit" name="view">Apply</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="dropdown">
                <button class="button--secondary button--secondary--dark button--dropdown" type="button" data-toggle="dropdown" aria-expanded="false">
                    <div class="dropdown__text">Filter levels</div>
                </button>
                <div class="dropdown-menu">
                    <ul>
                        <li class="dropdown-menu__option">
                            <a class="button button--regular">
                                <p class="dropdown-menu__option__text">
                                    <label for="select-all-levels">
                                        <input type="checkbox" id="select-all-levels"><strong>Select all</strong>
                                    </label>
                                </p>
                            </a>
                        </li>
                        {% for episode in form.episodes %}
                            <li class="dropdown-menu__option">
                                <a class="button button--regular">
                                    <p class="dropdown-menu__option__text">{{ episode }}</p>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>

                    <div class="row">
                        <div class="col-sm-offset-3 col-sm-4">
                            <a class="button button--secondary button--secondary--dark" id="clear-levels">Clear</a>
                        </div>
                        <div class="col-sm-4">
                            <button class="button button--primary" type="submit" name="view">Apply</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form--row__input col-sm-3 col-md-3">
            <div class="input--icon">
                <input type="text" name="Search" placeholder="Search" id="scoreboardSearch"><span class="iconify" data-icon="mdi:search"></span>
            </div>
        </div>
    </div>
    {% endif %}
    <div class="background tableWrapper" id="tableWrapper">
        {% if student_data %}
            <div class="dataTables_info" id="scoreboardTable_info" role="status" aria-live="polite"></div>
            <table id="scoreboardTable" class="display cell-border wide header-primary data-primary">
                <thead>
                <tr>
                    {% for header in headers %}
                        <th class="fixed-width">{{ header }}</th>
                    {% endfor %}
                    {% for level_header in level_headers %}
                        <th class="no-sort text-center">{{ level_header }}</th>
                    {% endfor %}
                    <th class="fixed-width">{{ total_points_header }}</th>
                </tr>
                </thead>
                {% for student in student_data %}
                    {% ifnotequal student.name user.first_name %}
                    <tr>
                    {% else %}
                    <tr class="current-student">
                    {% endifnotequal %}
                        <td class="fixed-width">{{ student.class_field }}</td>
                        <td class="fixed-width">{{ student.name }}</td>
                        <td>{{ student.completed }}</td>
                        <td>{{ student.total_time }}</td>
                        {% for level_id, level_score in student.level_scores.items %}
                            {% if level_score.full_score %}
                                {% ifnotequal student.name user.first_name %}
                                <td class="text-center scoreboard--completed">
                                {% else %}
                                <td class="text-center scoreboard--completed-secondary">
                                {% endifnotequal %}
                                    <div class="d-flex justify-content-center">
                                        <span class="iconify" data-icon="mdi:star"></span>
                                    </div>
                                </td>
                            {% elif level_score.is_low_attempt %}
                                {% if user|is_logged_in_as_teacher %}
                                    <td class="text-center scoreboard--started">{{ level_score.score }}</td>
                                {% else %}
                                    <td class="text-center">{{ level_score.score }}</td>
                                {% endif %}
                            {% else %}
                                <td class="text-center">{{ level_score.score }}</td>
                            {% endif %}
                        {% endfor %}
                        {% if user|is_logged_in_as_teacher %}
                            {% if student.percentage_complete > 75 %}
                                <td class="scoreboard--top-performer">
                            {% elif student.percentage_complete < 33 %}
                                <td class="scoreboard--started">
                            {% else %}
                                <td class="scoreboard--medium-performer">
                            {% endif %}
                        {% else %}
                            <td>
                        {% endif %}
                            {{ student.total_score }}</td>
                    </tr>
                {% endfor %}
            </table>
        {% else %}
        No data.
        {% endif %}
    </div>
</div>

{% if user|is_logged_in_as_teacher %}
<div class="container">
    <h5>Areas for improvement</h5>
    <p>The table below shows areas that could need improvement based on your filters.</p>

    <div class="background tableWrapper" id="tableWrapper">
        {% if improvement_data %}
            <div class="dataTables_info" role="status" aria-live="polite"></div>
            <table id="improvementTable" class="display cell-border wide header-primary data-primary">
                <thead>
                <tr>
                    <th class="fixed-width">Class</th>
                    <th class="fixed-width">Student</th>
                    <th>Areas for improvement</th>
                </tr>
                </thead>
                {% for student in improvement_data %}
                    <tr>
                        <td class="fixed-width">{{ student.class_field }}</td>
                        <td class="fixed-width">{{ student.name }}</td>
                        <td>{{ student.areas }}</td>
                    </tr>
                {% endfor %}
            </table>
        {% else %}
        No data.
        {% endif %}
    </div>
</div>

<div class="container background">
    <div class="text-right mt-4">
        <button class="button button--primary button--icon m-0" type="submit" name="export">
            Export results
            <span class="iconify" data-icon="mdi:tray-arrow-down"></span>
        </button>
    </div>
</div>
{% endif %}

</form>

{% if anchor %}
    <script type='text/javascript'>
        $(document).ready(function(){
            animate($('#scoreboardTitle').offset().top - $('.menu').height())
        });
    </script>
{% endif %}

{% endblock %}
