<%# Admin page to manage announcements %> <%# ARGUMENTS: announcements - an
array of the current announcements%> <%- include("../partials/header") -%> <%-
include("../partials/navigationPrivate") -%> <%# Backend queries %>

<script>
  $(document).ready(function() {
    // hide error msg
    $('#error').hide(0);
    $('#success').hide(0);

    $('#submit').click(function() {
      // free response text values
      let author = $('#author').val();
      let title = $('#announcement-title').val();
      let text = $('#announcement-text').val();

      $.post(
        '/admin/addAnnouncement', {
          author,
          title,
          text,
        },
        (data) => {
          if (data.status == 'Error') {
            $('#success').hide(100);
            $('#error').show(500);
          } else {
            $('#error').hide(100);
            $('#success').show(500);

            $('#author').val('');
            $('#announcement-title').val('');
            $('#announcement-text').val('');
          }
        }
      );
    });
  });
</script>

<h1 class="my-5 container display-2 text-center">Mutorials Announcements</h1>

<div class="jumbotron container">
  <div class="container">
    <h3 class="mb-2">Add Mutorials Announcement:</h3>

    <div class="form-group row my-1">
      <label for="author" class="col-sm-3 col-form-label">Author</label>
      <div class="col-sm-9">
        <input class="form-control" type="text" placeholder="What is your name?" id="author" />
      </div>
    </div>
    <div class="form-group row my-1">
      <label for="announcement-title" class="col-sm-3 col-form-label">Announcement Title</label>
      <div class="col-sm-9">
        <input class="form-control" type="text" placeholder="What is the title of the announcement?" id="announcement-title" />
      </div>
    </div>
    <div class="form-group row my-1">
      <label for="announcement-text" class="my-1 col-sm-3">Announcement Text</label>
      <div class="col-sm-9">
        <textarea class="form-control my-1" id="announcement-text" rows="3" placeholder="Type in an announcement - use markdown for line breaks and text formatting"></textarea>
      </div>
    </div>

    <div class="my-2 alert alert-success" id="success">
      Announcement added! Please refresh the page
    </div>
    <div class="my-2 alert alert-danger" id="error">
      Announcement failed to be added
    </div>

    <input class="btn btn-primary mt-3" value="Add Announcement" type="button" id="submit" />
  </div>

  <h3 class="text-center mt-4 mb-3">Past 10 Announcements</h3>
  <table class="text-center table">
    <thead>
      <tr>
        <th scope="col-1">Date</th>
        <th scope="col-3">Title</th>
        <th scope="col-8">Text</th>
      </tr>
    </thead>
    <tbody>
      <% announcements.forEach((announcement)=> { %>
      <tr>
        <th scope="row"><%= announcement.date %></th>
        <td><%= announcement.title %></td>
        <td><%- announcement.text %></td>
      </tr>
      <% }); %>
    </tbody>
  </table>
</div>

<%- include("../partials/footer") -%>
