{% load i18n %} {% load static %}
{% 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 %} {% if letters %}
<!-- start of column toggle -->
<div class="oh-table_sticky--wrapper oh-wrapper">
    <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="resignationCells"></ul>
            </div>
        </div>
    </div>
</div>
<!-- end of column toggle -->
<div class="oh-wrapper" id="resignation-column-table" data-table-name="resignation_column_tab">
    <!-- start of sticky 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 {% 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 'search-resignation-request' %}?{{pd}}&sortby=employee_id__employee_first_name"
                        hx-target="#resignationLetterContianer"
                    >
                        {% trans "Employee" %}
                    </div>
                    <div
                        data-cell-index="1"
                        data-cell-title="{% trans 'Title' %}"
                        class="oh-sticky-table__th {% if request.sort_option.order == '-title' %}arrow-up {% elif request.sort_option.order == 'title' %}arrow-down {% else %}arrow-up-down {% endif %}"
                        hx-get="{% url 'search-resignation-request' %}?{{pd}}&sortby=title"
                        hx-target="#resignationLetterContianer"
                    >
                        {% trans "Title" %}
                    </div>
                    <div
                        data-cell-index="2"
                        data-cell-title="{% trans 'Planned To Leave' %}"
                        hx-get="{% url 'search-resignation-request' %}?{{pd}}&sortby=planned_to_leave_on"
                        hx-target="#resignationLetterContianer"
                        class="oh-sticky-table__th {% if request.sort_option.order == '-planned_to_leave_on' %}arrow-up {% elif request.sort_option.order == 'planned_to_leave_on' %}arrow-down {% else %}arrow-up-down {% endif %}"
                    >
                        {% trans "Planned To Leave" %}
                    </div>
                    <div
                        data-cell-index="3"
                        data-cell-title="{% trans 'Status' %}"
                        class="oh-sticky-table__th {% if request.sort_option.order == '-status' %}arrow-up {% elif request.sort_option.order == 'status' %}arrow-down {% else %}arrow-up-down {% endif %}"
                        hx-get="{% url 'search-resignation-request' %}?{{pd}}&sortby=status"
                        hx-target="#resignationLetterContianer"
                    >
                        {% trans "Status" %}
                    </div>
                    <div
                        data-cell-index="4"
                        data-cell-title="{% trans 'Description' %}"
                        class="oh-sticky-table__th"
                    >
                        {% trans "Description" %}
                    </div>
                    <div class="oh-sticky-table__th oh-sticky-table__right">
                        {% trans "Actions" %}
                    </div>
                    <div class="oh-sticky-table__th oh-sticky-table__right">
                        {% trans "Confirmation" %}
                    </div>
                </div>
            </div>
            {% for letter in letters %}
            <div
                class="oh-sticky-table__tbody ui-sortable"
                draggable="true"
                hx-get="{% url 'resignation-request-single-view' letter.id %}?requests_ids={{requests_ids}}"
                hx-target="#resignationModalBody"
                data-toggle="oh-modal-toggle"
                data-target="#resignationModal"
            >
                <div class="oh-sticky-table__tr ui-sortable-handle">
                    <div class="oh-sticky-table__sd">
                        {{letter.employee_id}}
                    </div>
                    <div class="oh-sticky-table__td" data-cell-index="1">{{letter.title}}</div>
                    <div data-cell-index="2" class="oh-sticky-table__td">
                        {{letter.planned_to_leave_on}}
                    </div>
                    <div data-cell-index="3" class="oh-sticky-table__td">
                        {{letter.status}}
                    </div>
                    <div data-cell-index="4" class="oh-sticky-table__td">
                        {{letter.description|safe|truncatechars_html:30}}
                    </div>
                    <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                        <div class="oh-btn-group">
                            {% if perms.offboarding.change_resignationletter %}
                            <button type="button" hx-get="{% url 'send-mail-employee' letter.employee_id.id %}"
                              title="{% trans " Send Mail" %}" hx-target="#resignationModalBody" class="oh-btn oh-btn--light" data-toggle="oh-modal-toggle"
                              data-target="#resignationModal" style="flex: 1 0 auto; width: 40px; height: 40.68px; padding: 0"
                              onclick="event.stopPropagation()"><ion-icon name="mail-open-outline" role="img" class="md hydrated"
                                aria-label="mail open outline"></ion-icon>
                            </button>
                            {% endif %}

                            <a hx-get="{% url 'create-resignation-request' %}?instance_id={{ letter.id }}" title = {% trans "Edit" %}
                              class="oh-btn oh-btn--light" data-toggle="oh-modal-toggle" hx-target="#resignationModalBody"
                              data-target="#resignationModal" style="flex: 1 0 auto; width: 40px; height: 40.68px; padding: 0"><ion-icon
                                class="text-dark md hydrated" name="create-outline" role="img" aria-label="create outline"></ion-icon></a>
                            {% if perms.offboarding.delete_resignationletter %}
                            <a href="{% url 'delete-resignation-request' %}?letter_ids={{letter.id}}" class="oh-btn oh-btn--light"
                              title = {%trans "Delete" %} style="flex: 1 0 auto; width: 40px; height: 40.68px; padding: 0"
                              onclick="return confirm('{% trans 'Do you want to delete this record' %}?')"><ion-icon
                                class="text-danger md hydrated" name="trash-outline" role="img" aria-label="trash outline"></ion-icon>
                            </a>
                            {% endif %}

                          </div>
                    </div>
                    <div class="oh-sticky-table__td oh-sticky-table__right"  onclick="event.stopPropagation()">
                        <form action="{% url 'update-letter-status' %}">
                            {% if perms.offboarding.change_resignationletter %}
                            <div class="oh-btn-group">
                                {% if letter.status != "approved" %}
                                <button
                                    title="By approving the request employee will added to the offboarding pipeline"
                                    type="button"
                                    onclick="event.stopPropagation();$(this).closest('form').find('input[name=status]').val('approved');resignLetterConfirmation('{% trans 'Do You really want to approve the request' %}?',$(this).closest('form').find('[type=submit]'),true);"
                                    class="oh-btn oh-btn--success w-100 oh-btn--block w-100"
                                >
                                    <ion-icon
                                        name="checkmark"
                                        class="mr-1 md hydrated"
                                        role="img"
                                        aria-label="checkmark"
                                    ></ion-icon>
                                </button>
                                {% else %}
                                <button
                                    type="button"
                                    class="oh-btn oh-btn--success oh-btn--disabled oh-btn--block w-100"
                                >
                                    <ion-icon
                                        name="checkmark"
                                        class="mr-1 md hydrated"
                                        role="img"
                                        aria-label="checkmark"
                                    ></ion-icon>
                                </button>
                                {% endif %}
                                <button
                                    type="button"
                                    onclick="event.stopPropagation();$(this).closest('form').find('input[name=status]').val('rejected');resignLetterConfirmation('{% trans 'Do You really want to reject the request?' %}',$(this).closest('form').find('[type=submit]'));"
                                    class="oh-btn oh-btn--danger oh-btn--block w-100"
                                >
                                    <ion-icon
                                        name="close-circle-outline"
                                        class="mr-1 md hydrated"
                                        role="img"
                                        aria-label="close"
                                    ></ion-icon>
                                </button>
                                <input type="hidden" name="status" />
                                <input
                                    type="hidden"
                                    name="letter_ids"
                                    value="{{letter.id}}"
                                />
                                <input type="hidden" name="offboarding_id" />
                                <input type="hidden" name="notice_period_starts"
                                value="{% now "Y-m-d" %}"
                                id="notice_period_starts{{letter.id}}">
                                <input
                                    type="hidden"
                                    name="notice_period_ends"
                                    id="notice_period_ends{{letter.id}}"
                                />
                                <button type="submit" hidden></button>
                            </div>
                            {% endif %}
                            <input
                                type="submit"
                                hidden=""
                                id="requestCard1Button"
                            />
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <!-- end of sticky table -->

    <!-- start of pagination -->
    <div class="oh-pagination">
        <span class="oh-pagination__page">
            {% trans "Page" %} {{ letters.number }} {% trans "of" %}
            {{letters.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="{{letters.number}}"
                    hx-get="{% url 'search-resignation-request' %}?{{pd}}&view=list"
                    hx-target="#resignationLetterContianer"
                    min="1"
                />
                <span class="oh-pagination__label"
                    >{% trans "of" %} {{letters.paginator.num_pages}}</span
                >
            </div>
            <ul class="oh-pagination__items">
                {% if letters.has_previous %}
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a
                        hx-target="#resignationLetterContianer"
                        hx-get="{% url 'search-resignation-request' %}?{{pd}}&view=list&page=1"
                        class="oh-pagination__link"
                        >{% trans "First" %}</a
                    >
                </li>
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a
                        hx-target="#resignationLetterContianer"
                        hx-get="{% url 'search-resignation-request' %}?{{pd}}&view=list&page={{ letters.previous_page_number }}"
                        class="oh-pagination__link"
                        >{% trans "Previous" %}</a
                    >
                </li>
                {% endif %} {% if letters.has_next %}
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a
                        hx-target="#resignationLetterContianer"
                        hx-get="{% url 'search-resignation-request' %}?{{pd}}&view=list&page={{ letters.next_page_number }}"
                        class="oh-pagination__link"
                        >{% trans "Next" %}</a
                    >
                </li>
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a
                        hx-target="#resignationLetterContianer"
                        hx-get="{% url 'search-resignation-request' %}?{{pd}}&view=list&page={{ letters.paginator.num_pages }}"
                        class="oh-pagination__link"
                        >{% trans "Last" %}</a
                    >
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    <!-- end of pagination -->
</div>
{% else %}
<!-- start of empty page -->
<div class="oh-404">
    <img
        style="width: 150px; height: 150px"
        src="{% static 'images/ui/no-results.png' %}"
        class="oh-404__image mb-4"
    />
    <h5 class="oh-404__subtitle">{% trans "No search result found!" %}</h5>
</div>
<!-- end of empty page -->
{% endif %}

<script>
    // toggle columns //
    toggleColumns("resignation-column-table", "resignationCells");
    localStorageresignationCells = localStorage.getItem(
        "resignation_column_tab"
    );
    if (!localStorageresignationCells) {
        $("#resignationCells").find("[type=checkbox]").prop("checked", true);
    }
    $("[type=checkbox]").change();

</script>
