$(document).ready(function() {
    showAllTopics()
});


// step 7.2
function showAllTopics() {
  var table_content = `
        <tr>
            <th>Topic Name</th>
            <th>Study Hour</th>
            <th>Chosen Status</th>
            <th>Operation</th>
        </tr>
    `;

  $.getJSON("/users/get_table", function (data) {
    $.each(data, function () {
      // 1. for each row tag, add the attribute class=“highlight” if the status field of the topic is “yes”

      // 2. the last <td> element contains an <a> element with text “add” or “remove”
      //    (if status field equals to “yes”, text should be “remove”; otherwise, text should be “add”)

      // 3. The table row representations should be all concatenated into the string table_content.
      table_content += `
          <tr ${this.status == "yes" ? 'class="highlight"' : ""}>
            <td>${this.name}</td>
            <td>${this.hour}</td>
            <td>${this.status}</td>
            <td>
              ${
                this.status == "yes"
                  ? `<a  href="#" class="operation" rel="${this._id}" >remove</a>`
                  : `<a  href="#" class="operation" rel="${this._id}" >add</a>`
              }
            </td>
          </tr>`;
    });

    // Finally, use $(‘#plan_table’).html() to set HTML content of the table element of id “plan_table” to table_content.
    $("#plan_table").html(table_content);
  });
}

// step 8.2
function operateTopic(event) {
  // event.preventDefault() to prevent opening the link “#” when the hyperlink is clicked
  event.preventDefault();

  // retrieve _id of the topic that you are going to add/remove from the ‘rel’ attribute using $(this).attr(‘rel’)
  var _id = $(this).attr("rel");

  // use $.ajax() to send a HTTP PUT request for “/users/update_status” with JSON data
  // {_id: _id field retrieved, op: operation retrieved};
  $.ajax({
    type: "PUT",
    url: `/users/update_status`,
    data: {
      _id: _id,
      // retrieve the operation that your are going to perform using $(this).html().
      op: $(this).html(),
    },
    dataType: "JSON",
  }).done(function (response) {
    if (response.msg === "Successfully updated!") {
      // alert the response message and call showAllTopics() to refresh the topic table.
      alert("Successfully updated!");

      // call showAllTopics() to refresh the topic table.
      showAllTopics();
    } else {
      alert(response.msg);
    }
  });
}

$("#plan_table").on("click", ".operation", operateTopic);


// step 9.2
function deleteTopic(event) {
  event.preventDefault();

  var topic_name = $("#input_name").val();

  // check if the topic_name is valid
  if ($(`td:contains("${topic_name}")`).length > 0) {
    // If the length of the list is not 0, use $.ajax() to send a HTTP DELETE request for “/users/delete_topic/:topic_name”;
    $.ajax({
      type: "DELETE",
      url: `/users/delete_topic/${topic_name}`,
    }).done(function (res) {
      if (res.msg == "Successfully deleted!") {
        // success delete,
        // 1. call showAllTopics() to refresh the topic table.
        // 2. alert response message
        showAllTopics();
        alert(res.msg);
      }
      // clear after delete operation
      $("#input_name").val("");
    });
  } else {
    // alert the message “No such topic in the table!”
    alert("No such topic in the table!");
  }
}

$("#submit_delete").on('click', deleteTopic)