{% extends 'index.html' %}
{% block content %}
{% load static 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 */
    }
</style>


<div class="oh-wrapper">
    {% include "onboarding/onboarding_view_nav.html" %}

    <div id = "stage-messages"></div>
    <div class="oh-wrapper oh-filter-tag-container filter-value" style="margin-left:-3px"></div>
    <div class="oh-tabs">
        {% include "onboarding/tabs.html" %}
        <div class="oh-tabs__contents">
            {% for rec in recruitments %}
            <div class="oh-tabs__content " id="tab_{{rec.id}}" data-recruitment-id="{{rec.id}}">
                <div class="oh-kanban">
                    {% for stage in rec.stages %}

                        <div class="oh-kanban__section stage"
                        data-recruitment-id="{{rec.id}}"
                        data-stage-id="{{stage.grouper.id}}"
                        data-sequence="{{forloop.counter}}"
                        style="position:sticky;top:0;"
                    >
                            <div class="oh-kanban__section-head" {% if request.user.employee_get in stage.grouper.employee_id.all %} style="background-color: hsl(38.08deg 100% 50% / 8%) !important;" {% endif %}>
                                <div class="d-flex ">
                                    <span class="oh-kanban__section-title" data-type="label">
                                        <input
                                        class="oh-tabs__movable-title oh-table__editable-input"
                                        value="{{stage.grouper}}"
                                        hx-post="{% url 'stage-name-update' stage.grouper.id %}"
                                        name='stage'
                                        hx-target="#stage-messages"
                                        style="width: 160px;"
                                        readonly=""
                                    />
                                    </span>
                                    <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 stage_count" title="{{stage.grouper.candidate.count}} {% trans 'Candidate' %}">{{stage.grouper.candidate.count}}</span>
                                </div>
                                {% if request.user|stage_manages:stage or perms.onboarding.view_candidatestage %}
                                    <div class="oh-kanban__head-actions oh-kanban__dropdown">
                                        <button
                                            class="oh-btn oh-btn--small oh-btn--transparent oh-kanban__btn oh-kanban__dropdown-toggle" title="{% trans "Actions" %}">
                                            <ion-icon name="ellipsis-vertical-sharp" role="img" class="md hydrated"
                                                aria-label="ellipsis vertical sharp"></ion-icon>
                                        </button>
                                        <div class="oh-dropdown oh-kanban__dropdown-menu d-none">
                                            <div class="oh-dropdown__menu oh-dropdown__menu--right">
                                                <ul class="oh-dropdown__items">
                                                    <li class="oh-dropdown__item">
                                                        <a data-toggle="oh-modal-toggle"
                                                        data-target="#editModal3"
                                                        hx-get="{% url 'stage-update' stage.grouper.id rec.id %}"
                                                        hx-target="#updateStage" class="oh-dropdown__link" style="cursor:pointer;">{% trans "Edit" %}</a>
                                                    </li>
                                                    <li class="oh-dropdown__item">
                                                        <a  href="{% url 'stage-delete' stage.grouper.id %}"
                                                            onclick="return confirm('{% trans "Do you want to delete this stage?" %}')"
                                                            class="oh-dropdown__link oh-dropdown__link--danger">{% trans "Delete" %}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <button
                                            class="oh-btn oh-btn--small oh-btn--transparent p-0"
                                            data-toggle="oh-modal-toggle"
                                            data-target="#taskModal"
                                            hx-get="{% url 'task-creation' %}?stage_id={{stage.grouper.id}}"
                                            hx-target = "#taskModalBody"

                                            title="{% trans 'Add task' %}">
                                            <ion-icon name="add-sharp" role="img" class="md hydrated"
                                                aria-label="add sharp"></ion-icon>
                                        </button>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="oh-kanban__section-body ui-sortable onboarding_items" data-stage-id="{{stage.grouper.id}}" data-recruitment-id="{{rec.id}}">
                                {% for candidate in stage.list %}
                                <div class="oh-kanban__card candidate" id="{{candidate.id}}"  data-candidate="{{candidate.candidate_id}}" data-candidate-id="{{candidate.candidate_id.id}}" data-recruitment-id="{{rec.id}}" data-candidate-now = "{{stage.id}}" data-job-position = "{{candidate.candidate_id.job_position_id}}" data-portal-count="{{candidate.candidate_id.onboarding_portal.count}}" data-join-date="{{candidate.candidate_id.joining_date}}" >
                                    <div class="oh-kanban__card-head">
                                        <div class="oh-profile oh-profile--md">
                                            <div class="oh-profile__avatar mr-1">
                                            <img src="{{candidate.candidate_id.get_avatar}}" class="oh-profile__image" alt="">
                                            </div>
                                            <span class="oh-profile__name oh-text--dark fw-bold" data-type="label">{{candidate.candidate_id.name}}</span>
                                        </div>
                                        <div class="oh-kanban__card-actions oh-kanban__dropdown">
                                            <button class="oh-btn oh-btn--small oh-btn--transparent oh-kanban__btn oh-kanban__dropdown-toggle" title="{% trans "Actions" %}">
                                                <ion-icon name="ellipsis-vertical-sharp" role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon>
                                            </button>
                                            <div class="oh-dropdown oh-kanban__dropdown-menu d-none">
                                                <div class="oh-dropdown__menu oh-dropdown__menu--right">
                                                    <ul class="oh-dropdown__items">
                                                        {% comment %} <li class="oh-dropdown__item">
                                                            <a href="#" class="oh-dropdown__link oh-dropdown__link--danger oh-kanban__card-delete">Delete</a>
                                                        </li> {% endcomment %}
                                                        <li class="oh-dropdown__item">
                                                            <a href="#" data-toggle="oh-modal-toggle" data-target="#sendMailModal" hx-get="{% url 'onboarding-send-mail' candidate.candidate_id.id %}" hx-target="#sendMailModalBody" class="oh-dropdown__link">{% trans "Send Mail" %}</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="oh-kanban__card-body">
                                        {{candidate.candidate_id.job_position_id.job_position}}
                                        <div class="oh-checkpoint-badge oh-checkpoint-badge--primary" style="margin-left:94px" >
                                            {{candidate.task_completion_ratio}}
                                        </div> <br/>
                                        <span class="oh-kanban__card-footer-text oh-text--light">{{candidate.candidate_id.email}}</span>
                                        <button class="oh-kanban__card-body-collapse oh-kanban__card-collapse--down" aria-label="Toggle Options" title="{% trans 'Tasks' %}"></button>
                                        <div class="oh-kanban__card-content oh-kanban__card-content--hide">
                                            {% for task in candidate.onboarding_stage_id.onboarding_task.all %}
                                            <label class="oh-label oh-label--sm d-block">{{task.task_title}}</label>
                                            <div id="task{{task.id}}{{candidate.candidate_id.id}}">
                                                {% include 'onboarding/candidate_task.html' %}
                                            </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                <div class="oh-kanban__card-footer">
                                    <span class="oh-kanban__card-footer-text oh-text--light">{% trans "Candidate" %}</span>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                    {% if request.user|task_manages:rec or perms.onboarding.add_candidatestage %}
                    <div class="oh-kanban__add-container">
                        <button class="oh-btn oh-btn--x-small oh-kanban__add-section" onclick="event.stopPropagation()"  data-action="toggle"
                            data-target="#addStageModal" hx-get="{% url 'stage-creation' rec.id %}" hx-target="#stageForm" data-toggle="oh-modal-toggle">
                            <ion-icon class="me-1" name="add-outline"></ion-icon>
                            {% trans "Stage" %}
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% 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 'kanban-view' %}?{{pd}}&page=1" class="oh-pagination__link">{% trans "First" %}</a>
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
                <a href="{% url 'kanban-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 'kanban-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 'kanban-view' %}?{{pd}}&page={{ recruitments.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
            </li>
            {% endif %}

        </ul>
        </nav>
    </div>


</div>
<div class="messages"></div>

<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>

<div class="oh-modal" id="addStageModal" 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" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
            </button>
        </div>
        <div id="stageForm">
        </div>
    </div>
</div>

<div class="oh-modal" id="taskModal" role="dialog" aria-labelledby="taskModal" 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" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
            </button>
        </div>
        <div id="taskModalBody" class="">

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

<div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="" 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="modalTask">{% trans "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>
<script>
    $(document).ready(function() {

        $("#is_closed").on("change", function() {
            if ($(this).is(":checked")) {
                window.location.href = "{% url 'kanban-view' %}?closed=closed";
            } else {
                window.location.href = "{% url 'kanban-view' %}";
            }
        });
    });
</script>
<script src="{% static '/kanban/script.js' %}"></script>
<script src="{% static 'onboarding_view/search.js' %}"></script>
<script src="{% static 'onboarding_view/activeTab.js' %}"></script>

{% endblock content %}
