<!--
  Local values passed to this page:
  host: Host address
  username: Name of the current user
  message: Alert message from the server in parsed form
  tickets[]: Map of all tickets obtained from the database
-->

<!DOCTYPE html>
<html>
  <head>
    <%- include('./partials/head'); %> <%- include('./partials/script'); %>
    <script>
      let placeholders = [],
        editId = "",
        form,
        table,
        inputs,
        addButton;
      const fieldNames = ["ticketNo", "type", "name", "icNo"];
      $(() => {
        form = document.getElementById("ticketForm");
        tableBody = document.getElementById("ticketsTableBody");
        inputs = form.getElementsByTagName("input");
        addButton = document.getElementById("addButton");
        new DataTable("#ticketsTable", {
          scrollY: "450px",
          scrollCollapse: false,
          paging: false,
        });
      });
      function onEditButtonClicked(id) {
        editId = id;
        const tr = document.getElementById(id);
        inputs[0].value = "edit";
        inputs[1].value = id;
        const tds = tr.getElementsByTagName("td");
        for (let i = 0; i < tds.length - 1; i++) {
          placeholders[i] = tds[i].innerText;
          tds[i].innerHTML = `<input name="${fieldNames[i]}" \
          type="text" value="${placeholders[i]}" \
          class="form-control input-md" required/>`;
        }
        tds[tds.length - 1].innerHTML =
          '<button name="submit" class="btn btn-success">Edit</button>\
          <a role="button" class="btn btn-danger" onclick="onCancelButtonClicked()">Cancel</button>';
      }

      function onCancelButtonClicked() {
        if (editId === "") return;
        const tr = document.getElementById(editId);
        const inputs = form.getElementsByTagName("input");
        inputs[0].value = "";
        inputs[1].value = "";
        const tds = tr.getElementsByTagName("td");
        for (let i = 0; i < tds.length - 1; i++) {
          tds[i].innerHTML = placeholders[i];
        }
        tds[
          tds.length - 1
        ].innerHTML = `<a role="button" class="btn btn-info" onclick="onEditButtonClicked('${editId}')">Edit</a>\
          <a role="button" class="btn btn-danger" onclick="onDeleteButtonClicked('${editId}')" >Delete</a>`;
      }

      function onDeleteButtonClicked(id) {
        $("#ticketDeleteId").attr("value", id);
        $("#ticketDeleteForm").trigger("submit");
      }

      function onQRButtonClicked(id, ticketNo) {
        $("#QR_ticketId").attr("value", id);
        $("#QR_ticketNo").attr("value", ticketNo);
        $("#QR_ticketForm").trigger("submit");
      }

      function onPNGButtonClicked(id, ticketNo) {
        $("#PNG_ticketId").attr("value", id);
        $("#PNG_ticketNo").attr("value", ticketNo);
        $("#PNG_ticketForm").trigger("submit");
      }

      function onPDFButtonClicked(id, ticketNo) {
        $("#PDF_ticketId").attr("value", id);
        $("#PDF_ticketNo").attr("value", ticketNo);
        $("#PDF_ticketForm").trigger("submit");
      }

      function onAddButtonClicked() {
        const tr = document.createElement("tr");
        tr.id = "newTicket";
        inputs[0].value = "add";
        inputs[1].value = "";
        tr.innerHTML = `<td><input name="${fieldNames[0]}" \
          type="text" class="form-control input-md" required/></td>\
          <td><input name="${fieldNames[1]}" \
          type="text" class="form-control input-md" required/></td>\
          <td><input name="${fieldNames[2]}" \
          type="text" class="form-control input-md" required/></td>\
          <td><input name="${fieldNames[3]}" \
          type="text" class="form-control input-md" required/></td>\
          <td><button name="submit" class="btn btn-success">Add</button>\
          <a role="button" class="btn btn-danger" onclick="onCancelAddButtonClicked(${addButton})">\
          Cancel</button></td>`;

        tableBody.prepend(tr);
        addButton.classList.add("disabled");
      }

      function onCancelAddButtonClicked() {
        const tr = document.getElementById("newTicket");
        tr.remove();
        addButton.classList.remove("disabled");
      }
    </script>
    <title>Ticket | OTiS</title>
  </head>

  <body>
    <div class="container">
      <%- include('./partials/navbar'); %>
      <!-- Set active navigation button -->
      <script>
        document.getElementById("navbar_ticket").className = "nav-link active";
      </script>
      <!-- message (if any) -->
      <%- message %>
      <div class="jumbotron">
        <form id="ticketForm" method="post" action="/ticket/api">
          <input type="hidden" name="action" value="" />
          <input type="hidden" name="id" value="" />
          <table
            id="ticketsTable"
            class="table table-bordered table-sm"
            cellspacing="0"
            width="100%"
          >
            <thead>
              <tr>
                <th id="ticketNo" class="th-sm" scope="col">Ticket No.</th>
                <th id="type" class="th-sm" scope="col">Type</th>
                <th id="name" class="th-sm" scope="col">Name (with title)</th>
                <th id="icNo" class="th-sm" scope="col">Identification No.</th>
                <th id="action" class="th-sm" scope="col">Action</th>
              </tr>
            </thead>
            <tbody id="ticketsTableBody">
              <% tickets.forEach((ticket) => { %>
              <tr id="<%= ticket.id %>">
                <td><%= ticket.ticketNo %></td>
                <td><%= ticket.fields.type %></td>
                <td><%= ticket.fields.name %></td>
                <td><%= ticket.fields.icNo %></td>
                <td>
                  <a
                    role="button"
                    class="btn btn-info"
                    onclick="onEditButtonClicked('<%= ticket.id %>')"
                  >
                    Edit
                  </a>
                  <a
                    role="button"
                    class="btn btn-danger"
                    onclick="onDeleteButtonClicked('<%= ticket.id %>')"
                  >
                    Delete </a
                  ><br />
                  <a
                    role="button"
                    class="btn btn-success"
                    onclick="onQRButtonClicked('<%= ticket.id %>', '<%= ticket.ticketNo %>')"
                  >
                    QR
                  </a>
                  <a
                    role="button"
                    class="btn btn-success"
                    onclick="onPNGButtonClicked('<%= ticket.id %>', '<%= ticket.ticketNo %>')"
                  >
                    PNG
                  </a>
                  <a
                    role="button"
                    class="btn btn-success"
                    onclick="onPDFButtonClicked('<%= ticket.id %>', '<%= ticket.ticketNo %>')"
                  >
                    PDF
                  </a>
                </td>
              </tr>
              <% }); %>
            </tbody>
          </table>
        </form>
        <form id="ticketDeleteForm" method="post" action="/ticket/api">
          <input type="hidden" name="action" value="delete" />
          <input id="ticketDeleteId" type="hidden" name="id" value="" />
        </form>
        <form
          id="QR_ticketForm"
          method="post"
          action="/ticket/api"
          target="_blank"
        >
          <input type="hidden" name="action" value="qr" />
          <input id="QR_ticketId" type="hidden" name="id" value="" />
          <input id="QR_ticketNo" type="hidden" name="ticketNo" value="" />
        </form>
        <form
          id="PNG_ticketForm"
          method="post"
          action="/ticket/api"
          target="_blank"
        >
          <input type="hidden" name="action" value="png" />
          <input id="PNG_ticketId" type="hidden" name="id" value="" />
          <input id="PNG_ticketNo" type="hidden" name="ticketNo" value="" />
        </form>
        <form
          id="PDF_ticketForm"
          method="post"
          action="/ticket/api"
          target="_blank"
        >
          <input type="hidden" name="action" value="pdf" />
          <input id="PDF_ticketId" type="hidden" name="id" value="" />
          <input id="PDF_ticketNo" type="hidden" name="ticketNo" value="" />
        </form>
        <a
          id="addButton"
          role="button"
          class="btn btn-success"
          onclick="onAddButtonClicked(this)"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-plus"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"
            />
          </svg>
          Add new ticket...
        </a>
      </div>
      <%- include('./partials/footer'); %>
    </div>
    <!-- /container -->
  </body>
</html>
