{% extends "control_panel/base_printable.html" %}
{% load i18n %}
{% load my_filters %}

{% block title %}{{ facility.name }} - {% trans "Facility Usage" %}{{ block.super }}{% endblock title %}

{% block headjs %}{{ block.super }}
    <script type="text/javascript">
        var end_date = new Date({{ date_range.1 }})
        var start_date = new Date({{ date_range.0 }})

        if (start_date >= end_date) {
            start_date.setDate(end_date.getDate() - 30)
        }

        $(document).ready(function(){

            $(function() {

                $('#start_date_select').datepicker({
                    dateFormat: "d MM yy",
                    altField: "#start_standard_date",
                    altFormat: "yy-mm-dd",
                    autoclose: true,
                });

                $('#end_date_select').datepicker({
                    dateFormat: "d MM yy",
                    altField: "#end_standard_date",
                    altFormat: "yy-mm-dd"
                });
            });
        });

        $(function(){
            $("#top_export_button_id").click(function() {
                $("#export_csv_div_id").toggle(function() {
                    if (!$("#export_csv_div_id").is(":visible")) {
                        $("#top_export_button_id").val("{% trans 'Export data' %}");
                    } else {
                        $("#start_date_select").datepicker('setDate', start_date);
                        $("#end_date_select").datepicker('setDate', end_date);

                        $("#top_export_button_id").val("{% trans 'Cancel' %}");
                    }
                });
            });

            $("#CSV_EXPORT").click(function() {
                //show_message("success", "{% trans 'Exporting data to csv.' %}");
                $("#top_export_button_id").click();
            });

        });
    </script>
{% endblock headjs %}

{% block buttons %}{{ block.super }}
    <li>
        <input class="top_export_button" id="top_export_button_id" type="button" value="{% trans 'Export data' %}"></input>
    </li>
    <li>
        <div id="export_csv_div_id" class="export_csv_div">
            <form method="post" action="?format=csv">
                {% csrf_token %}
                <label class="date">{% trans "Start Date" %}:</label><input class="export_csv_input" id="start_date_select" type="text"></input>
                <label class="date">{% trans "End Date" %}:</label><input class="export_csv_input" id="end_date_select" type="text"></input>
                <input type="submit" class="btn-large" id="CSV_EXPORT" title="User report for the previous month" value="{% trans "Export to CSV" %}" /></input>
            </form>
        </div>
    </li>
{% endblock buttons %}
{% block control_panel_content %}
    <div id="facility_container">
        <div>
            <br>
            <h2>{% trans "Groups" %}</h2>

            {% if not groups %}
                <p>{% trans "You currently have no data available." %}</p>

            {% else %}
                <table class="simple-table">
                    <tr>
                        <th width="100px">{% trans "Group Name" %}</th>
                        <th width="150px"></th>
                        <th width="100px">{% trans "# Students" %}</th>
                        <th width="100px">{% trans "Logins" %}</th>
                        <th width="100px">{% trans "Login Time" %}</th>
                        <th width="100px">{% trans "Videos Viewed" %}</th>
                        <th width="100px">{% trans "Exercises Completed" %}</th>
                        <th width="100px">{% trans "Mastery " %}</th>
                    </tr>
                    {% for id, group in groups.items %}
                        <tr>
                            <td>{{ group.name }}</td>
                            <td>
                                {% if id %}
                                <span class="actions">[
                                    {# Translators: this is a verb; by clicking this link, the user will be able to coach students. #}
                                    <a href="{% url coach_reports %}?facility={{ facility.id }}&group={{ id }}">{% trans "coach" %}</a>
                                    /
                                    {# Translators: this is a verb; by clicking this link, the user will be able to manage student accounts. #}
                                    <a href="{% url facility_user_management org_id=org_id zone_id=zone_id facility_id=facility.id group_id=id %}">{% trans "manage" %}</a>
                                ]</span>
                                {% endif %}
                            </td>
                            <td>{{ group.total_users }}</td>
                            <td>{{ group.total_logins }}</td>
                            <td>{{ group.total_hours|floatformat }}</td>
                            <td>{{ group.total_videos }}</td>
                            <td>{{ group.total_exercises }}</td>
                            <td>{{ group.pct_mastery|percent:1 }}</td>
                        </tr>

                    {% endfor %}
                </table>
            {% endif %}
        </div><!-- groups -->

        <div class="students">
            <h2>{% trans "Student Usage Reports" %}</h2>

            {% if not students %}
                <p>{% trans "You currently have no data available." %}</p>

            {% else %}

             <table class="simple-table">
                <tr>
                    <tr>
                        <th width="250px">{% trans "Student Name" %}</th>
                        <th width="100px">{% trans "Group" %}</th>
                        <th width="100px">{% trans "Logins" %}</th>
                        <th width="100px">{% trans "Login Time" %}</th>
                        <th width="100px">{% trans "Videos Viewed" %}</th>
                        <th width="100px">{% trans "Exercises Completed" %}</th>
                        <th width="100px">{% trans "Mastery" %}</th>
                    </tr>
                    {% for id, student in students.items %}
                        <tr>
                            <td>
                                <a href="{% url student_view %}?user={{ id }}">
                                    {{ student|format_name:"last_first" }}
                                </a>
                            </td>
                            <td>
                                {% if student.group %}
                                    <a href="{% url coach_reports %}?facility={{ facility.id }}&group={{ student.group.id }}">{{ student.group.name }}</a>
                                {% endif %}
                            </td>
                            <td>{{ student.total_logins }}</td>
                            <td>{{ student.total_hours|floatformat }}</td>
                            <td>{{ student.total_videos }}</td>
                            <td>{{ student.total_exercises }}</td>
                            <td>{{ student.pct_mastery|percent:1  }}</td>
                        </tr>

                {% endfor %}

            </table>
            {% endif %}
        </div><!-- users -->
    </div><!-- facility -->
{% endblock control_panel_content %}