{% load widget_tweaks %}
{{ formset.management_form }}
<table class="table table-sm">
  <thead>
    <tr>
      <th>Days</th>
      <th>Start</th>
      <th>End</th>
      <th class="w-full"></th>
    </tr>
  </thead>
  <tbody>
    {% for form in formset %}
      {{ form.id }}
      {{ form.timeslot }}
      {% if not form.instance.pk %}
        <tr class="border-0">
          <td colspan="4" class="pb-0 text-sm italic text-base-content/60">Unsaved</td>
        </tr>
      {% endif %}
      <tr>
        <td class="strikethrough">{% render_field form.days %}</td>
        <td class="strikethrough">{% render_field form.start class+="input input-bordered input-sm w-20 fp-time" %}</td>
        <td class="strikethrough">{% render_field form.end class+="input input-bordered input-sm w-20 fp-time" %}</td>
        <td class="text-right">
          {% if form.instance.pk %}
            <label for="{{ form.DELETE.id_for_label }}"
                   class="inline-flex items-center gap-2 cursor-pointer">
              {% render_field form.DELETE class+="checkbox checkbox-sm delete-check" onchange="toggleDeleteRow(this)" %}
              <span class="text-base-content/60">Delete</span>
            </label>
          {% endif %}
        </td>
      </tr>
      {% if form.errors %}
        <tr>
          <td colspan="4" class="pt-0">
            {% for field, errors in form.errors.items %}
              {% for error in errors %}<span class="text-error text-xs">{{ field|capfirst }}: {{ error }}</span>{% endfor %}
            {% endfor %}
          </td>
        </tr>
      {% endif %}
    {% endfor %}
  </tbody>
</table>
<script>
function toggleDeleteRow(checkbox) {
  const tr = checkbox.closest("tr");
  tr.classList.toggle("row-deleted", checkbox.checked);
  tr.querySelectorAll("td:not(:last-child)").forEach(td => {
    td.classList.toggle("opacity-40", checkbox.checked);
    td.classList.toggle("pointer-events-none", checkbox.checked);
  });
}
document.querySelectorAll(".delete-check").forEach(cb => toggleDeleteRow(cb));
flatpickr(".fp-time", {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  time_24hr: true,
  allowInput: true,
  appendTo: document.body,
});
</script>