jQuery(document).ready(($) => {
    let spinner = '<div class="spinner"><div class="loader"></div></div>';

    $(document).on("input", ".image-data", function (e) {
        e.preventDefault();
        let imageUrl = $(this).val();
        $(".preview-image").attr("src", imageUrl);
        if (imageUrl) {
            $(".image-picker-remove-button").removeClass("d-none");
        }
    });

    $(document).on("click", ".image-picker-remove-button", function (e) {
        e.preventDefault();
        e.stopPropagation();
        let imgDefault = $(".default-image");
        $(".image-data").val("");
        if (!$(this).hasClass("d-none")) {
            $(this).addClass("d-none");
        }
        imgDefault.attr("src", imgDefault.attr("data-default"));
    });

    $(document).on("click", ".slug-actions", function (e) {
        e.preventDefault();
        let name = $('input[name="name"]').val();
        if (!name) return false;

        $.ajax({
            url: apiSlug,
            data: { name },
            type: "post",
            beforeSend: () => $("body").append(spinner),
            success: (response) => {
                $("body").find(".spinner").remove();
                $('input[name="slug"]').val(response);
            },
        });
    });
});