{% extends 'index.html' %} {% load static i18n widget_tweaks %}
{% block styles %}
<link rel="stylesheet" href="{% static 'css/pms.css' %}" />
{% endblock styles %} {% block content %} {% if feedback_form.errors %}
<div class="oh-wrapper">
    <div class="oh-alert-container">
        {% for error in feedback_form.non_field_errors %}
        <div class="oh-alert oh-alert--animated oh-alert--danger">
            {{ error }}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="oh-wrapper" id="message"></div>
<!-- Feedback form'-->
<main class="oh-onboarding">
    <div class="oh-onboarding-card oh-profile-section" style="max-width: 868px">
        <form
            action="{%url 'feedback-creation' %}"
            id="feedbackCreationForm"
            method="post"
        >
            {% csrf_token %} {{feedback_form.non_field_errors}}
            <div class="oh-onboarding-card__address-group">
                <h2 class="oh-onboarding-card__section-title">
                    {{feedback_form.verbose_name}}
                </h2>
                <div class="oh-input__group">
                    <label
                        class="oh-input__label"
                        for="{{feedback_form.review_cycle.id_for_label}}"
                        >{{feedback_form.review_cycle.label}}</label
                    >
                    {{feedback_form.review_cycle}}
                    {{feedback_form.review_cycle.errors}}
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="oh-input__group">
                            <div class="oh-input__group">
                                <label
                                    class="oh-input__label"
                                    for="{{feedback_form.employee_id.id_for_label}}"
                                    >{{feedback_form.employee_id.label}}</label
                                >
                                {{feedback_form.employee_id }}
                                {{feedback_form.employee_id.errors }}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="oh-input__group">
                            <div class="oh-input__group">
                                <label
                                    class="oh-input__label"
                                    for="{{feedback_form.manager_id.id_for_label}}"
                                    >{{feedback_form.manager_id.label}}</label
                                >
                                {{feedback_form.manager_id}}
                                {{feedback_form.manager_id.errros}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="oh-input__group">
                            <div style="display: flex">
                                <label
                                    class="oh-input__label"
                                    for="{{feedback_form.subordinate_id.id_for_label}}"
                                    >{{feedback_form.subordinate_id.label}}</label
                                >
                                <span
                                    class="oh-info mt-2"
                                    title="{{feedback_form.subordinate_id.help_text|safe }}"
                                ></span>
                            </div>
                            <div class="oh-input__group">
                                {{feedback_form.subordinate_id}}
                                {{feedback_form.subordinate_id.errors}}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="oh-input__group">
                            <div style="display: flex">
                                <label
                                    class="oh-input__label"
                                    for="{{feedback_form.colleague_id.id_for_label}}"
                                    >{{feedback_form.colleague_id.label}}</label
                                >
                                <span
                                    class="oh-info mt-2"
                                    title="{{feedback_form.colleague_id.help_text|safe }}"
                                ></span>
                            </div>
                            <div class="oh-input__group">
                                {{feedback_form.colleague_id}}
                                {{feedback_form.colleague_id.errors}}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="oh-input__group">
                            <div class="oh-input__group">
                                <label
                                    class="oh-input__label"
                                    for="{{feedback_form.others_id.id_for_label}}"
                                    >{{feedback_form.others_id.label}}</label
                                >
                                {{feedback_form.others_id}}
                                {{feedback_form.others_id.errors}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-input__group">
                            <div class="oh-input__group">
                                <label
                                    class="oh-input__label"
                                    for="{{feedback_form.period.id_for_label}}"
                                    >{{feedback_form.period.label}}</label
                                >
                                {{feedback_form.period}}
                                {{feedback_form.period.errors}}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-input__group">
                            <div class="oh-input__group">
                                <label
                                    class="oh-input__label"
                                    for="{{feedback_form.start_date.id_for_label}}"
                                    >{{feedback_form.start_date.label}}</label
                                >
                                {{feedback_form.start_date}}
                                {{feedback_form.start_date.errors}}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-input__group">
                            <div class="oh-input__group">
                                <label
                                    class="oh-input__label"
                                    for="{{feedback_form.end_date.id_for_label}}"
                                    >{{feedback_form.end_date.label}}</label
                                >
                                {{feedback_form.end_date}}
                                {{feedback_form.end_date.errors}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="oh-input__group">
                            <label
                                class="oh-input__label"
                                for="{{feedback_form.question_template_id.id_for_label}}"
                                >{{feedback_form.question_template_id.label}}</label
                            >
                            {{feedback_form.question_template_id}}
                            {{feedback_form.question_template_id.errors}}
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="oh-input__group">
                            <label
                                class="oh-input__label"
                                for="id_employee_key_results_id"
                                >{{feedback_form.employee_key_results_id.label}}</label
                            >
                            {{feedback_form.employee_key_results_id}}
                            {{feedback_form.employee_key_results_id.errors}}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-5" id="">
                        <div class="oh-input__group">
                            <label
                                class="oh-input__label"
                                for="{{feedback_form.cyclic_feedback.id_for_label}}"
                                >{{feedback_form.cyclic_feedback.label}}</label
                            >
                            <div class="oh-switch">
                                {{feedback_form.cyclic_feedback}}
                            </div>
                            {{feedback_form.cyclic_feedback.errors}}
                        </div>
                    </div>
                    <div
                        class="col-12 col-sm-12 col-md-6 col-lg-6"
                        style="display: none"
                        id="cyclic_feedback_period"
                    >
                        <div class="oh-input__group">
                            <label
                                class="oh-input__label"
                                for="{{feedback_form.cyclic_feedback_days_count.id_for_label}}"
                                >{{feedback_form.cyclic_feedback_days_count.label}}</label
                            >
                            <div class="w-100 d-flex">
                                {{feedback_form.cyclic_feedback_days_count}}
                                {{feedback_form.cyclic_feedback_period}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-100 d-flex align-items-center justify-content-end">
                <button
                    type="submit"
                    class="oh-btn oh-btn--secondary oh-btn--w-100-resp"
                >
                    {% trans "Save" %}
                </button>
            </div>
        </form>
    </div>

    <!-- period modal -->
    <div
        class="oh-modal"
        id="PeriodModal"
        role="dialog"
        aria-labelledby="editKeyResultModal"
        aria-hidden="true"
    >
        <div class="oh-modal__dialog">
            <!-- for creating period -->
            <div class="oh-modal__dialog-header">
                <button
                    type="button"
                    class="oh-modal__close"
                    aria-label="Close"
                >
                    <ion-icon name="close-outline"></ion-icon>
                </button>
            </div>
            <div class="oh-modal__dialog-body" id="periodModalTarget"></div>
        </div>
    </div>
    <!-- end of period modal -->
</main>
<button
    id="colleguesButton"
    hx-get="{% url 'get-collegues' %}"
    hx-target="#id_colleague_id"
    hidden
></button>
<button
    id="managerButton"
    hx-get="{% url 'get-collegues' %}"
    hx-target="#id_manager_id"
    hidden
></button>
<button
    id="subordinatesButton"
    hx-get="{% url 'get-collegues' %}"
    hx-target="#id_subordinate_id"
    hidden
></button>
<button
    id="keyresultButtton"
    hx-get="{% url 'get-collegues' %}"
    hx-target="#id_employee_key_results_id"
    hidden
></button>

<script>
    $(document).ready(function () {
        get_collegues($("#id_employee_id"));
        setTimeout(function () {
            select = $("select");
            select.siblings("span.select2.select2-container").remove();
            select.select2();
        }, 700);
    });

    function get_collegues(element) {
        var employee_id = $(element).val();

        // Check if the employee_id is valid

        // Dynamically set the hx-vals attribute for the manager, colleagues, subordinates, keyresult buttons
        if (employee_id) {

            $("#managerButton")
                .attr(
                    "hx-vals",
                    JSON.stringify({
                        employee_id: employee_id,
                        data: "manager",
                    })
                )
                .click();
            $("#colleguesButton")
                .attr(
                    "hx-vals",
                    JSON.stringify({
                        employee_id: employee_id,
                        data: "colleagues",
                    })
                )
                .click();
            $("#subordinatesButton")
                .attr(
                    "hx-vals",
                    JSON.stringify({
                        employee_id: employee_id,
                        data: "subordinates",
                    })
                )
                .click();
            $("#keyresultButtton")
                .attr(
                    "hx-vals",
                    JSON.stringify({
                        employee_id: employee_id,
                        data: "keyresults",
                    })
                )
                .click();
        } else {
            console.error("Invalid employee_id");
        }
    }
</script>
<script src="{% static 'src/feedback/feedback_creation.js' %}"></script>
<script src="{% static 'src/period/period.js' %}"></script>
{% endblock%}