function jsonColorMapRowHtmlMacker(isArrayItem, json) { //dont use ids because ids cant be repeated in DOM
    let htmlRow = "";
    htmlRow += '<div class="json_color_map_card card card-outline card-json-item collapsed-card global-json-handler-card">';
    htmlRow += '<div class="card-header json_color_code_box">';
    htmlRow += '<div class="textcontainer">';
    if (isArrayItem) htmlRow += '<div class="my-handle"><i class="ph ph-caret-up-down"></i></div>';
    htmlRow += '<div class="textcontainer">';
    htmlRow += '<span class="color_m-preview" style="background:'+(json != null ? json['data'] : "")+';" ></span>';
    htmlRow += '<span class="color_name_showtext" >' + (json != null ? json['color_name'] : "") + '</span>';
    htmlRow += '<span class="color_code_showtext" >' + (json != null ? json['color_code'] : "") + '</span>';
    htmlRow += '<span class="data_showtext" >' + (json != null ? json['data'] : "") + '</span>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '<div class="card-tools2">';
    htmlRow += '<button type="button" class="all_json_color_map_edit_btn btn btn-primary btn-sm"><i class="ph ph-pencil"></i></button>';
    if (isArrayItem) htmlRow += '<button type="button" class="all_json_color_map_delete_btn btn btn-danger btn-sm"><i class="la la-trash"></i></button>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '<div class="card-body" style="display: none;">';

    if(json == null){
        htmlRow += textInputHtmlGenerator("", "js_code_txt", "کد");
        htmlRow += '<div class="notes bottom20">کد باید بصورت انگلیسی و بدون فاصله یا اسپیس وارد شود </div>';
    }else{
        htmlRow += '<input style="display:none" type="text" class="js_code_txt form-control" value="' + json['color_code'] + '">';
    }

    htmlRow += textInputHtmlGenerator((json != null ? json['color_name'] : "") , "js_name_txt", "عنوان رنگ");

    htmlRow += colorInputHtmlGenerator((json != null ? json['data'] : ""), "js_data_txt", "color_btn_"+randomUID(21) , "مقدار رنگ");

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

    return htmlRow;
}

function ColorMapSortableChange(){

    let root_of_current = $('.json_handler_color_map_array');
    let textarea = root_of_current.find('.json_text_area');
    const sortableList = root_of_current.find('#color_map_sortable_list');

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

        const card = $(li);
        let _code = card.find('.js_code_txt').val();
        let _name = card.find('.js_name_txt').val();
        let _data = card.find('.js_data_txt').val();

        let obj = {
            color_code: _code,
            color_name: _name,
            data: _data
        };
        if(!li.classList.contains('no-item-found')){
            arr[i] = obj;
        }
    });

    let stringjs = JSON.stringify(arr);

    textarea.val(stringjs);

    notyf.open({
        type: 'info',
        message: 'ترتیب آیتم‌ها ثبت شد، برای اعمال نهایی بروی ذخیره کلیک کنید.'
    });
    
}

let editJsonColorMapRowsBtn = function () {
    
    let root_card = $(this).parent().parent().parent();
    root_card.find('.card-body').show('slideDown');
    $(this).hide();

};

function jsonColorMapArraySubmitBtnHandler(IsSingleItemEdit, card) {
    
    let root_of_current = $('.json_handler_color_map_array');
    let textarea = root_of_current.find('.json_text_area');
    const sortableList = root_of_current.find('#color_map_sortable_list');
    
    //if we edit only single row and submiting it:
    if (IsSingleItemEdit) {
        card.find('.all_json_color_map_edit_btn').show();
        let _code = card.find('.js_code_txt').val();
        let _name = card.find('.js_name_txt').val();
        let _data = card.find('.js_data_txt').val();

        card.find('.color_code_showtext').html(_code);
        card.find('.color_name_showtext').html(_name);
        card.find('.data_showtext').html(_data);
        card.find('.color_m-preview').css('background',_data);

        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 _title = card.find('.js_title_txt').val();
        // let _value = card.find('.js_value_txt').val();
        let _code = card.find('.js_code_txt').val();
        let _name = card.find('.js_name_txt').val();
        let _data = card.find('.js_data_txt').val();


        let obj = {
            color_code: _code,
            color_name: _name,
            data: _data
        };
        if(!li.classList.contains('no-item-found')){
            arr[i] = obj;
        }
    });

    let stringjs = JSON.stringify(arr);

    textarea.val(stringjs);

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

};

//json color MAP ARRAY

const deleteJsonColorMapRowsBtn = 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_color_map_array").find(".showbox").find("#color_map_sortable_list").html(htmlrow);
            }

            //refresh textarea data:
            jsonColorMapArraySubmitBtnHandler(false);

        }

    })


};

const jsonColorMapCancelBtn = function () {
    
    let card = $(this).closest('.json_color_map_card');
    card.find('.all_json_color_map_edit_btn').show();
    card.addClass("collapsed-card");
    let card_body = card.find('.card-body');
    card_body.slideUp();

};

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

};

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

    const root = $(this).parent();
    root.find('.no-item-found').remove();

    const htmlrow = jsonColorMapRowHtmlMacker(true, null);

    root.find(".showbox").find("#color_map_sortable_list").prepend(htmlrow);

    $('.all_json_color_map_edit_btn').click(editJsonColorMapRowsBtn);
    $('.all_json_color_map_delete_btn').click(deleteJsonColorMapRowsBtn);
    $('.json_color_map_submit_array').off("click");
    //https://stackoverflow.com/a/9467172/4565796
    $('.json_color_map_submit_array').click({
        IsSingleItemEdit: true
    }, jsonColorMapArraySubmitBtn);
    $('.json_color_map_cancel').click(jsonColorMapCancelBtn);
    $('.color_selector_box > .color_box').click(pickerFunction);
    $('.mppanel_color_forms').on("change keyup paste", colorChangeListener);

});


function buildColorMapJsonAndSave() {

    let color_map_data = $('#color_map').val();

    if (
        (!color_map_data) ||
        (color_map_data.trim() == '') ||
        (color_map_data.trim() == "") ||
        (color_map_data.trim() == "null") ||
        (color_map_data.trim() == "undefined") ||
        (color_map_data.trim() == null)
    ) color_map_data = "[]";

    let _toSave = {
        color_map: $.trim(color_map_data)
    }

    $.ajax({
        type: "POST",
        url: mpPanelBaseUrl + "/update-color-map",
        data: _toSave,
        timeout: 25000,
        cache: false,
        success: function (data) {
            if (data == "ok") {
                notyf.success("ذخیره انجام شد");
                window.location.href = mpPanelBaseUrl + "/physical-store-settings/color-map-management";
            } else {
                notyf.error(data);
            }
        },
        error: function (e) {
            notyf.error('Error: ' + e.responseText);
        }
    });
}

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

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

        Swal.fire({
            title: 'از ذخیره نگاشت رنگ‌ها مطمئن هستید؟',
            text: '',
            icon: '',
            showCancelButton: true,
            confirmButtonColor: '#007bff',
            cancelButtonColor: '#909090',
            confirmButtonText: 'بله',
            cancelButtonText: 'انصراف'
        }).then((result) => {
            if (result.isConfirmed) {

                buildColorMapJsonAndSave();

            }
        })

    });

    const jsonColorMapSubmitBtn = function () {

        let root_of_current = $(this).parent().parent().parent().parent().parent().parent();
        let textarea = root_of_current.find('.json_text_area');
        let card = $(this).parent().parent().parent();
    

        let _code = card.find('.js_code_txt').val();
        let _name = card.find('.js_name_txt').val();
        let _data = card.find('.js_data_txt').val();



        root_of_current.find('.all_json_color_map_edit_btn').show();
    
        card.find('.color_code_showtext').val(_code);
        card.find('.color_name_showtext').val(_name);
        card.find('.data_showtext').val(_data);

        let obj = {
            color_code: _code,
            color_name: _name,
            data: _data
        };

    
        let stringjs = JSON.stringify(obj);
    
        textarea.val(stringjs);
    
        card.addClass("collapsed-card");
        let card_body = card.find('.card-body');
        card_body.slideUp();
    
        notyf.open({
            type: 'info',
            message: 'تغییرات ثبت شد'
        });
    };
    

    $('.json_color_map_submit').click(jsonColorMapSubmitBtn);
    $('.json_color_map_cancel').click(jsonColorMapCancelBtn);

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

        const jsonString = $.trim($('.json_handler_color_map_array > textarea').val());
        let jsonColorMapArrayObj;

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

        if (jsonColorMapArrayObj.length == 0) {
            const htmlrow = ThereIsNoRowHereHtml();
            $(".json_handler_color_map_array").find(".showbox").find("#color_map_sortable_list").html(htmlrow);
        } else {
            $.each(jsonColorMapArrayObj, function (key, value) {
                //console.log("vs: " + value);
                const htmlrow = jsonColorMapRowHtmlMacker(true, value);
                $(".json_handler_color_map_array").find(".showbox").find("#color_map_sortable_list").append(htmlrow);
            });
        }

        $('.all_json_color_map_edit_btn').click(editJsonColorMapRowsBtn);
        $('.all_json_color_map_delete_btn').click(deleteJsonColorMapRowsBtn);
        $('.json_color_map_submit_array').off("click");
        //https://stackoverflow.com/a/9467172/4565796
        $('.json_color_map_submit_array').click({
            IsSingleItemEdit: true
        }, jsonColorMapArraySubmitBtn);
        $('.json_color_map_cancel').click(jsonColorMapCancelBtn);
        $('.color_selector_box > .color_box').click(pickerFunction);
        $('.mppanel_color_forms').on("change keyup paste", colorChangeListener);
    }

    $('#color_map_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: ColorMapSortableChange
    });

}); //end of jqury doc ready