"use strict";

const stepperStepButton = document.querySelectorAll(".stepper-step-btn");
const prevStepButton = document.querySelector(".prev-step-btn");
const nextStepButton = document.querySelector(".next-step-btn");
const stepperMenu = document.querySelector(".stepper-menu");
const fieldsets = document.querySelectorAll(".fieldset");
let scrollLeftValue;
let isDragging = false;
// FOR FORM
const prevFormButton = document.querySelectorAll(".prev-form-btn");
const nextFormButton = document.querySelectorAll(".next-form-btn");
let current_fieldset, next_fieldset, previous_fieldset;

// CLICK NEXT FORM BUTTON
nextFormButton.forEach((nextBtn) => {
    nextBtn.addEventListener("click", function () {
        current_fieldset = this.closest(".fieldset");
        next_fieldset = current_fieldset.nextElementSibling;
        // Add Active Class
        let form = $(this).closest("form");
        let key = form.data("key");

        let formData = new FormData(form[0]);
        formData.append("form_key", key);
        let skill = form.find("input[name=hidden-skills").val();
        if (typeof skill != "undefined") {
            formData.append("skills", skill);
        }
        let action = form.attr("action");
        $.ajax({
            url: action,
            method: "POST",
            data: formData,
            dataType: "json",
            cache: false,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status == "error") {
                    logErrorMsg(res.data);

                    if (res.data?.course_id) {
                        Command: toastr["error"](`${res.data.course_id}`);
                    }
                } else if (res.status == "success") {
                    $('input[name="hidden-skills"]').val("");
                    $(".courseId").val(res.course_id);
                    if (res.hasOwnProperty("message")) {
                        Command: toastr["success"](`${res.message}`);
                    }
                    if (res.hasOwnProperty("url")) {
                        location.replace(`${res.url}`);
                    }

                    if (res.key == "pricing") {
                        $("#pricingId").val(res.price_id);
                    }
                    nextFieldSet(
                        stepperStepButton,
                        fieldsets,
                        next_fieldset,
                        current_fieldset
                    );
                }
            },
        });
    });
});

// CLICK PREVIOUS FORM BUTTON
prevFormButton.forEach((previousButton) => {
    previousButton.addEventListener("click", function () {
        current_fieldset = this.closest(".fieldset");
        previous_fieldset = current_fieldset.previousElementSibling;
        // Remove active class
        nextFieldSet(
            stepperStepButton,
            fieldsets,
            previous_fieldset,
            current_fieldset
        );
    });
});

// SETTING STEPPER BUTTON VISIBILITY
function buttonActivation() {
    scrollLeftValue = Math.ceil(stepperMenu?.scrollLeft);
    let scrollableWidth = stepperMenu?.scrollWidth - stepperMenu?.clientWidth;

    if (prevStepButton) {
        prevStepButton.style.display =
            scrollableWidth > scrollLeftValue ? "block" : "none";
    }

    if (nextStepButton) {
        nextStepButton.style.display =
            scrollableWidth > scrollLeftValue ? "block" : "none";
    }

    if (prevStepButton) {
        prevStepButton.style.display = scrollLeftValue > 0 ? "block" : "none";
    }
}

nextStepButton?.addEventListener("click", () => {
    stepperMenu.scrollLeft += 200;
    buttonActivation();
});

prevStepButton?.addEventListener("click", () => {
    stepperMenu.scrollLeft -= 200;
    buttonActivation();
});

function stepActivation(currentStepperIndex) {
    stepperStepButton.forEach((stepBtn) => {
        stepBtn.classList.remove("active");
    });
    fieldsets.forEach((fieldset) => {
        fieldset.classList.remove("!block");
    });

    stepperStepButton[currentStepperIndex]?.classList.add("active");

    fieldsets[currentStepperIndex].classList.add("!block");
}

stepperStepButton.forEach((stepBtn, i) => {
    stepBtn.addEventListener("click", () => {
        stepActivation(i);
    });
});

// STEPPER DRAGGING
stepperMenu?.addEventListener("mousemove", (drag) => {
    if (!isDragging) return;

    if (stepperMenu) {
        stepperMenu.scrollLeft -= drag.movementX;
        stepperMenu.classList.add("dragging");
    }
});

document.addEventListener("mouseup", () => {
    isDragging = false;
    stepperMenu?.classList.remove("dragging");
});

stepperMenu?.addEventListener("mousedown", () => {
    isDragging = true;
});
window.onload = function () {
    buttonActivation();

    if (prevStepButton) {
        prevStepButton.style.display = scrollLeftValue > 0 ? "block" : "none";
    }
};
window.onresize = function () {
    buttonActivation();

    if (prevStepButton) {
        prevStepButton.style.display = scrollLeftValue > 0 ? "block" : "none";
    }
};

function nextFieldSet(
    stepperStepButton,
    fieldsets,
    next_fieldset,
    current_fieldset
) {
    if (next_fieldset) {
        stepperStepButton[
            Array.from(fieldsets).indexOf(next_fieldset)
        ].classList.add("active");

        current_fieldset.classList.remove("!block");

        next_fieldset.classList.add("!block");
    }
}
