{# This file is part of INGInious. See the LICENSE and the COPYRIGHTS files for #}
{# more information about the licensing of this file. #}

{% extends "layout.html" %}

{% block title %} {{ course.get_name(session.language) }} {% endblock %}

{% block column %}
    {% with current='students' %}  {% include 'course_admin/menu.html' %}{% endwith %}
{% endblock %}

{% block navbar %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{url_for('coursepage', courseid=course.get_id())}}">{{ course.get_name(session.language) }}</a></li>
            <li class="breadcrumb-item"><a href="{{url_for('courseredirect', courseid=course.get_id())}}" title="{{ _('Administration') }}" data-toggle="tooltip" data-placement="bottom">
                <i class="fa fa-user-secret"></i></a></li>
            <li class="breadcrumb-item active">
                <a href="#">
                    <i class="fa fa-user"></i> {{ _("User management") }} <span class="sr-only"> {{_("(current)") }}</span>
                </a>
            </li>
        </ol>
    </nav>
{% endblock %}

{% block content %}
<h2>{{ _("User management") }}</h2>

<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a href="#tab_students" class="nav-link active" aria-controls="students" role="tab" data-toggle="tab">
                <i class="fa fa-user fa-fw"></i>&nbsp; {{_("Students")}}</a>
            </li>
            <li class="nav-item">
                <a href="#tab_staff" class="nav-link" aria-controls="staff" role="tab" data-toggle="tab">
                <i class="fa fa-user-secret fa-fw"></i>&nbsp; {{_("Teaching staff")}}</a>
            </li>
            <li class="nav-item">
                <a href="#tab_audiences" class="nav-link" aria-controls="staff" role="tab" data-toggle="tab">
                <i class="fa fa-users fa-fw"></i>&nbsp; {{_("Audiences")}}</a>
            </li>
            {% if not course.is_lti() %}
                <li class="nav-item">
                    <a href="#tab_groups" class="nav-link" aria-controls="staff" role="tab" data-toggle="tab">
                    <i class="fa fa-users fa-fw"></i>&nbsp; {{_("Groups")}}</a>
                </li>
            {% endif %}
        </ul>
    </div>
    <div class="tab-content">
        <div role="tabpanel" class="card-body tab-pane active" id="tab_students">
            {% with usernames=student_list, is_staff=False %}
                <p>{{ _("Number of students") }} : {{ student_list | length }}</p>
                {% include "course_admin/student_list_table.html" %}
            {% endwith %}
            {% if user_manager.has_admin_rights_on_course(course) %}
                <form method="post">
                    <div class="form-group row">
                        <div class="col-sm-9">
                            {% with course_id=course.get_id(), current_users=[], name="username", id="username_search", placeholder=_("Enter something here to search for a user"), single=True %}
                                {% include "course_admin/user_selection_box.html" %}
                            {% endwith %}
                        </div>
                        <div class="col-sm-3"><button name="register_student" type="submit" class="btn btn-warning btn-block"><i class="fa fa-plus fa-lg"></i>{{ _("Add student") }}</button></div>
                    </div>
                </form>
            {% endif %}
        </div>
        <div role="tabpanel" class="card-body tab-pane" id="tab_staff">
            {% with usernames=staff_list, is_staff=True %}
                {% include "course_admin/student_list_table.html" %}
            {% endwith %}
        </div>
        <div role="tabpanel" class="card-body tab-pane" id="tab_audiences">
            <h2> {{ _("Audiences") }}
                    <div class="pull-right">
                        <div class="btn-group btn-group-sm">
                            <button type="submit" id="create_audiences_f" class="btn btn-warning" data-toggle="modal" data-target="#upload_audiences_creation"><i class="fa fa-upload"></i> <div class="d-none d-sm-inline">{{ _("Upload audiences") }}</div></button>
                            <button type="submit" id="download_audiences" class="btn btn-success" data-toggle="modal" data-target="#download_audiences_structure"><i class="fa fa-download"></i> <div class="d-none d-sm-inline">{{ _("Download structure") }}</div></button>

                        </div>
                    </div>
                </h2>
            {% if "audiences" in error %}
                <div class="alert alert-danger alert-dismissable" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    {{msg["audiences"]}}
                </div>
            {%elif "audiences" in msg %}
                <div class="alert alert-success alert-dismissable" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    {{msg["audiences"]}}
                </div>
            {% endif %}

            <div class="modal fade" id="upload_audiences_creation">
                <form method="post" enctype="multipart/form-data" action="#">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title"> {{ _("Upload audience creation") }}</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="modal-body">
                                <p> {{ _("Note : Please refer to documentation for file format") }}</p>
                                <div class="form-group">
                                    <label class="control-label"> {{ _("Audiences") }}</label>
                                    <input name="audiencefile" type="file">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button name="upload_audiences_creation" class="btn btn-danger btn-block" type="submit"><i class="fa fa-upload"></i>  {{ _("Upload (will erase current repartition)") }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal fade" id="download_audiences_structure">
                <form action="#">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title"> {{ _("Download audiences structure") }}</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label class="control-label"> {{ _("Prefered field") }}</label>
                                    {% for field in ['username','email'] %}
                                        <div>
                                            <input type="radio" name="preferred_field" id="{{ field }}" value="{{ field }}"> <label for="{{ field }}">{{ field }}</label>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button name="download_audiences_structure" class="btn btn-danger btn-block" type="submit"><i class="fa fa-download"></i>  {{ _("Download") }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div style="overflow-x:auto;">
                <table class="table">
                    <thead class="table-borderless">
                        <tr>
                            <th></th>
                            <th>{{_("audience")}}</th>
                            <th>{{_("# students")}}</th>
                            <th>{{_("# task tried")}}</th>
                            <th>{{_("# task done")}}</th>
                            <th>
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{url_for('coursestudentlistpage', courseid=course.get_id(), csv_audiences='')}}" class="btn btn-info btn-xs"
                                       title="{{ _('Download CSV') }}" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-table"></i></a>
                                    {% set audience_str = audiences | map('string') | join(',') %}
                                    <a href="{{url_for('coursesubmissionspage', courseid=course.get_id(), audiences=audience_str)}}" class="btn btn-secondary btn-xs"
                                       title="{{ _('View all submissions') }}" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-files-o"></i></a>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for audience in audiences.values() %}
                        <tr>
                            <td>
                                {% if session.username in audience.tutors %}
                                    <i class="fa fa-star" title="{{ _('You are a tutor of this audience.') }}" data-toggle="tooltip" data-placement="bottom"></i>
                                {% endif %}
                            </td>
                            <td>{{ audience.description}} </td>
                            <td>{{ audience.students | length}}</td>
                            <td>{{ audience_progress[audience.id]["tried"] }}</td>
                            <td>{{ audience_progress[audience.id]["succeeded"] }}</td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ url_for('courseditaudience', courseid=course.get_id(), audienceid=str(audience.id)) }}" class="btn btn-primary" title="{{ _('Edit audience') }}" data-toggle="tooltip"
                                       data-placement="bottom"><i class="fa fa-edit"></i></a>
                                    <a href="{{url_for('coursesubmissionspage', courseid=course.get_id(), audiences=str(audience.id))}}" class="btn btn-secondary" title="{{ _('View submissions') }}" data-toggle="tooltip"
                                        data-placement="bottom"><i class="fa fa-file-code-o fa-fw"></i></a>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

            <form class="form-horizontal" method="post">
                <div class="form-group row">
                    <div class="col-sm-9"><input type="text" class="form-control" name="audience" placeholder="{{ _('New audience description') }}"/></div>
                    <div class="col-sm-3"><button type="submit" class="btn btn-warning btn-block"><i class="fa fa-plus fa-lg"></i> {{ _("New audience") }}</button></div>
                </div>
            </form>
        </div>

        {% if not course.is_lti() %}
            <div role="tabpanel" class="card-body tab-pane" id="tab_groups">
                <h2>{{ _("Groups") }}
                    <div class="pull-right">
                        <div class="btn-group btn-group-sm">
                            <button type="submit" id="switch" class="btn btn-danger" data-toggle="modal" data-target="#upload_modal_groups"><i class="fa fa-upload"></i> <div class="d-none d-sm-inline">{{ _("Upload structure") }}</div></button>
                            <a href="?download_groups" class="btn btn-success"><i class="fa fa-download"></i>  <div class="d-none d-sm-inline">{{ _("Download structure") }}</div></a>
                        </div>
                    </div>
                </h2>
                <br>
                <div class="modal fade" id="upload_modal_groups">
                    <form method="post" enctype="multipart/form-data" action="#">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title"> {{ _("Upload course structure") }}</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    <p> {{ _("Note : Please refer to documentation for file format") }}</p>
                                    <div class="form-group">
                                        <label class="control-label"> {{ _("Course structure") }}</label>
                                        <input name="groupfile" type="file">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button name="upload_groups" class="btn btn-danger btn-block" type="submit"><i class="fa fa-upload"></i>  {{ _("Upload (will erase current settings)") }}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                {% if "groups" in error %}
                    <div class="alert alert-danger alert-dismissable" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {{msg["groups"]}}
                    </div>
                {% elif "groups" in msg %}
                    <div class="alert alert-success alert-dismissable" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {{msg["groups"]}}
                    </div>
                {% endif %}

                <!-- Modal -->
                <div id="student_modal" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">{{ _("Add student") }}</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <div class="modal-body">
                                <form onsubmit="student_add();return false;">
                                    <div id="tab_new_student">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="control-label" for="new_student">{{ _("Student username (will be registered) :") }}</label>
                                            </div>
                                            <div class="col-md-6">
                                                <input id="new_student" name="new_student" type="text" class="form-control" placeholder="{{ _('Student username') }}">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ _("Cancel") }}</button>
                                <button type="button" class="btn btn-primary" onclick="javascript:student_add()">{{ _("Add student") }}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <form method="post" id="groups_form" class="form-horizontal">
                    <div id="groups" class='list-group'>
                        <div class="card border-warning mb-3 group">
                            <div class="card-header bg-warning text-white clearfix" role="tab">
                                {{ _("Ungrouped students") }}
                                <a class="text-white pull-right" id="group_delete" href="#" data-toggle="modal" data-target="#student_modal">
                                    <i class="fa fa-plus"></i>
                                </a>
                            </div>
                            <input id="size" type="hidden" class="form-control" value="0">
                            <ul id="group_0" class="students list-group list-group-flush">
                                {% for username in ungrouped_students %}
                                    <li data-username="{{username}}" class="list-group-item group-entry">
                                        {% if users_info[username] is not none %}
                                            <span id="{{username}}"><i class="fa fa-arrows"></i> {{ users_info[username].realname }} ({{ username }})</span>
                                        {% else %}
                                            <span id="{{username}}"><i class="fa fa-arrows"></i> {{ username }}</span>
                                        {% endif %}
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>

                        {% for group in (groups + [None]) %}
                            {% set index = loop.index - 1 %}
                                {% if group is none %}
                                    <div id="{{index+1}}" style="display:none;" class="card mb-3 group-card">
                                        <div class="card-header clearfix" role="tab">
                                            <div class="row">
                                                <div class="col-sm-6 col-xs-12">
                                                    <input type="text" style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" class="form-control" id="description" name="description" placeholder="{{ _('Group description') }}" value="{{ _('New group') }}">
                                                </div>
                                                <div class="col-sm-2 col-xs-3" style="text-align: right;">
                                                    <label>{{ _("Max group size :") }}</label>
                                                </div>
                                                <div class="col-sm-3 col-xs-7">
                                                    <input style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" id="size" type="number" class="form-control" value="2">
                                                </div>
                                                <div class="col-sm-1 col-xs-2">
                                                    <a class="pull-right" id="group_delete" href="#" onclick="javascript:group_delete($(this).rparent(4).attr('id'))" data-toggle="tooltip" title="{{ _('Delete group') }}">
                                                        <i class="fa fa-trash-o"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                {% else %}
                                    <div id="{{index+1}}" class="card mb-3 group-card group">
                                        <input type="hidden" id="_id" name="_id" value="{{group.id}}" />
                                        <div class="card-header clearfix" role="tab">
                                            <div class="row">
                                                <div class="col-sm-6 col-xs-12">
                                                    <input type="text" style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" class="form-control" id="description" name="description" placeholder="{{ _('Group description') }}" value="{{ group.description }}">
                                                </div>
                                                <div class="col-sm-2 col-xs-3" style="text-align: right;">
                                                    <label>{{ _("Max group size :") }}</label>
                                                </div>
                                                <div class="col-sm-3 col-xs-7">
                                                    <input style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" id="size" type="number" class="form-control" value="{{group.size}}">
                                                </div>
                                                <div class="col-sm-1 col-xs-2">
                                                    <a class="pull-right" id="group_delete" href="#" onclick="javascript:group_delete($(this).rparent(4).attr('id'))" data-toggle="tooltip" title="{{ _('Delete group') }}">
                                                        <i class="fa fa-trash-o"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                {% endif %}

                                <div class="card-header clearfix" role="tab">
                                    <div class="row">
                                        <div class="col-sm-6 col-xs-12">
                                            {{ _("Restrict to audiences") }}
                                        </div>
                                        <div class="col-sm-4 col-xs-6" style="text-align: center">
                                            <select type="text" style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" class="form-control input-xs" id="audience_list_{{index+1}}" name="audience_list_{{index+1}}">
                                                {% for key, audience in audiences.items() %}
                                                    {% if not group or audience.id not in group.audiences %}
                                                            <option value="{{ audience.id }}">{{audience.description}}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-sm-2 col-xs-6">
                                            <button type="button" style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" onclick="javascript:group_audience_add($('#audience_list_{{index+1}}').val(), $('#audience_list_{{index+1}} option:selected').text(), {{index+1}})" class="form-control btn btn-xs btn-warning"><span class="fa fa-plus"></span> {{ _("Add audience") }}</button>
                                        </div>
                                    </div>
                                </div>

                                {% if group %}
                                    <ul class="list-group list-group-flush" id="group_{{index+1}}">
                                    {% for audience_id in (group["audiences"] + [None]) %}
                                            {% set audience = audiences.get(audience_id, None) %}
                                            {% if audience is none %}
                                                <li class="list-group-item" style="display:none;">
                                                    <span></span>
                                            {% else %}
                                                <li class="list-group-item audience" id="{{audience_id}}">
                                                    <span>{{ audience["description"] }}</span>
                                                    <input type="hidden" name="audiences" value="{{ audience.id }}">
                                            {% endif %}
                                            <div class="pull-right"><a href="#" onclick="javascript:group_audience_remove($(this).rparent(2).attr('id'), {{ index+1 }})"><i class="fa fa-trash-o fa-lg"></i></a></div>
                                        </li>
                                    {% endfor %}
                                    </ul>
                                {% else %}
                                    <ul class="list-group list-group-flush" id="group_{{index+1}}">
                                        <li class="list-group-item" style="display:none;">
                                            <span></span>
                                            <div class="pull-right"><a href="#" onclick="javascript:group_audience_remove($(this).rparent(2).attr('id'), {{ index+1 }})"><i class="fa fa-trash-o fa-lg"></i></a></div>
                                        </li>
                                    </ul>
                                {% endif %}

                                <div class="card-header clearfix" role="tab">
                                    {{ _("Students") }}
                                </div>

                                {% if group %}
                                    <ul id="students" class="list-group list-group-flush students">
                                        {% for student in group.students %}
                                            <li data-username="{{student}}" class="list-group-item group-entry">
                                                {% if users_info[student] is not none %}
                                                    <span id="{{student}}"><i class="fa fa-arrows"></i> {{ users_info[student].realname }} ({{ student }})</span>
                                                {% else %}
                                                    <span id="{{student}}"><i class="fa fa-arrows"></i>{{student}}</span>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                {% else %}
                                    <ul style="padding:0;" class="list-group list-group-flush students"></ul>
                                {% endif %}
                            </div>
                        {% endfor %}

                        <div class="row mb-3">
                            <div class="col-md-4">
                                    <a href="#group_add" onclick="javascript:group_add()" id="group_add" class="btn btn-block btn-secondary">
                                        <i class="fa fa-plus fa-lg"></i> {{ _("New group") }}
                                    </a>
                            </div>
                            <div class="col-md-4">
                                    <a href="#" onclick="javascript:groups_clean()" class="btn btn-block btn-warning">
                                        <i class="fa fa-eraser fa-lg"></i> {{ _("Clean groups") }}
                                    </a>
                            </div>
                            <div class="col-md-4">
                                    <a href="#" onclick="javascript:groups_delete()" class="btn btn-block btn-danger">
                                        <i class="fa fa-trash fa-lg"></i> {{ _("Delete all groups") }}
                                    </a>
                            </div>
                        </div>
                    </div>
                    <button name="update" class="btn btn-primary btn-block" onclick="javascript:groups_prepare_submit()" type="submit"><i class="fa fa-floppy-o"></i> {{ _("Update") }}</button>
                </form>

                <style>
                    /* remove ghost when dragging and change cursor for draggable element */
                    .sortable-drag { opacity: 0; }
                    .handle { cursor: move; }
                </style>

                <!-- Javascript for managing student lists -->
                <script type="text/javascript">
                $(document).ready(function() {
                    if(!$("#audience_list").val())
                        $("#audience_list").prop("disabled", true);

                    $("ul.students").each(function(){
                        new Sortable(this, {group:"students"})
                    });
                    $("ul.students").bind("DOMSubtreeModified", function() {group_update($(this).parent())});
                    $("input[id='size']").on('keyup click',function() {group_update($(this).rparent(5))});
                });
                </script>
            </div>
        {% endif %}
    </div>
</div>
<script>
    $(function() {
        $('.nav-tabs a[href="#{{active_tab}}"]').tab('show');
    });
</script>

{% endblock %}