{% load i18n %} {% load horillafilters %} {% 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 %}
    <script>
        setTimeout(function () {
            $(".oh-modal__close").click();
        }, 1000);
    </script>
</div>
{% endif %}
<div class="oh-modal__dialog-header">
    <span class="oh-modal__dialog-title" id="objectCreateModalLabel"
        >{% trans "Leave Request" %}</span
    >
    <button
        class="oh-modal__close"
        aria-label="Close"
        {% if messages %}
            hx-get="{{hx_url}}"
            hx-target="{{hx_target}}"
        {% endif %}
    >
        <ion-icon name="close-outline"></ion-icon>
    </button>
    <div id="availableLeaveCount" style="height: 40px;display: none;"></div>
</div>
<div class="oh-modal__dialog-body">
    <form
        hx-post="{% url 'request-creation' %}?{{pd}}"
        hx-encoding="multipart/form-data"
        hx-target="#objectCreateModalTarget"
        id="leaveRequestCreateForm"
    >
        {{form.as_p}}
    </form>
</div>
<script>
    $(document).ready(function () {
        $("select").on("select2:select", function (e) {
            $(".leave-message").hide();
            $(this).closest("select")[0].dispatchEvent(new Event("change"));
        });
    });
</script>


{% if "recruitment"|app_installed %}
    <script>
        $("#leaveRequestCreateForm [type=submit]").hide();
        var button = `
        <div class="oh-modal__dialog-footer p-0 mt-3">
        <button id="buttonID" class="oh-btn oh-btn--secondary oh-btn--shadow">
            Save
        </button>
        </div>
        `;
        $("#leaveRequestCreateForm .row").after(button);

        $(document).ready(function () {
            $("#buttonID").on("click", function () {
                event.preventDefault();
                event.stopPropagation();
                var startDate = $("#leaveRequestCreateForm [name = start_date]").val();
                var endDate = $("#leaveRequestCreateForm [name = end_date]").val();
                var employee = $("#leaveRequestCreateForm [name = employee_id]").val();

                $.ajax({
                    type: "GET",
                    url: "{% url 'check-interview-conflicts' %}",
                    data: {
                        start_date: startDate,
                        end_date: endDate,
                        employee_id: employee,
                    },
                    success: function (response) {
                        var interviews = response.interviews;

                        title = "Leave Request Alert.";
                        var content = `<div>
                <p>${employee} has interview in the requested date.</p>
                <ol style="margin-left:5%">`;
                        interviews.forEach(function (interview, index) {
                            content += `<li style="text-align:left; font-size:14px">${interview}</li>`;
                        });
                        content += `</ol>
                <p style="font-weight:700">Are you sure you want to proceed with the request?</p>
            </div>`;

                        if (interviews.length != 0) {
                            Swal.fire({
                                title: title,
                                icon: "info",
                                html: content,
                                showCancelButton: true,
                                confirmButtonColor: "#008000",
                                cancelButtonColor: "#d33",
                                confirmButtonText: "Confirm",
                            }).then(function (result) {
                                if (result.isConfirmed) {
                                    $("#leaveRequestCreateForm [type=submit]").click();
                                }
                            });
                        } else {
                            $("#leaveRequestCreateForm [type=submit]").click();
                        }
                    },
                });
            });
        });
    </script>
{% endif %}
