{% extends 'index.html' %}
{% block content %}
{% load static %}
{% load i18n %}
{% load recruitmentfilters %}
{% load onboardingfilters %}
<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection {
        padding: 10px;
        height: 50px !important;
        /* Adjust the height value as needed */
    }

    .oh-dot--color-done {
        background-color: hsl(148deg, 71%, 44%)
    }

    .oh-dot--color-scheduled {
        background-color: hsl(40deg, 100%, 60%)
    }

    .oh-dot--color-stuck {
        background-color: #ff0400
    }

    .oh-dot--color-ongoing {
        background-color: hsl(204deg, 70%, 53%)
    }

    .oh-dot--color-todo {
        background-color: #e3b75f80
    }

    .oh-dot--color-None {
        background-color: hsla(270, 5%, 48%, 0.709)
    }

    .oh-dot--color- {
        background-color: hsla(270, 5%, 48%, 0.709)
    }
</style>
<div class="oh-alert-container messages">

</div>
{% include "onboarding/onboarding_view_nav.html" %}
<div class="oh-wrapper oh-filter-tag-container filter-value"></div>
<div class="oh-wrapper">
    {% if recruitments %}
        <div class="oh-tabs">
            {% include "onboarding/tabs.html" %}
            <div class="oh-tabs__contents">
                {% for recruitment in recruitments %}
                    {% for stage in recruitment.stages %}
                        {% if request.user|task_manages:recruitment or request.user|stage_manages:stage or perms.onboarding.view_candidatestage %}
                            <div class="oh-tabs__content" id="tab_{{recruitment.id}}">
                                <div class="oh-card">
                                    {% if request.user|task_manages:recruitment or perms.onboarding.add_onboardingstage %}
                                    <div class="d-flex mb-3" style="flex-direction: row-reverse;">
                                        <button class="oh-btn oh-btn--small oh-btn--secondary oh-tabs__action-new-table"
                                            data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
                                            hx-get="{% url 'stage-creation' recruitment.id %}" hx-target="#objectCreateModalTarget">
                                            <ion-icon class="me-1 md hydrated" name="add-outline" role="img"
                                                aria-label="add outline"></ion-icon>{% trans "Stage" %}
                                        </button>
                                    </div>
                                    {% endif %}
                                    <div id="onboardingTable{{recruitment.id}}" class="demo dd">
                                        {% include 'onboarding/onboarding_table.html' %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
        <!-- Paginator Section -->
        <div class="oh-pagination">
            <span class="oh-pagination__page" data-toggle="modal" data-target="#addEmployeeModal">
                {% trans "Page" %} {{ recruitments.number }} {% trans "of" %} {{ recruitments.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="{{recruitments.number}}"
                        {% comment %} hx-get="{% url 'recruitment-search' %}?{{pd}}" hx-target="#tab_rec_{{rec.id}}" {% endcomment %}
                        min="1" />
                    <span class="oh-pagination__label">{% trans "of" %} {{recruitments.paginator.num_pages}}</span>
                </div>

                <ul class="oh-pagination__items">
                    {% if recruitments.has_previous %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a href="{% url 'onboarding-view' %}?{{pd}}&page=1" class="oh-pagination__link">{% trans "First" %}</a>
                        </li>
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a href="{% url 'onboarding-view' %}?{{pd}}&page={{ recruitments.previous_page_number }}"
                                class="oh-pagination__link">{% trans "Previous" %}
                            </a>
                        </li>
                    {% endif %}
                    {% if recruitments.has_next %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a href="{% url 'onboarding-view' %}?{{pd}}&page={{ recruitments.next_page_number }}"
                                class="oh-pagination__link">{% trans "Next" %}
                            </a>
                        </li>
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a href="{% url 'onboarding-view' %}?{{pd}}&page={{ recruitments.paginator.num_pages }}"
                                class="oh-pagination__link">{% trans "Last" %}
                            </a>
                        </li>
                    {% endif %}

                </ul>
            </nav>
        </div>
    {% else %}
        {% if request.GET.closed == 'true' %}
            <div class="oh-empty">
                <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
                <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
                <p class="oh-empty__subtitle">{% trans "At present, There are no closed recruitments." %}</p>
            </div>
        {% else %}
            <div class="oh-empty">
                <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
                <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
                <p class="oh-empty__subtitle">{% trans "At present, There is no ongoing recruitment." %}</p>
            </div>
        {% endif %}
    {% endif %}
</div>
<!-- stage-form -->
<div class="oh-modal" id="editModal1" role="dialog" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width: 550px">
        <div class="oh-modal__dialog-header">
            <button class="oh-modal__close" aria-label="Close" title="{% trans 'Close' %}">
                <ion-icon name="close-outline"></ion-icon>
            </button>
        </div>
        <div id="stageForm"></div>

    </div>
</div>

<!-- stage-update-form -->
<div class="oh-modal" id="editModal3" role="dialog" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width: 550px">
        <div class="oh-modal__dialog-header">
            <button class="oh-modal__close" aria-label="Close" title="{% trans 'Close' %}">
                <ion-icon name="close-outline"></ion-icon>
            </button>
        </div>
        <div id="updateStage"></div>

    </div>
</div>

<!-- task-form -->
<div class="oh-modal" id="editModal2" role="dialog" aria-labelledby="editDialogModal" aria-hidden="true">
    <div class="oh-modal__dialog oh-modal__dialog--timeoff">
        <div class="oh-modal__dialog-header">
            <span class="oh-modal__dialog-title" id="editDialogDialog">{% trans "Create Task" %}</span>
            <button class="oh-modal__close" aria-label="Close" title="{% trans 'Close' %}">
                <ion-icon name="close-outline"></ion-icon>
            </button>
        </div>
        <div id="taskForm">

        </div>
    </div>
</div>

<!-- task-form-update -->
<div class="oh-modal" id="editModal4" role="dialog" aria-labelledby="editDialogModal" aria-hidden="true">
    <div class="oh-modal__dialog oh-modal__dialog--timeoff">
        <div class="oh-modal__dialog-header">
            <span class="oh-modal__dialog-title" id="editDialogDialog">{% trans "Update Task" %}</span>
            <button class="oh-modal__close" aria-label="Close" title="{% trans 'Close' %}">
                <ion-icon name="close-outline"></ion-icon>
            </button>
        </div>
        <div id="updateTask">
        </div>


    </div>
</div>

<div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="oh-modal__dialog">
        <div class="oh-modal__dialog-header">
            <span class="oh-modal__dialog-title" id="modalTask">Send Mail</span>
            <button class="oh-modal__close" aria-label="Close" title="{% trans " Close" %}">
                <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
            </button>
        </div>
        <div id="sendMailModalBody" class="p-3 ">

        </div>
    </div>
</div>


<div class="oh-modal" id="tableTimeOff" role="dialog" aria-labelledby="tableTimeOffModal" aria-hidden="true">
    <div class="oh-modal__dialog ">
        <div class="oh-modal__dialog-header">

            <button class="oh-modal__close" aria-label="Close">
                <ion-icon name="close-outline"></ion-icon>
            </button>
        </div>

        <div class="oh-modal__dialog-relative" id="singleView">

        </div>

    </div>
</div>


<script>
    function bulkStageChange(element) {
        let NewStage = $(element).val();
        let currentStage = $(element).data("stage")
        let checkbox = $(currentStage).find("input[type='checkbox']:checked");

        let ids = []
        let recruitment = $(element).data("recruitment")
        let target = "#onboardingTable" + recruitment
        checkbox.each(function (index) {
            ids.push(parseInt($(this).val()))
        })
        $.ajax({
            type: "POST",
            url: '/onboarding/candidate-stage-bulk-update',
            data: {
                "ids": JSON.stringify(ids),
                "stage": NewStage,
                "recruitment": recruitment,

                csrfmiddlewaretoken: getCookie("csrftoken"),

            },
            success: function (response) {
                $(target).html($(response))
            },
            error: () => {
                console.log("error")
            }

        })
    }

    function select_all(element) {
        let isChecked = $(element).prop("checked");
        let stage = $(element).data("stage");
        $(stage).find('.checkbox-row').prop("checked", isChecked).change();
    }
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== "") {
            const cookies = document.cookie.split(";");
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === name + "=") {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }



    $(document).ready(function () {
        $("#search").on("htmx:afterRequest", function (event, xhr, data) {

            alertContainer.append(alertDiv);
            $("#messages").html(alertContainer);
        });
        $("#is_closed").on("change", function () {
            if ($(this).is(":checked")) {
                window.location.href = "{% url 'onboarding-view' %}?closed=closed";
            } else {
                window.location.href = "{% url 'onboarding-view' %}";
            }
        });
    });

</script>
<script src="{% static 'onboarding_view/activeTab.js' %}"></script>
<script src="{% static 'onboarding_view/search.js' %}"></script>

{% endblock content %}