function initializePaymentTypes() {
    $dataTable = $('#mainGrid');
    $dataTable.DataTable({
        ajax: {
            url: $dataTable.attr('data-url'),
            data: function (d) {
                d.Keywords = $("#Keywords").val();
            }
        },
        columns: [
            { data: "Active", name: "AcActive", render: $.fn.dataTable.render.toggle(true, true), className: 'dt-body-center dt-head-center' },
            { data: "PaymentMethod", name: "AcPayMethod", filtertype: "text", render: $.fn.dataTable.render.link("PaymentMethod") },
            { data: "Name", name: "AcName", filtertype: "text", render: $.fn.dataTable.render.link("PaymentMethod") },
            { data: "SetOf", name: "AcSetOf", filtertype: "text" },
            { data: "PaymentType", name: "AcPaymentType", filtertype: "text", visible: isLocale(siteLocale.SI) || isLocale(siteLocale.HR) },
            {
                data: "FiscalGroup",
                name: "AcFiscalGroup",
                filtertype: "text",
                className: "table-input-cell transparent-bg",
                visible: isLocale(siteLocale.SI) || isLocale(siteLocale.HR),
                render: function (data, type, row) {
                    if (type === 'display') {
                        if ($("#countryLocale").val() === "HR") {
                            switch (data) {
                                case "G": return data + " - " + $("#PaymentCashHrLoc").val();
                                case "K": return data + " - " + $("#PaymentCerditCardLoc").val();
                                case "C": return data + " - " + $("#PaymentCheckLoc").val();
                                case "T": return data + " - " + $("#PaymentTransactionLoc").val();
                                case "O": return data + " - " + $("#PaymentOtherLoc").val();
                                default: return "";
                            }
                        }
                        else {
                            switch (data) {
                                case "G": return data + " - " + $("#PaymentCashLoc").val();
                                case "O": return data + " - " + $("#PaymentOtherLoc").val();
                                default: return "";
                            }
                        }
                    }

                    return data;
                }
            }
        ]
    });

    $("select").off("change.tableReload");
    $("select").on("change.tableReload", function () {
        $.fn.dataTable.reload($dataTable);
    });

    var typingTimer;
    var doneTypingInterval = 600;
    $('#Keywords').off('keyup');
    $('#Keywords').on('keyup', function () {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(function () { $.fn.dataTable.reload($dataTable); }, doneTypingInterval);
    });
}

function fiscalGroupChange(code, originalGroup, element) {
    if ($(element).val()) {
        $(element).prop("disabled", true);
        $(element).closest("div").find(".fa-spin").removeClass("hidden");

        $.ajax({
            method: "POST",
            url: $("#ChangeFiscalGroupUrl").val(),
            data: { Code: code, FiscalGroup: $(element).val() },
            success: function (data) {
                if (data) {
                    $(element).prop("disabled", false);
                    $(element).closest("div").find(".fa-spin").addClass("hidden");
                }
                else {
                    $(element).val(originalGroup);
                    $(element).prop("disabled", false);
                    $(element).closest("div").find(".fa-spin").addClass("hidden");
                }
            },
            error: function () {
                $(element).val(originalGroup);
                $(element).prop("disabled", false);
                $(element).closest("div").find(".fa-spin").addClass("hidden");
            }
        });
    }
    else {
        $(element).val(originalGroup);
    }
}

function initializePaymentTypesEdit() {
    $('#Id').focus();

    $('.input-validation-error').parents('.form-group').addClass('has-error');
    $('.field-validation-error').addClass('text-danger');

    var elems = Array.prototype.slice.call(document.querySelectorAll('#paymentTypeForm .js-switch'));
    elems.forEach(function (html) {
        var switchery = new Switchery(html, { size: 'small' });
    });

    $('.dropify').dropify({
        messages: {
            'default': $("#DragAndDropOrClick").val(),
            'replace': $("#DragAndDropOrClick").val(),
            'remove': $("#Remove").val(),
            'error': $("#GeneralErrorMessage").val()
        },
        error: {
            'imageFormat': $("#WrongImageFormat").val()
        }
    });
}

function removePaymentType() {
    $().customModal({
        destroyOnClose: true,
        showCloseButton: true,
        type: "question",
        text: $("#ConfirmDeleteLoc").val(),
        buttons: [
            {
                icon: 'fa fa-times',
                text: $("#NoLoc").val(),
                closeOnAction: true,
                type: 'ghost'
            },
            {
                icon: 'fa fa-check',
                text: $("#YesLoc").val(),
                action: async function () {
                    var elementId = $("#Id").val();
                    const config = {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ id: elementId })
                    };

                    const response = await fetch($("#RemovePaymentTypesUrl").val(), config);
                    if (response.ok) {
                        const json = await response.json();
                        if (json.IsDeleted === true)
                            window.location = $("#PaymentTypesIndexUrl").val();
                        else {
                            $().customModal({
                                destroyOnClose: true,
                                showCloseButton: true,
                                type: "alert",
                                text: $("#DeleteWasNotSuccessfulLoc").val(),
                                buttons: [
                                    {
                                        icon: 'fa fa-check',
                                        text: $("#ConfirmLoc").val(),
                                        closeOnAction: true,
                                        type: 'primary'
                                    }
                                ]
                            });
                        }
                    }
                },
                closeOnAction: true,
                type: 'primary'
            }
        ]
    });
}