function jsonType2RowHtmlMacker(json) { //dont use ids because ids cant be repeated in DOM
    
    let htmlRow = "";
    htmlRow += '<div class="json_type2_card card card-outline card-json-item global-json-handler-card">';

    htmlRow += '<div class="card-body">';
    htmlRow += '<div class="form-group newgen-form-group text-group">';
    htmlRow += '<label class="mppanel_labels">متن:</label><input type="text" class="js_type2_txt form-control" value="' + (json != null ? json['text'] : "") + '">';
    htmlRow += '</div>';

    htmlRow += '<div class="form-group newgen-form-group text-group">';
    htmlRow += '<label class="mppanel_labels">متن دکمه:</label><input type="text" class="js_type2_btn_txt form-control" value="' + (json != null ? json['button_text'] : "") + '">';
    htmlRow += '</div>';

    htmlRow += '<div class="form-group color-group">';
    htmlRow += '<label class="mppanel_labels">رنگ دکمه:</label><span class="line-dash"></span><div class="color_selector_box pickr-container"><input id="button_text_row_color" type="text" class="js_type2_btn_color form-control ltr width86 mppanel_color_forms" value="' + (json != null ? json['button_color'] : "") + '"><span class="color_box" style="background:' + (json != null ? json['button_color'] : "") + '"><span class="color-hint"><i class="ph ph-eyedropper"></i></span></span></div>';
    htmlRow += '</div>';

    let intentType = (json != null ? json['intent_type'] : "-");
    let intentData = (json != null ? json['intent_data'] : "-");
    htmlRow += intentInputHtmlGenerator(intentType,intentData,"js_type2_intent_type","js_type2_intent_data");


    htmlRow += '</div>';
    htmlRow += '</div>';

    return htmlRow;

}

const jsonType2SubmitBtn = function () {

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

    let _text = root.find('.js_type2_txt').val();
    let _btn_txt = root.find('.js_type2_btn_txt').val();
    let _btn_color = root.find('.js_type2_btn_color').val();
    let _intent_type = root.find('.js_type2_intent_type').val();
    let _intent_data = root.find('.js_type2_intent_data').val();

    let obj = {
        button_text: _btn_txt,
        button_color: _btn_color,
        text: _text,
        intent_type: _intent_type,
        intent_data: _intent_data
    }
    
    let stringjs = JSON.stringify(obj);
    textarea.val(stringjs).trigger('input').trigger('change');

};

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

    $('.json_type2_card').find('input, textarea').on('input change',jsonType2SubmitBtn);

    if ($(".json_handler_type2")[0]) { //there is json type 2 simple:

        const jsonString = $('.json_handler_type2 > textarea').val();

        let jsonType2;

        if (jsonString == '') {
            jsonType2 = null;
        } else {
            jsonType2 = JSON.parse(jsonString);
        }


        if (jsonType2 == null) {
            const htmlrow = jsonType2RowHtmlMacker(null);
            $(".json_handler_type2").find(".showbox > div").html(htmlrow);
            //$(".json_handler_type2").find("#add_json_type2_item").hide();
        } else {
            const htmlrow = jsonType2RowHtmlMacker(jsonType2);
            $(".json_handler_type2").find(".showbox > div").html(htmlrow);
            //$(".json_handler_type2").find("#add_json_type2_item").hide();
        }

        //re init all js functions:
        $('.json_type2_card').find('input, textarea').on('input change',jsonType2SubmitBtn);
        $('.intent_type_change_btn').click(selectIntentDialog);
        $('.intent_data_change_btn').click(editIntentDataSelector);
        $('.intent_type_code_input').each(function (){intentNamesPrinter($(this));});
        $('.color_selector_box > .color_box').click(pickerFunction);
        $('.mppanel_color_forms').on("change keyup paste", colorChangeListener);

    }

    // $('#add_json_type2_item').click(function () {
    //     const root = $(this).parent();
    //     root.find('.no-item-found').remove();
    //     $(".json_handler_type2").find("#add_json_type2_item").hide();
    //     const htmlrow = jsonType2RowHtmlMacker(null);
    //     root.find(".showbox").find("#fixbox").prepend(htmlrow);
    //     //re init all js functions:
    //     $('.json_type2_card').find('input, textarea').on('input change',jsonType2SubmitBtn);
    //     $('.intent_type_change_btn').click(selectIntentDialog);
    //     $('.intent_data_change_btn').click(editIntentDataSelector);
    //     $('.intent_type_code_input').each(function (){intentNamesPrinter($(this));});
    //     $('.color_selector_box > .color_box').click(pickerFunction);
    //     $('.mppanel_color_forms').on("change keyup paste", colorChangeListener);
    // });



}); //end of jqury doc ready