
function footerItemJsonHtmlBuilder(json) {

    //dont use ids because ids cant be repeated in DOM
    let htmlRow = "";
    htmlRow += '<div class="json_footer_item_card card card-outline card-json-item collapsed-card global-json-handler-card">';
    
    htmlRow += '<div class="card-header json_footer_item_box cjh-head-wrapper">';
    
    htmlRow += '<div class="cjh-head-prv">';
    htmlRow += '<div class="my-handle"><i class="ph ph-caret-up-down"></i></div>';
    htmlRow += '<div class="cjh-item-showimg-wrapper"><img class="json_footer_item_showimg" src="' + (json != null ? json['img'] : "") + '"></div>';
    htmlRow += '<div class="textcontainer">';
    htmlRow += '<span class="cjh-footer-brif-text-ic-wrapper">';
    htmlRow += '<span class="json_footer_item_showicon" ><i class="iconpreview '+(json != null ? modifyIcon(json['icon']) : "")+'"></i></span>';
    htmlRow += '<span class="json_footer_item_showtext" >' + (json != null ? json['txt'] : "-") + '</span>';
    htmlRow += '</span>';
    htmlRow += '<div class="cjh-footer-brif-added-data">';
    htmlRow += '<span class="json_footer_item_showintent" >' + getIntentName((json != null ? json['intent_type'] : "-")) + '</span>';
    if(json != null && json['custom_class']!="")
        htmlRow += '<span class="json_footer_item_showclass" >کلاس کاستوم: ' + json['custom_class'] + '</span>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '<div class="card-tools">';
    htmlRow += '<button type="button" class="json_handler_box_opener_btn btn btn-primary btn-sm"><i class="ph ph-pencil"></i></button>';
    htmlRow += '<button type="button" class="json_footer_item_delete_btn btn btn-danger btn-sm"><i class="ph ph-trash"></i></button>';
    htmlRow += '</div>';


    htmlRow += '</div>';//end of card-header

    htmlRow += '<div class="card-body" style="display: none;">';
    
    //Image input
    let imgClass = 'js_footer_item_img';
    let imgId = 'f-image-' + randomUID(21);
    let imgUrl = (json != null ? json['img'] : "");
    htmlRow += imageInputHtmlGenerator(imgUrl, imgClass, imgId);

    //Icon input
    let iconClass = 'js_footer_item_icon';
    let iconId = 'f-icon-' + randomUID(21);
    let iconCode = (json != null ? json['icon'] : "");
    htmlRow += iconInputHtmlGenerator(iconCode, iconClass, iconId);
    
    //Text input
    let txt = (json!=null) ? json['txt'] : "";
    htmlRow += textInputHtmlGenerator(txt,'js_footer_item_txt');

    //Text input
    let customClass = (json!=null) ? json['custom_class'] : "";
    htmlRow += textInputHtmlGenerator(customClass,'js_footer_item_custom_class', "کلاس کاستوم CSS");

    //Intent input
    let intentType = (json != null ? json['intent_type'] : "-");
    let intentData = (json != null ? json['intent_data'] : "-");
    htmlRow += intentInputHtmlGenerator(intentType,intentData,"js_footer_intent_type","js_footer_intent_data");

    htmlRow += '<span class="minitext">بعد از ایجاد تغییرات بروی این آیتم، بروی ثبت تغییرات کلیک کنید. دقت کنید ثبت تغییرات به معنی ذخیره در سرور نمیباشد</span>';
    htmlRow += '<div class="local_submit_parent">';
    htmlRow += '<span class="json_footer_item_submit_array btn btn-primary btn-sm">ثبت تغییرات</span>';
    htmlRow += '<span class="json_handler_box_closer_btn btn btn-gray btn-sm">انصراف</span>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';

    return htmlRow;

}

const deleteFooterJsonItemBtn = function () {

    const root_card = $(this).parent().parent().parent();
    const sorable_list = $(this).parent().parent().parent().parent();

    Swal.fire({
        title: 'این آیتم را حذف میکنید؟',
        icon: '',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#007bff',
        confirmButtonText: 'حذف آیتم',
        cancelButtonText: 'انصراف'
    }).then((result) => {
        if (result.isConfirmed) {

            root_card.remove();

            if (sorable_list.children().length == 0) {
                const htmlrow = ThereIsNoRowHereHtml();
                $(".json_handler_footer_array").find(".showbox").find("#footer_items_sortable_list").html(htmlrow);
            }
            jsonFooterArraySubmitHandler(false,root_card);

        }

    })

};

$('#footer_items_sortable_list').sortable({
    group: 'list',
    animation: 200,
    delay: 100, // time in milliseconds to define when the sorting should start
    delayOnTouchOnly: true, // only delay if user is using touch
    handle: ".my-handle", // Drag handle selector within list items
    ghostClass: 'ghost',
    onSort: reportFooterSortableChange
});

function reportFooterSortableChange() {
    let card = $(this).parent().parent().parent();
    jsonFooterArraySubmitHandler(false,card);
}

function jsonFooterArraySubmit(event) {
    //https://stackoverflow.com/a/9467172/4565796
    IsSingleItemEdit = event.data.IsSingleItemEdit;
    let card = $(this).parent().parent().parent();
    jsonFooterArraySubmitHandler(IsSingleItemEdit, card);
};

function jsonFooterArraySubmitHandler(IsSingleItemEdit, card) {

    let root_of_current = $('.json_handler_footer_array');
    let textarea = root_of_current.find('.json_text_area');
    const sortableList = root_of_current.find('#footer_items_sortable_list');

    root_of_current.find('.json_handler_box_opener_btn').show();

    //if we edit only single row and submiting it:
    if (IsSingleItemEdit) {
        let _img = card.find('.js_footer_item_img').val();
        let _txt = card.find('.js_footer_item_txt').val();
        let _ic = card.find('.js_footer_item_icon').val();
        let _custom_class = card.find('.js_footer_item_custom_class').val();
        let _intent_type = card.find('.js_footer_intent_type').val();
        
        card.find('.json_footer_item_showimg').attr("src", _img);
        card.find('.json_footer_item_showtext').text(_txt);
        card.find('.json_footer_item_showintent').html(getIntentName(_intent_type));

        let testttt = '<i class="iconpreview '+(_ic != "" ? modifyIcon(_ic) : "")+'"></i>';
        card.find('.json_footer_item_showicon').html(testttt);
        
        if(_custom_class!=""){
            let html = '<span class="json_footer_item_showclass" >کلاس کاستوم: ' + _custom_class + '</span>';
            card.find('.cjh-footer-brif-added-data').append(html);
        }

        card.addClass("collapsed-card");
        let card_body = card.find('.card-body');
        card_body.slideUp();
    }

    let arr = [];
    sortableList.children().each(function (i, li) {

        const card = $(li);
        let _img = card.find('.js_footer_item_img').val();
        let _txt = card.find('.js_footer_item_txt').val();
        let _ic = card.find('.js_footer_item_icon').val();
        let _custom_class = card.find('.js_footer_item_custom_class').val();
        let _intent_type = card.find('.js_footer_intent_type').val();
        let _intent_data = card.find('.js_footer_intent_data').val();

        let obj = {
            img: _img,
            txt: _txt,
            icon: _ic,
            custom_class: _custom_class,
            intent_type: _intent_type,
            intent_data: _intent_data
        };
        if (!li.classList.contains('no-item-found')) {
            arr[i] = obj;
        }
    });

    let stringjs = JSON.stringify(arr);
    textarea.val(stringjs);

    notyf.open({
        type: 'info',
        message: 'تغییرات آرایه‌ای ثبت شد'
    });

};

$(function () { // start of document ready:

    //json footer items ARRAY

    if ($(".json_handler_footer_array")[0]) { //there is json type 1 array list:

        const jsonString = $.trim($('.json_handler_footer_array > textarea').val());
        let jsonFooterArrayObj;

        if (jsonString == '') {
            jsonFooterArrayObj = [];
        } else {
            jsonFooterArrayObj = JSON.parse(jsonString);
        }

        if (jsonFooterArrayObj.length == 0) {
            const htmlrow = ThereIsNoRowHereHtml();
            $(".json_handler_footer_array").find(".showbox").find("#footer_items_sortable_list").html(htmlrow);
        } else {
            $.each(jsonFooterArrayObj, function (key, value) {
                const htmlrow = footerItemJsonHtmlBuilder(value);
                $(".json_handler_footer_array").find(".showbox").find("#footer_items_sortable_list").append(htmlrow);
            });
        }

        $('.json_handler_box_opener_btn').click(jsonHandlersBoxOpener);
        $('.json_handler_box_closer_btn').click(jsonHandlersBoxCloser);
        $('.json_footer_item_delete_btn').click(deleteFooterJsonItemBtn);
        $('.json_footer_item_submit_array').off("click");
        $('.json_footer_item_submit_array').click({IsSingleItemEdit:true},jsonFooterArraySubmit);
        $('.intent_type_change_btn').click(selectIntentDialog);
        $('.intent_data_change_btn').click(editIntentDataSelector);
        //$('.intent_data_help_btn').click(showIntentDataHelper);
        $(".json_footer_item_card").on("click", ".icon_selector_box > .icon_box", function (e) {
            e.preventDefault();
            selectIconID = $(this).parent().find('.mppanel_icon_forms').prop('id');
            requestIcons();
        });
        $('.mppanel_icon_forms').change(function () {
            previewBoxIcon(this);
        });
        //$('.intent_type_code_input').each(intentNamesPrinter);
        $('.intent_type_code_input').each(function (){intentNamesPrinter($(this));});
        $('.mppanel_image_url').on("input", changeImagePreview);
        newGenImageHandler();

    }

    $('#add_json_footer_array_item').click(function () {

        const root = $(this).parent();
        let itemsCount = root.find(".showbox").find("#footer_items_sortable_list").children().length;
        let maxItems = $(this).attr('data-max-items');

        if(itemsCount>=maxItems){
            notyf.error("امکان افزودن آیتم بیشتر وجود ندارد");
            return;
        }

        root.find('.no-item-found').remove();
        const htmlrow = footerItemJsonHtmlBuilder(null);
        root.find(".showbox").find("#footer_items_sortable_list").prepend(htmlrow);

        $('.json_handler_box_opener_btn').click(jsonHandlersBoxOpener);
        $('.json_handler_box_closer_btn').click(jsonHandlersBoxCloser);

        $('.json_footer_item_delete_btn').click(deleteFooterJsonItemBtn);
        $('.json_footer_item_submit_array').off("click");
        $('.json_footer_item_submit_array').click({IsSingleItemEdit:true},jsonFooterArraySubmit);
        $('.intent_type_change_btn').click(selectIntentDialog);
        $('.intent_data_change_btn').click(editIntentDataSelector);
        //$('.intent_data_help_btn').click(showIntentDataHelper);
        //$('.intent_type_code_input').each(intentNamesPrinter);
        $('.intent_type_code_input').each(function (){intentNamesPrinter($(this));});
        $(".json_footer_item_card").on("click", ".icon_selector_box > .icon_box", function (e) {
            e.preventDefault();
            selectIconID = $(this).parent().find('.mppanel_icon_forms').prop('id');
            requestIcons();
        });
        $('.mppanel_icon_forms').change(function () {
            previewBoxIcon(this);
        });
        $('.mppanel_image_url').on("input", changeImagePreview);
        newGenImageHandler();

    });

});