{{ Get_title({
    'index.php?r=adm/lang/show' : Lang_translate('_LANGUAGE', 'admin_lang'),
    '':Lang_translate('_TRANSLATELANG', 'admin_lang')
},false) }}

<div class="std_blockx">
    <div class="container-back">
        <a href="index.php?r=adm/lang/show"><span>{{ Lang_translate('_BACK', 'standard')|raw }}</span></a>
    </div>

    <a id="addlang_top" href="#" class="ico-wt-sprite subs_add" title="{{ Lang_translate('_ADD', 'standard') }}"><span>{{ Lang_translate('_ADD', 'standard') }}</span></a>
    <br><br>
    <div class="search_form">
        {{ Form_openForm('lang_filters', 'index.php?r=adm/lang/list', false, false, '','','row') }}
        <div class="lang-filter col-xs-12 col-sm-4">
            <label for="lang_code">{{ Lang_translate('_LANGUAGE', 'admin_lang') }}</label>:
            {{ Form_getInputDropdown("search_d", "lang_code", "lang_code", language_list, selected_language, ' onchange="DataTable_lang_table.reload();"') }}
        </div>
        <div class="lang-confr-filter  col-xs-12 col-sm-4">
            <label for="lang_code_diff">{{ Lang_translate('_LANG_COMPARE', 'admin_lang') }}</label>:
            {{ Form_getInputDropdown("search_d", "lang_code_diff", "lang_code_diff", language_list, selected_language_diff, ' onchange="DataTable_lang_table.reload();"') }}
        </div>
        <div class="lang-confr-filter  col-xs-12 col-sm-4">
            <label for="only_empty">{{ Lang_translate('_ONLY_EMPTY', 'admin_lang') }}</label>:<br>
            {{ Form_getInputCheckbox("only_empty", "only_empty", "true", only_empty, ' onchange="DataTable_lang_table.reload();"') }}
        </div>
        {{ Form_closeForm() }}
    </div>
</div>

<form id="form_langs">
    <table class="table table-bordered display" style="width:100%" id="lang_table"></table>
    <button id="export-btn" class="button btn btn-primary dahsboard__button--save js-save-block" type="submit" disabled="disabled">
        <i class="fa fa-spinner fa-spin" style="display:none;"></i>
        {{ Lang_translate('_EXPORT_XML', 'admin_lang') }}
    </button>
</form>

<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 9999;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" data-val="body">
            </div>
            <div class="modal-footer">
                <button type="button" id="yes" class="btn btn-primary" data-val="yes">{{ Lang_translate('_YES', 'standard') }}</button>
                <button type="button" class="btn btn-default" data-val="no">{{ Lang_translate('_NO', 'standard') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Add -->
<div class="modal" id="addModal" style="display: none; z-index: 9999;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="translateKey()">{{ Lang_translate('_CONFIRM', 'standard') }}</button>
                <button type="button" class="btn btn-default" onclick="$('#addModal').modal('hide');">{{ Lang_translate('_CANCEL', 'standard') }}</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var confirmDialog = function (modalSelector, message, onConfirm) {
        var fClose = function() {
            modal.modal("hide");
        };
        var modal = $(modalSelector);
        modal.modal("show");
        modal.find("*[data-val=body]").empty().append(message);
        modal.find("*[data-val=yes]").unbind().one('click', onConfirm).one('click', fClose);
        modal.find("*[data-val=no]").unbind().one("click", fClose);
    }

    var delFunc = function(id) {
        confirmDialog("#confirmModal", "{{ Lang_translate('_AREYOUSURE', 'standard') }}", function() {
            $.ajax({
                type: 'POST',
                url: 'ajax.adm_server.php?r=adm/lang/deleteKey',
                data: { id_text: id },
                success: function(data) {
                    DataTable_lang_table.reload();
                }
            });
        });
    };

    var translateKey = function() {
        $.ajax({
            type: 'POST',
            url: 'ajax.adm_server.php?r=adm/lang/insertkey',
            data: $("#addModal form").serialize(),
            dataType: "json",
            success: function(data) {
                if (data.success) {
                    DataTable_lang_table.reload();
                    $("#addModal").modal('hide');
                }
            }
        });
    };
    
    var requestBuilder = function (oState, oSelf) {
        var sort, dir, startIndex, results;
        oState = oState || {
            pagination: null,
            sortedBy: null
        };

        startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0;
        results = (oState.pagination) ? oState.pagination.rowsPerPage : null;
        sort = (oState.sortedBy) ? oState.sortedBy.key : oSelf.getColumnSet().keys[0].getKey();
        dir = (oState.sortedBy && oState.sortedBy.dir === YAHOO.widget.DataTable.CLASS_DESC) ? "desc" : "asc";

        return "&results=" + results +
            "&startIndex=" + startIndex +
            "&sort=" + sort +
            "&dir=" + dir +
            "&la_module=" + YAHOO.util.Dom.get('la_module').value +
            "&la_text=" + YAHOO.util.Dom.get('la_text').value +
            "&lang_code=" + YAHOO.util.Dom.get('lang_code').value +
            "&lang_code_diff=" + YAHOO.util.Dom.get('lang_code_diff').value +
            "&only_empty=" + YAHOO.util.Dom.get('only_empty').checked +
            "&plugin_id=" + YAHOO.util.Dom.get('plugin_id').value;
    }

    var saveTranslation = function (callback, newData) {
        var new_value = newData;
        var old_value = this.value;
        var datatable = this.getDataTable();
        var id_text = this.getRecord().getData("id");
        var id_translation = this.getRecord().getData("id_translation");

        var myCallback = {
            success: function (o) {
                var r = YAHOO.lang.JSON.parse(o.responseText);
                if (r.success) {
                    callback(true, stripSlashes(r.new_value));
                } else {
                    callback(true, stripSlashes(r.old_value));
                }
            },
            failure: {}
        }

        var post = "id_text=" + encodeURIComponent(id_text) +
            "&lang_code=" + encodeURIComponent(YAHOO.util.Dom.get('lang_code').value) +
            "&new_value=" + encodeURIComponent(new_value) +
            "&old_value=" + encodeURIComponent(old_value);

        var url = "ajax.adm_server.php?r=adm/lang/saveData&";

        YAHOO.util.Connect.asyncRequest("POST", url, myCallback, post);
    }
    var saveComparisonTranslation = function (callback, newData) {
        var new_value = newData;
        var old_value = this.value;
        var datatable = this.getDataTable();
        var id_text = this.getRecord().getData("id");
        var id_translation = this.getRecord().getData("id_translation");

        var myCallback = {
            success: function (o) {
                var r = YAHOO.lang.JSON.parse(o.responseText);
                if (r.success) {
                    callback(true, stripSlashes(r.new_value));
                } else {
                    callback(true, stripSlashes(r.old_value));
                }
            },
            failure: {}
        }

        var post = "id_text=" + encodeURIComponent(id_text) +
            "&lang_code=" + encodeURIComponent(YAHOO.util.Dom.get('lang_code_diff').value) +
            "&new_value=" + encodeURIComponent(new_value) +
            "&old_value=" + encodeURIComponent(old_value);

        var url = "ajax.adm_server.php?r=adm/lang/saveData&";

        YAHOO.util.Connect.asyncRequest("POST", url, myCallback, post);
    }
    var TranslationFormatter = function (elLiner, oRecord, oColumn, oData) {
        var searched = YAHOO.util.Dom.get('la_text').value;
        if (searched) {
            var regexp = new RegExp(searched, 'gi');
            var string_to_replace = regexp.exec(oData)
            elLiner.innerHTML = oData.replace(regexp, '<span class="highlight">' + string_to_replace + '</span>');

        } else elLiner.innerHTML = oData;
    }
    YAHOO.util.Event.addListener("lang_filters", "submit", function (e) {
        YAHOO.util.Event.preventDefault(e);
        DataTable_lang_table.reload();
    });
    YAHOO.util.Event.addListener("filter_reset", "click", function (e) {
        YAHOO.util.Event.preventDefault(e);
        YAHOO.util.Dom.get('la_module').value = '0';
        YAHOO.util.Dom.get('la_text').value = '';
        DataTable_lang_table.reload();
    });

    var body = {{ data | json_encode(constant('JSON_HEX_APOS')) | raw }};
    var rows = [];

    body.forEach(function (item, k) {
        link = '<a id="' + item.id + '" onclick="delFunc(' + item.id + ')" href="#" class="ico-sprite subs_del" title="{{ Lang_translate("_DEL", "admin_lang") }}"><span></span></a>'
        item.delete = link;
        rows.push(Object.assign({}, item));
    });

    var columns = [
        {
            data: 'text_module',
            title: "{{ Lang_translate('_LANG_MODULE', 'admin_lang') }}",
            sortable: true,
            searchable: true
        },
        {
            data: 'text_key',
            title: "{{ Lang_translate('_LANG_KEY', 'admin_lang') }}",
            sortable: true,
            searchable: false
        },
        {
            data: 'plugin_name',
            title: "{{ Lang_translate('_PLUGIN_NAME', 'admin_lang') }}",
            sortable: false,
            searchable: true
        },
        {
            data: 'translation_text',
            title: "{{ Lang_translate('_LANG_TRANSLATION', 'admin_lang') }}",
            sortable: true,
            searchable: false,
            edit: {
                type: 'textarea',
            },
        },
        {
            data: 'translation_text_diff',
            title: "{{ Lang_translate('_LANG_COMPARE', 'admin_lang') }}",
            sortable: true,
            searchable: false
        },
        {
            data: 'save_date',
            title: "{{ Lang_translate('_DATE', 'admin_lang') }}",
            sortable: true,
            searchable: false
        },
        {
            data: 'delete',
            title: "{{ Lang_translate('_DEL', 'standard') }}",
            sortable: false,
            searchable: false
        }
    ];

    $(function () {
        DataTable_lang_table = $('#lang_table').on('xhr.dt', function (e, settings, json, xhr) {
            if (json.data.length > 0) {
                json.data.forEach(function (item, index) {
                    link = '<a id="' + item.id + '" href="#" onclick="delFunc(' + item.id + ')" class="ico-sprite subs_del" title="{{ Lang_translate("_DEL", "admin_lang") }}"><span></span></a>'
                    item.delete = link;
                });
                $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
            }
            // Note no return - manipulate the data directly in the JSON object.
        }).FormaTable({
            rowId: "id",
            scrollX: true,
            processing: true,
            serverSide: true,
            'ajax': {
                type: 'GET',
                data: function (d) {
                    d.lang_code = $("#lang_code").val();
                    d.lang_code_diff = $("#lang_code_diff").val();
                    d.only_empty = $("#only_empty").is(":checked");
                },
                complete: function(json) {
                    $("#lang_table .select-checkbox, .buttons-select-all, .buttons-select-none").click(function(e) {
                        setTimeout(function() {
                            if ($("#lang_table tr.selected").length > 0) {
                                $("#export-btn").attr("disabled", false);
                            } else {
                                $("#export-btn").attr("disabled", true);
                            }
                        }, 100);
                    });
                    
                    return json;
                },
                url: 'ajax.adm_server.php?r=adm/lang/get',
            },
            paging: true,
            pageLength: 25,
            searching: true,
            columns,
            dom: 'Blfrtip',
            stateSave: true,
            deferRender: true,
            edit: {
                url: "ajax.adm_server.php?r=adm/lang/inline_edit",
                type: "POST",
                data: {
                    language: $("#lang_code").val(),
                },
                id: 'id_text'
            },
            'columnDefs': [
                {
                    'targets': 0,
                    'checkboxes': {
                    'selectRow': true
                    }
                }
            ],
            'select': {
                'all': true,
                'style': 'multi',
            },
            orderCellsTop: true,
            fixedHeader: true,
        });

        // Setup - add a text input to each header cell
        columns.forEach(function(item, i) {
            if (i > 0 && i < 6) {
                var title = item.data;
                var searchPlaceholder = "{{ Lang_translate('_SEARCH', 'standard') }}";
                var cell = $('.dataTables_scrollHeadInner .dataTable thead tr th:nth-child(' + (i + 1) +')')
                if (i == 3) {
                    var plugins = {{ plugins_ids|json_encode()|raw }};
                    var selectPlugins = '<select class="form-control input-sm">';

                    for (const [key, value] of Object.entries(plugins)) {
                        selectPlugins += '<option value="' + key + '">' + value + '</option>';
                    }
                    selectPlugins += '</select>';
                    cell.append('<br>' + selectPlugins);
                } else if (i == 1) {
                    var modules = {{ module_list|json_encode()|raw }};
                    var selectModules = '<select class="form-control input-sm">';

                    for (const [key, value] of Object.entries(modules)) {
                        selectModules += '<option value="' + key + '">' + value + '</option>';
                    }
                    selectModules += '</select>';
                    cell.append('<br>' + selectModules);
                } else {
                    cell.append('<br><input type="text" class="form-control input-sm" placeholder="' + searchPlaceholder + '" />');
                }
                var table = $($.fn.dataTable.tables(true)).DataTable();
                table.columns.adjust();
        
                cell.find('input').on('keyup', function () {
                    if (table.column(i).search() !== this.value ) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
                cell.find('select').on('change', function () {
                    if (table.column(i).search() !== this.value ) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
            }
        });
        // DataTable_lang_table.searchBar.init('#lang_table');
        // DataTable_lang_table.searchBar.redraw()
        // DataTable_lang_table.searchBar.show();
    });

    $('#form_langs').on('submit', function(e) {
        e.preventDefault();

        if (!$("#lang_table tr.selected").length) {
            return;
        }

        var selectedIds = DataTable_lang_table._selection.rows;

        params = {
            text_items: selectedIds, 
            lang_code: $("#lang_code").val()
        };


        $("#export-btn .fa-spin").show();
        $("#export-btn").attr("disabled", true);

        $.ajax({
            type: 'POST',
            url: 'ajax.adm_server.php?r=adm/lang/export',
            data: params,
            success: function(data) {
                $("#export-btn .fa-spin").hide();
                $("#export-btn").attr("disabled", false);

                downloadString(data, "application/xml", "lang[" + params.lang_code + "].xml");
            }
        });
    });

    $("#addlang_top").click(function(e) {
        $.ajax({
            type: 'POST',
            url: 'ajax.adm_server.php?r=adm/lang/translatemask',
            dataType: "json",
            success: function(data) {
                if (data.success) {
                    $("#addModal").find('.modal-body').html(data.body)
                    $("#addModal").modal('show');
                }
            }
        });
    });

    function downloadString(text, fileType, fileName) {
        var blob = new Blob([text], { type: fileType });

        var a = document.createElement('a');
        a.download = fileName;
        a.href = URL.createObjectURL(blob);
        a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
        a.style.display = "none";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500);
    }
</script>
</div>
