{{ template "base" . }}

{{ define "content" }}

<h1 style="display: none;" id="categoryId">{{.CurrentGroupId}}</h1>

<!-- Main -->
<main class="d-flex flex-wrap">

<!-- Sidebar -->
<div id="sidebar" class="border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
  <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
      <img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg">
      <span class="fs-5 fw-semibold">Categories</span>
  </a>

  <div class="list-group list-group-flush border-bottom scrollarea">
  {{ range .Groups  }}
      <a id="group-{{.ID}}" href="/group/{{.ID}}" class="list-group-item list-group-item-action py-3 lh-sm {{if eq .ID $.CurrentGroupId}} active {{end}}" aria-current="true" ondragover="allowDrop(event);" ondrop="drop(event);">
        <div id="group-{{.ID}}" class="d-flex w-100 align-items-center justify-content-between">
          <strong id="group-{{.ID}}" class="mb-1">{{ .Name }}</strong>
          <small id="group-{{.ID}}">{{ .TimeCreated }}</small>
        </div>
        {{ if not .Removable }}
          <div id="group-{{.ID}}" class="col-10 mb-1 small">Not removable</div>
        {{ end }}
      </a>
  {{ end }}
  </div>
</div>


    
<div class="p-2 flex-grow-1">
    <form action="javascript:void(0);">
        <div class="container">
        <div class="row">
                <div class="col">
                    <input type="text" class="form-control" id="new-todo-text" placeholder="TODO text">
                </div>
                <div class="col">
                    <label for="new-todo-due">Due</label>
                    <input aria-placeholder="Due" type="date" name="new-todo-due" id="new-todo-due" placeholder="Due">
                </div>
                <div class="col">
                    <button id="new-todo-submit" class="btn btn-primary">Add</button>
                    <button class="btn btn-secondary" id="show-done">Show Done</button>
                </div>
            </div>
        </div>
    </form>
    
    <div class="container text-center">
      <!-- Due -->
      <table class="table table-hover" id="due-todos">
        <thead>
          <th>ToDo</th>
          <th>Created</th>
          <th>Due</th>
        </thead>
        <tbody class="text-break">
          {{ range .Todos }}
          {{ if not .IsDone }}
            <tr draggable="true" id="todo-{{.ID}}" ondragstart="dragStart(event);">
              <td class="todo-text">{{ .Text }}</td>
              <td class="todo-created">{{ .TimeCreated }}</td>
              <td class="todo-due">{{ .Due }}</td>
              <td class="todo-due-unix" style="display: none;">{{ .DueUnix }}</td>
              <td>
                <button class="btn btn-success" onclick="markAsDoneRefresh('{{.ID}}');"><img src='/static/images/check.svg'></button>
                <button class="btn btn-danger" onclick="deleteTodoRefresh('{{.ID}}');"><img src='/static/images/trash3-fill.svg'></button>
              </td>
            </tr>
          {{ end }}
          {{ end }}
        </tbody>
      </table>

      <!-- Completed -->
      <table class="table table-hover" style="display: none;" id="completed-todos">
        <thead>
          <th>ToDo</th>
          <th>Created</th>
          <th>Completed</th>
        </thead>
        <tbody class="text-break">
          {{ range .Todos }}
          {{ if .IsDone }}
            <tr>
              <td>{{ .Text }}</td>
              <td>{{ .TimeCreated }}</td>
              <td>{{ .CompletionTime }}</td>
              <td>
                <button class="btn btn-danger" onclick="deleteTodoRefresh('{{.ID}}');"><img src='/static/images/trash3-fill.svg'></button>
              </td>
            </tr>
          {{ end }}
          {{ end }}
        </tbody>
      </table>
    </div>
</div>
</main>

<script>
async function markAsDoneRefresh(id) {
  await markAsDone(id);
  window.location.reload();
}

async function deleteTodoRefresh(id) {
  await deleteTodo(id);
  window.location.reload();
}

async function showDone() {
  // Hide not done, show done
  let completedTodos = document.getElementById("completed-todos");
  completedTodos.style.display = "table";

  let dueTodos = document.getElementById("due-todos");
  dueTodos.style.display = "none";
}

function allowDrop(event) {
  event.preventDefault();
}

function dragStart(event) {
  event.dataTransfer.setData("text", event.target.id);
  event.dataTransfer.effectAllowed = "move";
}

async function drop(event) {
  event.preventDefault();

  var todoPageId = event.dataTransfer.getData("text");
  let draggedTodo = document.getElementById(todoPageId);
  let todoId = todoPageId.split("-")[1];
  let targetGroupId = event.target.id.split("-")[1];
  if (targetGroupId == document.getElementById("categoryId").innerText) {
    // Do nothing
    return;
  }
  console.log("passed");

  // Add a copy of this ToDo in the corresponding group
  let result = await postNewTodo({
    text: draggedTodo.getElementsByClassName("todo-text")[0].innerText,
    groupId: Number(targetGroupId),
    dueUnix: Number(draggedTodo.getElementsByClassName("todo-due-unix")[0].innerText),
  });

  // Delete this ToDo in this group
  await deleteTodoRefresh(todoId);
}

document.addEventListener('DOMContentLoaded', async function() {
    document.getElementById("new-todo-text").focus();

    let showDoneButton = document.getElementById("show-done");
    showDoneButton.addEventListener("click", (event) => {
        // Rename the button
        showDoneButton.innerText = "Show To Do";
        showDoneButton.className = "btn btn-success";
        // Show done
        showDone();

        // Make it "reset to default"
        showDoneButton.addEventListener("click", (event) => {
            location.reload();
        });
    });


    // "Add" button
    document.getElementById("new-todo-submit").addEventListener("click", async (event) => {
        let newTodoTextInput = document.getElementById("new-todo-text");
        let newTodoText = newTodoTextInput.value;
        if (newTodoText.length < 1) {
            newTodoTextInput.setCustomValidity("At least one character is needed!");
            return;
        } else {
            newTodoTextInput.setCustomValidity("");
        }
        newTodoTextInput.value = "";

        let newTodoDueInput = document.getElementById("new-todo-due");
        let dueTimeStamp = Date.parse(newTodoDueInput.value) / 1000;

        let groupId = document.getElementById("categoryId").innerText;

        // Make a request
        let response = await postNewTodo(
          {text: newTodoText, groupId: Number(groupId), dueUnix: Number(dueTimeStamp)}
        );
        if (response.ok) {
            location.reload();
        }
    });
});
</script>

{{ end }}