function pricesToHtml(price,priceOff) {
    let html = '<span class="pp-ngpp">';
    if ( priceOff > 0 ){
        html += '<span class="ngpp-price-old">'+priceFormat(price)+'</span><span class="ngpp-newp"><span>'+priceFormat(priceOff)+'</span><span class="mcurren">ت</span></span>';
    }else{
        html += '<span class="ngpp-newp"><span>'+priceFormat(price)+'</span><span class="mcurren">ت</span></span>';
    }
    html += '</span>';
    return html;
}

function quantityToHtml(quantity) {
    let html = '<span class="quantity-show-box">';
    if ( quantity == -200 ){
        html += '<span class="qsb1">نامحدود</span><span class="qsb2">(-200)</span>';
    }else{
        html += '<span class="qsb1">'+quantity.toString()+'</span>';
    }
    html += '</span>';
    return html;
}

function jsonVarManagementRowHtmlMacker(isArrayItem, json, list, cats, colors) { //dont use ids because ids cant be repeated in DOM
    let htmlRow = "";
    htmlRow += '<div class="json_var_management_card card card-outline card-json-item collapsed-card  global-json-handler-card">';
    htmlRow += '<div class="card-header json_var_management_box">';
    htmlRow += '<div class="textcontainer jsvm-root">';
    htmlRow += '<div class="static-vars-container">';
    if (json != null) {
        htmlRow += '<span class="jsvm-price"><span class="jt">قیمت:</span><span class="jsvm-price-val">'+pricesToHtml(json['price'],json['price_off'])+'</span></span>';
        htmlRow += '<span class="jsvm-quantity">';
        htmlRow += '<span class="jt">تعداد:</span><span class="jsvm-quantity-val">' + quantityToHtml(json['quantity']) + '</span>';
        htmlRow += '<span class="json-status-showtext ' + json['status'] + '" >' + ((json['status'] == 'in_stock') ? "موجود در انبار" : "ناموجود") + '</span>';
        if (json['default'] == '1') {
            htmlRow += '<span class="json-default-showtext" >' + "حالت پیش‌فرض" + '</span>';
        }
        htmlRow += '</span>';
        htmlRow += '<div class="dynamic-vars-container">';
        if (list != null) {
            let variables = json['variables'];
            let vars = variables.split(",");

            const varCatString = $.trim($('#variable_data_cats').val());
            let jsonVarCatArrayObj = [];
            if (varCatString != '') jsonVarCatArrayObj = JSON.parse(varCatString);
   
            for (let i = 0; i < vars.length; i++) {
                let index = -1;
                for (let j = 0; j < list.length; j++) {
                    if (vars[i] == list[j]['id']) {
                        index = j;
                        break;
                    }
                }
                if (index >= 0){
                    let varCode = list[index]['variable'];
                    const result = jsonVarCatArrayObj.find(item => item.variable === varCode);
                    let variable_text = "متغییر ناشناخته";
                    if (result) variable_text = result['variable_text'];
                    let variableHeadHtml = '<span class="var-ng-head"><span class="vnh-t">'+variable_text+':</span></span>';
                    htmlRow += '<span class="json-variable-showtext" >'+variableHeadHtml+'<span class="var-ng-value">' + list[index]['text'] + '</span></span>';
                }
            }
        }
        htmlRow += '</div>';
    }
    htmlRow += '</div>';

    htmlRow += '</div>';
    htmlRow += '<div class="card-tools">';
    htmlRow += '<button type="button" class="all_json_var_management_edit_btn btn btn-primary btn-sm"><i class="ph ph-pencil"></i></button>';
    if (isArrayItem) htmlRow += '<button type="button" class="all_json_var_management_delete_btn btn btn-danger btn-sm"><i class="ph ph-trash"></i></button>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '<div class="card-body" style="display: none;">';
    htmlRow += '<div class="static-var-management-edit">';
    htmlRow += '<textarea style="display:none" class="form-control json_text_area var_items" rows="4">' + JSON.stringify(json) + '</textarea>';
    
    htmlRow += numberPriceInputHtmlGenerator(json['price'],"js_price_txt","قیمت");
    htmlRow += numberPriceInputHtmlGenerator(json['price_off'],"js_price_off_txt","قیمت با تخفیف");
    
    htmlRow += '<div class="jshandler-infos">برای قیمت بدون تخفیف در این بخش 0 وارد کنید.</div>';
    
    htmlRow += numberInputHtmlGenerator(json['quantity'], "js_quantity_txt", "تعداد موجودی");
    
    htmlRow += '<div class="jshandler-infos"><span>برای تعداد نامحدود محصول، عدد -200 را وارد نمایید.</span></div>';

    let options = {
        in_stock: "موجود",
        out_of_stock: "ناموجود"
    }
    htmlRow += rowOptionsInputHtmlGenerator(json['status'],options,"js_status_txt","وضعیت موجودی");

    let options2 = {
        0: "عدم انتخاب",
        1: "انتخاب"
    }
    htmlRow += rowOptionsInputHtmlGenerator(json['default'], options2, "js_default", "انتخاب به عنوان پیشفرض");


    htmlRow += '</div>';
    htmlRow += '<div class="dynamic-var-management-edit">';
    htmlRow += '<div class="dynamic-var-list">';
    htmlRow += '<button class="btn btn-primary btn-sm json-variable-add">انتخاب ویژگی جدید</button>';
    if (list != null) {
        let variables = json['variables'];
        let vars = variables.split(",");

        const varCatString = $.trim($('#variable_data_cats').val());
        let jsonVarCatArrayObj = [];
        if (varCatString != '') jsonVarCatArrayObj = JSON.parse(varCatString);

        if (variables != "") {
            for (let i = 0; i < vars.length; i++) {
                let index = -1;
                for (let j = 0; j < list.length; j++) {
                    if (vars[i] == list[j]['id']) {
                        index = j;
                        break;
                    }
                }
                if(index >= 0){
                    let varCode = list[index]['variable'];
                    const result = jsonVarCatArrayObj.find(item => item.variable === varCode);
                    let variable_text = "متغییر ناشناخته";
                    if (result) variable_text = result['variable_text'];
                    let variableHeadHtml = '<span class="var-ng-head"><span class="vnh-t">'+variable_text+':</span></span>';
                    htmlRow += '<span class="json-variable-showtext" ><i class="all_json_delete_var_btn ph ph-trash" data-var-id="' + list[index]['id'] + '" ></i><span class="var-ng-value">' + list[index]['text'] + '</span>'+variableHeadHtml+'</span>';
                }
            }
        }
    }
    htmlRow += '</div>';
    htmlRow += '<div class="variable-add-card" style="display: none;">';
    htmlRow += '<div class="variable-card-header"><span class="">انتخاب نوع ویژگی</span><button type="button" class="variable-card-close btn btn-sm"><i class="la la-close"></i></button>';
    htmlRow += '</div>';
    htmlRow += '<div class="variable-add-area">';
    htmlRow += '<div class="variable-add-area-cats">';

    initial_cat_index = 0;
    if (cats != null) {
        for (let i = 0; i < cats.length; i++) {
            htmlRow += '<span class="json-variable-cats-showtext ' + (i == initial_cat_index ? "selected" : "") + ' " data-variable="' + cats[i]['variable'] + '">' + cats[i]['variable_text'] + '</span>';
        }
    }
    htmlRow += '<a target="_blank" href="'+mpPanelBaseUrl+'/physical-store-settings/variable-map-management" class="json-variable-cat-new-define">تعریف ویژگی جدید</a>';

    htmlRow += '</div>';
    htmlRow += '<div class="variable-body-area">';
    htmlRow += '<span style="display: none;" id="selected-cat" >' + ((cats != null) ? cats[initial_cat_index]['variable'] : "") + '</span>';
    htmlRow += '<div class="variable-add-area-cat-elements">';
    if (list != null && cats != null) {

        const varColorsText = $.trim($('#variable_data_colors').val());
        let jsonColorsObj = [];
        if (varColorsText != '') jsonColorsObj = JSON.parse(varColorsText);

        for (let i = 0; i < list.length; i++) {
            let colorPrev = "";
            if(list[i]['variable'] == "color"){
                let varCode = list[i]['value'];
                const result = jsonColorsObj.find(item => item.color_code === varCode);
                if(result){
                    colorPrev = '<span class="color-prev-c" style="background-color:'+result['data']+'"></span>';
                }
            }
            htmlRow += '<span class="json-variable-select-showtext" data-variable="' + list[i]['variable'] + '" data-var-id="' + list[i]['id'] + '" style="' + (list[i]['variable'] == cats[initial_cat_index]['variable'] ? "" : "display:none") + '">' +colorPrev + '<span class="pt">' + list[i]['text'] + '</span></span>';
        }
    }
    htmlRow += '</div>';
    htmlRow += '<span class="json-variable-new-define" data-id="' + json['id'] + '" data-variable="' + ((cats != null) ? cats[initial_cat_index]['variable'] : "") + '" ><i class="la la-plus-circle"></i>مقدار جدید</span>';
    htmlRow += '<div class="variable-var-cat-define-area">';


    htmlRow += '<div class="variable-var-define-area" style="display:none;">';
    htmlRow += '<div class="header-area">';

    
    let color_options = '';
    if (colors != null) {
        colors.forEach(element => {
            color_options += '<div class="cob-i" data-value="'+element['color_code']+'" data-text="'+element['color_name']+'"><span class="cob-cp" style="background-color:'+element['data']+'"></span><span class="cob-cn">' + element['color_name'] + '</span></div>';
        });
    }
    htmlRow += '<span class="title">افزودن مقدار جدید برای ویژگی ' + cats[initial_cat_index]['variable_text'] + '</span>';

    htmlRow += '</div>';

    inputProp = '';

    if (cats != null) {
        if (cats[initial_cat_index]['variable'] == 'color') {
            inputProp = 'style="display:none"';
        }
    }

    htmlRow += '<div class="color-options-box">';
    htmlRow += color_options;
    htmlRow += '</div>';

    htmlRow += '<div class="define-value-area" style="display:none">';
    htmlRow += '<span class="col-2 name"><label class="wtooltip">مقدار:<span class="tooltip_txt">مقدار باید بصورت انگلیسی و بدون فاصله یا اسپیس وارد شود</span></label></span><input type="text" class="var_value form-control col-10" style="direction: ltr" ' + inputProp + '>';
    htmlRow += '</div>';
    htmlRow += '<div class="define-text-area" '+inputProp+'>';
    htmlRow += '<label class="name">متن (مقدار):</label><input type="text" class="var_text form-control">';
    htmlRow += '</div>';

    htmlRow += '<div class="confirm-var-define" >';
    htmlRow += '<div><span class="infos color-note" > برای تعریف رنگ جدید از بخش <a href="'+mpPanelBaseUrl+'/physical-store-settings/color-map-management" target="blank">نگاشت رنگ‌ها</a> اقدام کنید.</span></div>';
    htmlRow += '<div class="cvd-b-box">';
    htmlRow += '<button type="button" data-cat-id="' + cats[initial_cat_index]['id'] + '" data-var-id="' + json['id'] + '" data-cat="' + cats[initial_cat_index]['variable'] + '" class="confirm btn btn-success btn-sm"><i class="la la-check"></i><span>افزودن</span></button>';
    htmlRow += '<button type="button" class="reject btn btn-secondary btn-sm"><i class="la la-close"></i><span>انصراف</span></button>';
    htmlRow += '</div>';
    htmlRow += '</div>';

    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '<div class="local_submit_parent">';
    htmlRow += '<span class="' + (isArrayItem ? "json_var_management_submit_array" : "json_var_management_submit") + ' btn btn-primary btn-sm">ثبت و ذخیره تغییرات</span>';
    htmlRow += '<span class="json_var_management_cancel btn btn-gray btn-sm">انصراف</span>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';

    return htmlRow;
}

function saveVarChanges(obj) {

    let card = obj.parent().parent().parent();
    card.addClass("collapsed-card");
    card.find('.all_json_var_management_edit_btn').show();

    let card_body = obj.parent().parent();
    card_body.slideUp();
    let price = card_body.find('.js_price_txt').val();
    let price_off = card_body.find('.js_price_off_txt').val();
    let quantity = card_body.find('.js_quantity_txt').val();
    let status = card_body.find('.js_status_txt').val();
    let default_var = card_body.find('.js_default').val();

    if(quantity == 0 && status == "in_stock") status = "out_of_stock";

    let json_text = card_body.find('.json_text_area').val();
    let jsonVarArrayObj;
    if (json_text == '') {
        jsonVarArrayObj['id'] = "";
        jsonVarArrayObj['variables'] = "";
    } else {
        jsonVarArrayObj = JSON.parse(json_text);
    }

    let main_json_text = $('#variable_data').val();
    if (main_json_text == '') {
        mainJsonVarArrayObj = [];
    } else {
        mainJsonVarArrayObj = JSON.parse(main_json_text);
    }

    let variables_list = $('#variable_data_list').val();
    if (variables_list == '') {
        listArrayObj = [];
    } else {
        listArrayObj = JSON.parse(variables_list);
    }

    let index = -1;
    for (let i = 0; i < mainJsonVarArrayObj.length; i++) {
        if (mainJsonVarArrayObj[i]['id'] == jsonVarArrayObj['id']) {
            index = i;
            break;
        }
    }

    jsonVarArrayObj['price'] = price;
    jsonVarArrayObj['price_off'] = price_off;
    jsonVarArrayObj['status'] = status;
    jsonVarArrayObj['default'] = default_var;
    jsonVarArrayObj['quantity'] = quantity;

    if (index >= 0) {
        if (default_var == 1) {
            mainJsonVarArrayObj.forEach(element => {
                element['default'] = 0;
            });
        }
        mainJsonVarArrayObj[index] = jsonVarArrayObj;
    }

    let sendData = {
        id: $.trim($('#id').val()),
        pp_variables_map: $.trim(JSON.stringify(mainJsonVarArrayObj))
    }

    // let loadingOverlay = $(btnObj).parent().parent().find('#over_loading');
    // loadingOverlay.show();

    $.ajax({

        type: "POST",
        url: mpPanelBaseUrl + "/update-physical-product-variables-map",
        data: sendData,
        timeout: 25000,
        cache: false,
        success: function (data) {

            // loadingOverlay.hide();

            //console.log("data : " + data);

            if (data == "ok") {

                card_body.find('.json_text_area').val(JSON.stringify(jsonVarArrayObj));
                $('#variable_data').val(JSON.stringify(mainJsonVarArrayObj));
                let static_area = card.find('.static-vars-container');
                static_area.find('.jsvm-price-val').html(pricesToHtml(price,price_off));
                static_area.find('.jsvm-quantity-val').html(quantityToHtml(quantity));
                
                let status_box = static_area.find('.json-status-showtext');
                status_box.html(((status == 'in_stock') ? "موجود در انبار" : "ناموجود"));
                status_box.removeClass('in_stock');
                status_box.removeClass('out_of_stock');
                status_box.addClass(status);

                if (default_var == 1) {
                    $('.json-default-showtext').remove();

                    let x = document.createElement("span");
                    x.setAttribute("class", "json-default-showtext");
                    x.append("حالت پیش‌فرض");
                    static_area[0].appendChild(x);
                }

                let dynamic_area = card.find('.dynamic-vars-container');
                dynamic_area.find('.json-variable-showtext').remove();

                let variables = jsonVarArrayObj['variables'];
                let vars = variables.split(",");

                const varCatString = $.trim($('#variable_data_cats').val());
                let jsonVarCatArrayObj = [];
                if (varCatString != '') jsonVarCatArrayObj = JSON.parse(varCatString);

                vars.forEach(element => {

                    let index = -1;
                    for (let j = 0; j < listArrayObj.length; j++) {
                        if (element == listArrayObj[j]['id']) {
                            index = j;
                            break;
                        }
                    }
                    if (index > -1) {

                        let varCode = listArrayObj[index]['variable'];
                        const result = jsonVarCatArrayObj.find(item => item.variable === varCode);
                        let variable_text = "متغییر ناشناخته";
                        if (result) variable_text = result['variable_text'];
                        let variableHeadHtml = '<span class="var-ng-head"><span class="vnh-t">'+variable_text+':</span></span>';
                        let newHtml = '<span class="json-variable-showtext">'+variableHeadHtml+'<span class="var-ng-value">' + listArrayObj[index]['text'] + '</span></span>';
                
                        var tempContainer = document.createElement('div');
                        tempContainer.innerHTML = newHtml;
                        var newNode = tempContainer.firstChild;
                        dynamic_area[0].appendChild(newNode);

                        // let x = document.createElement("span");
                        // x.setAttribute("class", "json-variable-showtext");
                        // x.append(listArrayObj[index]['text']);
                        // dynamic_area[0].appendChild(x);

                    }

                });

                notyf.success('ویژگی مورد نظر به روز گردید.');
            } else {
                notyf.error('مشکلی در به روزرسانی ویژگی مورد رخ داده است. لظفا صفحه را مجدد رفرش نمایید.');
                // notyf.error(data);
            }

        },
        error: function (xhr, status, error) {
            // loadingOverlay.hide();
            notyf.error('مشکلی در به روزرسانی ویژگی مورد رخ داده است. لظفا مجدد امتحان نمایید یا صفحه را رفرش نمایید.');
            notyf.error('Error: ' + xhr.status + ' ' + xhr.statusText);
        }

    });

}

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

            saveVarChanges($(this));

        }
    })
}

let editJsonVarManagementRowsBtn = function () {

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

};

function jsonVarManagementArraySubmitBtnHandler(card) {
    let jsonVar = card.find('.json_text_area').val();
    if (jsonVar == '') {
        jsonVarArrayObj = [];
    } else {
        jsonVarArrayObj = JSON.parse(jsonVar);
    }

    let main_json_text = $('#variable_data').val();
    if (main_json_text == '') {
        mainJsonVarArrayObj = [];
    } else {
        mainJsonVarArrayObj = JSON.parse(main_json_text);
    }
    let index = -1;
    if (jsonVarArrayObj.length != 0) {
        for (let i = 0; i < mainJsonVarArrayObj.length; i++) {
            if (jsonVarArrayObj['id'] == mainJsonVarArrayObj[i]['id']) {
                index = i;
                break;
            }
        }
    }

    if (index > -1) {
        mainJsonVarArrayObj.splice(index, 1);
        $('#variable_data').val(JSON.stringify(mainJsonVarArrayObj));
    }

}


const deleteJsonVarManagementRowsBtn = 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_var_management_array").find(".showbox").find("#sorable_list").html(htmlrow);
            }

            //refresh textarea data:
            jsonVarManagementArraySubmitBtnHandler(root_card);

            let sendData = {
                id: $.trim($('#id').val()),
                pp_variables_map: $.trim(JSON.stringify(mainJsonVarArrayObj))
            }
        
            $.ajax({

                type: "POST",
                url: mpPanelBaseUrl + "/update-physical-product-variables-map",
                data: sendData,
                timeout: 25000,
                cache: false,
                success: function (data) {
        
                    // loadingOverlay.hide();
                    if (data == "ok") {
                        notyf.success('حذف با موفقیت انجام شد');     
                    } else {
                        notyf.error('مشکلی در به روزرسانی ویژگی مورد رخ داده است. لظفا صفحه را مجدد رفرش نمایید.');
                        // notyf.error(data);
                    }
        
                },
                error: function (xhr, status, error) {
                    // loadingOverlay.hide();
                    notyf.error('مشکلی در به روزرسانی ویژگی مورد رخ داده است. لظفا مجدد امتحان نمایید یا صفحه را رفرش نمایید.');
                    notyf.error('Error: ' + xhr.status + ' ' + xhr.statusText);
                }
        
            });

        }
    })
};

function deleteVariableBtn() {
    let var_id = $(this).data("var-id");
    let var_item = $(this).parent();
    let jsonArea = $(this).parent().parent().parent().parent().find('.var_items');
    let jsonString = $.trim(jsonArea.val());

    Swal.fire({
        title: 'این متغیر را حذف میکنید؟',
        icon: '',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#007bff',
        confirmButtonText: 'حذف متغیر',
        cancelButtonText: 'انصراف'
    }).then((result) => {
        if (result.isConfirmed) {
            var_item.remove();
            let array;
            if (jsonString == '') {
                array = [];
            } else {
                array = JSON.parse(jsonString);
            }
            let variables = array['variables'];
            let vars = variables.split(",");
            let var_index = vars.indexOf(var_id.toString());
            if (var_index > -1) {
                vars.splice(var_index, 1);
            }
            array['variables'] = vars.toString();
            jsonArea.val(JSON.stringify(array));
        }
    })
}

const jsonVarManagementCancelBtn = function () {

    let root_of_current = $(this).parent().parent().parent().parent().parent();
    let card = root_of_current.find('.json_var_management_card');
    root_of_current.find('.all_json_var_management_edit_btn').show();
    card.addClass("collapsed-card");
    let card_body = card.find('.card-body');
    card_body.slideUp();

};

const jsonVariableAdd = function () {

    $(this).addClass("disabled");
    let var_card = $(this).parent().parent().find('.variable-add-card');
    var_card.show('slideDown');

};

function variableCardClose() {
    let var_card = $(this).parent().parent();
    let add_btn = $(this).parent().parent().parent().parent().find('.json-variable-add');
    var_card.slideUp();
    add_btn.removeClass("disabled");
}

function selectedVariable() {

    let var_id = $(this).data("var-id");
    let cat = $(this).data("variable");
    let text = $(this).find('.pt').html();

    let selectedVarsBox = $(this).parent().parent().parent().parent().parent().find(".json-variable-showtext");

    let main_var_list = $('#variable_data_list').val();
    if (main_var_list == '') {
        mainVarListArrayObj = [];
    } else {
        mainVarListArrayObj = JSON.parse(main_var_list);
    }

    let jsonArea = $(this).parent().parent().parent().parent().parent().parent().find(".json_text_area");
    let var_list = jsonArea.val();
    if (var_list == '') {
        jsonVarListArrayObj['variables'] = [];
    } else {
        jsonVarListArrayObj = JSON.parse(var_list);
    }

    let variables = jsonVarListArrayObj['variables'];
    let vars = (variables == "") ? [] : variables.split(",");
    for (let i = 0; i < vars.length; i++) {
        for (let j = 0; j < mainVarListArrayObj.length; j++) {
            if (vars[i] == mainVarListArrayObj[j]['id'] & mainVarListArrayObj[j]['variable'] == cat) {
                vars.splice(i, 1);
            }
        }
    }

    vars.push(var_id);

    const varCatString = $.trim($('#variable_data_cats').val());
    let jsonVarCatArrayObj = [];
    if (varCatString != '') jsonVarCatArrayObj = JSON.parse(varCatString);

    selectedVarsBox.remove();
    let dynamicVarArea = $(this).parent().parent().parent().parent().parent().parent().find('.dynamic-var-list');
    for (let i = 0; i < vars.length; i++) {
        let index = 0;
        for (let j = 0; j < mainVarListArrayObj.length; j++) {
            if (vars[i] == mainVarListArrayObj[j]['id']) {
                index = j;
                break;
            }
        }


        let varCode = mainVarListArrayObj[index]['variable'];
        const result = jsonVarCatArrayObj.find(item => item.variable === varCode);
        let variable_text = "متغییر ناشناخته";
        if (result) variable_text = result['variable_text'];
        let variableHeadHtml = '<span class="var-ng-head"><span class="vnh-t">'+variable_text+':</span></span>';
        let newHtml = '<span class="json-variable-showtext" ><i class="all_json_delete_var_btn ph ph-trash" data-var-id="' + mainVarListArrayObj[index]['id'] + '" ></i><span class="var-ng-value">' + mainVarListArrayObj[index]['text'] + '</span>'+variableHeadHtml+'</span>';
        

        var tempContainer = document.createElement('div');
        tempContainer.innerHTML = newHtml;
        var newNode = tempContainer.firstChild;
        dynamicVarArea[0].appendChild(newNode);

    }

    jsonVarListArrayObj['variables'] = vars.toString();
    jsonArea.val(JSON.stringify(jsonVarListArrayObj));

    notyf.open({
        type: 'info',
        message: 'ویژگی '+text+' اضافه گردید.'
    });
}

// function NewCatDefine() {
//     $(this).parent().parent().find('.variable-var-cat-define-area').find('.variable-cat-define-area').show('fade-in');
//     $(this).parent().parent().find('.variable-var-cat-define-area').find('.variable-var-define-area').hide();
//     $(this).parent().parent().find('.variable-add-area-cat-elements').hide();
// }

function NewVariableDefine() {
    $(this).parent().find('.variable-var-cat-define-area').find('.variable-var-define-area').show('fade-in');
    $(this).parent().find('.variable-var-cat-define-area').find('.variable-cat-define-area').hide();
    $(this).parent().find('.variable-add-area-cat-elements').hide();
    $(this).hide();
}

// function CatDefineReject() {
//     $(this).parent().parent().parent().hide();
//     $(this).parent().parent().parent().parent().parent().find('.variable-add-area-cat-elements').show();
// }

function VarDefineReject() {
    $(this).parent().parent().parent().hide();
    $(this).parent().parent().parent().parent().parent().find('.variable-add-area-cat-elements').show();
    $(this).parent().parent().parent().parent().parent().find('.json-variable-new-define').show();
}

function SelectColorChanged() {
    $('.cob-i').removeClass("color-item-selected");
    $(this).addClass("color-item-selected");
    let value = $(this).attr('data-value');
    let text = $(this).attr('data-text');
    $(this).parent().parent().find('.var_value').val(value);
    $(this).parent().parent().find('.var_text').val(text);
}

function AddNewCatVar(obj) {

    let catAreaDefine = obj.parent().parent();
    let icon = catAreaDefine.find('.cat_icon').val();
    let cat = catAreaDefine.find('.cat_variable').val();
    let text = catAreaDefine.find('.cat_variable_txt').val();

    if(!icon || !cat || !text){
        notyf.error('فیلدهای مربوطه را تکمیل نمایید!');
        return;
    }

    const varCatString = $.trim($('#variable_data_cats').val());
    let jsonVarCatArrayObj;
    if (varCatString == '') {
        jsonVarCatArrayObj = [];
    } else {
        jsonVarCatArrayObj = JSON.parse(varCatString);
    }

    let maxId = 0;
    jsonVarCatArrayObj.forEach(element => {
        maxId = (element['id'] > maxId) ? element['id'] : maxId;
    });

    let id = maxId + 1;

    let newCat = {
        id: id,
        icon: icon,
        variable: cat,
        variable_text: text
    };

    jsonVarCatArrayObj.push(newCat);
    let newList = JSON.stringify(jsonVarCatArrayObj);


    let sendData = {
        pp_variables_cat: $.trim(newList)
    }

    $.ajax({

        type: "POST",
        url: mpPanelBaseUrl + "/update-physical-product-variables-cat",
        data: sendData,
        timeout: 25000,
        cache: false,
        success: function (data) {

            if (data == "ok") {
                $('#variable_data_cats').val(newList);
                let allElements = $(".variable-add-area-cats");

                for (var i = 0; i < allElements.length; i++) {
                    let x = document.createElement("span");
                    x.setAttribute("class", "json-variable-cats-showtext");
                    x.textContent = text;
                    x.setAttribute("data-variable", cat);
                    allElements[i].appendChild(x);
                }

                notyf.success('ویژگی جدید با موفقیت اضافه گردید.');

                catAreaDefine.find('.cat_icon').val("");
                catAreaDefine.find('.cat_variable').val("");
                catAreaDefine.find('.cat_variable_txt').val("");
                catAreaDefine.find(".iconpreview").removeClass();

                obj.parent().parent().hide();
                obj.parent().parent().parent().parent().find('.variable-add-area-cat-elements').show();
            } else {
                notyf.error(data);
            }

        },
        error: function (xhr, status, error) {
            // loadingOverlay.hide();
            notyf.error('مشکلی در ذخیره ویژگی جدید رخ داده است. لطفا مجدد امتحان نمایید یا صفحه را رفرش نمایید.');
            notyf.error('Error: ' + xhr.status + ' ' + xhr.statusText);
        }
    });
}

function AddNewVarToCat(obj) {

    obj.prop('disabled', true);
    obj.css('opacity','0.5');

    let selected_cat = obj.parent().parent().parent();
    let variable = obj.parent().parent().parent().parent().parent().find('#selected-cat').html();
    let text = selected_cat.find('.var_text').val();
    if(!text){
        notyf.error('فیلد مربوطه را تکمیل نمایید!');
        return;
    }
    
    let value = selected_cat.find('.var_value').val();
    if(variable != "color"){
        let convertedValue = convertToEngChars(text);
        //console.log("convertedValue:" + convertedValue);
        selected_cat.find('.var_value').val(convertedValue);
        value = selected_cat.find('.var_value').val();
    }
    
    let var_list = $('#variable_data_list').val();

    // console.log("variable:"+variable);
    // console.log("value:"+value);
    // console.log("text:"+text);

    let jsonVarListArrayObj;
    if (var_list == '') {
        jsonVarListArrayObj = [];
    } else {
        jsonVarListArrayObj = JSON.parse(var_list);
    }

    const alreadyExist = jsonVarListArrayObj.find(item => item.variable === variable && item.value === value);
    if(alreadyExist){
        notyf.error('مقدار وارد شده از قبل وجود دارد');
        obj.prop('disabled', false);
        obj.css('opacity','1.0');
        return;
    }

    const varCatString = $.trim($('#variable_data_cats').val());
    let jsonVarCatArrayObj;
    if (varCatString == '') {
        jsonVarCatArrayObj = [];
    } else {
        jsonVarCatArrayObj = JSON.parse(varCatString);
    }

    let maxId = 0;
    jsonVarListArrayObj.forEach(element => {
        //console.log(element);
        maxId = (element['id'] > maxId) ? element['id'] : maxId;
    });

    let var_id = maxId + 1;

    let newVar = {
        id: var_id,
        variable: variable,
        value: value,
        text: text
    };

    jsonVarListArrayObj.push(newVar);
    let newList = JSON.stringify(jsonVarListArrayObj);

    let sendData = {
        id: $.trim($('#id').val()),
        pp_variables_list: $.trim(newList)
    }

    $.ajax({

        type: "POST",
        url: mpPanelBaseUrl + "/update-physical-product-variables-list",
        data: sendData,
        timeout: 25000,
        cache: false,
        success: function (data) {

            obj.prop('disabled', false);
            obj.css('opacity','1.0');

            if (data == "ok") {
                $('#variable_data_list').val(newList);
                let allElements = $(".variable-add-area-cat-elements");

                const varColorsText = $.trim($('#variable_data_colors').val());
                let jsonColorsObj = [];
                if (varColorsText != '') jsonColorsObj = JSON.parse(varColorsText);

                for (var i = 0; i < allElements.length; i++) {

                    let colorPrev = "";
                    if(variable == "color"){
                        let varCode = value;
                        const result = jsonColorsObj.find(item => item.color_code === varCode);
                        if(result){
                            colorPrev = '<span class="color-prev-c" style="background-color:'+result['data']+'"></span>';
                        }
                    }
                    let hide = "";
                    let selectedVar = $(allElements[i]).parent().find('#selected-cat').html();
                    if (selectedVar != variable) hide = 'style="display:none"';
                    newHtml = '<span class="json-variable-select-showtext" data-variable="' + variable + '" data-var-id="' + var_id + '" '+hide+'>' +colorPrev + '<span class="pt">' + text + '</span></span>';
                    
                    var tempContainer = document.createElement('div');
                    tempContainer.innerHTML = newHtml;
                    var newNode = tempContainer.firstChild;
                    allElements[i].appendChild(newNode);


                    // let x = document.createElement("span");
                    // x.setAttribute("class", "json-variable-select-showtext");
                    // x.textContent = text;
                    // x.setAttribute("data-variable", variable);
                    // x.setAttribute("data-var-id", var_id);
                    // let selectedVar = $(allElements[i]).parent().find('#selected-cat').html();
                    // if (selectedVar != variable) {
                    //     x.setAttribute("style", "display:none");
                    // }

                    //allElements[i].appendChild(x);

                }
                //notyf.success('ویژگی جدید با موفقیت اضافه گردید.');

                selected_cat.find('.var_value').val("");
                selected_cat.find('.var_text').val("");

                obj.parent().parent().parent().hide();
                obj.parent().parent().parent().parent().parent().find('.variable-add-area-cat-elements').show();
                obj.parent().parent().parent().parent().parent().find('.json-variable-new-define').show();
            
            } else {

                notyf.error('مشکلی در ذخیره ویژگی جدید رخ داده است. لطفا صفحه را مجدد رفرش نمایید.');
                // notyf.error(data);
            }

        },
        error: function (xhr, status, error) {
            // loadingOverlay.hide();
            obj.prop('disabled', false);
            obj.css('opacity','1.0');
            notyf.error('مشکلی در ذخیره ویژگی جدید رخ داده است. لظفا مجدد امتحان نمایید یا صفحه را رفرش نمایید.');
            notyf.error('Error: ' + xhr.status + ' ' + xhr.statusText);
        }
    });
}

const ConfirmVarToCat = function () {

    AddNewVarToCat($(this));

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

            

    //     }
    // })
}

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

            AddNewCatVar($(this));

        }
    })

}

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

    //json variables management ARRAY

    //https://stackoverflow.com/a/3273355/4565796
    // $('.json_var_management_submit').click(jsonVarManagementSubmitBtn);
    $('.json_var_management_cancel').click(jsonVarManagementCancelBtn);

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

        const jsonString = $.trim($('.json_handler_var_management_array > textarea').val());
        let jsonVarManagementArrayObj;

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

        const listString = $.trim($('.json_handler_var_management_array .var_list').val());
        let jsonVarListArrayObj;

        if (listString == '') {
            jsonVarListArrayObj = [];
        } else {
            jsonVarListArrayObj = JSON.parse(listString);
        }

        const varCatString = $.trim($('.json_handler_var_management_array .var_cats').val());
        let jsonVarCatArrayObj;

        if (varCatString == '') {
            jsonVarCatArrayObj = [];
        } else {
            jsonVarCatArrayObj = JSON.parse(varCatString);
        }

        const colorMapString = $.trim($('.json_handler_var_management_array .colors_map').val());
        let jsonColorMapArrayObj;

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

        if (jsonVarManagementArrayObj.length == 0) {
            const htmlrow = ThereIsNoRowHereHtml();
            $(".json_handler_var_management_array").find(".showbox").find("#sorable_list").html(htmlrow);
        } else {
            $.each(jsonVarManagementArrayObj.reverse(), function (key, value) {
                //console.log("vs: " + value);
                const htmlrow = jsonVarManagementRowHtmlMacker(true, value, jsonVarListArrayObj, jsonVarCatArrayObj, jsonColorMapArrayObj);
                $(".json_handler_var_management_array").find(".showbox").find("#sorable_list").append(htmlrow);
            });
        }

        $('.all_json_var_management_edit_btn').click(editJsonVarManagementRowsBtn);
        $('.all_json_var_management_delete_btn').click(deleteJsonVarManagementRowsBtn);
        $('.json_var_management_submit_array').off("click");
        //https://stackoverflow.com/a/9467172/4565796
        $('.json_var_management_submit_array').click(jsonVarManagementArraySubmitBtn);
        $('.json_var_management_cancel').click(jsonVarManagementCancelBtn);
        $('.variable-card-close').click(variableCardClose);
        $('.color-options-box .cob-i').click(SelectColorChanged);
        $('.row-options-wrapper > .row-option').click(SelectRowOptionsChanged);
        $('input.ng-price-input').on('input change keyup paste',priceInputChanged);

    }

    $('.json-variable-add').click(jsonVariableAdd);
    $('.variable-card-close').click(variableCardClose);
    //$('.json-variable-cat-new-define').click(NewCatDefine);
    $('.json-variable-new-define').click(NewVariableDefine);
    $('.confirm-var-define .reject').click(VarDefineReject);
    $('.mppanel_icon_forms').change(function () {
        previewBoxIcon(this);
    });

    $('.confirm-var-define .confirm').click(ConfirmVarToCat);
    $(".variable-add-area-cats").on("click", ".json-variable-cats-showtext", changeSelectedCat);
    $(".variable-add-area-cat-elements").on("click", ".json-variable-select-showtext", selectedVariable);
    $(".dynamic-var-list").on("click", ".all_json_delete_var_btn", deleteVariableBtn);

    $('.variable-add-area-cats').each(function() {
        //trigger all first items in var add area becaues
        //the default var add is color and sometimes user may changed the order of variable maps
        //in the store settings.
        //in ui when user want to select product variable and add new value to first var cat
        //if first cat is not color it show colors list!
        //so we just fix it with temp method:
        //our fix will call changeSelectedCat for all first head variable cats
        //so the show correct adder dialog
        var firstChild = $(this).children().first();
        firstChild.trigger('click');
    });

    function addNewVarItem(obj) {

        let main_json_text = $('#variable_data').val();
        if (main_json_text == '') {
            mainJsonVarArrayObj = [];
        } else {
            mainJsonVarArrayObj = JSON.parse(main_json_text);
        }

        let maxId = 0;
        mainJsonVarArrayObj.forEach(element => {
            maxId = (element['id'] > maxId) ? element['id'] : maxId;
        });

        let newRow = {
            id: maxId + 1,
            price: "0",
            price_off: "0",
            status: "out_of_stock",
            default: "0",
            quantity: 0,
            variables: ""
        };

        mainJsonVarArrayObj.push(newRow);
        $('#variable_data').val(JSON.stringify(mainJsonVarArrayObj));

        const listString = $.trim($('.json_handler_var_management_array .var_list').val());
        let jsonVarListArrayObj;

        if (listString == '') {
            jsonVarListArrayObj = [];
        } else {
            jsonVarListArrayObj = JSON.parse(listString);
        }

        const varCatString = $.trim($('.json_handler_var_management_array .var_cats').val());
        let jsonVarCatArrayObj;

        if (varCatString == '') {
            jsonVarCatArrayObj = [];
        } else {
            jsonVarCatArrayObj = JSON.parse(varCatString);
        }

        const colorMapString = $.trim($('.json_handler_var_management_array .colors_map').val());
        let jsonColorMapArrayObj;

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

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

        const htmlrow = jsonVarManagementRowHtmlMacker(true, newRow, jsonVarListArrayObj, jsonVarCatArrayObj, jsonColorMapArrayObj);
        root.find(".showbox").find("#sorable_list").prepend(htmlrow);

        $('.all_json_var_management_edit_btn').click(editJsonVarManagementRowsBtn);
        $('.all_json_var_management_delete_btn').click(deleteJsonVarManagementRowsBtn);
        $('.all_json_delete_var_btn').click(deleteVariableBtn);
        $('.json_var_management_submit_array').off("click");
        //https://stackoverflow.com/a/9467172/4565796
        $('.json_var_management_submit_array').click(jsonVarManagementArraySubmitBtn);
        $('.json_var_management_cancel').off("click");
        $('.json_var_management_cancel').click(jsonVarManagementCancelBtn);
        $('.json-variable-add').click(jsonVariableAdd);
        $('.variable-card-close').click(variableCardClose);
        $(".variable-add-area-cats").on("click", ".json-variable-cats-showtext", changeSelectedCat);
        $(".variable-add-area-cat-elements").on("click", ".json-variable-select-showtext", selectedVariable);
        $(".dynamic-var-list").on("click", ".all_json_delete_var_btn", deleteVariableBtn);
        //$('.json-variable-cat-new-define').click(NewCatDefine);
        $('.json-variable-new-define').click(NewVariableDefine);
        $('.confirm-var-define .reject').click(VarDefineReject);
        $('.confirm-var-define .confirm').click(ConfirmVarToCat);
        $('.icon_selector_box > .icon_box').click(function (e) {
            e.preventDefault();
            selectIconID = $(this).parent().find('.mppanel_icon_forms').prop('id');
            requestIcons();
        });
        $('.mppanel_icon_forms').change(function () {
            previewBoxIcon(this);
        });
        $('.color-options-box .cob-i').click(SelectColorChanged);
        $('.row-options-wrapper > .row-option').click(SelectRowOptionsChanged);
        $('input.ng-price-input').on('input change keyup paste',priceInputChanged);

    }


    $('#add_var_management_array_item').click(function () {
        let pp_type = $('#pp_type').val();
        let main_json_text = $('#variable_data').val();
        if (main_json_text == '') {
            mainJsonVarArrayObj = [];
        } else {
            mainJsonVarArrayObj = JSON.parse(main_json_text);
        }    

        if(pp_type == 'virtual' && mainJsonVarArrayObj.length > 0){
            notyf.error('محصول فروشگاهی از نوع مجازی نمی‌تواند بیش از یک ویژگی داشته باشد.');
            return;
        }

        Swal.fire({
            title: 'آیا می‌خواهید ردیف جدیدی اضافه کنید؟',
            text: '',
            icon: '',
            showCancelButton: true,
            confirmButtonColor: '#007bff',
            cancelButtonColor: '#909090',
            confirmButtonText: 'بله',
            cancelButtonText: 'انصراف'
        }).then((result) => {
            if (result.isConfirmed) {

                addNewVarItem($(this));

            }
        })
    });

}); //end of jqury doc ready