function saveGatewayChanges(obj) {

    let card = obj.closest('.global-json-handler-card');
    card.addClass("collapsed-card");
    card.find('.json_handler_box_opener_btn').show();

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

    let title = card_body.find('.js_title_txt').val();
    let desc = card_body.find('.js_desc_txt').val();
    let logo = card_body.find('.js_logo_txt').val();
    let icon = card_body.find('.js_icon_txt').val();
    let icon_color = card_body.find('.js_iconcolor_txt').val();

    let id = $(card.find('.json_gateway_id')).html();

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

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

    if (index >= 0) {

        mainJsonGatewayArrayObj[index]['title']      = title;
        mainJsonGatewayArrayObj[index]['desc']       = desc;
        mainJsonGatewayArrayObj[index]['logo']       = logo;
        mainJsonGatewayArrayObj[index]['icon']       = icon;
        mainJsonGatewayArrayObj[index]['icon_color'] = icon_color;

        $('#gateways').val(JSON.stringify(mainJsonGatewayArrayObj));
        
        let gateway_box = card.find('.json_gateway_box');
        gateway_box.find('.json_gateway_showtitle').html(title);
        gateway_box.find('.json_gateway_showdesc').html(desc);

        gateway_icon = gateway_box.find('.json_gateway_icon');
        $(gateway_icon).removeClass();
        $(gateway_icon).addClass('json_gateway_icon');
        $(gateway_icon).addClass(modifyIcon(icon));
        $(gateway_icon).attr('style', 'color:'+icon_color);
    }
}
function jsonGatewayArraySubmitBtn() {
    saveGatewayChanges($(this));
}


// let editJsonGatewayRowsBtn = function () {

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

// };

// const jsonGatewayCancelBtn = function () {

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

// };



function modifyIcon(string){
    if(string.startsWith("pho-")) {
        return "pho phosphor-icons ph-" + string.substring(4);
    } else if (string.startsWith("mdi-")) {
        return "mdi mdi-" + string.substring(4);
    } else {
        return "mdi mdi-" + string;
    }
}

function jsonGatewayRowHtmlMacker(json) { //dont use ids because ids cant be repeated in DOM
    let htmlRow = "";

    htmlRow += '<div class="json_gateway_card card card-outline card-json-item collapsed-card global-json-handler-card">';
    htmlRow += '<div class="card-header json_gateway_box">';

    htmlRow += '<div class="info-container">';
    htmlRow += '<div class="my-handle"><i class="ph ph-caret-up-down"></i></div>';
    htmlRow += '<span class="json_gateway_id" style="display:none">' + (json != null ? json['id'] : "-") + '</span>';
    htmlRow += '<i class="json_gateway_icon '+ (json != null ? modifyIcon(json['icon']) : "") +'" style="color:'+ (json != null ? json['icon_color'] : "#000") +'"></i>';
    htmlRow += '<div class="desc-container">';
    htmlRow += '<span class="json_gateway_showtitle" >' + (json != null ? json['title'] : "-") + '</span>';
    htmlRow += '<span class="json_gateway_showdesc" >' + (json != null ? json['desc'] : "-") + '</span>';
    htmlRow += '</div>';
    htmlRow += '<span class="json_gateway_showcode" >' + (json != null ? json['code'] : "-") + '</span>';
    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 += '<div style="display:none" class="static-gateway-params">';
    htmlRow += '<span>شناسه: '+(json != null ? json['id'] : "")+'</span>';
    htmlRow += '<span>کد درگاه: '+(json != null ? json['code'] : "")+'</span>';
    htmlRow += '</div>';

    htmlRow += '<div class="dynamic-gateway-params">';

    htmlRow += textInputHtmlGenerator((json != null ? json['title'] : "") , "js_title_txt", "عنوان درگاه");
    htmlRow += textInputHtmlGenerator((json != null ? json['desc'] : "") , "js_desc_txt", "توضیحات مختصر");

    let imgClass = 'js_logo_txt';
    let imgId = 'cat-image-' + json['id'];
    let imgUrl = (json != null ? json['logo'] : "");
    htmlRow += imageInputHtmlGenerator(imgUrl, imgClass, imgId, "تصویر لوگو (اختیاری)");


    //Icon input
    let iconClass = 'js_icon_txt';
    let iconId = 'cat-icon-' + json['id'];
    let iconCode = (json != null ? json['icon'] : "");
    htmlRow += iconInputHtmlGenerator(iconCode, iconClass, iconId);
    
    //Color Input
    htmlRow += colorInputHtmlGenerator((json != null ? json['icon_color'] : ""), "js_iconcolor_txt", "color_btn_"+json['id'] , "رنگ آیکون");

    htmlRow += '<div class="local_submit_parent">';
    htmlRow += '<span class="json_gateway_submit_array btn btn-primary btn-sm">ثبت تغییرات</span>';
    htmlRow += '<span class="json_gateway_cancel btn btn-gray btn-sm">انصراف</span>';
    htmlRow += '</div>';
    htmlRow += '</div>';
    htmlRow += '</div>';

    return htmlRow;

}

function gatewaysSortableChange(){

    let newJsonGateway = [];

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

    $("#gateways_sorable_list").children('div').each(function () {
        let id = $(this).find('.json_gateway_id').html();
        for (let i = 0; i < mainJsonGatewayArrayObj.length; i++) {
            if (mainJsonGatewayArrayObj[i]['id'] == id) {
                newJsonGateway.push(mainJsonGatewayArrayObj[i]);
                break;
            }
        }
    });

    let finalRes = JSON.stringify(newJsonGateway);
    $('#gateways').val(finalRes);

    notyf.open({
        type: 'info',
        message: 'چینش درگاه‌های پرداخت به روز شد. برای ذخیره در دیتابیس، از دکمه ذخیره استفاده کنید.'
    });
    
}


$(function () { // start of document ready:
    //json variables management ARRAY

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

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

        const jsonString = $.trim($('.json_handler_gateway_array > textarea').val());
        let jsonGatewayArrayObj;

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

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

        $('.json_handler_box_opener_btn').click(jsonHandlersBoxOpener);
        $('.json_gateway_submit_array').off("click");
        //https://stackoverflow.com/a/9467172/4565796
        $('.json_gateway_submit_array').click(jsonGatewayArraySubmitBtn);
        $('.json_gateway_cancel').click(jsonHandlersBoxCloser);
        $('.mppanel_image_url').on("input", changeImagePreview);
        newGenImageHandler();
    }

    $('.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_selector_box > .color_box').click(pickerFunction);
    $('.mppanel_color_forms').on("change keyup paste", colorChangeListener);
    
    $('#gateways_save').click(function () {

        let sendData = {
            gateways: $.trim($('#gateways').val())
        }

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

                let loadingOverlay = $(this).parent().parent().find('#over_loading');
                loadingOverlay.show();
        
                $.ajax({
        
                    type: "POST",
                    url: mpPanelBaseUrl + "/update-gateways",
                    data: sendData,
                    timeout: 25000,
                    cache: false,
                    success: function (data) {
        
                        loadingOverlay.hide();
        
                        if (data == "ok") {
                            notyf.success('درگاه‌های پرداخت به روز گردید.');
                        } else {
                            notyf.error('مشکلی در به روزرسانی درگاه‌های پرداخت رخ داده است. لظفا صفحه را مجدد رفرش نمایید.');
                        }
        
                    },
                    error: function (xhr, status, error) {
                        loadingOverlay.hide();
                        notyf.error('مشکلی در به روزرسانی درگاه‌های پرداخت رخ داده است. لظفا صفحه را مجدد رفرش نمایید.');
                        notyf.error('Error: ' + xhr.status + ' ' + xhr.statusText);
                    }
        
                });

            }
        })
    });

    $('#gateways_sorable_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: gatewaysSortableChange
    });
    
}); //end of jqury doc ready
///////////////////////////////////////////////
