function HandleShowTheGatewaysMapByTargetMarket(targetMarket) {

    $(".json_handler_gateway_map_array").find(".showbox").find("#sorable_list").empty();

    const jsonString = $.trim($('.json_handler_gateway_map_array .json_gateways_map_text_area').val());
    let jsonGatewayArrayObj;

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

    const jsonListString = $.trim($('.json_handler_gateway_map_array .json_gateways_text_area').val());
    let jsonListArrayObj;

    if (jsonListString == '') {
        jsonListArrayObj = [];
    } else {
        jsonListArrayObj = JSON.parse(jsonListString);
    }

    if (jsonGatewayArrayObj.length == 0) {
        const htmlrow = ThereIsNoRowHereHtml();
        $(".json_handler_gateway_map_array").find(".showbox").find("#sorable_list").html(htmlrow);
    } else {
        $.each(jsonGatewayArrayObj, function (key, value) {

            let hidden = true;
            if(targetMarket == value['market']) hidden = false;
            const htmlrow = jsonGatewayMapRowHtmlMacker(value, jsonListArrayObj, hidden);
            $(".json_handler_gateway_map_array").find(".showbox").find("#sorable_list").append(htmlrow);

        });
    }
    
}


function saveGatewayMapChanges(obj) {

    let card = obj.parents('.card').first();
    card.addClass("collapsed-card");
    card.find('.json_handler_box_opener_btn').show();

    let card_body = obj.closest('.card-body');
    card_body.slideUp();

    let jsonArea = card_body.find(".gateway_map_items");
    let gways_list = jsonArea.val();
    let jsonGWaysListArrayObj = {};

    if (gways_list === '') {
        jsonGWaysListArrayObj['market'] = "";
        jsonGWaysListArrayObj['purchase_type'] = "";
        jsonGWaysListArrayObj['gateways'] = "";
    } else {
        jsonGWaysListArrayObj = JSON.parse(gways_list);
    }

    const jsonListString = $.trim($('.json_handler_gateway_map_array .json_gateways_text_area').val());
    let jsonListArrayObj = (jsonListString === '') ? [] : JSON.parse(jsonListString);

    card.find('.json_gateway_map_market').html(faMarket(jsonGWaysListArrayObj['market']));
    card.find('.json_gateway_map_purchase_type').html(faPurchaseType(jsonGWaysListArrayObj['purchase_type']));

    let selectedGWaysBox = card.find(".json_gateway_showtitle");
    selectedGWaysBox.remove();

    let dynamicGWaysArea = card.find('.gateways-container');

    let gateways = jsonGWaysListArrayObj['gateways'];
    let items = gateways.split(",");

    dynamicGWaysArea.find('.json_gateway_shownotwaytopay').remove();

    if (gateways !== "") {

        $.each(items, function(i, itemId) {
            let matched = jsonListArrayObj.find(obj => obj.id == itemId);
            if (matched) {
                $('<span>', {
                    "class": "json_gateway_showtitle",
                    "text": matched.title
                }).appendTo(dynamicGWaysArea);
            }
        });

    } else {

        $('<span>', {
            "class": "json_gateway_shownotwaytopay",
            "text": "بدون روش پرداخت"
        }).appendTo(dynamicGWaysArea);

    }

}


function jsonGatewayMapArraySubmitBtn() {
    saveGatewayMapChanges($(this));
    //refresh textarea data:
    jsonGatewayArraySubmitBtnHandler();
}

const chackMarketPurchaseType = function () {
    const jsonString = $.trim($('.json_handler_gateway_map_array .json_gateways_map_text_area').val());
    let jsonGatewayArrayObj;

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

    let market = $(this).parent().find('.js_market_txt').val();
    let purchaseType = $(this).parent().find('.js_purchase_type_txt').val();

    $.each(jsonGatewayArrayObj, function (key, value) {
        if((value['market']==market) && (value['purchase_type']==purchaseType)){
            notyf.error('این نگاشت هم اکنون در لیست وجود دارد.');
            return;
        }
    });

    let jsonArea = $(this).parent().find(".gateway_map_items");
    let gways_list = jsonArea.val();
    if (gways_list == '') {
        jsonGWaysListArrayObj['market'] = market;
        jsonGWaysListArrayObj['purchase_type'] = purchaseType;
        jsonGWaysListArrayObj['gateways'] = "";
    } else {
        jsonGWaysListArrayObj = JSON.parse(gways_list);
        jsonGWaysListArrayObj['market'] = market;
        jsonGWaysListArrayObj['purchase_type'] = purchaseType;
    }
    jsonArea.val(JSON.stringify(jsonGWaysListArrayObj));
};

function checkExceptionGateway(market, purchase_type, gateway_code) {

    switch (market) {
        case 'cafebazaar':
            if(gateway_code=='myket')
                return 'error';
            if(gateway_code=='cafebazaar' && purchase_type=='order')
                return 'error';    
            break;    
        case 'myket':
            if(gateway_code=='cafebazaar')
                return 'error';
            if(gateway_code=='myket' && purchase_type=='order')
                return 'error';        
            break;  
        case 'private':
            if(gateway_code=='cafebazaar' || gateway_code=='myket')
                return 'error';  
            break;  
        case 'googleplay':
            if(gateway_code=='cafebazaar' || gateway_code=='myket')
                return 'error'; 
            break;  
    }

    if(gateway_code=='offline_atdes' && purchase_type != 'order'){
        return 'error';
    }

    if(purchase_type == 'wallet' && gateway_code=='wallet')
        return 'error';

    return "ok";
}

function addSelectedGateway() {

    let row_index = $(this).data("row-index");
    let selectedItem = $('input[name=gateway-item-'+row_index+']:checked').val();
    const jsonListString = $.trim($('.json_handler_gateway_map_array .json_gateways_text_area').val());
    let jsonListArrayObj;

    if (jsonListString == '') {
        jsonListArrayObj = [];
    } else {
        jsonListArrayObj = JSON.parse(jsonListString);
    }
    
    let selectedItemId = "";
    $.each(jsonListArrayObj, function (key, value) {
        if(value['code']==selectedItem){
            selectedItemId = value['id'];
        }
    });

    if(selectedItemId == ""){
        notyf.error('خطایی رخ داد. لطفا صفحه را به روزرسانی نمایید.');
        return;
    }

    let jsonArea = $(this).parent().parent().parent().parent().find(".gateway_map_items");
    let gways_list = jsonArea.val();
    if (gways_list == '') {
        jsonGWaysListArrayObj['gateways'] = [];
    } else {
        jsonGWaysListArrayObj = JSON.parse(gways_list);
    }

    let gateways = (jsonGWaysListArrayObj['gateways'] == "") ? [] : jsonGWaysListArrayObj['gateways'].split(",");
    for (let i = 0; i < gateways.length; i++) {
        if(gateways[i] == selectedItemId)
        {
            gateways.splice(i, 1);
        }
    }

    gateways.push(selectedItemId);
    jsonGWaysListArrayObj['gateways'] = gateways.toString();
    jsonArea.val(JSON.stringify(jsonGWaysListArrayObj));


    let selectedGWaysBox = $(this).parent().parent().parent().find(".js_gateway_showtitle");

    selectedGWaysBox.remove();
    let dynamicGWaysArea = $(this).parent().parent().parent().find('.dynamic-gateways-map-list');
    for (let i = 0; i < gateways.length; i++) {
        let index = 0;
        for (let j = 0; j < jsonListArrayObj.length; j++) {
            if (gateways[i] == jsonListArrayObj[j]['id']) {
                index = j;
                break;
            }
        }
        let x = document.createElement("span");
        x.setAttribute("class", "js_gateway_showtitle");
        let icon = document.createElement("i");
        icon.setAttribute("class", "all_json_delete_gateway_btn la la-close");
        icon.setAttribute("data-gway-id", jsonListArrayObj[index]['id']);
        x.append(icon);
        x.append(jsonListArrayObj[index]['title']);
        dynamicGWaysArea[0].appendChild(x);
    }

    let gway_area = $(this).parent().parent();
    let add_btn = $(this).parent().parent().parent().find('.json-gateway-add');
    gway_area.slideUp();
    add_btn.removeClass("disabled");
}

function selectedGatewayReject(){
    let gway_area = $(this).parent().parent();
    let add_btn = $(this).parent().parent().parent().find('.json-gateway-add');
    gway_area.slideUp();
    add_btn.removeClass("disabled");
}

const openSelectGatewayArea = function () {

    $(this).addClass("disabled");
    let gway_area = $(this).parent().parent().find('.gateways-select-area');
    gway_area.show('slideDown');

};


function deleteGatewayBtn() {
    let gway_id = $(this).data("gway-id");
    let gway_item = $(this).parent();
    let jsonArea = $(this).parent().parent().parent().parent().find('.gateway_map_items');
    let jsonString = $.trim(jsonArea.val());

    Swal.fire({
        title: 'این متغیر را حذف میکنید؟',
        icon: '',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#007bff',
        confirmButtonText: 'حذف متغیر',
        cancelButtonText: 'انصراف'
    }).then((result) => {
        if (result.isConfirmed) {
            gway_item.remove();
            let array;
            if (jsonString == '') {
                array['gateways'] = '';
            } else {
                array = JSON.parse(jsonString);
            }

            let gateways = array['gateways'].split(",");
            let gateway_index = gateways.indexOf(gway_id.toString());
            if (gateway_index > -1) {
                gateways.splice(gateway_index, 1);
            }
            array['gateways'] = gateways.toString();
            jsonArea.val(JSON.stringify(array));
        }
    })
}

function buildGatewayMapJsonAndSave() {

    let gateways_map = $('.json_gateways_map_text_area').val();

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

    let _toSave = {
        gateways_map: gateways_map
    }

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



function jsonGatewayArraySubmitBtnHandler() {

    let root_of_current = $('.json_handler_gateway_map_array');
    let textarea = root_of_current.find('.json_gateways_map_text_area');
    const sortableList = root_of_current.find('#sorable_list');

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

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

        const card = $(li);

        let _map = card.find('.gateway_map_items').val();
        let _js_map = JSON.parse(_map);
        if(!li.classList.contains('no-item-found')){
            arr[i] = _js_map;
        }
    });

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

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

};


function faMarket(string){
    switch (string) {
        case 'cafebazaar': return "بازار";
        case 'myket': return "مایکت";
        case 'private': return "خصوصی";
        case 'googleplay': return "گوگل پلی";
        case 'web': return "وبسایت";
    }
    return string;
}

function faPurchaseType(string){
    switch (string) {
        case 'wallet': return "کیف پول";
        case 'order': return "فروشگاه";
        case 'subscribe': return "اشتراک‌ها";
        case 'singlepost': return "محصولات تکی";
        case 'donate': return "حمایت مالی";
        case 'form_order': return "سفارش فرم";
    }
    return string;
}

function jsonGatewayMapRowHtmlMacker(json,list,hidden) { //dont use ids because ids cant be repeated in DOM
    
    let rowIndex = randomUID(21);

    let htmlRow = "";

    let hiddenDiv = '';
    if(hidden) hiddenDiv = 'style="display:none;"';

    htmlRow += '<div '+hiddenDiv+' class="json_gateway_map_card card card-outline card-json-item collapsed-card global-json-handler-card">';
    htmlRow += '<div class="card-header json_gateway_map_box">';
    
    htmlRow += '<div class="info-container">';

    htmlRow += '<div class="gateways-map-head-datas">';
    htmlRow += '<span class="json_gateway_map_purchase_type" >' + (json != null ? faPurchaseType(json['purchase_type']) : "") + ' </span>';
    htmlRow += '<span class="json_gateway_map_market" >' + (json != null ? faMarket(json['market']) : "") + '</span> ';
    htmlRow += '</div>';

    htmlRow += '<div class="gateways-container-p"><span class="gcptpy">روش‌های پرداخت:</span>';
    htmlRow += '<div class="gateways-container">';

    let noWayToPay = true;
    if (list != null) {
        let gateways = json['gateways'];
        let items = gateways.split(",");
        if (gateways != "") {
            for (let i = 0; i < items.length; i++) {
                let index = -1;
                for (let j = 0; j < list.length; j++) {
                    if (items[i] == list[j]['id']) {
                        index = j;
                        break;
                    }
                }
                if(index >= 0){
                    htmlRow += '<span class="json_gateway_showtitle" >' + list[index]['title'] + ' </span>';
                    noWayToPay = false;
                }
            }
        }
    }

    if(noWayToPay){
        htmlRow += '<span class="json_gateway_shownotwaytopay" >بدون روش پرداخت</span>';
    }

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

    htmlRow += '<div class="card-tools2">';
    htmlRow += '<button type="button" class="json_handler_box_opener_btn btn btn-primary btn-sm"><i class="ph ph-pencil"></i></button>';    
    htmlRow += '</div>';

    htmlRow += '</div>';
    htmlRow += '<div class="card-body" style="display: none;">';
    htmlRow += '<textarea style="display:none" class="form-control json_text_area gateway_map_items" rows="4">' + JSON.stringify(json) + '</textarea>';
    htmlRow += '<div class="gateways-map-management">';
    htmlRow += '<div class="dynamic-gateways-map-list">';
    htmlRow += '<button class="btn btn-primary btn-sm json-gateway-add">افزودن درگاه</button>';
    if (list != null) {
        let gateways = json['gateways'];
        let items = gateways.split(",");
        if (gateways != "") {
            for (let i = 0; i < items.length; i++) {
                let index = -1;
                for (let j = 0; j < list.length; j++) {
                    if (items[i] == list[j]['id']) {
                        index = j;
                        break;
                    }
                }
                htmlRow += '<span class="js_gateway_showtitle" ><i class="all_json_delete_gateway_btn la la-close" data-gway-id="' + list[index]['id'] + '" ></i>' + list[index]['title'] + ' </span>';
            }
        }
    }


    htmlRow += '</div>';

    htmlRow += '<div class="gateways-select-area" style="display:none;">';

    let validity = "";
    for (let j = 0; j < list.length; j++) {
        validity = checkExceptionGateway(json['market'], json['purchase_type'], list[j]['code']);
        if(validity == 'ok'){
            htmlRow += '<div class="gateway-option"><input type="radio" id="gi-'+rowIndex+list[j]['id']+'" name="gateway-item-'+rowIndex+'" value="'+list[j]['code']+'" ><label for="gi-'+rowIndex+list[j]['id']+'">'+list[j]['title']+'</label></div>';
        }
    }

    htmlRow += '<div class="confirm-gateway" >';
    htmlRow += '<button type="button" data-row-index="'+rowIndex+'" 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 += '<span class="minitext">بعد از ایجاد تغییرات بروی این آیتم، بروی ثبت تغییرات کلیک کنید. دقت کنید ثبت تغییرات به معنی ذخیره در سرور نمیباشد</span>';
    htmlRow += '<div class="local_submit_parent">';
    htmlRow += '<span class="json_gateway_map_submit_array btn btn-primary btn-sm">ثبت تغییرات</span>';
    htmlRow += '<span class="json_gateway_map_cancel btn btn-gray btn-sm">انصراف</span>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';

    return htmlRow;

}

// function addNewGatewayMapItem(obj) {

//     const jsonString = $.trim($('.json_handler_gateway_map_array .json_gateways_map_text_area').val());
//     let jsonGatewayArrayObj;

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

//     const jsonListString = $.trim($('.json_handler_gateway_map_array .json_gateways_text_area').val());
//     let jsonListArrayObj;

//     if (jsonListString == '') {
//         jsonListArrayObj = [];
//     } else {
//         jsonListArrayObj = JSON.parse(jsonListString);
//     }

//     let market = obj.parent().find('.js_market_txt').val();
//     let purchaseType = obj.parent().find('.js_purchase_type_txt').val();

//     let exist = false;
//     $.each(jsonGatewayArrayObj, function (key, value) {
//         if((value['market']==market) && (value['purchase_type']==purchaseType)){
//             exist = true;
//         }
//     });
//     if(exist){
//         notyf.error('این نگاشت هم اکنون در لیست وجود دارد.');
//         return;
//     }

//     let newRow = {
//         market: market,
//         purchase_type: purchaseType,
//         gateways: ""
//     };
    
//     const root = obj.parent().parent();
//     root.find('.no-item-found').remove();
//     const htmlrow = jsonGatewayMapRowHtmlMacker(newRow, jsonListArrayObj);
//     root.find(".showbox").find("#sorable_list").prepend(htmlrow);
// }

$(function () { // start of document ready:
    //json gateway mapping ARRAY

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

        let targetMarket = $('.gateway-map-tab-container').find('.tab-item-selected').data("value");
        HandleShowTheGatewaysMapByTargetMarket(targetMarket);

    }

    $(".json_handler_gateway_map_array").on("click", ".json_gateway_map_cancel", jsonHandlersBoxCloser);
    $(".json_handler_gateway_map_array").on("click", ".json_handler_box_opener_btn", jsonHandlersBoxOpener);
    $(".json_handler_gateway_map_array").on("click", ".json-gateway-add", openSelectGatewayArea);
    $(".json_handler_gateway_map_array").on("click", ".confirm-gateway .confirm", addSelectedGateway);
    $(".json_handler_gateway_map_array").on("click", ".confirm-gateway .reject", selectedGatewayReject);
    $(".json_handler_gateway_map_array").on("click", ".dynamic-gateways-map-list .all_json_delete_gateway_btn", deleteGatewayBtn);
    $(".json_handler_gateway_map_array").on("click", ".json_gateway_map_submit_array", jsonGatewayMapArraySubmitBtn);
    

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

    //             addNewGatewayMapItem($(this));

    //         }
    //     })
    // });

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

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

                buildGatewayMapJsonAndSave();

            }
        })

    });


    $(".gateway-map-tab-container").on("click", ".tab-item", function () {
        const selectedTab = $(this).parent().find('.tab-item-selected');
        selectedTab.removeClass('tab-item-selected').addClass('tab-item');
        $(this).removeClass('tab-item').addClass('tab-item-selected');
        const targetMarket = $(this).data("value");

        HandleShowTheGatewaysMapByTargetMarket(targetMarket);

        //notyf.success("tabValue = " + tabValue);

        // let tabs = contentSection.find('.tab-body');

        // $.each(tabs, function (key, value) {
        //     if (value.classList.contains(tabValue)) {
        //         $(value).show();
        //     } else {
        //         $(value).hide();
        //     }
        // });

    });
    
}); //end of jqury doc ready
///////////////////////////////////////////////
