{% extends "base.html" %}
{% block head %}
  {{ super() }}
  
  <link rel="stylesheet" href="assets/extensions/dragula/dragula.min.css" />
  <link rel="stylesheet" href="assets/extensions/quill/quill.snow.css" />
  <link rel="stylesheet" href="assets/extensions/quill/quill.bubble.css" />
  
  <link
    rel="stylesheet"
    href="./assets/compiled/css/ui-widgets-todolist.css"
  />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script>
    var group_id = 0;
  </script>
{% endblock %}
{% block content %}
<section class="tasks">
  {{ current_user.render_tasklist() | safe}}
</section>

<!--Task Add Modal -->
<div
class="modal fade text-left"
id="modal-add-task"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel1"
aria-hidden="true"
>
  <div
    class="modal-dialog modal-dialog-scrollable modal-xl"
    role="document"
  >
    <div class="modal-content bg-white">
      <div class="modal-header">
        <h5 class="modal-title text-black" id="myModalLabel1">
          Taken toevoegen/aanpassen voor <span id="modalAddTasksGroupName"></span>
        </h5>
        <button
          type="button"
          class="close rounded-pill"
          data-bs-dismiss="modal"
          aria-label="Close"
        >
          <i data-feather="x"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="accordion" id="accordionExample">
          <div class="accordion-item">
            <h2 class="accordion-header" id="heading-syntax">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapse-syntax"
                aria-expanded="false"
                aria-controls="collapse-syntax"
              >
                Syntax
              </button>
            </h2>
            <div
              id="collapse-syntax"
              class="accordion-collapse collapse"
              aria-labelledby="collapse-syntax"
              data-bs-parent="#accordionExample"
            >
              <div class="accordion-body">
                  <pre style="color: black;">
[Task creatation]
ACTIE: Wat moet er gedaan worden
ACTIE Naam: Wat moet deze persoon doen 
ACTIE Naam1, Naam2: Wat moeten deze personen doen 
ACTIES Naam1, Naam2: Wat moeten deze personen doen 
ACTIE Naam - 13-06-2023: Wat moet er voor die deadline gebeuren
ACTIE Naam - 13-06-2023 16:00: Wat moet er voor dat tijdstip gebeuren

[Task modification]
[Task-ID] ACTIE: Wat moet er gedaan worden <- geen veranderingen
+[Task-ID] ACTIE: Wat moet er gedaan worden <- verplaats naar gedaam
*[Task-ID] ACTIE: Wat moet er gedaan worden <- verplaats naar bezig
-[Task-ID] ACTIE: Wat moet er gedaan worden <- verplaats naar te doen
![Task-ID] ACTIE: Wat moet er gedaan worden <- verplaats naar niet gedaan
<!-- #[Task-ID] ACTIE: Wat moet er gedaan worden <- verplaats naar archief -->
@[Task-ID] ACTIE Naam - 13-06-2023 16:00: Wat moet er voor dat tijdstip gebeuren <- change task data

[Meeting creation]
VERGADERING: CATEGORY - 13-06-2023 16:00
                  </pre>
              </div>
            </div>
        </div>
      </div>
        <div id="add-task-editor" class="txt-primary">
          <p>Plak hier de taken</p>
          <br />
        </div>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn"
          data-bs-dismiss="modal"
          id="add-task-cancel"
        >
          <i class="bx bx-x d-block d-sm-none"></i>
          <span class="d-none d-sm-block text-black">Sluiten</span>
        </button>
        <button
          type="button"
          class="btn btn-primary ms-1"
          data-bs-dismiss="modal"
          id="add-task-add"
        >
          <i class="bx bx-check d-block d-sm-none"></i>
          <span class="d-none d-sm-block">Toevoegen</span>
        </button>
      </div>
    </div>
  </div>
</div>

<script src="assets/extensions/dragula/dragula.min.js"></script>
{% for group in current_user.get_groups()%}
<script>
  dragula([document.getElementById("tasks-{{ group.id }}-todo"), 
           document.getElementById("tasks-{{ group.id }}-busy"), 
           document.getElementById("tasks-{{ group.id }}-done"), 
           document.getElementById("tasks-{{ group.id }}-notdone"), 
           document.getElementById("tasks-{{ group.id }}-archive")])
    .on('drop', function (el, target, source) {
      try {
        $.post({url: "/task-move"}, 
        {
          "task_id": el.id,
          "target_id": target.id,
          "source_id": source.id
        }, function(data, status) {
          console.log(status);
        })
      } catch (err) {
        console.error(`Error: ${err}`);
      }
    });
</script>
{% endfor%}
<script src="assets/extensions/quill/quill.min.js"></script>
<script src="assets/static/js/pages/quill.js"></script>
<script>
  $("#add-task-add").on('click', async _ => {
    try {
      console.log(addTaskEditor.getText());
      $.post({url: "/tasks-parse"}, 
      {
        "group_id": group_id,
        "text": addTaskEditor.getText()
      }, function(data, status) {
        console.log(status);
        location.reload()
      })
    } catch (err) {
      console.error(`Error: ${err}`);
    }
    addTaskEditor.focus();
  })
</script>
{% endblock %}