{% load horillafilters %} {% load basefilters %} {% load static %}
{% load i18n %} {% include 'filter_tags.html' %} {% if messages %}
<div class="oh-wrapper">
  {% for message in messages %}
  <div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated {{message.tags}}">
      {{ message }}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}
<script>
  function highlightRow(checkbox) {
    checkbox.closest(".oh-sticky-table__tr").removeClass("highlight-selected");
    if (checkbox.is(":checked")) {
      checkbox.closest(".oh-sticky-table__tr").addClass("highlight-selected");
    }
  }
  $(document).ready(function () {
    $(".oh-accordion-meta__header").first().click();
  });
</script>
<div class="oh-card">
  {% for assigned_leaves in available_leaves %}
  <div class="oh-accordion-meta">
    <div class="oh-accordion-meta__item">
      <div
        class="oh-accordion-meta__header"
      >
        <span class="oh-accordion-meta__title pt-3 pb-3">
          <div class="oh-tabs__input-badge-container">
            <span
              class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
            >
              {{assigned_leaves.list.paginator.count}}
            </span>
            {{assigned_leaves.grouper}}
          </div>
        </span>
      </div>
      <div class="oh-accordion-meta__body d-none">
        <div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
          <div class="oh-sticky-table">
            <div class="oh-sticky-table__table oh-table--sortable">
              <div class="oh-sticky-table__thead">
                <div class="oh-sticky-table__tr">
                  <div class="oh-sticky-table__th" style="width: 10px">
                    <div class="centered-div">
                    <input
                      type="checkbox"
                      title="{% trans 'Select All' %}"
                      class="oh-input oh-input__checkbox all-assigned-leaves"
                    />
                    </div>
                  </div>
                  <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
                  <div class="oh-sticky-table__th">
                    {% trans "Leave Type" %}
                  </div>
                  <div class="oh-sticky-table__th">
                    {% trans "Available Days" %}
                  </div>
                  <div class="oh-sticky-table__th">
                    {% trans "Carryforward Days" %}
                  </div>
                  <div class="oh-sticky-table__th">
                    {% trans "Total Leave Days" %}
                  </div>
                  <div class="oh-sticky-table__th">
                    {% trans "Used Leave Days" %}
                  </div>
                  <div class="oh-sticky-table__th">
                    {% trans "Assigned Date" %}
                  </div>
                  {% if perms.leave.change_availableleave or perms.leave.delete_availableleave or request.user|is_reportingmanager %}
                    <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
                  {% endif %}
                </div>
              </div>
              <div class="oh-sticky-table__tbody">
                {% for available_leave in assigned_leaves.list %}
                <div
                  class="oh-sticky-table__tr"
                  draggable="false"
                  data-toggle="oh-modal-toggle"
                  data-target="#objectDetailsModal"
                  hx-target="#objectDetailsModalTarget"
                  hx-get="{% url 'available-leave-single-view' available_leave.id %}?{{pd}}&instances_ids={{available_leave_ids}}"
                >
                  <div
                    class="oh-sticky-table__sd"
                    onclick="event.stopPropagation();"
                  >
                    <input
                      type="checkbox"
                      id="{{available_leave.id}}"
                      onchange="highlightRow($(this))"
                      class="oh-input assigned-leaves-checkbox oh-input__checkbox mt-2 mr-2 all-assigned-leaves-row"
                    />
                  </div>
                  <div class="oh-sticky-table__td">
                    <div class="oh-profile oh-profile--md">
                      <div class="oh-profile__avatar mr-1">
                        <img
                          src="{{available_leave.employee_id.get_avatar}}"
                          class="oh-profile__image"
                          alt="Mary Magdalene"
                        />
                      </div>
                      <span class="oh-profile__name oh-text--dark"
                        >{{available_leave.employee_id}}</span
                      >
                    </div>
                  </div>
                  <div class="oh-sticky-table__td">
                    {{available_leave.leave_type_id}}
                  </div>
                  <div class="oh-sticky-table__td">
                    {% if available_leave.leave_type_id.limit_leave %}
                      {{available_leave.available_days}}
                    {% else %}
                      {% trans "No Limit" %}
                    {% endif %}
                  </div>
                  <div class="oh-sticky-table__td">
                    {{available_leave.carryforward_days}}
                  </div>
                  <div class="oh-sticky-table__td">
                    {% if available_leave.leave_type_id.limit_leave %}
                      {{available_leave.total_leave_days}}
                    {% else %}
                      {% trans "No Limit" %}
                    {% endif %}
                  </div>
                  <div class="oh-sticky-table__td">
                    {{available_leave.leave_taken}}
                  </div>
                  <div class="oh-sticky-table__td dateformat_changer">
                    {{available_leave.assigned_date}}
                  </div>
                  {% if perms.leave.change_availableleave or perms.leave.delete_availableleave or request.user|is_reportingmanager%}
                  <div class="oh-sticky-table__td">
                    <div
                      class="oh-btn-group"
                      onclick="event.stopPropagation();"
                    >
                      {% if perms.leave.change_availableleave or request.user|is_reportingmanager %}
                      <button
                        class="oh-btn oh-btn--light-bkg w-100"
                        title="{% trans 'Edit' %}"
                        data-toggle="oh-modal-toggle"
                        data-target="#objectUpdateModal"
                        hx-get="{% url 'available-leave-update' available_leave.id %}?{{pd}}"
                        hx-target="#objectUpdateModalTarget"
                        hx-on:click="$('#objectUpdateModalTarget').css('max-width', '350px');"
                      >
                        <ion-icon name="create-outline"></ion-icon>
                      </button>
                      {% endif %}
                      {% if perms.leave.delete_availableleave or request.user|is_reportingmanager %}
                      <a
                        class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                        hx-confirm="{% trans 'Are you sure you want to delete ?' %}"
                        id="delete-link"
                        hx-post="{% url 'assign-delete' available_leave.id %}?{{pd}}"
                        hx-target="#assignedLeaves"
                        title="{% trans 'Delete' %}"
                      >
                        <ion-icon name="trash-outline"></ion-icon
                      ></a>
                      {% endif %}
                    </div>
                  </div>
                  {% endif %}
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% if assigned_leaves.list.paginator.num_pages %}
        <div class="oh-pagination">
          <span class="oh-pagination__page">
            {% trans "Page" %} {{ assigned_leaves.list.number }} {% trans "of" %} {{ assigned_leaves.list.paginator.num_pages }}.
          </span>
          <nav class="oh-pagination__nav">
            <div class="oh-pagination__input-container me-3">
              <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
              <input
                type="number"
                name="{{assigned_leaves.dynamic_name}}"
                class="oh-pagination__input"
                value="{{assigned_leaves.list.number}}"
                hx-get="{% url 'assign-filter' %}?{{pd}}"
                hx-target="#assignedLeaves"
                min="1"
              />
              <span class="oh-pagination__label"
                >{% trans "of" %}
                {{assigned_leaves.list.paginator.num_pages}}</span
              >
            </div>
            <ul class="oh-pagination__items">
              {% if assigned_leaves.list.has_previous %}
              <li class="oh-pagination__item oh-pagination__item--wide">
                <a
                  hx-target="#assignedLeaves"
                  hx-get="{% url 'assign-filter' %}?{{pd}}&{{assigned_leaves.dynamic_name}}=1"
                  class="oh-pagination__link"
                  >{% trans "First" %}</a
                >
              </li>
              <li class="oh-pagination__item oh-pagination__item--wide">
                <a
                  hx-target="#assignedLeaves"
                  hx-get="{% url 'assign-filter' %}?{{pd}}&{{assigned_leaves.dynamic_name}}={{ assigned_leaves.list.previous_page_number }}"
                  class="oh-pagination__link"
                  >{% trans "Previous" %}</a
                >
              </li>
              {% endif %} {% if assigned_leaves.list.has_next %}
              <li class="oh-pagination__item oh-pagination__item--wide">
                <a
                  hx-target="#assignedLeaves"
                  hx-get="{% url 'assign-filter' %}?{{pd}}&{{assigned_leaves.dynamic_name}}={{ assigned_leaves.list.next_page_number }}"
                  class="oh-pagination__link"
                  >{% trans "Next" %}</a
                >
              </li>
              <li class="oh-pagination__item oh-pagination__item--wide">
                <a
                  hx-target="#assignedLeaves"
                  hx-get="{% url 'assign-filter' %}?{{pd}}&{{assigned_leaves.dynamic_name}}={{ assigned_leaves.list.paginator.num_pages }}"
                  class="oh-pagination__link"
                  >{% trans "Last" %}</a
                >
              </li>
              {% endif %}
            </ul>
          </nav>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}

  <div class="oh-pagination">
    <span class="oh-pagination__page">
      {% trans "Page" %} {{ available_leaves.number }} {% trans "of" %} {{ available_leaves.paginator.num_pages }}.
    </span>
    <nav class="oh-pagination__nav">
      <div class="oh-pagination__input-container me-3">
        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
        <input
          type="number"
          name="page"
          class="oh-pagination__input"
          value="{{available_leaves.number}}"
          hx-get="{% url 'assign-filter' %}?{{pd}}"
          hx-target="#assignedLeaves"
          min="1"
        />
        <span class="oh-pagination__label"
          >{% trans "of" %} {{available_leaves.paginator.num_pages}}</span
        >
      </div>
      <ul class="oh-pagination__items">
        {% if available_leaves.has_previous %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-target="#assignedLeaves"
            hx-get="{% url 'assign-filter' %}?{{pd}}&page=1"
            class="oh-pagination__link"
            >{% trans "First" %}
          </a>
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-target="#assignedLeaves"
            hx-get="{% url 'assign-filter' %}?{{pd}}&page={{ available_leaves.previous_page_number }}"
            class="oh-pagination__link"
            >{% trans "Previous" %}
          </a>
        </li>
        {% endif %} {% if available_leaves.has_next %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-target="#assignedLeaves"
            hx-get="{% url 'assign-filter' %}?{{pd}}&page={{ available_leaves.next_page_number }}"
            class="oh-pagination__link"
            >{% trans "Next" %}
          </a>
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-target="#assignedLeaves"
            hx-get="{% url 'assign-filter' %}?{{pd}}&page={{ available_leaves.paginator.num_pages }}"
            class="oh-pagination__link"
            >{% trans "Last" %}
          </a>
        </li>
        {% endif %}
      </ul>
    </nav>
  </div>
</div>
<script>
  $(document).ready(function () {
    tickLeaveCheckboxes();
    $(".all-assigned-leaves-row").change(function () {
      var parentTable = $(this).closest(".oh-sticky-table");
      var body = parentTable.find(".oh-sticky-table__tbody");
      var parentCheckbox = parentTable.find(".all-assigned-leaves");
      parentCheckbox.prop(
        "checked",
        body.find(".all-assigned-leaves-row:checked").length ===
          body.find(".all-assigned-leaves-row").length
      );
      addingAssignedLeaveIds();
    });

    $(".all-assigned-leaves").change(function (e) {
      var is_checked = $(this).is(":checked");
      var closest = $(this)
        .closest(".oh-sticky-table__thead")
        .siblings(".oh-sticky-table__tbody");
      if (is_checked) {
        $(closest)
          .children()
          .find(".all-assigned-leaves-row")
          .prop("checked", true)
          .closest(".oh-sticky-table__tr")
          .addClass("highlight-selected");
      } else {
        $(closest)
          .children()
          .find(".all-assigned-leaves-row")
          .prop("checked", false)
          .closest(".oh-sticky-table__tr")
          .removeClass("highlight-selected");
      }
      addingAssignedLeaveIds();
    });
  });
</script>
