jQuery(document).ready(function ($) {
    $(".bizhub-customizer-repeater").each(function () {
        var $repeater = $(this);
        var $input = $repeater.siblings(".bizhub-customizer-repeater-field");
        var fields = JSON.parse($input.attr("data-fields") || "[]");

        function updateValue() {
            var items = [];
            $repeater.find(".bizhub-customizer-repeater-item").each(function () {
                var item = {};
                $(this).find("input:not([type=hidden]), textarea").each(function () {
                    var key = $(this).attr("name");
                    item[key] = $(this).val();
                });

                var $imageField = $(this).find('input[name="image"]');
                if ($imageField.length) {
                    item["image"] = $imageField.val();
                }

                items.push(item);
            });
            $input.val(JSON.stringify(items)).trigger("change");
        }

        function generateItem(itemData = {}) {
            var newItem = $('<li class="bizhub-customizer-repeater-item"></li>');

            fields.forEach(function (field) {
                var key = field.id;
                var value = itemData[key] || "";

                if (field.type === "text") {
                    newItem.append(`<input type="text" name="${key}" placeholder="${field.label}" value="${value}">`);
                } else if (field.type === "textarea") {
                    newItem.append(`<textarea name="${key}" placeholder="${field.label}">${value}</textarea>`);
                } else if (field.type === "image") {
                    var previewImage = `<img class="bizhub-preview-image" src="${value}" style="max-width:100px; ${value ? "display:block;" : "display:none;"}">`;
                    var imageInput = `<input type="hidden" name="${key}" value="${value}">`;
                    var uploadButton = '<button type="button" class="button bizhub-upload-image-button">' + wp.i18n.__('Upload Image', 'bizhub') + '</button>';
                    

                    newItem.append(previewImage + imageInput + uploadButton );

                } else if (field.type === "url") {
                    newItem.append(`<input type="url" name="${key}" placeholder="${field.label}" value="${value}">`);
                }
            });

            newItem.append('<button type="button" class="button bizhub-customizer-repeater-remove">' + wp.i18n.__('Remove This Item', 'bizhub') + '</button>');
            return newItem;
        }

        // Ensure the list is cleared each time the customizer section is loaded
        var savedItems = JSON.parse($input.val() || "[]");
        var $list = $repeater.find(".bizhub-customizer-repeater-list");

        // Clear the list before appending saved items
        $list.empty();

        // Add each saved item to the repeater list
        savedItems.forEach(function (itemData) {
            var newItem = generateItem(itemData);
            $list.append(newItem);
        });

        // Event handler for "Add Item" button
        $repeater.on("click", ".bizhub-customizer-repeater-add", function () {
            var newItem = generateItem();
            $repeater.find(".bizhub-customizer-repeater-list").append(newItem);
            updateValue();
        });

        // Event handler for "Remove" button
        $repeater.on("click", ".bizhub-customizer-repeater-remove", function () {
            $(this).closest(".bizhub-customizer-repeater-item").remove();
            updateValue();
        });

        // Handle Image Upload (WordPress Media Uploader)
        $repeater.on("click", ".bizhub-upload-image-button", function (e) {
            e.preventDefault();

            var button = $(this);
            var imageField = button.siblings('input[type="hidden"]');
            var previewImage = button.siblings(".bizhub-preview-image");

            var mediaUploader = wp.media({
                title: wp.i18n.__("Select or Upload Image", "bizhub"),
                button: { text: wp.i18n.__("Use this Image", "bizhub") },
                multiple: false,
            });

            mediaUploader.on("select", function () {
                var attachment = mediaUploader.state().get("selection").first().toJSON();
                imageField.val(attachment.url);
                previewImage.attr("src", attachment.url).show();
                updateValue();
            });

            mediaUploader.open();
        });

        // Auto-update input fields
        $repeater.on("input", "input, textarea", function () {
            updateValue();
        });
    });
});