{% load i18n %}
{% load static %}
{% load basefilters %}
{% 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 %}
<ul class="oh-tabs__tablist">
    <li class="oh-tabs__tab oh-tabs__tab--active" data-target="#tab_1" onclick="switchTab(event)">
        {% trans "My Compensatory Leave Requests" %}
    </li>
    {% if request.user|is_reportingmanager or perms.leave.change_leaveallocationrequest %}
    <li class="oh-tabs__tab" data-target="#tab_2" onclick="switchTab(event)">
        {% trans "Compensatory Leave Requests" %}
    </li>
    {% endif %}
</ul>
<div class="oh-tabs__contents" id="view-container">
    <div class="oh-tabs__content oh-tabs__content--active" id="tab_1">
        {% if my_comp_leave_requests %}
            <!-- start of sticky table -->
            <div class="oh-sticky-table">
                <div class="oh-sticky-table__table ">
                    <div class="oh-sticky-table__thead">
                        <div class="oh-sticky-table__tr">
                            <div 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-get="{% url 'filter-compensatory-leave' %}?{{pd}}&sortby=employee_id__employee_first_name" hx-target="#comp-leave-tabs"
                            >{% trans "Employee" %}</div>
                            <div class="oh-sticky-table__th {% if request.sort_option.order == '-leave_type_id__name' %}arrow-up {% elif request.sort_option.order == 'leave_type_id__name' %}arrow-down {% else %}arrow-up-down {% endif %}"  hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&sortby=leave_type_id__name" hx-target="#comp-leave-tabs">{% trans "Leave Type" %}</div>
                            <div class="oh-sticky-table__th">{% trans "Attendance Dates" %}</div>
                            <div class="oh-sticky-table__th {% if request.sort_option.order == '-requested_days' %}arrow-up {% elif request.sort_option.order == 'requested_days' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&sortby=requested_days" hx-target="#comp-leave-tabs">{% trans "Requested Days" %}</div>
                            <div class="oh-sticky-table__th {% if request.sort_option.order == '-created_by' %}arrow-up {% elif request.sort_option.order == 'created_by' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&sortby=created_by" hx-target="#comp-leave-tabs">{% trans "Created By" %}</div>
                            <div class="oh-sticky-table__th">{% trans "Status" %}</div>
                            <div class="oh-sticky-table__th">{% trans "Description" %}</div>
                            <div class="oh-sticky-table__th" style="width:115px;">{% trans "Comment" %}</div>
                            <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
                        </div>
                    </div>
                    <div class="oh-sticky-table__tbody">
                        {% for comp_leave_request in my_comp_leave_requests %}
                            <div class="oh-sticky-table__tr {% if comp_leave_request.status == 'rejected' %} diff-cell{% endif %}"
                                data-toggle="oh-modal-toggle"
                                data-target="#objectDetailsModalW25"
                                hx-get="{% url 'compensatory-leave-individual-view' comp_leave_request.id %}?my_request=True&instances_ids={{my_requests_ids}}"
                                hx-target="#objectDetailsModalW25Target">
                                <div class="oh-sticky-table__sd
                                    {% if comp_leave_request.status == 'requested' %} row-status--blue
                                    {% elif comp_leave_request.status == 'approved' %} row-status--yellow
                                    {% elif comp_leave_request.status == 'rejected' %}row-status--red
                                    {% endif %}" >
                                    <div class="oh-profile oh-profile--md">
                                        <div class="oh-profile__avatar mr-1">
                                            {% if comp_leave_request.employee_id.employee_profile %}
                                            <img src="{{comp_leave_request.employee_id.get_avatar}}" class="oh-profile__image"
                                                alt="" />
                                            {% else %}
                                            <img src="https://ui-avatars.com/api/?name={{comp_leave_request.employee_id}}&background=random"
                                                class="oh-profile__image" alt="" />
                                            {% endif %}
                                        </div>
                                        <span class="oh-profile__name oh-text--dark">{{comp_leave_request.employee_id}}</span>
                                    </div>
                                </div>
                                <div class="oh-sticky-table__td ">{{comp_leave_request.leave_type_id}}</div>
                                <div class="oh-sticky-table__td">
                                    {% for attendance in comp_leave_request.attendance_id.all %}
                                        {{ attendance.attendance_date }}<br/>
                                    {% endfor %}
                                </div>
                                <div class="oh-sticky-table__td ">{{comp_leave_request.requested_days}}</div>
                                <div class="oh-sticky-table__td ">{{comp_leave_request.created_by.employee_get}}</div>
                                <div class="oh-sticky-table__td ">{{comp_leave_request.get_status_display}}</div>
                                <div class="oh-sticky-table__td ">{{comp_leave_request.description|truncatechars:25}}</div>

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

                                <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                    <div class="oh-btn-group">
                                        {% if comp_leave_request.status ==  'requested' %}
                                            <button
                                                class="oh-btn oh-btn--light-bkg w-50"
                                               title="{% trans 'Edit' %}"
                                                data-toggle="oh-modal-toggle"
                                                data-target="#objectDetailsModal"
                                                hx-get="{% url 'update-compensatory-leave' comp_leave_request.id %}"
                                                hx-target="#objectDetailsModalTarget">
                                                <ion-icon name="create-outline"></ion-icon>
                                            </button>
                                        {% else %}
                                            <button
                                                class="oh-btn oh-btn--light-bkg w-50" disabled>
                                                <ion-icon name="create-outline" ></ion-icon>
                                            </button></td>
                                        {% endif %}
                                        {% if comp_leave_request.status !=  'approved' %}
                                            <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50" id="delete-link"
                                                hx-confirm="{% trans 'Are you sure you want to delete ?' %}"
                                                hx-post="{% url 'delete-compensatory-leave' comp_leave_request.id %}?{{pd}}"
                                                hx-target="#comp-leave-tabs"
                                                title="{% trans 'Delete' %}">
                                                <ion-icon name="trash-outline"></ion-icon>
                                            </a>
                                        {% else %}
                                            <button class="oh-btn oh-btn--light-bkg w-50" disabled>
                                                <ion-icon name="trash-outline"></ion-icon>
                                            </button></td>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <!-- end of sticky table -->
            <!-- start of pagination  -->
            <div class="oh-pagination">
                <span class="oh-pagination__page">
                    {% trans "Page" %} {{ my_comp_leave_requests.number }} {% trans "of" %} {{ my_comp_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="m_page" class="oh-pagination__input" value="{{my_comp_leave_requests.number}}"
                            hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}" hx-target="#comp-leave-tabs" min="1" />
                        <span class="oh-pagination__label">{% trans "of" %} {{my_comp_leave_requests.paginator.num_pages}}</span>
                    </div>
                    <ul class="oh-pagination__items">
                        {% if my_comp_leave_requests.has_previous %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a hx-target='#comp-leave-tabs' hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&m_page=1"
                                class="oh-pagination__link">{% trans "First" %}</a>
                        </li>
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a hx-target='#comp-leave-tabs'
                                hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&m_page={{ my_comp_leave_requests.previous_page_number }}"
                                class="oh-pagination__link">{% trans "Previous" %}</a>
                        </li>
                        {% endif %}
                        {% if my_comp_leave_requests.has_next %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a hx-target='#comp-leave-tabs'
                                hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&m_page={{ my_comp_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='#comp-leave-tabs'
                                hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&m_page={{ my_comp_leave_requests.paginator.num_pages }}"
                                class="oh-pagination__link">{% trans "Last" %}</a>
                        </li>
                        {% endif %}

                    </ul>
                </nav>
            </div>
            <!-- end of pagination  -->
        {% else %}
            <div>
                <div style="height: 310px; display:flex;align-items: center;justify-content: center;" >
                    <div style="" class="">
                        <img style="display: block;width: 70px;margin: 10px auto ;" src="{% static 'images/ui/attendance.png' %}" class="" alt=""/>
                        <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "You have No leave requests for this filter." %}</h3>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    {% if request.user|is_reportingmanager or perms.leave.view_compensatoryleaverequest %}
        <div class="oh-tabs__content" id="tab_2">
            {% if comp_leave_requests %}
                <!-- start of sticky table -->
                <div class="oh-sticky-table">
                    <div class="oh-sticky-table__table ">
                        <div class="oh-sticky-table__thead">
                            <div class="oh-sticky-table__tr">
                                <div 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-get="{% url 'filter-compensatory-leave' %}?{{pd}}&sortby=employee_id__employee_first_name" hx-target="#comp-leave-tabs">{% trans "Employee" %}</div>
                                <div class="oh-sticky-table__th {% if request.sort_option.order == '-leave_type_id__name' %}arrow-up {% elif request.sort_option.order == 'leave_type_id__name' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&sortby=leave_type_id__name" hx-target="#comp-leave-tabs">{% trans "Leave Type" %}</div>
                                <div class="oh-sticky-table__th">{% trans "Attendance Dates" %}</div>
                                <div class="oh-sticky-table__th {% if request.sort_option.order == '-requested_days' %}arrow-up {% elif request.sort_option.order == 'requested_days' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&sortby=requested_days" hx-target="#comp-leave-tabs">{% trans "Requested Days" %}</div>
                                <div class="oh-sticky-table__th {% if request.sort_option.order == '-created_by' %}arrow-up {% elif request.sort_option.order == 'created_by' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&sortby=created_by" hx-target="#comp-leave-tabs">{% trans "Created By" %}</div>
                                <div class="oh-sticky-table__th">{% trans "Status" %}</div>
                                <div class="oh-sticky-table__th">{% trans "Description" %}</div>
                                <div class="oh-sticky-table__th" style="width:115px;">{% trans "Comment" %}</div>
                                <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
                                <div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Confirmation" %}</div>
                            </div>
                        </div>
                        <div class="oh-sticky-table__tbody">
                            {% for comp_leave_request in comp_leave_requests %}
                                <div class="oh-sticky-table__tr {% if comp_leave_request.status == 'rejected' %} diff-cell{% endif %}"
                                    data-toggle="oh-modal-toggle"
                                    data-target="#objectDetailsModalW25"
                                    hx-get="{% url 'compensatory-leave-individual-view' comp_leave_request.id %}?my_request=False&instances_ids={{requests_ids}}"
                                    hx-target="#objectDetailsModalW25Target">
                                    <div class="oh-sticky-table__sd {% if comp_leave_request.status == "requested" %} row-status--blue
                                        {% elif comp_leave_request.status == "approved" %} row-status--yellow
                                        {% elif comp_leave_request.status == "cancelled" %} row-status--gray
                                        {% elif comp_leave_request.status == "rejected" %}row-status--red
                                        {% endif %}" >
                                        <div class="oh-profile oh-profile--md">
                                            <div class="oh-profile__avatar mr-1">
                                                <img src="{{comp_leave_request.employee_id.get_avatar}}" class="oh-profile__image"
                                                    alt="" />
                                            </div>
                                            <span class="oh-profile__name oh-text--dark">{{comp_leave_request.employee_id}}</span>
                                        </div>
                                    </div>
                                    <div class="oh-sticky-table__td">{{comp_leave_request.leave_type_id}}</div>
                                    <div class="oh-sticky-table__td">
                                        {% for attendance in comp_leave_request.attendance_id.all %}
                                            {{ attendance.attendance_date }}<br/>
                                        {% endfor %}
                                    </div>
                                    <div class="oh-sticky-table__td">{{comp_leave_request.requested_days}}</div>
                                    <div class="oh-sticky-table__td">{{comp_leave_request.created_by.employee_get}}</div>
                                    <div class="oh-sticky-table__td">{{comp_leave_request.get_status_display}}</div>
                                    <div class="oh-sticky-table__td">{{ comp_leave_request.description|truncatechars:20}}</div>

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

                                    <div class="oh-sticky-table__td " onclick="event.stopPropagation()">
                                        <div class="oh-btn-group">
                                            {% if comp_leave_request.status ==  'requested' %}
                                                <button
                                                    class="oh-btn oh-btn--light-bkg w-50"
                                                    title="{% trans 'Edit' %}"
                                                    data-toggle="oh-modal-toggle"
                                                    data-target="#objectDetailsModal"
                                                    hx-get="{% url 'update-compensatory-leave' comp_leave_request.id %}"
                                                    hx-target="#objectDetailsModalTarget">
                                                    <ion-icon name="create-outline"></ion-icon>
                                                </button>
                                            {% else %}
                                                <button
                                                    class="oh-btn oh-btn--light-bkg w-50" disabled>
                                                    <ion-icon name="create-outline" ></ion-icon>
                                                </button></td>
                                            {% endif %}
                                            {% if comp_leave_request.status !=  'approved' %}
                                                <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50" id="delete-link"
                                                    hx-confirm="{% trans 'Are you sure you want to delete ?' %}"
                                                    hx-post="{% url 'delete-compensatory-leave' comp_leave_request.id %}?{{pd}}&list=True"
                                                    hx-target="#comp-leave-tabs"
                                                    title="{% trans 'Delete' %}">
                                                    <ion-icon name="trash-outline"></ion-icon>
                                                </a>
                                            {% else %}
                                                <button class="oh-btn oh-btn--light-bkg w-50" disabled>
                                                    <ion-icon name="trash-outline"></ion-icon>
                                                </button></td>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="oh-sticky-table__td oh-sticky-table__right" onclick="event.stopPropagation()">
                                        <div class="oh-btn-group" >

                                            {% if perms.leave.change_leaveallocationrequest or request.user|is_reportingmanager %}
                                                {% if comp_leave_request.status == 'requested' %}
                                                    <a type="submit"
                                                        hx-confirm="{% trans 'Are you sure you want to approve ?' %}"
                                                        hx-post="{% url 'approve-compensatory-leave' comp_leave_request.id %}?{{pd}}"
                                                        hx-target="#comp-leave-tabs"
                                                        title="{% trans 'Approve' %}"
                                                        class="oh-btn oh-btn--success w-100">
                                                        <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                                                    </a>
                                                {% else %}
                                                    <a type="submit" href="#" title="{% trans 'Approve' %}"
                                                        class="oh-btn oh-btn--success oh-btn--disabled w-100">
                                                        <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                                                    </a>
                                                {% endif %}
                                                {% if comp_leave_request.status == 'requested' or comp_leave_request.status == 'approved' %}
                                                    <a type="submit" data-toggle="oh-modal-toggle"
                                                        data-target="#rejectModal"
                                                        hx-get="{% url 'reject-compensatory-leave' comp_leave_request.id %}"
                                                        hx-target="#rejectTarget"
                                                        title="{% trans 'Reject' %}"
                                                        class="oh-btn oh-btn--danger w-100">
                                                        <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                                                    </a>
                                                {% else %}
                                                    <a type="submit" href="#" title="{% trans 'Reject' %}"
                                                        class="oh-btn oh-btn--danger oh-btn--disabled
                                                        w-100" >
                                                        <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                                                    </a>
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <!-- end of start table -->
                <!-- start of pagination  -->
                <div class="oh-pagination">
                    <span class="oh-pagination__page">
                        {% trans "Page" %} {{ comp_leave_requests.number }} {% trans "of" %} {{ comp_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="{{comp_leave_requests.number}}"
                                hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}" hx-target="#comp-leave-tabs" min="1" />
                            <span class="oh-pagination__label">{% trans "of" %} {{comp_leave_requests.paginator.num_pages}}</span>
                        </div>
                        <ul class="oh-pagination__items">
                            {% if comp_leave_requests.has_previous %}
                            <li class="oh-pagination__item oh-pagination__item--wide">
                                <a hx-target='#comp-leave-tabs' hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&page=1"
                                    class="oh-pagination__link">{% trans "First" %}</a>
                            </li>
                            <li class="oh-pagination__item oh-pagination__item--wide">
                                <a hx-target='#comp-leave-tabs'
                                    hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&page={{ comp_leave_requests.previous_page_number }}"
                                    class="oh-pagination__link">{% trans "Previous" %}</a>
                            </li>
                            {% endif %}
                            {% if comp_leave_requests.has_next %}
                            <li class="oh-pagination__item oh-pagination__item--wide">
                                <a hx-target='#comp-leave-tabs'
                                    hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&page={{ comp_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='#comp-leave-tabs'
                                    hx-get="{% url 'filter-compensatory-leave' %}?{{pd}}&page={{ comp_leave_requests.paginator.num_pages }}"
                                    class="oh-pagination__link">{% trans "Last" %}</a>
                            </li>
                            {% endif %}

                        </ul>
                    </nav>
                </div>
                <!-- end of pagination  -->
            {% else %}
                <div style="height: 310px; display:flex;align-items: center;justify-content: center;">
                    <div style="" class="">
                        <img style="display: block;width: 70px;margin: 10px auto ;" src="{% static 'images/ui/attendance.png' %}" class="" alt=""/>
                        <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "You have No leave requests for this filter." %}</h3>
                    </div>
                </div>
                </div>
            {% endif %}
        </div>
    {% endif %}
</div>


<!-- start of comment modal -->
<div
  class="oh-modal"
  id="shiftcommentModal"
  role="dialog"
  aria-labelledby="emptagModal"
  aria-hidden="true"
   >
	<div class="oh-modal__dialog" id="shiftRequestCommentForm">	</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 () {
      const activeTab = localStorage.getItem('CompensatoryLeaveRequestActiveTab')
      if (activeTab!=null) {
          $(".oh-tabs__content--active").toggleClass('oh-tabs__content--active');
          $(".oh-tabs__tab--active").toggleClass('oh-tabs__tab--active');
          $(`[data-target="${activeTab}"]`).toggleClass("oh-tabs__tab--active");
          $(activeTab).toggleClass("oh-tabs__content--active");
      }
      $(".oh-tabs__tab[data-target]").click(function (e) {
          e.preventDefault();
          localStorage.setItem("CompensatoryLeaveRequestActiveTab",$(this).attr('data-target'))
      });
  });
</script>
