{% load i18n %} {% load static %} {% load basefilters %}
<!-- Sticky Table -->
{% 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 %}
<div class="oh-table_sticky--wrapper" id="ot-table">
	<div class="oh-sticky-dropdown--header">
		<div class="oh-dropdown" x-data="{open: false}">
		  <button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon name="ellipsis-vertical-sharp"
			  role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon></button>
		  <div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
			<ul class="oh-dropdown__items" id="fieldContainerTable">
			</ul>
		  </div>
		</div>
    </div>
	<div style="display: none;" id='overtime-table' data-table-name="attendance_account_table">
    <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 data-cell-index="1" data-cell-title="{% trans "Employee" %}" class="oh-sticky-table__th {% if request.sort_option.order == '-employee_id__employee_first_name' %}arrow-up {% elif request.sort_option.order == 'employee_id__employee_first_name' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#assignedLeaves' hx-get="{% url 'assign-filter' %}?{{pd}}&sortby=employee_id__employee_first_name" >{% trans "Employee" %}</div>
                <div data-cell-index="2" data-cell-title="{% trans "Leave Type" %}" class="oh-sticky-table__th {% if request.sort_option.order == '-leave_type_id' %}arrow-up {% elif request.sort_option.order == 'leave_type_id' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#assignedLeaves' hx-get="{% url 'assign-filter' %}?{{pd}}&sortby=leave_type_id"  >{% trans "Leave Type" %}</div>
                <div data-cell-index="3" data-cell-title="{% trans "Available Days" %}" class="oh-sticky-table__th {% if request.sort_option.order == '-available_days' %}arrow-up {% elif request.sort_option.order == 'available_days' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#assignedLeaves' hx-get="{% url 'assign-filter' %}?{{pd}}&sortby=available_days"  >{% trans "Available Days" %}</div>
                <div data-cell-index="4" data-cell-title="{% trans "Carryforward Days" %}" class="oh-sticky-table__th {% if request.sort_option.order == '-carryforward_days' %}arrow-up {% elif request.sort_option.order == 'carryforward_days' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#assignedLeaves' hx-get="{% url 'assign-filter' %}?{{pd}}&sortby=carryforward_days"  >{% trans "Carryforward Days" %}</div>
                <div data-cell-index="5" data-cell-title="{% trans "Total Leave Days" %}" class="oh-sticky-table__th {% if request.sort_option.order == '-total_leave_days' %}arrow-up {% elif request.sort_option.order == 'total_leave_days' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#assignedLeaves' hx-get="{% url 'assign-filter' %}?{{pd}}&sortby=total_leave_days"  >{% trans "Total Leave Days" %}</div>
                <div data-cell-index="6" data-cell-title="{% trans "Used Leave Days" %}" class="oh-sticky-table__th" hx-target='#assignedLeaves' hx-get="{% url 'assign-filter' %}?{{pd}}&sortby=total_leave_days"  >{% trans "Used Leave Days" %}</div>
                <div data-cell-index="7" data-cell-title="{% trans "Assigned Date" %}" class="oh-sticky-table__th {% if request.sort_option.order == '-assigned_date' %}arrow-up {% elif request.sort_option.order == 'assigned_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#assignedLeaves' hx-get="{% url 'assign-filter' %}?{{pd}}&sortby=assigned_date"  >{% 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 available_leaves %}
        <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();">
                <div class="centered-div">
                    <input type="checkbox" id="{{available_leave.id}}" onchange="highlightRow($(this))"
                    class="oh-input assigned-leaves-checkbox oh-input__checkbox all-assigned-leaves-row" />
                </div>
            </div>
            <div  data-cell-index="1" 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 data-cell-index="2" class="oh-sticky-table__td">{{available_leave.leave_type_id}}</div>
            <div data-cell-index="3" class="oh-sticky-table__td">{% if available_leave.leave_type_id.limit_leave %} {{available_leave.available_days}}{% else %}{% trans "No Limit" %}{% endif %}</div>
            <div data-cell-index="4" class="oh-sticky-table__td">{{available_leave.carryforward_days}}</div>
            <div data-cell-index="5" class="oh-sticky-table__td">{% if available_leave.leave_type_id.limit_leave %} {{available_leave.available_days}}{% else %}{% trans "No Limit" %}{% endif %}</div>
            <div data-cell-index="6" class="oh-sticky-table__td">{{available_leave.leave_taken}}</div>
            <div data-cell-index="7" 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 request.user|is_reportingmanager or perms.leave.change_availableleave %}
                        <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 request.user|is_reportingmanager or perms.leave.delete_availableleave %}
                    <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 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>
</div>

<script>
  $(document).ready(function () {

    tickLeaveCheckboxes();
    toggleColumns("overtime-table", "fieldContainerTable");

    $(".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 () {
      var is_checked = $(this).is(":checked");
      if (is_checked) {
        $(".all-assigned-leaves-row")
          .prop("checked", true)
          .closest(".oh-sticky-table__tr")
          .addClass("highlight-selected");
      } else {
        $(".all-assigned-leaves-row")
          .prop("checked", false)
          .closest(".oh-sticky-table__tr")
          .removeClass("highlight-selected");
      }
      addingAssignedLeaveIds();
    });
  });
</script>
