<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Settings</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        h1 {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 0;
            border-bottom: 2px solid #388E3C;
            text-align: left;
        }
        form {
            padding: 20px;
        }
        label {
            display: block;
            margin-top: 10px;
            color: #4CAF50;
            text-align: left;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }
        button.save {
            background-color: #4CAF50;
            color: white;
        }
        button.refresh {
            background-color: #FFA500;
            color: white;
            margin-left: 10px;
        }
        button:hover {
            opacity: 0.8;
        }
        .orange-text {
        color: #FFA500;
        }
    </style>
</head>
<body>

    <form id="settingsForm">
        <label for="api_key_sys"><span class="orange-text">api_key_sys (Выдаётся администрацией сервиса):</span></label>
        <input type="text" id="api_key_sys" name="api_key_sys" onblur="saveApiKeySys()"><br><br>

        <label for="api_key_auth">api_key_auth (Ключ проверки подлинности запросов):</label>
        <input type="text" id="api_key_auth" name="api_key_auth"><br><br>

        <label for="api_key_apps_vk">apps_key (Объект, где ключ — это id приложения vk-mini-apps, а значение — защищённый ключ приложения vk-mini-apps.):</label>
        <input type="text" id="api_key_apps_vk" name="api_key_apps_vk"><br><br>

        <label for="vk_api_key">vk_api_key (Ключ ВК сообщества):</label>
        <input type="text" id="vk_api_key" name="vk_api_key"><br><br>

        <label for="vk_st_alone">vk_st_alone (Ключ ВК vk_st_alone):</label>
        <input type="text" id="vk_st_alone" name="vk_st_alone"><br><br>

        <label for="key_callback_vk">key_callback_vk (Ключ ВК key_callback_vk):</label>
        <input type="text" id="key_callback_vk" name="key_callback_vk"><br><br>      

        <label for="senler_token">senler_token (Ключ проверки подлинности запросов к API Сенлер):</label>
        <input type="text" id="senler_token" name="senler_token"><br><br>

        <label for="wa_ak">wa_ak (id инстанса WhatsApp):</label>
        <input type="text" id="wa_ak" name="wa_ak"><br><br>

        <label for="wa_api_key">wa_api_key (Ключ проверки подлинности запросов к API WhatsApp):</label>
        <input type="text" id="wa_api_key" name="wa_api_key"><br><br>

        <label for="curators">curators (Список email кураторов):</label>
        <input type="text" id="curators" name="curators"><br><br>

        <label for="call_api_key">call_api_key (Ключ проверки подлинности запросов к API Звонобот):</label>
        <input type="text" id="call_api_key" name="call_api_key"><br><br>

        <button type="button" class="save" onclick="saveSettings()">Сохранить данные</button>
        <button type="button" class="refresh" onclick="refreshSettings()">Обновить данные</button>
    </form>

    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script>
        function loadSettings() {
            // Загружаем ключ из локального хранилища
            const apiKeySys = localStorage.getItem('api_key_sys');
            if (apiKeySys) {
                document.getElementById('api_key_sys').value = apiKeySys;
            }
            fetch('/load_settings', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ action: 'load', api_key_sys: apiKeySys })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('api_key_auth').value = data.api_key_auth;
                document.getElementById('api_key_apps_vk').value = data.api_key_apps_vk; 
                document.getElementById('vk_api_key').value = data.vk_api_key;  
                document.getElementById('vk_st_alone').value = data.vk_st_alone; 
                document.getElementById('key_callback_vk').value = data.key_callback_vk;              
                document.getElementById('senler_token').value = data.senler_token;
                document.getElementById('wa_ak').value = data.wa_ak;
                document.getElementById('wa_api_key').value = data.wa_api_key;
                document.getElementById('curators').value = data.curators; 
                document.getElementById('call_api_key').value = data.call_api_key;                
            })
            .catch(error => console.error('Error:', error));
        }

        function saveSettings() {
            const form = document.getElementById('settingsForm');
            const formData = new FormData(form);
            const data = {};
            formData.forEach((value, key) => {
                if (value !== '') {
                    data[key] = value;
                }
            });
            fetch('/save_settings', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ action: 'save', data: data, api_key_sys: data.api_key_sys })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                Toastify({
                    text: "Данные сохранены",
                    duration: 3000,
                    gravity: "top",
                    position: "right",
                    backgroundColor: "#4CAF50",
                }).showToast();
            })
            .catch(error => {
                console.error('Error:', error);
                Toastify({
                    text: "Ошибка при сохранении данных",
                    duration: 3000,
                    gravity: "top",
                    position: "right",
                    backgroundColor: "#FF0000",
                }).showToast();
            });
        }

        function refreshSettings() {
            loadSettings();
            Toastify({
                text: "Данные обновлены",
                duration: 3000,
                gravity: "top",
                position: "right",
                backgroundColor: "#FFA500",
            }).showToast();
        }

        function saveApiKeySys() {
            const apiKeySys = document.getElementById('api_key_sys').value;
            localStorage.setItem('api_key_sys', apiKeySys);
        }

        window.onload = loadSettings;
    </script>
</body>
</html>