{% load i18n offboarding_filter %}

<div class="oh-modal__dialog ">
    <div class="oh-modal__dialog-header">
        <h2 class="oh-modal__dialog-title" id="">
          {% trans "Details" %}
        </h2>
        <button class="oh-modal__close" aria-label="Close">
            <ion-icon name="close-outline"></ion-icon>
        </button>
    </div>

    <div class="oh-modal__dialog-relative">
        {% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or perms.offboarding.change_offboardingemployee %}
            {% if request.GET.requests_ids %}
                <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
                    <button hx-get="{% url "offboarding-individual-view" previous %}?requests_ids={{requests_ids}}" hx-target = "#objectDetailsModalTarget" class="oh-modal__diaglog-nav oh-modal__nav-prev">
                        <ion-icon name="chevron-back-outline" class="md hydrated" role="img"
                        aria-label="chevron back outline"></ion-icon>
                    </button>

                    <button hx-get="{% url "offboarding-individual-view" next %}?requests_ids={{requests_ids}}" hx-target = "#objectDetailsModalTarget" class="oh-modal__diaglog-nav oh-modal__nav-next">
                        <ion-icon name="chevron-forward-outline" class="md hydrated" role="img"
                        aria-label="chevron forward outline"></ion-icon>
                    </button>
                </div>
            {% endif %}
        {% endif %}
        <div class="oh-modal__dialog-body oh-timeoff-modal__body">
            <div class="oh-timeoff-modal__profile-content">
                <div class="oh-profile">
                    <div class="oh-profile-section__edit-photo me-3" style="width: 80px; height: 80px;" >
                        <img src="{{employee.employee_id.get_avatar}}"
                            class="oh-profile-section__modal-image" alt="" />
                    </div>
                    <div  >
                        <a class="oh-timeoff-modal__profile-content" style="text-decoration:none;"
                            href ="{% url 'employee-view-individual' employee.employee_id.id %}">
                            <div class="oh-timeoff-modal__profile-info mb-2">
                                <span class="oh-timeoff-modal__user fw-bold">{{employee.employee_id}}</span>
                                <span class="oh-timeoff-modal__position">{{employee.employee_id.employee_work_info.department_id}} / {{employee.employee_id.employee_work_info.job_position_id}}</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="oh-timeoff-modal__stats-container">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Email" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{employee.employee_id.email}}</span>
                </div>
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Job Position" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{employee.employee_id.get_job_position}}</span>
                </div>
            </div>

            <div class="oh-timeoff-modal__stats-container mt-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Contact" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{employee.employee_id.employee_work_info.mobile}}</span>
                </div>
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Notice Period start Date" %}</span>
                    <span class="oh-timeoff-modal__stat-count dateformat_changer">{{employee.notice_period_starts}}</span>
                </div>
            </div>
            <div class="oh-timeoff-modal__stats-container mt-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Notice Period end Date" %}</span>
                    <span class="oh-timeoff-modal__stat-count dateformat_changer">
                        {{employee.notice_period_ends}}
                    </span>
                </div>
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Stage" %}</span>
                    <span class="oh-timeoff-modal__stat-count">
                        {% if perms.offboarding.change_offboardingstage or request.user.employee_get|any_manager %}
                            <form id="stage_change" hx-get="{% url "offboarding-change-stage" %}?employee_ids={{employee.id}}"
                            hx-target="#offboardingBody{{employee.stage_id.offboarding_id.id}}">
                                {{ stage_forms|individual_view_stages:employee.stage_id }}
                                <input type="submit" hidden />
                            </form>
                        {% else %}
                            <span class="oh-timeoff-modal__stat-count">
                                {{employee.stage_id}}
                            </span>
                        {% endif %}
                    </span>
                </div>
            </div>
            {% if employee.employeetask_set.all %}
            <div class="oh-timeoff-modal__stats w-100 mt-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-count">{% trans "Tasks" %}</span>
                    <div class="row ms-2">
                        {% for task in employee.employeetask_set.all %}
                            <div class="col-6 ps-0 pb-1">
                                <div class="oh-timeoff-modal__stat-title mb-1 "><span class="oh-dot oh-dot--small me-1 oh-dot--color-{{task.status}}"></span>{{task.task_id.title}} </div>
                                <div class="" id="task{{task.id}}{{employee.id}}">
                                    {% include 'offboarding/pipeline/employee_task.html' %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

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

<script>
    $(document).ready(function() {
        var selects = $("[name=stage_id][data-selected-stage]");
        $.each(selects, function (indexInArray, valueOfElement) {
            $(valueOfElement).val($(valueOfElement).attr("data-selected-stage"));
        });
    })
    $("select[name='task']").on("change", function() {
        var value = $(this).val();
        var dot = $(this).closest('.col-6').find('span.oh-dot');

        // Update the class
        dot.removeClass().addClass('oh-dot oh-dot--small me-1 oh-dot--color-' + value);
    })
</script>
