{% extends 'base.html' %}
{% load static %}

{% block extraheadcontent %}
  <link rel="stylesheet" href="{% static 'css/jquery-ui.min.css' %}" type='text/css'>
  <link rel="stylesheet" href="{% static 'css/jquery-ui.structure.min.css' %}" type='text/css'>
  <link rel="stylesheet" href="{% static 'css/jquery-ui.theme.min.css' %}" type='text/css'>
  <script src="{% static 'js/jquery-ui.min.js' %}">
  </script>
{% endblock %}

{% block title %} Pending Notifications {% endblock %}

{% block pagecontent %}

<div class="row">
  <!-- Breadcrumbs -->
    <div class="col-md-12">
        <ul class="breadcrumb" id="breadcrumb">
            <li><a href="{% url 'landing' %}">Home</a></li><span class="divider">&rarr;</span>
            <li><a href="{% url 'manage' %}">Management</a></li><span class="divider">&rarr;</span>
            <li>Pending To-do Notifications</li>
        </ul>
    </div>
</div>

<div > <!--class="form-inline" -->
  <b><big>Actions: </big></b>
  <button id="delete-notification" class="btn btn-default" type="button">Delete Selected</button>
  <button id="select-notification" class="btn btn-default" type="button">Create Notification ...</button>
  <button id="email-notification" class="btn btn-default" type="button">Email reminders ...</button>
</div>

<!-- include SRtool Metadata/Notification -->
{% include "srtool_metadata_include.html" with default_category="FYI" default_url="manage_notifications" %}

<div class="row">
  <div class="col-md-12">
    <div class="page-header">
      <h1 class="top-air" data-role="page-title"></h1>
    </div>

    {# xhr_table_url is just the current url so leave it blank #}
    {% url '' as xhr_table_url %}
    {% include 'toastertable.html' %}
  </div>
</div>

  <!-- Javascript support -->
  <script>
    var selected_notifyedit=false;

    $(document).ready(function () {
      var tableElt = $("#{{table_name}}");
      var titleElt = $("[data-role='page-title']");

      tableElt.on("table-done", function (e, total, tableParams) {
        var title = "Pending Notifications";

        if (tableParams.search || tableParams.filter) {
          if (total === 0) {
            title = "Pending Notifications found";
          }
          else if (total > 0) {
            title = total + " Notification" + (total > 1 ? 's' : '') + " found";
          }
        }

        titleElt.text(title);
      });

      function onCommitAjaxSuccess(data, textstatus) {
        if (window.console && window.console.log) {
          console.log("XHR returned:", data, "(" + textstatus + ")");
        } else {
          alert("NO CONSOLE:\n");
          return;
        }
        if (data.error != "ok") {
          alert("error on request:\n" + data.error);
          return;
        } else if (('results_msg' in data) && ("" != data.results_msg)) {
          alert("Results: " + data.results_msg);
        }
        // reload the page with the updated tables
        location.reload(true);
      }

      function onCommitAjaxError(jqXHR, textstatus, error) {
        console.log("ERROR:"+error+"|"+textstatus);
        alert("XHR errored1:\n" + error + "\n(" + textstatus + ")");
      }

      /* ensure cookie exists {% csrf_token %} */
      function postCommitAjaxRequest(reqdata) {
        var ajax = $.ajax({
          type:"POST",
          data: reqdata,
          url:"{% url 'xhr_notifications'%}",
          headers: { 'X-CSRFToken': $.cookie("csrftoken")},
          success: onCommitAjaxSuccess,
          error: onCommitAjaxError,
        })
      }

      $('#delete-notification').click(function(){
        notify_list = [];
        $('#notificationstable input').each(function(){
          if ($(this).is(':checked')) {
            notify_list.push($(this).prop('value'));
          }
        });
        notify_list = notify_list.join(",");
	    if ("" == notify_list) {
		  alert("No Notifications were selected");
		  return;
	    }
        if ("" != notify_list) {
          postCommitAjaxRequest({
            "action"      : 'delete-notifications',
            "notify_list" : notify_list,
          });
        }
      });

      $('#select-notification').click(function(){
          if (selected_notifyedit) {
              selected_notifyedit=false;
              $("#details-notify-edit").slideUp();
				$("#display-status").slideDown();
              document.getElementById("select-notification").innerText = "Create Notification ...";
              $("#select-notification").removeClass("blueborder");
          } else {
              selected_notifyedit=true;
				$("#display-status").slideUp();
              $("#details-notify-edit").slideDown();
              document.getElementById("select-notification").innerText = "Close notification";
              $("#select-notification").addClass("blueborder");
              document.getElementById("select-category-notify").focus();
          }
      });

      $('#submit-notification').click(function(){
          var category=$('#select-category-notify').val();
          var priority=$('#select-priority-notify').val();
          var note=$('#notification-note').val().trim();
          var url=$('#notification-url').val().trim();
		  var user_list=[];
		  $('input[name="notification-users"]').each(function(){
		    if ($(this).is(':checked')) {
		      user_list.push($(this).prop('value'));
		    }
		  });
          user_list = user_list.join(",");
		  if ("" == user_list) {
		    alert("No users were selected");
		    return;
		  }
          postCommitAjaxRequest({
              "action"        : 'submit-notification',
              "category"      : category,
              "priority"      : priority,
              "note"          : note,
              "url"           : url,
              "users"         : user_list,
              });
      });

      $('#email-notification').click(function(){
        notify_list = [];
        $('#notificationstable input').each(function(){
          if ($(this).is(':checked')) {
            notify_list.push($(this).prop('value'));
          }
        });
        notify_list = notify_list.join(",");
	    if ("" == notify_list) {
		  alert("No Notifications were selected");
		  return;
	    } else {
          postCommitAjaxRequest({
            "action"      : 'email-notifications',
            "notify_list" : notify_list,
          });
        }
      });


    }); <!-- $(document).ready() -->

  </script>
{% endblock %}