{% extends "interface/project_base.html" %}
{% load polyphonic %}

{% block admin %}
<a href="{% url 'project_work_list' project.pk %}" class="button is-link">
  {% icon "add_circle" %}
  <span>Add</span>
</a>
<a href="#" onclick="save()" class="button is-link">
  {% icon "save" %}
  <span>Save</span>
</a>
{% endblock %}

{% block page %}
<div class="columns">

  <div class="column card">
    <table style="max-width: 600px; margin: 10pt auto;" class="table is-striped is-narrow">
      <thead>
        <tr>
          <th>Item</th>
          <th>Time</th>
          <th/>
        </tr>
      </thead>
      <tbody id="work-list">
        {% for item in object_list %}
        <tr data-pk="{{ item.pk }}" data-order="{{ forloop.counter }}">
          <td>{{ item.work.name }}</td>
          <td style="min-width: 100px;">{% firstof item.work.duration '-:--' %}</td>
          <td style="text-align: center;">
            <span class="clickable is-clickable" title="Remove" onClick="removeItem({{ item.pk }})">
              {% icon "delete" %}
            </span>
            <span class="clickable drag-handle cursor-drag" title="Reorder">
              {% icon "reorder" %}
            </span>
          </td>

        </tr>
        {% empty %}
        <tr><td colspan="2">No items</td></tr>
        {% endfor %}
      </tbody>
    </table>
    <div>

    </div>
{% endblock %}

{% block style %}
{{ block.super }}
<style>
  tr.dragging { opacity: 0.4; }
  .drag-handle { cursor: move; }
</style>
{% endblock %}

{% block scripts %}
<script type="text/javascript">

let workList = document.getElementById('work-list');
var dirty = false;
var dragSrc = null;
var dragSrcNext = null;

function reorderItems() {
    let items = Array.prototype.slice.call(workList.children, 0);
    for (let j = 0; j < items.length; j++) {
        items[j].dataset.order = j;
    }
}

function removeItem(pk) {
    let items = Array.prototype.slice.call(workList.children, 0);
    pk = "" + pk;
    for (let i = 0; i < items.length; i++) {
        if (items[i].dataset.pk === pk) {
            items[i].dataset.order = -1;
            items[i].style = "display: none";
            break;
        }
    }
    dirty = true;
}

workList.addEventListener('mousedown', function(e) {
    let handle = e.target.closest('.drag-handle');
    if (handle) handle.closest('tr').draggable = true;
});

workList.addEventListener('mouseup', function(e) {
    let handle = e.target.closest('.drag-handle');
    if (handle) handle.closest('tr').draggable = false;
});

workList.addEventListener('dragstart', function(e) {
    dragSrc = e.target.closest('tr');
    if (!dragSrc) return;
    dragSrcNext = dragSrc.nextElementSibling;
    dragSrc.classList.add('dragging');
    e.dataTransfer.setDragImage(e.target, 0, 0);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', dragSrc.dataset.pk);
});

workList.addEventListener('dragover', function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    let target = e.target.closest('tr');
    if (!target || target === dragSrc) return;

    let rect = target.getBoundingClientRect();
    let midY = rect.top + rect.height / 2;

    if (e.clientY < midY) {
        workList.insertBefore(dragSrc, target);
    } else {
        workList.insertBefore(dragSrc, target.nextElementSibling);
    }
});

workList.addEventListener('drop', function(e) {
    e.preventDefault();
    dragSrcNext = null;
    reorderItems();
    dirty = true;
});

workList.addEventListener('dragend', function(e) {
    if (!dragSrc) return;
    dragSrc.classList.remove('dragging');
    if (dragSrcNext) {
        workList.insertBefore(dragSrc, dragSrcNext);
    }
    dragSrc = null;
    dragSrcNext = null;
});

function save() {

    let items = Array.prototype.slice.call(workList.children, 0);
    let data = {};
    for(var i=0; i<items.length; i++) {
        let item = items[i].dataset;
        data[item.pk] = item.order;
    }
    console.log(data);

    fetch("", {
        method: "POST", 
        headers: {"Content-Type": "application/json", "X-CSRFToken": "{{ csrf_token }}"}, 
        body: JSON.stringify(data)
    }).then((response) => {
        if (response.ok) {
            dirty=false;
            window.location = "{% url 'project_detail' project=project.pk %}";
        } else {
            alert("Failed: " + response.statusText)
        }
    })
}

function checkSaved(e) {
    if(dirty) {
        e.preventDefault();
    }
}
window.addEventListener('beforeunload', checkSaved);

</script>
{% endblock %}