{% load i18n %} {% load static %} {% include 'filter_tags.html' %}

<span id="bulkDeleteSpan" hx-post="{% url 'restrict-days-bulk-delete' %}?{{pd}}" hx-target="#restrictDays"></span>

{% 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 restrictday %}
    {% if perms.leave.add_restrictleave %}
        <div class="oh-checkpoint-badge text-success mb-2" id="selectAllRestrictDays" style="cursor: pointer">
            {% trans "Select All Days" %}
        </div>
        <div class="oh-checkpoint-badge text-secondary mb-2" id="unselectAllRestrictDays"
            style="cursor: pointer; display: none">
            {% trans "Unselect All Days" %}
        </div>
        {% comment %} <div class="oh-checkpoint-badge text-info mb-2" id="exportRestrictDays"
            style="cursor: pointer; display: none">
            {% trans "Export Days" %}
        </div> {% endcomment %}
        <div class="oh-checkpoint-badge text-danger mb-2" id="showSelectedDays" style="display: none"></div>
    {% endif %}

    <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 id="allRestricDays" type="checkbox" title="{% trans 'Select All' %}"
                                class="oh-input oh-input__checkbox all-restrict-days" />
                        </div>
                    </div>
                    <div 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 'restrict-filter' %}?{{pd}}&sortby=title" hx-target="#restrictDays">
                        {% trans "Title" %}
                    </div>
                    <div class="oh-sticky-table__th {% if request.sort_option.order == '-start_date' %}arrow-up {% elif request.sort_option.order == 'start_date' %}arrow-down {% else %}arrow-up-down {% endif %}"
                        hx-get="{% url 'restrict-filter' %}?{{pd}}&sortby=start_date" hx-target="#restrictDays">
                        {% trans "Start Date" %}
                    </div>
                    <div class="oh-sticky-table__th {% if request.sort_option.order == '-end_date' %}arrow-up {% elif request.sort_option.order == 'end_date' %}arrow-down {% else %}arrow-up-down {% endif %}"
                        hx-get="{% url 'restrict-filter' %}?{{pd}}&sortby=end_date" hx-target="#restrictDays">
                        {% trans "End Date" %}
                    </div>
                    <div class="oh-sticky-table__th {% if request.sort_option.order == '-department' %}arrow-up {% elif request.sort_option.order == 'department' %}arrow-down {% else %}arrow-up-down {% endif %}"
                        hx-get="{% url 'restrict-filter' %}?{{pd}}&sortby=department" hx-target="#restrictDays">
                        {% trans "Department" %}
                    </div>
                    <div class="oh-sticky-table__th" hx-target="#restrictDays">
                        {% trans "Job Position" %}
                    </div>
                    <div class="oh-sticky-table__th">
                        {% trans "Leave Types" %}
                    </div>
                    <div class="oh-sticky-table__th">{% trans "Description" %}</div>
                    <div class="oh-sticky-table__th">{% trans "Company" %}</div>
                    {% if perms.leave.add_restrictleave or perms.leave.change_restrictleave or perms.leave.delete_restrictleave %}
                        <div class="oh-sticky-table__th oh-sticky-table__right" style="width: 250px;">{% trans "Actions" %}</div>
                    {% endif %}
                </div>
            </div>
            <div class="oh-sticky-table__tbody">
                {% for day in restrictday %}
                    <div class="oh-sticky-table__tr">
                        <div class="oh-sticky-table__sd">
                            <div class="centered-div">
                                <input type="checkbox" id="{{day.id}}" onchange="highlightRow($(this))"
                                    class="oh-input oh-input__checkbox all-restrict-days-row" />
                            </div>
                        </div>
                        <div class="oh-sticky-table__td sticky">{{day.title}}</div>
                        <div class="oh-sticky-table__td dateformat_changer">
                            {{day.start_date}}
                        </div>
                        <div class="oh-sticky-table__td dateformat_changer">
                            {{day.end_date}}
                        </div>
                        <div class="oh-sticky-table__td">
                            {{day.department}}
                        </div>
                        <div class="oh-sticky-table__td">
                            {% if day.job_position.all %}
                                {% for i in day.job_position.all %}
                                    <span class="d-flex">{{forloop.counter}}. {{i}}</span>
                                {% endfor %}
                            {% else %}
                                {% trans "All" %}
                            {% endif %}
                        </div>
                        <div class="oh-sticky-table__td">

                            {% if day.include_all and not day.exclued_leave_types.all %}
                                {% trans "All Leave types are Restricted" %}
                            {% endif %}

                            {% if day.spesific_leave_types.all and not day.include_all %}
                                <b>{% trans "Restricted for these Leave Types" %} :</b> {% for i in day.spesific_leave_types.all %} {{i}}, {% endfor %}
                            {% endif %}

                            {% if day.exclued_leave_types.all  %}
                                <b>{% trans "Excluded Leave Types" %} :</b> {% for i in day.exclued_leave_types.all %} {{i}}, {% endfor %}
                            {% endif %}

                        </div>
                        <div class="oh-sticky-table__td">
                            {{day.description}}
                        </div>
                        <div class="oh-sticky-table__td">
                            {{day.company_id}}
                        </div>
                        {% if perms.leave.add_restrictleave or perms.leave.change_restrictleave or perms.leave.delete_restrictleave %}
                            <div class="oh-sticky-table__td oh-sticky-table__right">
                                <div class="oh-btn-group">
                                    {% if perms.leave.change_restrictleave %}
                                        <button class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}"
                                            data-toggle="oh-modal-toggle" data-target="#objectUpdateModal"
                                            hx-get="{% url 'restrict-update' day.id %}?{{pd}}" hx-target="#objectUpdateModalTarget">
                                            <ion-icon name="create-outline"></ion-icon>
                                        </button>
                                    {% endif %}
                                    {% if perms.leave.add_restrictleave %}
                                        <a hx-get="{% url 'duplicate-restrict-leave' day.id %}" hx-target="#objectCreateModalTarget"
                                            data-toggle="oh-modal-toggle" data-target="#objectCreateModal" title="{% trans 'Duplicate' %}"
                                            style="cursor: pointer;" class="oh-btn oh-btn--light-bkg w-100">
                                            <ion-icon name="copy-outline"></ion-icon>
                                        </a>
                                    {% endif %}
                                    {% if perms.leave.delete_restrictleave %}
                                        <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" id="delete-link"
                                            hx-confirm="{% trans 'Are you sure you want to delete?' %}"
                                            hx-post="{% url 'restrict-delete' day.id %}?{{pd}}" hx-target="#restrictDays"
                                            >
                                            <ion-icon name="trash-outline"></ion-icon>
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="oh-pagination" data-pd="{{pd}}">
        <span class="oh-pagination__page">
            {% trans "Page" %} {{ restrictday.number }} {% trans "of" %} {{ restrictday.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="{{restrictday.number}}"
                    hx-get="{% url 'restrict-filter' %}?{{pd}}" hx-target="#restrictDays" min="1" />
                <span class="oh-pagination__label">{% trans "of" %} {{restrictday.paginator.num_pages}}</span>
            </div>
            <ul class="oh-pagination__items">
                {% if restrictday.has_previous %}
                    <li class="oh-pagination__item oh-pagination__item--wide">
                        <a hx-target="#restrictDays" hx-get="{% url 'restrict-filter' %}?{{pd}}&page=1"
                            class="oh-pagination__link">{% trans "First" %}</a>
                    </li>
                    <li class="oh-pagination__item oh-pagination__item--wide">
                        <a hx-target="#restrictDays"
                            hx-get="{% url 'restrict-filter' %}?{{pd}}&page={{ restrictday.previous_page_number }}"
                            class="oh-pagination__link">{% trans "Previous" %}</a>
                    </li>
                {% endif %}
                {% if restrictday.has_next %}
                    <li class="oh-pagination__item oh-pagination__item--wide">
                        <a hx-target="#restrictDays"
                            hx-get="{% url 'restrict-filter' %}?{{pd}}&page={{ restrictday.next_page_number }}"
                            class="oh-pagination__link">{% trans "Next" %}</a>
                    </li>
                    <li class="oh-pagination__item oh-pagination__item--wide">
                        <a hx-target="#restrictDays"
                            hx-get="{% url 'restrict-filter' %}?{{pd}}&page={{ restrictday.paginator.num_pages }}"
                            class="oh-pagination__link">{% trans "Last" %}</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>

    <script>
        $(document).ready(function () {
            tickRestrictDaysCheckboxes();
            $("#selectAllRestrictDays").click(selectAllRestrictDays);
            $(".all-restrict-days-row").change(updateParentCheckbox);
            $(".all-restrict-days").change(toggleAllCheckboxes);
            $("#unselectAllRestrictDays").click(unselectAllRestrictDays);
        });
    </script>

{% else %}
    <!--start of empty page  -->
    <div style="
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        " class="">
        <div style="" class="oh-404">
            <img style="display: block; width: 150px; height: 150px; margin: 10px auto"
                src="{% static 'images/ui/restrict.png' %}" class="mb-4" alt="" />
            <h3 style="font-size: 20px" class="oh-404__subtitle">
                {% trans "No restricted date available." %}
            </h3>
        </div>
    </div>
    <!-- end of empty page -->
{% endif %}
