{% extends "common.html" %}
{% block title %}{{title}}{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}

{% block page %}{{title}}{% endblock %}
{% block content %}
<script>
    $(function() {
        $('.form-horizontal').submit(function () {
            var formFields = $(this).serializeArray();
            var loader_alert = $('#statusAlert');
            var findkey_response = $('#findkeyResponse');

            $('.loader').show();
            loader_alert.html('Ваш запрос обрабатывается');

            $.ajax({
                url: '/findkey',
                data: $(this).serialize(),
                type: 'POST',
                timeout: 6000000,
                beforeSend: function () {
                    $('#statusAlert').removeClass('alert-danger').removeClass('alert-success').addClass('alert-info');
                    $('#statusAlert').show();
                    $.each(formFields, function (index, value) {
                        if (value.name != csrf_token) {
                            $('.findkey-form .' + value.name).removeClass('has-danger');
                            $('.findkey-form .' + value.name + ' .textError').empty();
                        }
                    });
                },
                success: function (response) {
                    var answer = JSON.parse(response);
                    if (!jQuery.isEmptyObject(answer.form_errors)) {
                        console.log(answer.form_errors);
                        loader_alert.addClass('alert-danger').removeClass('alert-info');
                        loader_alert.html("Во время проверки формы произошли ошибки. Исправьте их и попробуйте снова");
                        $.each(answer.form_errors, function (class_id, text) {
                            $('.findkey-form').addClass('has-danger');
                            $('.findkey-form .' + class_id + ' .textError').html(
                                "<div class='col-form-label text-danger'>" + text + "</div>").show();
                        });
                    } else if (!jQuery.isEmptyObject(answer.error)) {
                        loader_alert.addClass('alert-danger').removeClass('alert-info');
                        loader_alert.html("<strong>" + "При обработке запроса произошла ошибка, полный ее текст можно посмотреть в отладочной консоли" + "</strong>");
                        console.log(answer.error)
                    } else {
                        $('#statusAlert').hide();
                        findkey_response.html(answer.findkey_data);
                        $('body,html').animate({scrollTop: 1500}, 400);
                    }
                },
                error: function (error) {
                    loader_alert.addClass('alert-danger').removeClass('alert-info');
                    loader_alert.html('При обработке запроса произошла ошибка, обратитесь в @saas_support')
                    console.log('error!');
                    console.log(error.responseText);
                }
            });
            return false
        });
    });
</script>
<div class="loader alert alert-info" style="display: none" id="statusAlert">
    <p>Заявка обрабатывается, ожидайте. Если сообщение висит слишком долго, значит что-то пошло не так.</p>
</div>
    {% import "findkey_templates.html" as findkey_templates %}
    {{ macro.findkey_form(findkey_form, admin_mode) }}
<div id="findkeyResponse"></div>
{% endblock %}
