@include('amocrm2.connector_header')
<div class="content db_settings">
    <div class="db_settings-header">
        <h1 class="db_settings-title">Настройка подключения к базе данных</h1>
        <div class="db_settings-status" id="db_settings-status">
            <p></p>
        </div>
    </div>

    <div class="db_settings-warning">
        <div class="db_settings-warning_box">
            <img width="32" height="32" class="db_settings-warning_icon" src="{{ asset('storage/connector_amo/images/database_settings/info.svg') }}" alt="warning">
            <p class="db_settings-warning_text">В целях безопасности, рекомендуем ограничить подключение к БД со всех IP-адресов, кроме <span>91.200.84.244</span></p>
        </div>
    </div>

    <form id="DBconnection_form">
        <div class="db_setting">
            <div class="db_settings-column">
                <div class="db_settings-input">
                    <label for="db_type">Тип ДБ</label>
                    <select name="db_type" required>
                        <option value="">--Выберите тип БД--</option>
                        <option value="MySQL">MySQL</option>
                        <option value="PostgreSQL">PostgreSQL</option>
                    </select>
                </div>

                <div class="db_settings-input">
                    <label for="db_host">Хост</label>
                    <input class="db_settings-input_host" name="db_host" type="text" placeholder="Введите хост базы данных" required>
                </div>

                <div class="db_settings-input">
                    <label for="db_port">Порт</label>
                    <input class="db_settings-input_port" name="db_port" type="text" placeholder="Введите порт базы данных" required>
                </div>
            </div>

            <div class="db_settings-column">
                <div class="db_settings-input">
                    <label for="db_name">База</label>
                    <input class="db_settings-input_name" name="db_name" type="text" placeholder="Введите базу" required>
                </div>

                <div class="db_settings-input">
                    <label for="db_login">Логин</label>
                    <input class="db_settings-input_login" name="db_login" type="text" placeholder="Введите логин" required>
                </div>

                <div class="db_settings-input">
                    <label for="db_password">Пароль</label>
                    <div>
                        <input id="input_password" class="db_settings-input_password" name="db_password" type="password" placeholder="Введите пароль базы данных" required>
                        <img width="20" id="togglePassword" class="db_settings-input_password_img" src="{{ asset('storage/connector_amo/images/database_settings/hide.svg') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </form>

    <img src="" alt="">
    <div class="db_settings-buttons">
        <button class="db_settings-button button_danger button_disconnect" type="button" id="btn_disconnect">Разорвать подключение с БД</button>

        <div class="button_settings-container">

            <button class="db_settings-button button_secondary button_check" id="btn_check">Проверить подключение</button>

            <button class="db_settings-button button-primary button_save" id="btn_save"><div id="alert"></div>Сохранить</button>
        </div>
    </div>

</div>



<script>
    $(document).ready(function() {
        // Устанавливаем задержку в 1 секунду перед выполнением следующего кода
        setTimeout(function() {
            var token = $('#domain_token').val()
            $.ajax({
                type: 'GET', // указываем метод запроса
                url: '/api/v1/connector/amocrm/database/connection/' + token, // указываем URL-адрес, к которому делаем запрос
                success: function(response) {
                    // обработка успешного ответа от сервера
                    console.log('connection: ');
                    console.log(response);
                    if (response.message === 0) {
                        $("#db_settings-status p").html('Не подключено <img src="https://toolpack.masnaget.digital/storage/connector/images/db_dis.svg" alt="">').css('color', '#C6C5C5')
                        $("#db_settings-status").css({
                            'display': 'block',
                            'background': '#F6F6F6'
                        });
                    } else {
                        $("#db_settings-status p").html(response.message + '<img src="https://toolpack.masnaget.digital/storage/connector/images/check.svg" alt="">').css('color', '#fff')
                        $("#db_settings-status").css({
                            'display': 'block',
                            'background': '#11B50D'
                        });

                        if (response.result) {
                            // Получаем данные из ответа
                            var dbType = response.result.db_type;
                            var dbHost = response.result.db_host;
                            var dbPort = response.result.db_port;
                            var dbName = response.result.db_name;
                            var dbLogin = response.result.db_login;
                            var dbPassword = response.result.db_password;

                            // Устанавливаем значения полей формы
                            $('#DBconnection_form select[name="db_type"]').val(dbType);
                            $('#DBconnection_form input[name="db_host"]').val(dbHost);
                            $('#DBconnection_form input[name="db_port"]').val(dbPort);
                            $('#DBconnection_form input[name="db_name"]').val(dbName);
                            $('#DBconnection_form input[name="db_login"]').val(dbLogin);
                            $('#DBconnection_form input[name="db_password"]').val(dbPassword);
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.log('error connection: ');
                    // обработка ошибки
                    //console.clear()
                    $("#db_settings-status p").html('Ошибка подключения <img src="https://toolpack.masnaget.digital/storage/connector/images/warning_t.svg" alt="">').css('color', '#D20000')
                    $("#db_settings-status").css({
                        'display': 'block',
                        'background': '#FBE6E6'
                    });
                }
            });

        }, 1000);

        $('#btn_check').click(function() {
            if ($('#DBconnection_form')[0].checkValidity()) {
                var formDataArray = $('#DBconnection_form').serializeArray(); // Получаем данные формы в виде массива объектов
                var formDataObject = {}; // Создаем пустой объект JSON

                // Проходим по всем элементам массива и добавляем их в объект JSON
                $.each(formDataArray, function() {
                    formDataObject[this.name] = this.value;
                });

                // Преобразуем объект JSON в строку JSON
                var jsonData = JSON.stringify(formDataObject);
                console.log(jsonData);

                // Отправляем данные на сервер в формате JSON
                $.ajax({
                    type: 'POST',
                    url: '/api/v1/connector/amocrm/database/check_connection',
                    data: jsonData,
                    contentType: 'application/json',
                    success: function(response) {
                        console.log(response.message);
                        $("#db_settings-status p").html(response.message + '<img src="https://toolpack.masnaget.digital/storage/connector/images/check.svg" alt="">').css('color', '#fff')
                        $("#db_settings-status").css({
                            'display': 'block',
                            'background': '#11B50D'
                        });

                        // Здесь вы можете выполнить дополнительные действия в зависимости от ответа сервера
                    },
                    error: function(xhr, status, error) {
                        console.log(error);
                        $("#db_settings-status p").html('Ошибка подключения <img src="https://toolpack.masnaget.digital/storage/connector/images/warning_t.svg" alt="">').css('color', '#D20000')
                        $("#db_settings-status").css({
                            'display': 'block',
                            'background': '#FBE6E6'
                        });
                    }
                });
            } else {
                // Если форма не заполнена, выполните необходимые действия, например, показ сообщения или выделение полей
                $('#alert').html('Пожалуйста, заполните все поля формы!').css({
                    'display': 'block',
                    'color': 'red'
                });
                setTimeout(function() {
                    $('#alert').hide();
                }, 3000);
            }
        });

        $('#btn_save').click(function() {
            if ($('#DBconnection_form')[0].checkValidity()) {
                var token = $('#domain_token').val()
                console.log(token);
                var formDataArray = $('#DBconnection_form').serializeArray(); // Получаем данные формы в виде массива объектов
                var formDataObject = {}; // Создаем пустой объект JSON

                // Проходим по всем элементам массива и добавляем их в объект JSON
                $.each(formDataArray, function() {
                    formDataObject[this.name] = this.value;
                });

                // Преобразуем объект JSON в строку JSON
                var jsonData = JSON.stringify(formDataObject);
                console.log(jsonData);

                $.ajax({
                    type: 'POST',
                    url: '/api/v1/connector/amocrm/database/check_connection',
                    data: jsonData,
                    contentType: 'application/json',
                    success: function(response) {
                        console.log(response.message);
                        $("#db_settings-status p").html(response.message + '<img src="https://toolpack.masnaget.digital/storage/connector/images/check.svg" alt="">').css('color', '#fff')
                        $("#db_settings-status").css({
                            'display': 'block',
                            'background': '#11B50D'
                        });
                        $.ajax({
                            type: 'POST',
                            url: '/api/v1/connector/amocrm/database/add_connection/' + token,
                            data: jsonData,
                            contentType: 'application/json',
                            success: function(response) {
                                $('#alert').html('Сохранено!').css({
                                    'display': 'block',
                                    'color': 'green'
                                });
                                setTimeout(function() {
                                    $('#alert').hide();
                                }, 3000);
                            },
                            error: function(xhr, status, error) {
                                console.error(error);
                            }
                        });
                    },
                    error: function(xhr, status, error) {
                        //console.clear()
                        $("#db_settings-status p").html('Ошибка подключения <img src="https://toolpack.masnaget.digital/storage/connector/images/warning_t.svg" alt="">').css('color', '#D20000')
                        $("#db_settings-status").css({
                            'display': 'block',
                            'background': '#FBE6E6'
                        });
                    }
                });
            } else {
                // Если форма не заполнена, выполните необходимые действия, например, показ сообщения или выделение полей
                $('#alert').html('Пожалуйста, заполните все поля формы!').css({
                    'display': 'block',
                    'color': 'red'
                });
                setTimeout(function() {
                    $('#alert').hide();
                }, 3000);
            }
        });

        $('#btn_disconnect').click(function() {
            var token = $('#domain_token').val()
            $.ajax({
                type: 'GET', // указываем метод запроса
                url: '/api/v1/connector/amocrm/database/disconnect/' + token, // указываем URL-адрес, к которому делаем запрос
                success: function(response) {
                    // обработка успешного ответа от сервера
                    console.log(response);
                    if (response.message === 0) {
                        $("#db_settings-status p").html('Не подключено <img src="https://toolpack.masnaget.digital/storage/connector/images/db_dis.svg" alt="">').css('color', '#C6C5C5')
                        $("#db_settings-status").css({
                            'display': 'block',
                            'background': '#F6F6F6'
                        });
                        $('#alert').html('Разрыв соединения невозможен, отсутсвует подключение!').css({
                            'display': 'block',
                            'color': 'red'
                        });
                        setTimeout(function() {
                            $('#alert').hide();
                        }, 3000);
                    } else {
                        $("#db_settings-status p").html('Не подключено <img src="https://toolpack.masnaget.digital/storage/connector/images/db_dis.svg" alt="">').css('color', '#C6C5C5')
                        $("#db_settings-status").css({
                            'display': 'block',
                            'background': '#F6F6F6'
                        });
                        $('#alert').html(response.message).css({
                            'display': 'block',
                            'color': 'green'
                        });
                        // Очищаем все текстовые поля
                        $('#DBconnection_form input[type="text"]').val('');

                        // Очищаем все поля ввода пароля
                        $('#DBconnection_form input[type="password"]').val('');

                        // Очищаем все выпадающие списки (select)
                        $('#DBconnection_form select').val('');

                        setTimeout(function() {
                            $('#alert').hide();
                        }, 3000);
                    }
                },
                error: function(xhr, status, error) {
                    // обработка ошибки
                    //console.clear()
                    $("#db_settings-status p").html('Ошибка подключения <img src="https://toolpack.masnaget.digital/storage/connector/images/warning_t.svg" alt="">').css('color', '#D20000')
                    $("#db_settings-status").css({
                        'display': 'block',
                        'background': '#FBE6E6'
                    });
                }
            });
        });
    });
</script>
<style>
    #db_settings-status {
        display: none;
        padding: 8px 20px;
        border-radius: 12px;
        height: fit-content;
    }

    #db_settings-status p {
        margin: 0;
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 16px;
    }

    #db_settings-status p img {
        margin-left: 5px;
        width: 20px;
    }

    .db_setting {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 30px;
    }

    #alert {

        position: absolute;
        transform: translate(0px,-40px);
        font-weight: 400;

    }
</style>
@include('amocrm2.connector_footer')