cityssm/lottery-licence-manager

<%- include('_header'); -%>

<div class="columns is-variable is-4-mobile is-4-tablet is-block-print" id="is-site-layout">
  <%- include("_sideMenu-organizations"); -%>
  <div class="column">
    <nav class="breadcrumb">
      <ul>
        <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
        <li>
          <a href="<%= urlPrefix %>/organizations">
            <span class="icon is-small"><i class="fas fa-users" aria-hidden="true"></i></span>
            <span>Organizations</span>
          </a>
        </li>
        <li class="is-active"><a href="#" aria-current="page">Active Reminders</a></li>
      </ul>
    </nav>

    <h1 class="title is-1">
      Active Organization Reminders
    </h1>

    <%
      let reminders_noDate = "";
      let reminders_past = "";
      let reminders_upcoming = "";

      let count_noDate = 0;
      let count_past = 0;
      let count_upcoming = 0;

      let currentDate = new Date();
      let currentDateInteger = dateTimeFns.dateToInteger(currentDate);

      for (const reminder of reminders) {

        const reminderType = configFunctions.getReminderType(reminder.reminderTypeKey);

        let dueDateDiffHTML = "";

        if (reminder.dueDateString !== "" && reminder.dueDate < currentDateInteger) {
          const dueDate = dateTimeFns.dateStringToDate(reminder.dueDateString);
          dueDateDiffHTML = "<br /><span class=\"is-size-7\">" + dateDiff(dueDate, currentDate).formatted + " ago</span>";
        }

        const trHTML = "<tr" +
          (reminder.dueDate === currentDateInteger
            ? " class=\"has-background-primary-light\""
            : "") +
          ">" +
          "<td>" +
          (reminder.dueDateString === ""
            ? "(No Date Set)"
            : reminder.dueDateString + dueDateDiffHTML) +
          "</td>" +
          "<td>" +
            "<a data-tooltip=\"View Organization\" href=\"" + urlPrefix + "/organizations/" + reminder.organizationID + "\">" +
            htmlFns.escapeHTML(reminder.organizationName) +
            "</a>" +
          "</td>" +
          "<td>" +
          (reminderType
            ? htmlFns.escapeHTML(reminderType.reminderType)
            : reminder.reminderTypeKey) +
          "</td>" +
          "<td>" +
          (reminder.reminderStatus
            ? htmlFns.escapeHTML(reminder.reminderStatus)
            : "") +
          "</td>" +
          "</tr>";

        if (reminder.dueDate == null) {
          reminders_noDate += trHTML;
          count_noDate += 1;

        } else if (reminder.dueDate < currentDateInteger) {
          reminders_past += trHTML;
          count_past += 1;

        } else {
          reminders_upcoming += trHTML;
          count_upcoming += 1;
        }
      }

      const theadHTML = "<thead><tr>" +
        "<th class=\"has-width-1 is-nowrap\">Reminder Date</th>" +
        "<th class=\"is-half-width\">Organization</th>" +
        "<th>Reminder Type</th>" +
        "<th>Status</th>" +
        "</tr></thead>";
    %>

    <% if (count_past > 0) { %>
      <h2 class="title is-3">
        <a class="remindersTableToggle" data-table="past" href="#">
          <i class="fas fa-caret-down" aria-hidden="true"></i>
          Expired Reminders
          <span class="tag is-danger is-medium">
            <%= count_past %>
          </span>
        </a>
      </h2>
      <table class="table is-fullwidth is-striped is-hoverable is-hidden has-sticky-header" id="remindersTable--past">
        <%- theadHTML %>
        <tbody>
          <%- reminders_past %>
        </tbody>
      </table>
    <% } %>

    <% if (count_upcoming > 0) { %>
      <h2 class="title is-3">
        <a class="remindersTableToggle" data-table="upcoming" href="#">
          <i class="fas fa-caret-down" aria-hidden="true"></i>
          Upcoming Reminders
          <span class="tag is-info is-medium">
            <%= count_upcoming %>
          </span>
        </a>
      </h2>
      <table class="table is-fullwidth is-striped is-hoverable has-sticky-header" id="remindersTable--upcoming">
        <%- theadHTML %>
        <tbody>
          <%- reminders_upcoming %>
        </tbody>
      </table>
    <% } %>

    <% if (count_noDate > 0) { %>
      <h2 class="title is-3">
        <a class="remindersTableToggle" data-table="noDate" href="#">
          <i class="fas fa-caret-down" aria-hidden="true"></i>
          No Reminder Date Set
          <span class="tag is-warning is-medium">
            <%= count_noDate %>
          </span>
        </a>
      </h2>
      <table class="table is-fullwidth is-striped is-hoverable is-hidden has-sticky-header" id="remindersTable--noDate">
        <%- theadHTML %>
        <tbody>
          <%- reminders_noDate %>
        </tbody>
      </table>
    <% } %>

    <% if (reminders.length === 0) { %>
      <div class="message is-info">
        <p class="message-body">
          There are no reminders to show.
        </p>
      </div>
    <% } %>
  </div>
</div>

<%- include('_footerA'); -%>

<script src="<%= urlPrefix %>/javascripts/organization-reminders.min.js"></script>

<%- include('_footerB'); -%>