{% load static %}
{% load i18n %}
{% load basefilters %}
{% 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-wrapper">
    <div class="oh-checkpoint-badge text-success mb-2" id="selectAllRShifts" style="cursor: pointer">
        {% trans "Select All Shifts" %}
    </div>
    <div class="oh-checkpoint-badge text-secondary mb-2" id="unselectAllRShifts" style="cursor: pointer;display: none;">
        {% trans "Unselect All Shifts" %}
    </div>
    <div class="oh-checkpoint-badge text-info mb-2" id="exportRShifts" style="cursor: pointer; display: none;">
        {% trans "Export Shifts" %}
    </div>
    <div class="oh-checkpoint-badge text-danger mb-2" id="selectedShowRShifts" style="display: none"></div>

    <div id="view-container">
        {% include 'filter_tags.html' %}
        {% if rshift_assign %}
            <div class="oh-table_sticky--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="roratingShiftCells">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="rotating-shift-table" data-table-name="rotating_shift_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" style="width:10px">
                                    <div class="centered-div">
                                        <input type="checkbox" class="oh-input oh-input__checkbox all-rshift"
                                            title="{% trans 'Select All' %}" />
                                    </div>
                                </div>
                                <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-target="#view-container"
                                    hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&orderby=employee_id__employee_first_name">
                                    {% trans "Employee" %}
                                </div>
                                <div data-cell-index="1" data-cell-title='{% trans "Title" %}' class="oh-sticky-table__th">
                                    {% trans "Title" %}</div>
                                <div data-cell-index="2" data-cell-title='{% trans "Based On" %}'
                                    class="oh-sticky-table__th">{% trans "Based On" %}</div>
                                <div data-cell-index="3" data-cell-title='{% trans "Rotate" %}' class="oh-sticky-table__th">
                                    {% trans "Rotate" %}</div>
                                <div data-cell-index="4" data-cell-title='{% trans "Start Date" %}'
                                    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-target="#view-container"
                                    hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&orderby=start_date">
                                    {% trans "Start Date" %}
                                </div>
                                <div data-cell-index="5" data-cell-title='{% trans "Current Shift" %}'
                                    class="oh-sticky-table__th">{% trans "Current Shift" %}</div>
                                <div data-cell-index="6" data-cell-title='{% trans "Next Switch" %}'
                                    class="oh-sticky-table__th {% if request.sort_option.order == '-next_change_date' %}arrow-up {% elif request.sort_option.order == 'next_change_date' %}arrow-down {% else %} arrow-up-down {% endif %}"
                                    hx-target="#view-container"
                                    hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&orderby=next_change_date">
                                    {% trans "Next Switch" %}
                                </div>
                                {% if perms.base.change_rotatingshiftassign or request.user|is_reportingmanager or perms.base.delete_rotatingshiftassign %}
                                    <div data-cell-index="7" data-cell-title='{% trans "Next Shift" %}'
                                        class="oh-sticky-table__th">{% trans "Next Shift" %}</div>
                                    <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 rshift in rshift_assign %}
                                <div class="oh-sticky-table__tr" draggable="true" hx-get="{% url 'rshift-individual-view' rshift.id %}?{{pd}}&instances_ids={{assign_ids}}" hx-target="#objectDetailsModalTarget"
                                    data-toggle="oh-modal-toggle" data-target="#objectDetailsModal">
                                    <div class="oh-sticky-table__sd" onclick="event.stopPropagation();">
                                        <div class="centered-div">
                                            <input type="checkbox" id="{{rshift.id}}" onchange="highlightRow($(this))" class="oh-input rshift-checkbox oh-input__checkbox all-rshift-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="{{rshift.employee_id.get_avatar}}" class="oh-profile__image" alt="" />
                                            </div>
                                            <span class="oh-profile__name oh-text--dark">{{rshift.employee_id}}</span>
                                        </div>
                                    </div>
                                    <div data-cell-index="1" class="oh-sticky-table__td">{{rshift.rotating_shift_id}}</div>
                                    <div data-cell-index="2" class="oh-sticky-table__td">{{rshift.get_based_on_display }}</div>
                                    <div data-cell-index="3" class="oh-sticky-table__td">
                                        {% if rshift.based_on == 'after' %}
                                            {% trans "Rotate after" %} {{rshift.rotate_after_day}} {% trans "days" %}
                                        {% elif rshift.based_on == "weekly" %}
                                            {% trans "Weekly every" %} {{rshift.rotate_every_weekend}}
                                        {% elif rshift.based_on == "monthly" %}
                                            {% if rshift.rotate_every == "1" %}
                                                {% trans "Rotate every" %} {{rshift.rotate_every}}{% trans "st day of month" %}
                                            {% elif rshift.rotate_every == "2" %}
                                                {% trans "Rotate every" %} {{rshift.rotate_every}}{% trans "nd day of month" %}
                                            {% elif rshift.rotate_every == "3" %}
                                                {% trans "Rotate every" %} {{rshift.rotate_every}}{% trans "rd day of month" %}
                                            {% elif rshift.rotate_every == "last" %}
                                                {% trans "Rotate every last day of month" %}
                                            {% else %}
                                                {% trans "Rotate every" %} {{rshift.rotate_every}}{% trans "th day of month" %}
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                    <div data-cell-index="4" class="oh-sticky-table__td dateformat_changer">
                                        {{rshift.start_date}}</div>
                                    <div data-cell-index="5" class="oh-sticky-table__td">{{rshift.current_shift}}</div>
                                    <div data-cell-index="6" class="oh-sticky-table__td dateformat_changer">
                                        {{rshift.next_change_date}}</div>
                                    <div data-cell-index="7" class="oh-sticky-table__td">{{rshift.next_shift}}</div>
                                    {% if perms.base.change_rotatingshiftassign or request.user|is_reportingmanager or perms.base.delete_rotatingshiftassign %}
                                        <div class="oh-sticky-table__td oh-sticky-table__right">
                                            <div class="oh-btn-group" onclick="event.stopPropagation()">
                                                {% if perms.base.change_rotatingshiftassign or request.user|is_reportingmanager %}
                                                    <a hx-get="{% url 'rotating-shift-assign-update' rshift.id %}"
                                                        hx-target="#objectUpdateModalTarget" hx-swap="innerHTML"
                                                        data-target="#objectUpdateModal" data-toggle="oh-modal-toggle" type="button"
                                                        class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Update' %}">
                                                        <ion-icon name="create-outline"></ion-icon>
                                                    </a>
                                                    <a class="oh-btn oh-btn--light-bkg w-100" data-toggle="oh-modal-toggle"
                                                        data-target="#objectCreateModal"
                                                        hx-get="{% url 'rotating-shift-assign-duplicate' rshift.id %}?{{pg}}"
                                                        title="{% trans 'Duplicate' %}" hx-target="#objectCreateModalTarget"
                                                        style="cursor: pointer;">
                                                        <ion-icon name="copy-outline"></ion-icon>
                                                    </a>
                                                {% endif %}
                                                {% if perms.base.change_rotatingshiftassign or request.user|is_reportingmanager %}
                                                    {% if rshift.is_active %}
                                                        <form hx-confirm="{% trans 'Do you want to archive this rotating shift assign?' %}"
                                                            hx-get="{% url 'rotating-shift-assign-archive' rshift.id %}?{{pd}}"
                                                            hx-target="#view-container" style="width:100%">
                                                            <input type="hidden" name="is_active" value="{% trans 'False' %}" id="">
                                                            <button class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                                                                title="{% trans 'Archive' %}">
                                                                <ion-icon name="archive"></ion-icon>
                                                            </button>
                                                        </form>
                                                    {% else %}
                                                        <form
                                                            hx-confirm="{% trans 'Do you Want to un-archive this rotating shift assign?' %}"
                                                            hx-get="{% url 'rotating-shift-assign-archive' rshift.id %}?{{pd}}"
                                                            hx-target="#view-container" style="width:100%">
                                                            <button class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                                                                title="{% trans 'Un-Archive' %}">
                                                                <ion-icon name="archive"></ion-icon>
                                                            </button>
                                                        </form>
                                                    {% endif %}
                                                {% endif %}
                                                {% if perms.base.delete_rotatingshiftassign or request.user|is_reportingmanager %}
                                                    <form style="width:100%"
                                                        hx-confirm="{% trans 'Are you sure you want to delete this rotating shift assign?' %}"
                                                        hx-post="{% url 'rotating-shift-assign-delete' rshift.id %}?{{pd}}"
                                                        hx-target="#view-container">
                                                        {% csrf_token %}
                                                        <button type="submit"
                                                            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                                                            title="{% trans 'Remove' %}">
                                                            <ion-icon name="trash-outline"></ion-icon>
                                                        </button>
                                                    </form>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <!-- end of sticky table -->

                <!-- start of pagination -->
                <div class="oh-pagination">
                    <span class="oh-pagination__page">
                        {% trans "Page" %} {{rshift_assign.number}} {% trans "of" %} {{rshift_assign.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="{{rshift_assign.number}}"
                                hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}" hx-target="#view-container"
                                min="1" />
                            <span class="oh-pagination__label">{% trans "of" %} {{rshift_assign.paginator.num_pages}}</span>
                        </div>
                        <ul class="oh-pagination__items">
                            {% if rshift_assign.has_previous %}
                                <li class="oh-pagination__item oh-pagination__item--wide">
                                    <a hx-target="#view-container" hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&page=1"
                                        class="oh-pagination__link">{% trans "First" %}</a>
                                </li>
                                <li class="oh-pagination__item oh-pagination__item--wide">
                                    <a hx-target="#view-container"
                                        hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&page={{ rshift_assign.previous_page_number }}"
                                        class="oh-pagination__link">{% trans "Previous" %}</a>
                                </li>
                            {% endif %}
                            {% if rshift_assign.has_next %}
                                <li class="oh-pagination__item oh-pagination__item--wide">
                                    <a hx-target="#view-container"
                                        hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&page={{ rshift_assign.next_page_number }}"
                                        class="oh-pagination__link">{% trans "Next" %}</a>
                                </li>
                                <li class="oh-pagination__item oh-pagination__item--wide">
                                    <a hx-target="#view-container"
                                        hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&page={{ rshift_assign.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 %}
    </div>
</div>

<script src="{% static '/base/actions.js' %}"></script>
<script>
    function addingRShiftIds() {
        var ids = JSON.parse($("#selectedRShifts").attr("data-ids") || "[]");
        var selectedCount = 0;

        $(".all-rshift-row").each(function () {
            if ($(this).is(":checked")) {
                ids.push(this.id);
            } else {
                var index = ids.indexOf(this.id);
                if (index > -1) {
                    ids.splice(index, 1);
                }
            }
        });

        ids = makeRShiftListUnique(ids);
        selectedCount = ids.length;

        getCurrentLanguageCode(function (code) {
            languageCode = code;
            var message = rowMessages[languageCode];
            $("#selectedRShifts").attr("data-ids", JSON.stringify(ids));
            if (selectedCount === 0) {
                $("#selectedShowRShifts").css("display", "none");
                $("#exportRShifts").css("display", "none");
                $("#unselectAllRShifts").css("display", "none");
            } else {
                $("#exportRShifts").css("display", "inline-flex");
                $("#unselectAllRShifts").css("display", "inline-flex");
                $("#selectedShowRShifts").css("display", "inline-flex");
                $("#selectedShowRShifts").text(selectedCount + " - " + message);
            }
        });
    }

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

        $(".all-rshift").change(function () {
            addingRShiftIds();
        });

        tickRShiftCheckboxes();

        $("#selectAllRShifts").click(function () {
            $("#selectedRShifts").attr("data-clicked", 1);
            $("#selectedShowRShifts").removeAttr("style");
            var savedFilters = JSON.parse(localStorage.getItem("savedFilters"));

            if (savedFilters && savedFilters["filterData"] !== null) {
                var filter = savedFilters["filterData"];
                $.ajax({
                    url: '{% url "r-shift-select-filter" %}',
                    data: { page: "all", filter: JSON.stringify(filter) },
                    type: "GET",
                    dataType: "json",
                    success: function (response) {
                        var employeeIds = response.employee_ids;
                        var selectedCount = employeeIds.length;
                        for (var i = 0; i < employeeIds.length; i++) {
                            var empId = employeeIds[i];
                            $("#" + empId).prop("checked", true);
                        }
                        $("#selectedRShifts").attr("data-ids", JSON.stringify(employeeIds));

                        count = makeRShiftListUnique(employeeIds);
                        tickRShiftCheckboxes(count);
                    },
                    error: function (xhr, status, error) {
                        console.error("Error:", error);
                    },
                });
            } else {
                $.ajax({
                    url: '{% url "r-shift-select" %}',
                    data: { page: "all" },
                    type: "GET",
                    dataType: "json",
                    success: function (response) {
                        var employeeIds = response.employee_ids;
                        var selectedCount = employeeIds.length;
                        for (var i = 0; i < employeeIds.length; i++) {
                            var empId = employeeIds[i];
                            $("#" + empId).prop("checked", true);
                        }
                        var previousIds = $("#selectedRShifts").attr("data-ids");
                        $("#selectedRShifts").attr(
                            "data-ids",
                            JSON.stringify(
                                Array.from(
                                    new Set([...employeeIds, ...JSON.parse(previousIds)])
                                )
                            )
                        );
                        count = makeRShiftListUnique(employeeIds);
                        tickRShiftCheckboxes(count);
                    },
                    error: function (xhr, status, error) {
                        console.error("Error:", error);
                    },
                });
            }
        });

        $("#unselectAllRShifts").click(function () {
            $("#selectedRShifts").attr("data-clicked", 0);
            $.ajax({
                url: '{% url "r-shift-select" %}',
                data: { page: "unselect", filter: "{}" },
                type: "GET",
                dataType: "json",
                success: function (response) {
                    var employeeIds = response.employee_ids;
                    for (var i = 0; i < employeeIds.length; i++) {
                        var empId = employeeIds[i];
                        $("#" + empId).prop("checked", false);
                        $(".all-rshift").prop("checked", false);
                    }
                    var ids = JSON.parse($("#selectedRShifts").attr("data-ids") || "[]");
                    var uniqueIds = makeListUnique(ids);
                    toggleHighlight(uniqueIds);
                    $("#selectedRShifts").attr("data-ids", JSON.stringify([]));

                    count = [];
                    tickRShiftCheckboxes(count);
                },
                error: function (xhr, status, error) {
                    console.error("Error:", error);
                },
            });
        });
    });
    // toggle columns //
    toggleColumns("rotating-shift-table", "roratingShiftCells");
    localStorageroratingShiftCells = localStorage.getItem("rotating_shift_tab");
    if (!localStorageroratingShiftCells) {
        $("#roratingShiftCells").find("[type=checkbox]").prop("checked", true);
    }
    $("[type=checkbox]").change();
</script>