<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="/adg/style/js/ajax.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style>
    .search_form {
        padding: 0 5px;
    }

    .search_form, .search_form .input-group {
        width: 100%;
    }

    .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }

    .work_area label, .work_area input[type=submit] {
        margin-top: 10px;
    }

    .main {
        padding-top: 51px;
    }
</style>

<?php require_once (ROOT . '/adg/blocks_admin/translate_menu.php'); ?>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 sidebar">
            <div class="work_area">
                <form class="" name="set_form" id="set_form" method="post">
                    <fieldset>
                        <div class="alert alert-success" role="alert" id="alert_success" style="display: none;"></div>
                        <div class="alert alert-danger" role="alert" id="alert_danger" style="display: none;"></div>
                        <?php echo flash_show('translator'); ?>
                        <?php echo form_init(); ?>
                        <input id="last" type="hidden" name="from" value="/translate/set.php">
                        <label for="lang" style="margin-top: 0;">
                            <?php echo T('Язык:'); ?>
                        </label>
                        <select class="form-control" name="lang" id="lang">
                            <?php foreach ($list_languages as $key => $value) {
                                if ($key != 'ru') { ?>
                                    <option value="<?php echo escape($key); ?>" <?php if (session('tr_lang') == $key) { echo 'selected'; } ?>>
                                        <?php echo strtoupper($key); ?>
                                    </option>
                                    <?php if (is_null(session('tr_lang'))) {
                                        session('tr_lang', $key);
                                    } ?>
                                <?php } ?>
                            <?php } ?>
                        </select>

                        <label for="origin">
                            <?php echo T('Оригинал:'); ?>
                        </label>
                        <textarea
                            required readonly
                            class="form-control"
                            name="origin"
                            id="origin"
                            placeholder="Введите текст ..."
                            cols="30" rows="10"><?php echo escape(post('origin')); ?></textarea>

                        <label for="translation">
                            <?php echo T('Перевод:'); ?>
                        </label>
                        <textarea
                            required
                            class="form-control"
                            name="translation"
                            id="translation"
                            placeholder="Введите новый вариант перевода ..."
                            cols="30" rows="10"><?php echo escape(post('translation')); ?></textarea>

                        <input class="btn btn-default pull-right" type="submit" value="<?php echo T('Добавить запись'); ?>" id="translate_button">
                    </fieldset>
                </form>

                <label for="current">
                    <?php echo T('Текущий вариант перевода:'); ?>
                </label>
                <textarea
                    readonly
                    class="form-control"
                    name="current"
                    id="current"
                    cols="30" rows="10"></textarea>

            </div>
        </div>
    </div>
</div>

<script>
    /* при клике на textarea выделяется весь текст */
    $("textarea").focus(function() {
        $(this).select();
    });

    var current_span_html,
        awesome_span_array = [];

    $(document).ready(function() {
        /* Смещаем body влево, чтобы оосвободить место для блока переводчика*/
        $('body').addClass('col-lg-9 col-md-9 col-sm-9 col-xs-9 col-xs-offset-3 col-xs-offset-3 col-xs-offset-3 col-xs-offset-3 main');

        /* Определяем текущий язык страницы */
        var current_language = '<?php echo session('lng'); ?>';
        if (current_language != 'ru') {
            $('#lang').val(current_language);
        }

        /* По клику определяем язык текста и отправляем данные Ajax */
        $('.awesome_span').on('click', function() {

            /* Создаём массив всех элементов с таким содержимым */
            awesome_span_array = [];
            current_span_html = $(this).html();
            $('.awesome_span').each(function() {
                if ($(this).html() === current_span_html) {
                    awesome_span_array.push($(this));
                }
            });

            /* Для каждого элемента массива создаём дефолтное значение */
            $.each(awesome_span_array, function(index, value) {
                if (value.data('default') == null) {
                    value.data('default', value.html());
                    value.data('changed', false);
                }
            });

            /* Заполняем форму */
            if (current_language === 'ru') {
                if ($(this).data('default') != null) {
                    $('#origin').html($(this).data('default'))
                } else {
                    $('#origin').html($(this).html());
                }
                $('#translation').html('');
                $('#translation').val('');
                $('#current').html('');
            } else {
                $('#origin').html('');
                if (!$(this).data('changed')) {
                    $('#translation').html($(this).data('default'));
                    $('#translation').val($(this).data('default'));
                    $('#current').html($(this).data('default'));
                } else {
                    $('#translation').html($(this).html());
                    $('#translation').val($(this).html());
                    $('#current').html($(this).html());
                }
            }
            var data = {
                'current_language' : current_language,
                'lang' : $('#lang').val(),
                'origin' : $('#origin').html(),
                'translation' : $('#translation').html()
            };
            q_makeAjaxRequest(
                '/ajax/adg/translator_textarea_update.php',
                'post',
                data
                //q_callback(),
            );
            return false;
        });

        /* Добавление перевода в массив */
        $('#translate_button').on('click', function(event) {
            $.each(awesome_span_array, function (index, value) {
                value.data('changed', true);
            });
            var $form = $("#set_form").closest('form');
            q_makeAjaxRequest(
                '/ajax/adg/translator.php',
                'post',
                $form.serialize()
                //q_callback(),
            );
            return false;
        });

        /* Меняем перевод на странице параллельно с textarea */
        $('#translation').on('change keyup', function () {
            if ($('#translation').val() != '') {
                $.each(awesome_span_array, function(index, value) {
                    value.html($('#translation').val());
                });
            } else {
                $.each(awesome_span_array, function(index, value) {
                    value.html(value.data('default'));
                });
            }
        });
    });

    /* Предотвращаем переходы по ссылкам на странице, кроме меню навигации */
    $('a').on('click', function(event) {
        if (!$(this).parents('#navigation').length) {
            event.preventDefault();
            alert('<?php echo T('Переходы по ссылкам отключены! Воспользуйтесь меню навигации.'); ?>');
        }
    });
</script>