{% extends "base.html" %}
{% load custom_tags_and_filters %}
{% load static %}
{% block extrahead %}
    <link rel="stylesheet"
          type="text/css"
          href="{% static "NEMO_online_training/nemo_online_training.css" %}" />
    <script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "datetimepicker/bootstrap-datetimepicker.css" %}" />
{% endblock %}
{% block title %}{{ customizations|get_item:"online_training_feature_name" }}{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-xs-9">
            <h1 style="margin-top: 0; margin-bottom: 25px">{{ customizations|get_item:"online_training_feature_name" }}</h1>
        </div>
    </div>
    <div>
        {% if user_is_staff and not single_user_view %}
            <div class="text-right">
                {#                    {% button type="export" value="Export" url=request.path|concat:"?csv=true" target="_blank" %}#}
                {% url "online_training_search_users" as search_users_url %}
                {% button type="add" value="Add" url=search_users_url %}
            </div>
            <div style="margin-top: 15px; margin-bottom: {% if page %}-15px{% else %}0px{% endif %}">
                <form class="form-horizontal" method="get">
                    <div class="form-group">
                        <label class="col-sm-2 col-lg-1 control-label" for="training_status">Status</label>
                        <div class="col-sm-5">
                            <select id="training_status" name="training_status" class="form-control">
                                <option value="all" selected>All</option>
                                <option value="incomplete" {% if selected_status == "incomplete" %}selected{% endif %}>Has pending trainings</option>
                                <option value="complete" {% if selected_status == "complete" %}selected{% endif %}>Has completed all trainings</option>
                                <option value="empty" {% if selected_status == "empty" %}selected{% endif %}>Has no trainings</option>
                            </select>
                        </div>
                        <label class="col-sm-2 col-lg-2 control-label" for="user_type">User Type</label>
                        <div class="col-sm-3">
                            <select id="user_type" name="user_type" class="form-control">
                                <option value="" selected>All</option>
                                <option value="new" {% if selected_user_type == "new" %}selected{% endif %}>New Users</option>
                                <option value="nemo" {% if selected_user_type == "nemo" %}selected{% endif %}>NEMO Users</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-lg-offset-1 col-xs-10">{% button type="save" value="Update" %}</div>
                    </div>
                </form>
            </div>
        {% endif %}
        {% if page %}
            {% with paginator=page.paginator %}
                {% if not single_user_view %}
                    <div class="pagination pull-right" style="clear: both">{% include "pagination/pagination_selector.html" %}</div>
                {% else %}
                    <br>
                {% endif %}
                <div id="main-user-training-table">
                    <div class="table-responsive" style="width: 100%">
                        <table class="table table-bordered table-condensed table-align-middle thead-light">
                            <thead>
                                <tr>
                                    <th>{% include 'pagination/pagination_column.html' with order_by="first_name" name="User" %}</th>
                                    {% if user_is_staff and user_types %}<th class="text-center">Type</th>{% endif %}
                                    <th class="text-center">
                                        {% include 'pagination/pagination_column.html' with order_by="completed_trainings" name="Completed" %}
                                    </th>
                                    <th class="text-center">
                                        {% include 'pagination/pagination_column.html' with order_by="total_trainings" name="Total" %}
                                    </th>
                                    <th class="text-center">
                                        {% include 'pagination/pagination_column.html' with order_by="last_accessed" name="Last accessed" %}
                                    </th>
                                    {% if user_is_staff %}<th class="text-right button-column-minimum">Action</th>{% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for training_user in page %}
                                    <tr style="border-top: 2px solid #ccc;">
                                        <td id="chevron_{{ training_user.id }}"
                                            data-toggle="collapse"
                                            data-target="#trainings_{{ training_user.id }}"
                                            onclick="toggle_details($('#chevron_{{ training_user.id }}'))">
                                            <span class="glyphicon glyphicon-chevron-down pull-left chevron"></span>
                                            {% if current_user_trainings %}
                                                {{ training_user.first_name }}
                                            {% else %}
                                                {{ training_user.get_name }} ({{ training_user.email }})
                                            {% endif %}
                                        </td>
                                        {% if user_is_staff and user_types %}
                                            <td class="text-center"
                                                data-toggle="collapse"
                                                data-target="#trainings_{{ training_user.id }}"
                                                onclick="toggle_details($('#chevron_{{ training_user.id }}'))">
                                                {{ training_user.user_type|default_if_none:"" }}
                                            </td>
                                        {% endif %}
                                        <td class="text-center"
                                            data-toggle="collapse"
                                            data-target="#trainings_{{ training_user.id }}"
                                            onclick="toggle_details($('#chevron_{{ training_user.id }}'))">
                                            {{ training_user.completed_trainings }}
                                        </td>
                                        <td class="text-center"
                                            data-toggle="collapse"
                                            data-target="#trainings_{{ training_user.id }}"
                                            onclick="toggle_details($('#chevron_{{ training_user.id }}'))">
                                            {{ training_user.total_trainings }}
                                        </td>
                                        <td class="text-center"
                                            data-toggle="collapse"
                                            data-target="#trainings_{{ training_user.id }}"
                                            onclick="toggle_details($('#chevron_{{ training_user.id }}'))">
                                            {{ training_user.last_accessed|date:"SHORT_DATETIME_FORMAT"|default:"Never" }}
                                        </td>
                                        {% if user_is_staff %}
                                            <td class="text-right">
                                                {% if not training_user.nemo_user and training_user.all_trainings_completed %}
                                                    {% url 'online_training_create_nemo_user_from_new_user' training_user.id as create_nemo_user_url %}
                                                    {% button type="save" icon="glyphicon-plus" size="xsmall" submit=False value="Create NEMO user" url=create_nemo_user_url %}
                                                {% endif %}
                                            </td>
                                        {% endif %}
                                    </tr>
                                    <tr id="trainings_{{ training_user.id }}" class="collapse in">
                                        <td colspan="{% if user_is_staff %}{% if user_types %}6{% else %}5{% endif %}{% else %}4{% endif %}"
                                            style="padding: 0">
                                            <div class="online-training-sub-table-wrapper">
                                                <table class="table table-borderless table-condensed table-hover"
                                                       style="table-layout: fixed;
                                                              width: 100%;
                                                              margin-bottom: 0">
                                                    <thead>
                                                        <tr class="online-training-sub-table-header">
                                                            <th class="">Training</th>
                                                            <th class="col-md-2 text-center">Available since</th>
                                                            <th class="col-md-2 text-center">Due in</th>
                                                            <th class="col-md-2 text-center">Completed</th>
                                                            {% if user_is_staff %}<th class="col-md-2 text-center">Completion time</th>{% endif %}
                                                            <th class="col-md-2 text-center">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for training_record in training_user.trainingrecord_set.all %}
                                                            <tr class="{% if training_record.completed %}success{% elif training_record.has_training_expired %}danger{% endif %}">
                                                                <td>{{ training_record.training.name }}</td>
                                                                <td class="text-center">{{ training_record.creation_time|date:"SHORT_DATETIME_FORMAT" }}</td>
                                                                <td class="text-center">
                                                                    {% if not training_record.completed and not training_record.has_training_expired %}
                                                                        {{ training_record.due_date|timeuntil }}
                                                                    {% else %}
                                                                        {{ training_record.due_date|default_if_none:""|date:"SHORT_DATETIME_FORMAT" }}
                                                                    {% endif %}
                                                                </td>
                                                                <td class="text-center">{{ training_record.end|default_if_none:""|date:"SHORT_DATETIME_FORMAT" }}</td>
                                                                {% if user_is_staff %}<td class="text-center">{{ training_record.completion_time|default_if_none:"" }}</td>{% endif %}
                                                                <td class="text-right">
                                                                    {% if not training_record.completed and not training_record.has_training_expired %}
                                                                        {% if current_user_trainings %}
                                                                            <a class="btn btn-success btn-xs" href="{% url 'online_training_user_training' training_record.id %}">Complete</a>
                                                                        {% else %}
                                                                            <button class="btn btn-warning btn-xs"
                                                                                    onclick="send_email_link_for_all_trainings([{{ training_record.id }}])">
                                                                                {% if not training_record.completed %}Send new link{% endif %}
                                                                            </button>
                                                                        {% endif %}
                                                                    {% elif training_record.completed %}
                                                                        <span class="label label-success">Completed</span>
                                                                    {% elif training_record.has_training_expired %}
                                                                        <span class="label label-danger">Expired</span>
                                                                    {% endif %}
                                                                </td>
                                                            </tr>
                                                        {% endfor %}
                                                        {% if user_is_staff %}
                                                            <tr id="add_training_row{{ training_user.id }}" style="display: none;">
                                                                <td>
                                                                    <select id="training_select_{{ training_user.id }}"
                                                                            class="form-control input-sm"
                                                                            onchange="$('#due_date_{{ training_user.id }}').val($(this).find(':selected').data('due-date'))">
                                                                        <option value="">Select a training...</option>
                                                                        {% for training in training_user.available_trainings %}
                                                                            <option value="{{ training.id }}"
                                                                                    {% if forloop.first and forloop.last %}selected{% endif %}
                                                                                    data-due-date="{{ training.default_due_date_from_now|input_date_format }}">
                                                                                {{ training.name }}
                                                                            </option>
                                                                        {% endfor %}
                                                                    </select>
                                                                </td>
                                                                <td class="text-center">-</td>
                                                                <td class="text-center">
                                                                    <input type="text"
                                                                           id="due_date_{{ training_user.id }}"
                                                                           class="form-control input-sm due-date-picker text-center"
                                                                           {% if training_user.available_trainings|length == 1 %}value="{{ training_user.available_trainings.0.default_due_date_from_now|input_date_format }}"{% endif %}>
                                                                </td>
                                                                <td class="text-center">-</td>
                                                                <td class="text-center">-</td>
                                                                <td class="text-right">
                                                                    <button class="btn btn-success btn-xs" onclick="save_new_training({{ training_user.id }})">Save & send</button>
                                                                    <button class="btn btn-default btn-xs" onclick="cancel_add_training({{ training_user.id }})">Cancel</button>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="{% if user_is_staff %}6{% else %}5{% endif %}"
                                                                    style="text-align: center;
                                                                           padding: 5px;
                                                                           border-top: 1px solid #ccc">
                                                                    <button id="add_training_btn{{ training_user.id }}"
                                                                            class="btn btn-primary btn-xs"
                                                                            onclick="show_add_training_row({{ training_user.id }})">
                                                                        <span class="glyphicon glyphicon-plus"></span> Add training
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        {% endif %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% if not single_user_view %}
                    <div class="pagination pull-right" style="margin-bottom: 0">{% include "pagination/pagination_pages.html" %}</div>
                {% endif %}
            {% endwith %}
        {% else %}
            <div class="pull-left form-control-static">
                <i>
                    No records found.
                </i>
            </div>
        {% endif %}
    </div>
    <script>
    function send_email_link_for_all_trainings(training_ids)
    {
        for (const training_id of training_ids)
        {
            ajax_post(build_django_url("{% url 'public_online_training_generate_user_training_email' '999'%}", ["999"], [training_id]), {"popup": true}, ajax_failure_callback("Link confirmation", "A new link was sent to the email address on file."), ajax_failure_callback("Unable to generate new link"));
        }
    }

    function show_add_training_row(user_id)
    {
        $('#add_training_row' + user_id).show();
        $('#add_training_btn' + user_id).parent().parent().hide();
    }

    function cancel_add_training(user_id)
    {
        $('#add_training_row' + user_id).hide();
        $('#add_training_btn' + user_id).parent().parent().show();
        $('#training_select_' + user_id).val('');
        $('#due_date_' + user_id).val('');
    }

    function save_new_training(user_id)
    {
        const training_id = $('#training_select_' + user_id).val();
        const due_date = $('#due_date_' + user_id).val();

        if (!training_id) {
            alert('Please select a training');
            return;
        }

        ajax_post(
            build_django_url("{% url 'online_training_add_training_to_user' '99999' '88888' %}", ["99999", "88888"], [user_id, training_id]),
            due_date ? {due_date: due_date} : {},
            function () {
                location.reload();
            },
            function(response) {
                // Handle validation errors from Django form
                let error_message = 'Unable to add training:\n';
                if (response.responseJSON && response.responseJSON.errors) {
                    const errors = response.responseJSON.errors;
                    for (const field in errors) {
                        if (field === '__all__') {
                            error_message += errors[field].join('\n') + '\n';
                        } else {
                            const field_name = field.replace('_', ' ').charAt(0).toUpperCase() + field.replace('_', ' ').slice(1);
                            error_message += field_name + ': ' + errors[field].join(', ') + '\n';
                        }
                    }
                } else {
                    error_message += response.responseText || 'An unknown error occurred';
                }
                alert(error_message);
            }
        );
    }

    $(document).ready(function()
    {
        $('.due-date-picker').datetimepicker({format: '{{ datetime_input_js_format }}', sideBySide: true, useCurrent: false, widgetParent: '#main-user-training-table'});
    })
    </script>
{% endblock %}