{% extends "admin/base_site.html" %}

{% block content %}

<style>
    #table-data-preview {
        max-height: 300px; /* Ограничиваем высоту предпросмотра */
        overflow-y: auto; /* Прокрутка по вертикали */
        overflow-x: auto; /* Прокрутка по горизонтали */
    }

    #table-data-preview table {
        width: auto; /* Автоматическая ширина таблицы */
        table-layout: auto; /* Автоматическая ширина колонок */
    }

    #table-data-preview th,
    #table-data-preview td {
        white-space: nowrap; /* Предотвращаем перенос текста */
        overflow: hidden; /* Скрываем текст, выходящий за границы ячейки */
        text-overflow: ellipsis; /* Добавляем многоточие для обрезанного текста */
        padding: 8px; /* Внутренний отступ */
        height: 40px; /* Фиксированная высота строк */
    }

    #table-data-preview th {
        position: sticky; /* Фиксируем заголовки при прокрутке */
        top: 0; /* Располагаем заголовки вверху таблицы */
        background-color: #f8f9fa; /* Цвет фона заголовков */
        z-index: 1; /* Заголовки перекрывают содержимое */
    }
</style>

<div class="container mt-4">
    <h2 class="text-center">Настройки подключения к БД</h2>
    <form id="connection-form" method="post">
        {% csrf_token %}
        <div class="form-group mb-3">
            <label for="db-name">Name</label>
            <input id="db-name" class="form-control" type="text" name="name" value="{{ original.name }}" required />
        </div>
        <div class="form-group mb-3">
            <label for="db-host">DB Host</label>
            <input id="db-host" class="form-control" type="text" name="host" value="{{ original.host }}" required />
        </div>
        <div class="form-group mb-3">
            <label for="db-port">DB Port</label>
            <input id="db-port" class="form-control" type="number" name="port" value="{{ original.port }}" required />
        </div>
        <div class="form-group mb-3">
            <label for="db-user">User</label>
            <input id="db-user" class="form-control" type="text" name="user" value="{{ original.user }}" required />
        </div>
        <div class="form-group mb-3">
            <label for="db-password">Password</label>
            <input id="db-password" class="form-control" type="password" name="password" value="{{ original.password }}" />
        </div>
        <div class="form-group mb-3">
            <label for="db-database">Database</label>
            <input id="db-database" class="form-control" type="text" name="database" value="{{ original.database }}" required />
        </div>
        <div class="form-group mb-3">
            <label for="table-selector">Таблицы</label>
            <select id="table-selector" class="form-select" name="table_name">
                {% if original.table_name %}
                    <option value="{{ original.table_name }}" selected>{{ original.table_name }}</option>
                {% else %}
                    <option value="">-- Выберите таблицу --</option>
                {% endif %}
            </select>
        </div>
        <div class="form-group mb-3">
            <label for="table-data-preview">Столбцы и данные</label>
            <div id="table-data-preview" class="table-responsive">
                <table class="table table-bordered">
                    <thead id="table-header"></thead>
                    <tbody id="table-body"></tbody>
                </table>
            </div>
        </div>
        <div class="form-group mb-3">
            <label for="is-active">Активное подключение</label>
            <input id="is-active" class="form-check-input" type="checkbox" name="is_active" {% if original.is_active %}checked{% endif %} />
        </div>
        <div class="form-group text-center">
            <button class="btn btn-success" type="submit">Сохранить</button>
            <button class="btn btn-secondary" type="button" id="close-button">Закрыть</button>
        </div>
    </form>
    <hr>
    <div id="connection-status" class="mt-4"></div>
    <div class="text-center mt-3">
        <button id="test-connection" class="btn btn-primary" type="button">Проверить подключение</button>
    </div>
</div>

{% if original.id %}
<script>
    const dbId = "{{ original.id }}";
</script>
{% else %}
<script>
    const dbId = null;
    document.getElementById("test-connection").style.display = "none";
    alert("Сохраните запись перед выполнением проверки подключения.");
</script>
{% endif %}

<script>
    // Закрыть окно
    document.getElementById("close-button").addEventListener("click", function() {
        window.history.back(); // Вернуться назад
    });

    // Проверить подключение и загрузить таблицы
    document.getElementById("test-connection").addEventListener("click", function() {
        if (!dbId) {
            alert("ID подключения отсутствует.");
            return;
        }
        fetch(`/admin/antifroud/externaldbsettings/test-connection/?db_id=${dbId}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === "success") {
                    document.getElementById("connection-status").innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                    fetch(`/admin/antifroud/externaldbsettings/fetch-tables/?db_id=${dbId}`)
                        .then(response => response.json())
                        .then(tableData => {
                            if (tableData.status === "success") {
                                const selector = document.getElementById("table-selector");
                                selector.innerHTML = tableData.tables.map(table => `<option value="${table}">${table}</option>`).join("");
                            } else {
                                alert("Ошибка при загрузке таблиц: " + tableData.message);
                            }
                        });
                } else {
                    document.getElementById("connection-status").innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                }
            })
            .catch(error => {
                alert("Ошибка при проверке подключения.");
                console.error(error);
            });
    });

    // При выборе таблицы загрузить столбцы и строки данных
    document.getElementById("table-selector").addEventListener("change", function () {
        const tableName = this.value;
        if (!tableName) {
            document.getElementById("table-header").innerHTML = "";
            document.getElementById("table-body").innerHTML = "";
            return;
        }

        fetch(`/admin/antifroud/externaldbsettings/fetch-table-data/?db_id=${dbId}&table_name=${tableName}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === "success") {
                    const headerRow = data.columns.map(col => `<th>${col}</th>`).join("");
                    document.getElementById("table-header").innerHTML = `<tr>${headerRow}</tr>`;

                    const rows = data.rows.map(row => {
                        const cells = row.map(cell => `<td>${cell}</td>`).join("");
                        return `<tr>${cells}</tr>`;
                    }).join("");
                    document.getElementById("table-body").innerHTML = rows;
                } else {
                    alert("Ошибка при загрузке данных таблицы: " + data.message);
                }
            })
            .catch(error => {
                alert("Ошибка при загрузке данных таблицы.");
                console.error(error);
            });
    });
</script>
{% endblock %}
