{% extends "frontend/master.html" %}
{% load i18n pagination_tags common_tags frontend_notification_tags %}

{% block extra_header %}
    <script type="text/javascript" language="javascript">
        function toggleChecked(status) {
            $(".checkbox").each( function() {
                $(this).prop("checked", status);
            })
        }

        $(document).ready(function() {
            $('#ListForm').submit(function(e) {

                var currentForm = this;
                e.preventDefault();

                var $fields = $(this).find('input[name="select"]:checked');

                if (!$fields.length) {
                    msg = '{% trans "you must check at least one box!"|capfirst %}';
                    bootbox.alert(msg);
                    return false; // The form will *not* submit
                }
                else
                {
                    var confirm_string;
                    if(document.location.href.search("/user_notification/") != -1) {
                        confirm_string = $fields.length + '{% trans " notification(s) are going to be deleted?" %}';

                        if(document.getElementById('id_mark_read') && document.getElementById('id_mark_read').value == 'true') {
                            confirm_string = $fields.length + '{% trans " notification(s) are going to be marked as read?" %}';
                        }
                    }
                    bootbox.confirm(confirm_string, function(result) {
                        if (result) {
                            currentForm.submit();
                        }
                    });
                    return false;
                }
            });
        });
    </script>
{% endblock %}

{% block content_header %}
    <h1>{% trans "notifications"|capfirst %} <small></small></h1>
{% endblock %}

{% block content %}
{% if msg_note %}
    <div class="alert alert-success">
        <strong>{% trans "alert"|title %} : </strong>  {{ msg_note|capfirst }}
    </div>
{% endif %}


<div class="row">
    <div class="col-md-10 col-xs-8">
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            {% trans "action"|capfirst %} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" onclick="make_read_button()">{% trans "mark as read"|capfirst %}</a></li>
                <li><a href="#" onclick="delete_button()">{% trans "delete notifications"|capfirst %}</a></li>
            </ul>
        </div>
        <a class="btn btn-info" href="#" onclick="mark_read_all_button()">{% trans "mark all as read"|capfirst %}</a>
    </div>
    <div class="col-md-2 col-xs-4">
        <form role="form" method="post" action="." enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.notification_list }}
        </form>
    </div>
</div>
<br/>
<div class="row">
    <div class="col-md-12">
        <form method="POST" action="/notification_del_read/0/" enctype="multipart/form-data" id="ListForm">
            {% csrf_token %}
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                    <tr>
                        <th><input type="checkbox" onclick="toggleChecked(this.checked)"></th>
                        <th>{% sort_link trans "Message" col_name_with_order.message %}</th>
                        <th>{% sort_link trans "Notice type" col_name_with_order.notice_type %}</th>
                        <th>{% sort_link trans "Sender" col_name_with_order.sender %}</th>
                        <th>{% sort_link trans "Date" col_name_with_order.added %}</th>
                        <th>{% trans "action"|capfirst %}</th>
                    </tr>
                    </thead>
                    {% if all_user_notification %}
                        {% autopaginate all_user_notification 10 %}
                        {% for row in user_notification %}
                            <tr>
                                <td><input type="checkbox" name="select" class="checkbox" value="{{ row.id }}" /></td>
                                <td>{{ row.message }}</td>
                                <td>{{ row.notice_type }}</td>
                                <td>{{ row.sender }}</td>
                                <td>{{ row.added }}</td>
                                <td>
                                    <button class="btn btn-default btn-xs" type="button" onclick="change_status({{ row.id }})">
                                        <span class="glyphicon {% if row.unseen %}glyphicon-star{% else %}glyphicon-ok{% endif %}"></span> {{ row.unseen|notification_status }}
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="6" align="center">
                                {% trans "no records found"|title %}
                            </td>
                        </tr>
                    {% endif %}
                </table>
            </div>
            {% if all_user_notification %}
                {% paginate %}
            {% endif %}
            <div class="text-right">
                {% trans "total"|capfirst %} : {{ user_notification_count }}
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    function change_status(id){
        window.location.replace("../update_notification/" + String(id) + "/");
    }
    function make_read_button()
    {
        $('<input>').attr({
            type: 'hidden',
            id: 'id_mark_read',
            name: 'mark_read',
            value: 'true',
        }).appendTo('#ListForm');

        $('#ListForm').submit();
    }
    function delete_button()
    {
        $('<input>').attr({
            type: 'hidden',
            id: 'id_mark_read',
            name: 'mark_read',
            value: 'false',
        }).appendTo('#ListForm');

        $('#ListForm').submit();
    }
    function mark_read_all_button()
    {
        window.location.replace("/user_notification/?notification=mark_read_all");
    }
</script>

{% endblock %}