{% extends "helpdesk/base.html" %}

{% load i18n %}

{% block helpdesk_title %}
  {% translate "Edit Checklist" %}
{% endblock helpdesk_title %}

{% block helpdesk_breadcrumb %}
  <li class="breadcrumb-item">
    <a href="{% url 'helpdesk:list' %}">{% translate "Tickets" %}</a>
  </li>
  <li class="breadcrumb-item">
    <a href="{% url 'helpdesk:list' %}{{ ticket.id }}/">{{ ticket.queue.slug }}-{{ ticket.id }}</a>
  </li>
  <li class="breadcrumb-item active">{{ checklist.name }}</li>
{% endblock helpdesk_breadcrumb %}

{% block helpdesk_body %}
  <div class="row">
    <div class="col-12 col-md-8 col-lg-6 mx-auto">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h1 class="fs-5 mb-0">{% translate "Edit Checklist" %}</h1>
          <div class="dropdown">
            <a class="btn bg-body-tertiary border btn-sm"
               href="#"
               role="button"
               data-bs-toggle="dropdown"
               aria-expanded="false">
              <i class="fa-solid fa-ellipsis-vertical"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <a class="dropdown-item link-danger"
                   href='{% url "helpdesk:delete_ticket_checklist" ticket.id checklist.id %}'>
                  <i class="fa-regular fa-trash-can"></i>
                  {% translate "Delete" %}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="card-body">
          {% if form.non_field_errors %}
            <p class="text-danger">{{ form.non_field_errors }}</p>
          {% endif %}
          <form method="post">
            {% csrf_token %}
            {% for field in form.visible_fields %}
              <div class="mb-3">
                <label class="form-label" for="{{ field.auto_id }}">{{ field.label }}{{ field.label_suffix }}</label>
                {{ field }}
                {% if field.errors %}<span class="text-danger">{{ field.errors }}</span>{% endif %}
                {% if field.help_text %}
                  <div class="form-text" id="{{ field.auto_id }}_helptext">{{ field.help_text|safe }}</div>
                {% endif %}
              </div>
            {% endfor %}
            <h2 class="fs-6 mb-1">{% translate "Tasks" %}</h2>
            <small class="form-text">{% translate "Click and drag the position icon to reorder the task items." %}</small>
            {{ formset.management_form }}
            <table class="table align-middle my-3">
              <thead class="text-uppercase small">
                <tr>
                  <th><span class="text-body-tertiary">{% translate "Position" %}</span></th>
                  <th><span class="text-body-tertiary">{% translate "Description" %}</span></th>
                  <th><span class="text-body-tertiary">{% translate "Delete?" %}</span></th>
                </tr>
              </thead>
              <tbody id="tasks">
                {% for form in formset %}
                  {% include "helpdesk/include/task_form_row.html" %}
                {% endfor %}
              </tbody>
            </table>
            <div class="d-flex">
              <button type="button"
                      class="btn bg-primary-subtle text-primary-emphasis border-primary-subtle me-auto"
                      id="addRow">
                <i class="fas fa-plus"></i>
                {% translate "Add task" %}
              </button>
              <a class="btn bg-body-tertiary border me-3"
                 href="{{ ticket.get_absolute_url }}">{% translate "Cancel" %}</a>
              <button type="submit" class="btn btn-success">{% translate "Save" %}</button>

            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
{% endblock helpdesk_body %}

{% block helpdesk_js %}
  <script src="https://unpkg.com/sortablejs-make/Sortable.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
  <script>
    const updatePosition = () => {
      $('#tasks tr').each((index, taskRow) => {
        $(taskRow).find('input[id$=position]').val(index + 1)
      })
    }

    $(() => {
      const idTasksTotalForms = $('#id_tasks-TOTAL_FORMS')
      $('#addRow').on('click', function() {
        const formCount = idTasksTotalForms.val()
        $('#tasks').append(`{% include 'helpdesk/include/task_form_row.html' with form=formset.empty_form %}`.replace(/__prefix__/g, formCount))
        idTasksTotalForms.val(parseInt(formCount) + 1);
        updatePosition()
      });

      $('#tasks').sortable({
        handle: '.handle',
        onChange: updatePosition
      })
    })
  </script>
{% endblock helpdesk_js %}