{% extends "hrapps/main/base.html" %}

{% block hrapps_content %}
    <div class="row">
        <div class="col-md-12 text-center">
            <h3>Apply to {{ form.corporation.corporation_name }}</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    Form
                </div>
                <div class="card-body">
                    {% for field in fields %}
                        <div class="card mb-2" data-fieldtype="{{ field.type }}" id="question_card_{{ forloop.counter }}">
                            <div class="card-body">
                                {% with "hrapps/shared/partials/fields/form/"|add:field.type|add:".html" as field_partial %}
                                    {% include field_partial with field=field disabled=False id=forloop.counter %}
                                {% endwith %}
                                {% if field.required %}
                                    <div class="invalid-feedback">
                                        This is a required field.
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div class="card-footer">
                    <button class="btn btn-primary" onclick="submitApplication()">Submit Application</button>
                </div>
            </div>
        </div>
    </div>
    {% include "hrapps/main/partials/apply/apply_success_modal.html" %}
{% endblock %}

{% block extra_javascript %}
    {% include "hrapps/bundles/lightbox-js.html" %}
    <!--suppress JSUnresolvedReference -->
    <script>
        function getQuestions() {
            const questions = [];
            document.querySelectorAll("[id^='question_card_']").forEach(elem => {
                questions.push(elem);
            })
            return questions;
        }

        function validateCheckboxes(elem) {
            const inputs = elem.querySelectorAll("input")
            const required = elem.querySelector(".form-field").getAttribute("data-required")

            if (!required) {
                return true;
            }

            let itemSelected = false;

            for (let i = 0; i < inputs.length; i++) {
                const input = inputs[i];
                if (input.checked) {
                    itemSelected = true;
                }
            }

            if (itemSelected === false) {
                inputs.forEach((input) => {
                    input.classList.add("invalid-field")
                })
                elem.classList.add("invalid-field")
                elem.querySelector(".invalid-feedback").style.display = "block";
            }
            else {
                if (elem.classList.contains("invalid-field")) {
                    inputs.forEach((input) => {
                        input.classList.remove("invalid-field")
                    })
                    elem.classList.remove("invalid-field");
                    elem.querySelector(".invalid-feedback").style.display = "none";
                }
            }

            return itemSelected;
        }

        function validateTextField(elem) {
            const input = elem.querySelector("input")
            const elemValid = input.checkValidity()

            if (!elemValid) {
                input.classList.add("invalid-field");

                elem.querySelector(".invalid-feedback").style.display = "block";

                return false;
            }

            if (input.classList.contains("invalid-field")) {
                input.classList.remove("invalid-field");
                elem.querySelector(".invalid-feedback").style.display = "none";

            }
            return true;
        }

        function validateTextArea(elem) {
            const input = elem.querySelector("textarea")
            const elemValid = input.checkValidity()

            if (!elemValid) {
                input.classList.add("invalid-field");

                elem.querySelector(".invalid-feedback").style.display = "block";

                return false;
            }

            if (input.classList.contains("invalid-field")) {
                input.classList.remove("invalid-field");
                elem.querySelector(".invalid-feedback").style.display = "none";
            }

            return true;
        }

        function validateFileInput(elem) {
            const input = elem.querySelector("input")
            let elemValid = input.checkValidity()
            let tooManyFiles = false;

            if (input.multiple) {
                let fileLimit = input.getAttribute("data-limit")
                if (fileLimit === "" || fileLimit === null) {
                    fileLimit = 0;
                } else {
                    fileLimit = parseInt(fileLimit);
                }
                console.log(fileLimit);

                if (fileLimit > 0) {
                    const filesCount = input.files.length;
                    if (filesCount > fileLimit) {
                        elemValid = false;
                        tooManyFiles = true;
                    }
                }
            }

            if (!elemValid) {
                input.classList.add("invalid-field");
                const invalidFeedback = elem.querySelector(".invalid-feedback");
                invalidFeedback.style.display = "block";
                if (tooManyFiles) {
                    invalidFeedback.innerHTML = "You can only upload a maximum of " + input.getAttribute("data-limit") + " files."
                }
                else {
                    invalidFeedback.innerHTML = "This is a required field."
                }

                return false;
            }

            if (input.classList.contains("invalid-field")) {
                input.classList.remove("invalid-field");
                const invalidFeedback = elem.querySelector(".invalid-feedback");
                invalidFeedback.style.display = "none";
                invalidFeedback.innerHTML = "This is a required field.";
            }

            return true;
        }

        function customReportValidity(elem, type) {
            let valid = false;

            switch (type) {
                case "dropdown":
                    valid = true;
                    break;
                case "checkboxes":
                    valid = validateCheckboxes(elem);
                    break;
                case "text-field":
                    valid = validateTextField(elem);
                    break;
                case "text-area":
                    valid = validateTextArea(elem);
                    break;
                case "image":
                    valid = validateFileInput(elem);
                    break;
                default:
                    break;
            }
            return valid;
        }

        function validateForm() {
            let validForm = true;

            let questions = getQuestions();

            for (let i =0; i < questions.length; i++) {
                let question = questions[i];
                let question_type = question.getAttribute("data-fieldtype");

                const questionValid = customReportValidity(question, question_type)
                validForm = validForm && questionValid
            }

            return validForm;
        }

        function getAnswers() {
            let questions = getQuestions();

            let answers = [];

            for (let i =0; i < questions.length; i++) {
                let question = questions[i];
                let question_type = question.getAttribute("data-fieldtype");

                if (question_type === "checkboxes") {
                    let inputs = question.querySelectorAll("input");
                    let answer = [];
                    for (let j = 0; j < inputs.length; j++) {
                        if (inputs[j].checked) {
                            answer.push(inputs[j].value);
                        }
                    }
                    answers.push(answer);
                }
                else if (question_type === "image") {
                    const filesLen = question.querySelector("[id^=question_]").files.length;
                    answers.push({num_files: filesLen});
                }
                else {
                    answers.push(question.querySelector("[id^=question_]").value);
                }
            }
            return answers;
        }

        function buildApplicationJson() {
            const questions = getQuestions();

            let applicationJson = {questions:[]};
            const answers = getAnswers();
            for (let i = 0; i < questions.length; i++) {
                const question = questions[i];
                const question_text = question.querySelector("label").innerText;
                const question_answer = answers[i];

                if (typeof question_answer === 'object') {
                    applicationJson.questions.push({
                        question: question_text,
                        answer: "",
                        attachments: question_answer.num_files
                    });
                }
                else {
                    applicationJson.questions.push({question: question_text, answer: question_answer});
                }
            }

            return applicationJson;
        }

        function submitApplication() {
            console.log("Validating form...");
            const validForm = validateForm();

            if (!validForm) {
                console.log("Form invalid. Please correct errors and try again.")
                return;
            }

            console.log("Form valid.");
            console.log("Submitting application...");
            const applicationJson = buildApplicationJson();
            console.log(applicationJson);

            const formData = new FormData();
            formData.append("application", JSON.stringify(applicationJson));

            const fileInputs = document.querySelectorAll("input[type='file']");

            for (let i = 0; i < fileInputs.length; i++) {
                const id = fileInputs[i].id;
                const files = fileInputs[i].files;

                for (let j = 0 ; j < files.length; j++) {
                    formData.append(id, files[j]);
                }
            }

            fetch(window.location.href, {
                method: 'POST',
                headers: {
                    "X-CSRFToken": "{{ csrf_token }}",
                },
                body: formData
            })
            .then(response => {
                console.log(`Response Status: ${response.status}`);
                if (response.ok) {
                    console.log("Application submitted successfully.");
                    successNotification();
                }
                else if (response.status === 403) {
                    console.log("Application already submitted.");
                    window.location.href = "{% url "hrapps:dashboard" %}";
                }
            })
            .catch((error) => {
                console.log(error);
            })
        }

        function successNotification() {
            const countdownP = document.getElementById("countdown");

            const successModal = document.getElementById("success-modal");
            const modal = new bootstrap.Modal(successModal);
            modal.show()

            let timeLeft = 11;

            const timer = setInterval(() => {
                countdownP.innerHTML = `${timeLeft - 1}`;
                timeLeft--;
                if (timeLeft === 0) {
                    clearInterval(timer);

                    window.location.href = "{% url "hrapps:dashboard" %}";
                }
            }, 1000);
        }

        function previewFile(element) {
            console.log("Previewing file...");
            console.log(element);
            const sourceQuestion = element.id;
            const previewContainer = document.getElementById(`${sourceQuestion}_preview`);
            previewContainer.innerHTML = "";

            const files = Array.from(element.files);

            files.forEach(file => {
                const fileUrl = URL.createObjectURL(file);

                const imgCard = document.createElement("div");
                imgCard.classList.add("card", "img-fluid");
                imgCard.style.marginRight = "10px";

                const img = document.createElement("img");
                img.classList.add("card-img-full");
                img.src = fileUrl;
                img.alt = file.name;
                img.dataset.toggle = "lightbox";
                img.dataset.type = "image";
                img.dataset.src = fileUrl;
                img.style.height = "128px";
                img.style.width = "auto";

                img.addEventListener("click", (e) => {
                    e.preventDefault();
                    const lightbox = new Lightbox(img);
                    lightbox.show();
                });

                imgCard.appendChild(img);

                previewContainer.appendChild(imgCard);
            })
            if (previewContainer.parentElement.querySelector(`#${sourceQuestion}_note`) === null) {
                const selectNote = element.multiple ? "a different set of files" : "a different file";
                const noteElement = document.createElement("p");
                noteElement.id = `${sourceQuestion}_note`;
                noteElement.classList.add("text-muted");
                const emElement = document.createElement("em");
                const smallElement = document.createElement("small");
                smallElement.innerHTML = "Click on an image to view it in full size.\n" +
                    "To change files, click on \"Choose Files\" again and select " + selectNote + ".";
                noteElement.appendChild(emElement);
                emElement.appendChild(smallElement);
                previewContainer.parentElement.appendChild(noteElement);
            }
            else if (element.files.length === 0) {
                previewContainer.parentElement.querySelector(`#${sourceQuestion}_note`).remove();
            }

        }

    </script>
{% endblock %}