{% extends "symposion/reviews/base.html" %}

{% load i18n %}

{% block head_title %}{% trans 'Result Notification' %}{% endblock %}

{% block body_class %}{{ block.super }} review-results{% endblock %}

{% block extra_style %}
{{ block.super }}
    <style type="text/css">
        .table-striped tbody tr.selected td {
            background-color: #F7F4E6;
        }
    </style>
{% endblock %}

{% block body %}

    <h1>Result Notification</h1>

    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link {% if status == 'accepted' %}active{% endif %}" href="{% url "result_notification" section_slug 'accepted' %}">Accepted</a>
        <li class="nav-item"><a class="nav-link {% if status == 'rejected' %}active{% endif %}" href="{% url "result_notification" section_slug 'rejected' %}">Rejected</a>
        <li class="nav-item"><a class="nav-link {% if status == 'standby' %}active{% endif %}" href="{% url "result_notification" section_slug 'standby' %}">Standby</a>
    </ul>

    <form class="form-horizontal" method="post" action="{% url "result_notification_prepare" section_slug status %}">

        {% csrf_token %}

        <p>
            Select one or more proposals (<span class="action-counter">0</span> currently selected)
            <br/>
            then pick an email template
            <select name="notification_template">
                <option value="">[blank]</option>
                {% for template in notification_templates %}
                    <option value="{{ template.pk }}">{{ template.label }}</option>
                {% endfor %}
            </select>
            <br/>
            <button id="next-button" type="submit" class="btn btn-primary" disabled>Next <i class="fa fa-chevron-right"></i></button>
        </p>

        <table class="table table-striped table-bordered table-reviews">
            <thead>
                <th><input type="checkbox" id="action-toggle"></th>
                <th>#</th>
                <th>{% trans "Speaker / Title" %}</th>
                <th>{% trans "Category" %}</th>
                <th>{% trans "Status" %}</th>
                <th>{% trans "Notified?" %}</th>
            </thead>

            <tbody>
                {% for proposal in proposals %}
                    <tr>
                        <td><input class="action-select" type="checkbox" name="_selected_action" value="{{ proposal.pk }}"></td>
                        <td>{{ proposal.number }}</td>
                        <td>
                            <a href="{% url "review_detail" proposal.pk %}">
                                <small><strong>{{ proposal.speaker }}</strong></small>
                                <br />
                                {{ proposal.title }}
                            </a>
                        </td>
                        <td>{{ proposal.track }}</td>
                        <td>
                            {% with proposal.result.status as status %}
                                <div class="{{ status }}">
                                    {% if status != "undecided" %}
                                        <span>{{ status }}</span>
                                    {% endif %}
                                </div>
                            {% endwith %}
                        </td>
                        <td>
                            {% if proposal.notifications.exists %}yes{% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </form>
{% endblock %}

{% block extra_script %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/r-2.2.0/rg-1.0.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/r-2.2.0/rg-1.0.2/datatables.min.js"></script>
    <script type="text/javascript">
        (function($) {
            $.fn.actions = function(opts) {
                var options = $.extend({}, $.fn.actions.defaults, opts);
                var actionCheckboxes = $(this);
                checker = function(checked) {
                    $(actionCheckboxes).prop("checked", checked)
                        .parent().parent().toggleClass(options.selectedClass, checked);
                }
                updateCounter = function() {
                    var sel = $(actionCheckboxes).filter(":checked").length;
                    $(options.counterContainer).html(sel);
                    $(options.allToggle).prop("checked", function() {
                        if (sel == actionCheckboxes.length) {
                            value = true;
                        } else {
                            value = false;
                        }
                        return value;
                    });
                    if (sel == 0) {
                        $("#next-button").prop("disabled", true);
                    } else {
                        $("#next-button").prop("disabled", false);
                    }
                }
                // Check state of checkboxes and reinit state if needed
                $(this).filter(":checked").each(function(i) {
                    $(this).parent().parent().toggleClass(options.selectedClass);
                    updateCounter();
                });
                $(options.allToggle).click(function() {
                    checker($(this).prop("checked"));
                    updateCounter();
                });
                lastChecked = null;
                $(actionCheckboxes).click(function(event) {
                    if (!event) { var event = window.event; }
                    var target = event.target ? event.target : event.srcElement;
                    if (lastChecked && $.data(lastChecked) != $.data(target) && event.shiftKey == true) {
                        var inrange = false;
                        $(lastChecked).prop("checked", target.checked)
                            .parent().parent().toggleClass(options.selectedClass, target.checked);
                        $(actionCheckboxes).each(function() {
                            if ($.data(this) == $.data(lastChecked) || $.data(this) == $.data(target)) {
                                inrange = (inrange) ? false : true;
                            }
                            if (inrange) {
                                $(this).prop("checked", target.checked)
                                    .parent().parent().toggleClass(options.selectedClass, target.checked);
                            }
                        });
                    }
                    $(target).parent().parent().toggleClass(options.selectedClass, target.checked);
                    lastChecked = target;
                    updateCounter();
                });
            }
            /* Setup plugin defaults */
            $.fn.actions.defaults = {
                counterContainer: "span.action-counter",
                allToggle: "#action-toggle",
                selectedClass: "selected"
            }
        })($);
        $(function() {
            $("tr input.action-select").actions();
        });
        $('.dataTable').dataTable({
            "dom": "<'row'<'col-md-3'l><'col-md-3'B><'col-md-4'f>r>t<'row'<'col-md-3'i><'col-md-5'p>>",
            "stateSave": true,
            "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
            "drawCallback": function( settings ) {
                $("tr input.action-select").actions();
            },
            "pageLength": 100,
            "colReorder": true,
            "buttons": [ {
              extend: 'collection',
              text: 'Export',
              buttons: ["copy", "csv", "print"]
            },
            { extend: 'collection',
              text: 'Columns',
              buttons: [
                { extend: 'columnsToggle',
                  columns: '.toggle' },
                { extend: 'columnToggle',
                  text: 'Vote details',
                  columns: '.votes'
                }
            ]
        }]});
    </script>
{% endblock %}