{% load i18n %} {% load horillafilters %}
{% if messages %}
    <span hx-get="{{hx_url}}" hx-target="{{hx_target}}" hx-trigger="load"
        hx-on-htmx-after-request="setTimeout(function () { reloadMessage(this); $('.oh-modal__close').click(); }, 1000);">
    </span>
{% endif %}
<div class="oh-modal__dialog-header">
    <span class="oh-modal__dialog-title" id="objectCreateModalLabel">{{form.verbose_name}}</span>
    <button class="oh-modal__close" aria-label="Close">
        <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>

{% 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 %}