{% 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 %}

<!-- start of selection buttons -->
<div
    class="oh-checkpoint-badge text-success mb-2"
    id="selectAllUserrequests"
    style="cursor: pointer"
>
    {% trans "Select All Requests" %}
</div>
<div
    class="oh-checkpoint-badge text-secondary mb-2"
    id="unselectAllUserrequests"
    style="cursor: pointer;display: none;"
>
    {% trans "Unselect All Requests" %}
</div>
{% comment %} <div
    class="oh-checkpoint-badge text-info mb-2"
    id="exportUserrequests"
    style="cursor: pointer; display: none"
>
    {% trans "Export Requests" %}
</div> {% endcomment %}
<div class="oh-checkpoint-badge text-danger mb-2" id="selectedShowUserrequests" style="display: none"></div>
<!-- end of selection buttons -->

<div class="oh-card">
    {% for leave_request_list in leave_requests %}
    <div class="oh-accordion-meta">
        <div class="oh-accordion-meta__item">
            <div class="oh-accordion-meta__header" onclick='$(this).toggleClass("oh-accordion-meta__header--show");'>
                <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"
                        >
                            {{leave_request_list.list.paginator.count}}
                        </span>
                        {{leave_request_list.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-user-requests"
                                            />
                                        </div>
                                    </div>
                                    <div class="oh-sticky-table__th" hx-get="{% url 'user-request-filter' %}?{{pd}}&sortby=leave_type_id" hx-target="#userRequest">{% trans "Leave Type" %}</div>
                                    <div class="oh-sticky-table__th" hx-get="{% url 'user-request-filter' %}?{{pd}}&sortby=start_date" hx-target="#userRequest">{% trans "Start Date" %}</div>
                                    <div class="oh-sticky-table__th" hx-get="{% url 'user-request-filter' %}?{{pd}}&sortby=end_date" hx-target="#userRequest">{% trans "End Date" %}</div>
                                    <div class="oh-sticky-table__th" hx-get="{% url 'user-request-filter' %}?{{pd}}&sortby=requested_days" hx-target="#userRequest">{% trans "Requested Days" %}</div>
                                    <div class="oh-sticky-table__th" hx-get="{% url 'user-request-filter' %}?{{pd}}&sortby=status" hx-target="#userRequest">{% trans "Status" %}</div>
                                    <div class="oh-sticky-table__th" style="width:115px;">{% trans "Comment" %}</div>
                                    <div class="oh-sticky-table__th">{% trans 'Confirmation' %}</div>
                                    <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
                                </div>
                            </div>
                            <div class="oh-sticky-table__tbody">
                                {% for leave_request in leave_request_list.list %}
                                <div class="oh-sticky-table__tr" data-toggle="oh-modal-toggle" data-target="#objectDetailsModalW25"
                                hx-get="{% url 'user-request-one' leave_request.id %}?instances_ids={{request_ids}}" hx-target="#objectDetailsModalW25Target">
                                    <div class="oh-sticky-table__sd {% if leave_request.status == "requested" %}row-status--orange {% elif leave_request.status == "cancelled" %} row-status--gray
                                        {% elif leave_request.status == "approved" %} row-status--yellow {% elif leave_request.status == "rejected" %} row-status--red{% endif %}" onclick="event.stopPropagation()">
                                        <div class="centered-div">
                                            <input
                                            type="checkbox"
                                            id="{{leave_request.id}}"
                                            class="oh-input oh-input__checkbox all-user-requests-row"
                                            />
                                        </div>
                                    </div>
                                    <div class="oh-sticky-table__td">
                                        <div class="oh-profile oh-profile--md">
                                            <div class="oh-profile__avatar mr-1">
                                                <img src="{{leave_request.leave_type_id.get_avatar}}" class="oh-profile__image"
                                                    alt="Leave Type Icon" />
                                            </div>
                                            <span class="oh-profile__name oh-text--dark">{{leave_request.leave_type_id|truncatechars:12}}</span>
                                            {% if leave_request in leave_requests_with_interview %}
                                                <span class="tooltip">
                                                    <span class="material-symbols-outlined" style="flex-direction: row-reverse;color:#ff9146;">
                                                        warning
                                                    </span>
                                                    <span class="tooltiptext fw-bold">
                                                    You have an interview in this requested date range.
                                                    </span>
                                                </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="oh-sticky-table__td {% if leave_request.status == 'rejected' %} diff-cell{% endif %} dateformat_changer"> {{leave_request.start_date}}</div>
                                    <div class="oh-sticky-table__td {% if leave_request.status == 'rejected' %} diff-cell{% endif %} dateformat_changer">{{leave_request.end_date}}</div>
                                    <div class="oh-sticky-table__td {% if leave_request.status == 'rejected' %} diff-cell{% endif %}">{{leave_request.requested_days}}</div>
                                    <div class="oh-sticky-table__td {% if leave_request.status == 'rejected' %} diff-cell{% endif %}">
                                        {% if leave_request.multiple_approvals and leave_request.status == "requested" %}
                                            <div class="oh-checkpoint-badge oh-checkpoint-badge--secondary" title="{% for manager in leave_request.multiple_approvals.managers %}{{ manager }}{% if not forloop.last %} , {% endif %}{% endfor %}">
                                            {{leave_request.multiple_approvals.approved|length}} / {{leave_request.multiple_approvals.managers|length}} {% trans "Approved" %}
                                            </div>
                                        {% else %}
                                            {{leave_request.get_status_display}}
                                        {% endif %}
                                    </div>
                                    <div class="oh-sticky-table__td" onclick="event.stopPropagation();">

                                        <button type="button" hx-get="{% url 'leave-request-view-comment' leave_request.id %}?{{pd}}&target=userRequest" hx-target="#commentContainer"
                                        data-target = '#leaveactivitySidebar' title="{% trans 'Add / View Comment' %}"  class="oh-btn oh-btn--light oh-activity-sidebar__open w-100" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;" onclick="event.stopPropagation()">
                                        <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
                                        </button>

                                    </div>

                                    <div class="oh-sticky-table__td {% if leave_request.status == 'rejected' %} diff-cell{% endif %}" onclick="event.stopPropagation()">
                                        {% if leave_request.status == 'approved' and leave_request.end_date >= current_date %}
                                            <a type="submit" data-toggle="oh-modal-toggle"
                                                data-target="#rejectModal"
                                                hx-get="{% url 'user-request-cancel' leave_request.id %}"
                                                hx-target="#rejectForm"
                                                title="{% trans 'Cancel' %}"
                                                class="oh-btn oh-btn--primary w-100"> {% trans "Cancel" %}
                                            </a>
                                        {% else %}
                                            <button class="oh-btn oh-btn--primary w-100" disabled>
                                                {% trans "Cancel" %}
                                            </button>
                                        {% endif %}
                                    </div>
                                    <div class="oh-sticky-table__td {% if leave_request.status == 'rejected' %} diff-cell{% endif %}" onclick="event.stopPropagation()">
                                        {% if leave_request.status == 'requested'%}
                                            <div class="oh-btn-group" >
                                                <button class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}" data-toggle="oh-modal-toggle"
                                                    data-target="#objectUpdateModal" hx-get="{% url 'user-request-update' leave_request.id %}?{{pd}}"
                                                    hx-target="#objectUpdateModalTarget">
                                                    <ion-icon name="create-outline"></ion-icon>
                                                </button>
                                                <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                                                    title="{% trans 'Delete' %}" id="delete-link"
                                                    hx-confirm="{% trans 'Are you sure you want to delete this leave request?' %}"
                                                    hx-post="{% url 'user-request-delete' leave_request.id %}?{{pd}}"
                                                    hx-target="#userRequest"
                                                    >
                                                    <ion-icon name="trash-outline"></ion-icon>
                                                </a>
                                            </div>
                                        {% else %}
                                            <div class="oh-btn-group" >
                                                <button
                                                    class="oh-btn oh-btn--light-bkg w-50" disabled>
                                                    <ion-icon name="create-outline" ></ion-icon>
                                                </button></td>
                                                <button class="oh-btn oh-btn--light-bkg w-50" disabled>
                                                    <ion-icon name="trash-outline"></ion-icon>
                                                </button></td>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oh-pagination">
                    <span class="oh-pagination__page">
                        {% trans "Page" %} {{ leave_request_list.list.number }}
                        {%trans "of" %} {{leave_request_list.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="{{leave_request_list.dynamic_name}}"
                                class="oh-pagination__input"
                                value="{{leave_request_list.list.number}}"
                                hx-get="{% url 'user-request-filter' %}?{{pd}}"
                                hx-target="#userRequest"
                                min="1"
                            />
                            <span class="oh-pagination__label"
                                >{% trans "of" %}
                                {{leave_request_list.list.paginator.num_pages}}</span
                            >
                        </div>
                        <ul class="oh-pagination__items">
                            {% if leave_request_list.list.has_previous %}
                            <li
                                class="oh-pagination__item oh-pagination__item--wide"
                            >
                                <a
                                    hx-target="#userRequest"
                                    hx-get="{% url 'user-request-filter' %}?{{pd}}&{{leave_request_list.dynamic_name}}=1"
                                    class="oh-pagination__link"
                                    >{% trans "First" %}</a
                                >
                            </li>
                            <li
                                class="oh-pagination__item oh-pagination__item--wide"
                            >
                                <a
                                    hx-target="#userRequest"
                                    hx-get="{% url 'user-request-filter' %}?{{pd}}&{{leave_request_list.dynamic_name}}={{ leave_request_list.list.previous_page_number }}"
                                    class="oh-pagination__link"
                                    >{% trans "Previous" %}</a
                                >
                            </li>
                            {% endif %} {% if leave_request_list.list.has_next %}
                            <li
                                class="oh-pagination__item oh-pagination__item--wide"
                            >
                                <a
                                    hx-target="#userRequest"
                                    hx-get="{% url 'user-request-filter' %}?{{pd}}&{{leave_request_list.dynamic_name}}={{ leave_request_list.list.next_page_number }}"
                                    class="oh-pagination__link"
                                    >{% trans "Next" %}</a
                                >
                            </li>
                            <li
                                class="oh-pagination__item oh-pagination__item--wide"
                            >
                                <a
                                    hx-target="#userRequest"
                                    hx-get="{% url 'user-request-filter' %}?{{pd}}&{{leave_request_list.dynamic_name}}={{ leave_request_list.list.paginator.num_pages }}"
                                    class="oh-pagination__link"
                                    >{% trans "Last" %}</a
                                >
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    <div class="oh-pagination" data-pd="{{pd}}">
        <span class="oh-pagination__page">
            {% trans "Page" %} {{ leave_requests.number }} {% trans "of" %} {{ leave_requests.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="{{leave_requests.number}}"
                    hx-get="{% url 'user-request-filter' %}?{{pd}}" hx-target="#userRequest" min="1" />
                <span class="oh-pagination__label">{% trans "of" %} {{leave_requests.paginator.num_pages}}</span>
            </div>
            <ul class="oh-pagination__items">
                {% if leave_requests.has_previous %}
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a hx-target='#userRequest' hx-get="{% url 'user-request-filter' %}?{{pd}}&page=1"
                        class="oh-pagination__link">{% trans "First" %}
                    </a>
                </li>
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a hx-target='#userRequest'
                        hx-get="{% url 'user-request-filter' %}?{{pd}}&page={{ leave_requests.previous_page_number }}"
                        class="oh-pagination__link">{% trans "Previous" %}
                    </a>
                </li>
                {% endif %}
                {% if leave_requests.has_next %}
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a hx-target='#userRequest'
                        hx-get="{% url 'user-request-filter' %}?{{pd}}&page={{ leave_requests.next_page_number }}"
                        class="oh-pagination__link">{% trans "Next" %}
                    </a>
                </li>
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a hx-target='#userRequest'
                        hx-get="{% url 'user-request-filter' %}?{{pd}}&page={{ leave_requests.paginator.num_pages }}"
                        class="oh-pagination__link">{% trans "Last" %}
                    </a>
                </li>
                {% endif %}

            </ul>
        </nav>
    </div>
</div>

<!-- start of comment modal -->
<div
	class="oh-modal"
	id="requestcommentModal"
	role="dialog"
	aria-labelledby="requestCommentModalLabel"
	aria-hidden="true"
 >
	<div class="oh-modal__dialog" id="requestCommentFormModal"> </div>
</div>
<!-- end of comment modal -->

<div
  class="oh-modal" style="z-index: 60;"
  id="shiftRequestDetailModal"
  role="dialog"
  aria-labelledby="shiftRequestDetailModal"
  aria-hidden="true"
>
  <div class="oh-modal__dialog">
    <div class="oh-modal__dialog-header">
      <h2
        class="oh-modal__dialog-title"
        id=""
      >
        {% trans "Details" %}
      </h2>
      <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>
    <div
      class="oh-modal__dialog-body oh-modal__dialog-relative"
      id="shiftRequestDetailTarget"
    ></div>
  </div>
</div>

<script>
  $(document).ready(function () {
    var pd = $(".oh-pagination").attr("data-pd");
    var hxVals = JSON.stringify(pd);
    $("#requestCreateCard").attr("hx-vals", `{"pd":${hxVals}}`);
    $("#requestCreateButton").attr("hx-vals", `{"pd":${hxVals}}`);
    tickUserrequestsCheckboxes();

    $(".all-user-requests-row").change(function () {
      var parentTable = $(this).closest(".oh-sticky-table");
      var body = parentTable.find(".oh-sticky-table__tbody");
      var parentCheckbox = parentTable.find(".all-user-requests");
      parentCheckbox.prop(
        "checked",
        body.find(".all-user-requests-row:checked").length ===
          body.find(".all-user-requests-row").length
      );
      addingUserrequestsIds();
    });

    $(".all-user-requests").change(function () {
      addingUserrequestsIds();
    });
    $("#selectAllUserrequests").click(function () {
      selectAllUserrequests();
    });
    $("#unselectAllUserrequests").click(function () {
      unselectAllUserrequests();
    });
    $("#exportUserrequests").click(function (e) {
      exportUserrequests();
    });
  });
  $(".all-user-requests").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-user-requests-row")
        .prop("checked", true);
    } else {
      $(closest)
        .children()
        .find(".all-user-requests-row")
        .prop("checked", false);
    }
  });
</script>
