@include('amocrm.connector_header')
<div class="content db_settings">
    <div class="db_settings-header">
        <h1 class="db_settings-title">Настройка подключения к базе данных</h1>
        <div class="db_settings-status"><img src="{{ asset('storage/connector_amo/images/database_settings/db_success.svg') }}" alt=""></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 action="#" method="POST">
    <div class="db_settings-inputs">

            <div class="db_settings-input">
                <label for="db_type">Тип ДБ</label>
                <select name="db_type">
                    <option value="mysql">MySQL</option>
                    <option value="postgresql">PostgreSQL</option>
                </select>
            </div>

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

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

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

            <div class="db_settings-input">
                <label for="db_port">Порт</label>
                <input class="db_settings-input_port" name="db_port" type="text" placeholder="Введите порт базы данных">
            </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="Введите пароль базы данных">
                    <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 class="db_settings-buttons">
            <button class="db_settings-button button_danger button_disconnect" type="button">Разорвать подключение с БД</button>
            <div class="button_settings-container">
                <button class="db_settings-button button_secondary button_check" type="submit">Проверить подключение</button>
                <button class="db_settings-button button-primary button_save" type="submit">Сохранить</button>
            </div>
        </div>

        <div id="db_settings-popup-overlay" class="db_settings-popup-overlay">
            <div id="db_settings-popup" class="db_settings-popup">

                <div class="db_settings-popup-box">
                    <img class="db_settings-popup-img" src="{{ asset('storage/connector_amo/images/database_settings/warning.svg') }}" width="120" alt="">
                    <h3>Вы уверены?</h3>
                    <p>Если отключить связь с базой данных, то синхронизация остановится до восстановления подключения. Данные в базе данных останутся.</p>

                    <div class="db_settings-popup-buttons">
                        <button class="db_settings-button button_danger db_settings-popup-disconnect" type="submit">Разорвать</button>
                        <button class="db_settings-button button-primary db_settings-popup-cancel" type="button">Отменить</button>
                    </div>

                </div>

            </div>
        </div>



    </form>



    <script>
        document.getElementById('togglePassword').addEventListener('click', function() {
            var passwordInput = document.getElementById('input_password');
            var type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            // Получаем ссылку на изображение
            var img = document.getElementById('togglePassword');
            var imgSrc = img.getAttribute('src');

            // Заменяем путь к изображению в зависимости от типа пароля
            if (type === 'password') {
                imgSrc = imgSrc.replace('show.svg', 'hide.svg');
            } else {
                imgSrc = imgSrc.replace('hide.svg', 'show.svg');
            }

            // Устанавливаем новый путь к изображению
            img.setAttribute('src', imgSrc);
        });

        document.addEventListener("DOMContentLoaded", function() {
            var disconnectButton = document.querySelector('.button_disconnect');
            var popup = document.getElementById('db_settings-popup');
            var popup_overlay = document.getElementById('db_settings-popup-overlay');

            disconnectButton.addEventListener('click', function() {
                // Показываем попап
                popup.style.display = 'block';
                popup_overlay.style.display = 'block';

            });
        });

        document.addEventListener("DOMContentLoaded", function() {
            var disconnectButton = document.querySelector('.db_settings-popup-disconnect');
            var cancelButton = document.querySelector('.db_settings-popup-cancel');
            var popup = document.getElementById('db_settings-popup');
            var popup_overlay = document.getElementById('db_settings-popup-overlay');


            disconnectButton.addEventListener('click', function() {
                // Отправляем форму после подтверждения
                // Здесь можно добавить код для отправки формы или любых других действий
                console.log("Форма отправлена"); // Пример действия

                popup.style.animation = 'fadeOut 0.3s ease forwards';
                popup_overlay.style.animation = 'fadeOutOpacity 0.3s ease forwards';
                setTimeout(function() {
                    popup_overlay.style.display = 'none';
                    popup_overlay.style.animation = ''; // Очищаем анимацию, чтобы она снова могла быть использована при открытии попапа
                    popup.style.display = 'none';
                    popup.style.animation = ''; // Очищаем анимацию, чтобы она снова могла быть использована при открытии попапа
                }, 300); // Время анимации в миллисекундах




            });

            cancelButton.addEventListener('click', function() {

                popup.style.animation = 'fadeOut 0.3s ease forwards';
                popup_overlay.style.animation = 'fadeOutOpacity 0.3s ease forwards';
                setTimeout(function() {
                    popup_overlay.style.display = 'none';
                    popup_overlay.style.animation = ''; // Очищаем анимацию, чтобы она снова могла быть использована при открытии попапа
                    popup.style.display = 'none';
                    popup.style.animation = ''; // Очищаем анимацию, чтобы она снова могла быть использована при открытии попапа
                }, 300); // Время анимации в миллисекундах


            });
        });
    </script>
</div>

@include('amocrm.connector_footer')