<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsMasterGRM - Принудительное обновление базы</title>
    <link rel="stylesheet" href="styles.css">
<!-- Подключение стилей Notyf -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">

<!-- Подключение скрипта Notyf -->
<script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
    }
    h1 {
        background-color: #4CAF50;
        color: white;
        padding: 20px;
        margin: 0;
        border-bottom: 2px solid #388E3C;
        font-size: 28px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    .container {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }
    .block {
        width: 45%;
        text-align: center;
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .form-group {
        margin: 20px 0;
    }
    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 16px;
    }
    .form-group input,
    .form-group select {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }
    button {
        display: block;
        margin: 20px auto;
        color: white;
        background-color: #4CAF50;
        border: none;
        cursor: pointer;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }
    button:hover {
        background-color: #388E3C;
    }
    .input-row {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }
    .input-row input[type="file"] {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .input-row input[type="checkbox"] {
        margin-top: 5px;
    }
    .input-row label {
        display: flex;
        align-items: center;
        color: #000000;
        font-size: 16px;
    }
    #uploadButton {
        color: white;
        background-color: #4CAF50;
        border: none;
        cursor: pointer;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        margin-top: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #uploadButton:hover {
        background-color: #388E3C;
    }
    .block h2 {
        text-align: center;
    }
    /* Custom Checkbox Styles */
    .container-checkbox {
        color: #000000;
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .container-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }
    .container-checkbox:hover input ~ .checkmark {
        background-color: #ccc;
    }
    .container-checkbox input:checked ~ .checkmark {
        background-color: #4CAF50;
    }
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    .container-checkbox input:checked ~ .checkmark:after {
        display: block;
    }
    .container-checkbox .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    input[type="date"] {
        background-color: #4CAF50;
        color: white;
        padding: 12px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
    }
    ::-webkit-calendar-picker-indicator {
        background-color: white;
        padding: 5px;
        cursor: pointer;
        border-radius: 3px;
    }
    #dropdown {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    #uploadButtonJson {
        color: white;
        background-color: #4CAF50;
        border: none;
        cursor: pointer;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        margin-top: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #uploadButtonJson:hover {
        background-color: #388E3C;
    }
    .block form#uploadFormJson {
        margin-top: 20px;
    }
    .block form#uploadFormJson label {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        font-size: 16px;
        color: #000000;
    }
    .block form#uploadFormJson input[type="file"] {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 10px;
    }
    #message {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
        color: #4CAF50;
        text-align: center;
    }
</style>
<body>
    <h1>WhatsMasterGRM - Принудительное обновление базы</h1>

    <div class="container">
        <div class="block">
            <h2>Тильда - Таблица CSV</h2>
            <form id="uploadForm" enctype="multipart/form-data" method="post">
                <div class="input-row">
                    <input type="file" name="file" accept=".csv">
                </div>
                <div class="input-row">
                    <label class="container-checkbox">
                        Наличие WhatsApp
                        <input type="checkbox" name="verify_phone" value="1">
                        <span class="checkmark"></span>
                    </label>
                    <label class="container-checkbox">
                        Добавлять менеджера
                        <input type="checkbox" name="add_curator" value="1">
                        <span class="checkmark"></span>
                    </label>
                </div>
                <input id="uploadButton" type="submit" value="Загрузить пользователей">
            </form>
            <div id="result"></div>

            <h2>WhatsMasterCRM - Файл JSON</h2>
            <form id="uploadFormJson" onsubmit="handleFormSubmit(event)" enctype="multipart/form-data">
                <div class="input-row">
                    <input type="file" id="fileJson" name="file" accept=".json" required>
                </div>
                <input id="uploadButtonJson" type="submit" value="Upload">
            </form>
            <div id="message" style="display:none; margin-top:20px;"></div>
        </div>

        <div class="block">
            <h2>Бизон 365 - API</h2>
            <div class="form-group">
                <label for="tokenInput">API-токен администратора Бизон 365:</label>
                <input type="text" id="tokenInput" placeholder="Введите токен">
            </div>
            <div class="form-group">
                <label for="dateInput">Крайняя дата выборки комнат:</label>
                <input type="date" id="dateInput">
            </div>
            <div class="form-group">
                <label for="typeSelect">Выбор формата вебинара:</label>
                <select id="typeSelect">
                    <option value="AutoWebinars">Автовебинарные комнаты</option>
                    <option value="LiveWebinars">Вебинарные комнаты</option>
                </select>
            </div>
            <button id="sendRequestButton">Получить список комнат Бизон 365</button>
            <div id="dropdown-container"></div>
            <button id="sendGetRequestButton">Обновить базу WhatsMasterGRM</button>
        </div>
    </div>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const form = new FormData(this);
            fetch('/upload_csv', {
                method: 'POST',
                body: form
            })
            .then(response => response.json())
            .then(data => {
                showNotification('Загрузка завершена');
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Произошла ошибка при загрузке файла.', true);
            });
        });
        document.getElementById('uploadFormJson').addEventListener('submit', function(event) {
            event.preventDefault();
            var formData = new FormData(event.target);
            fetch('/upload_json', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                showNotification(data.message || 'Файл успешно загружен');
            })
            .catch(error => {
                showNotification("Произошла ошибка: " + error, true);
            });
        });
        document.getElementById('sendRequestButton').addEventListener('click', function() {
            const token = document.getElementById('tokenInput').value;
            const minDate = document.getElementById('dateInput').value;
            const type = document.getElementById('typeSelect').value;
            const url = '/send_request';
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: 'token=' + encodeURIComponent(token) + '&minDate=' + encodeURIComponent(minDate) + '&type=' + encodeURIComponent(type)
            })
            .then(response => response.json())
            .then(data => {
                createDropdown(data);
                showNotification('Список комнат успешно получен');
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Произошла ошибка при получении списка комнат.', true);
            });
        });
        function createDropdown(data) {
            const container = document.getElementById('dropdown-container');
            container.innerHTML = '';
            const select = document.createElement('select');
            select.id = 'dropdown';
            select.classList.add('form-group');
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item;
                option.text = item;
                select.appendChild(option);
            });
            container.appendChild(select);
            const sendGetRequestButton = document.getElementById('sendGetRequestButton');
           
            sendGetRequestButton.removeEventListener('click', handleGetRequest);
            sendGetRequestButton.addEventListener('click', handleGetRequest);
        }
        function handleGetRequest() {
            const selectedValue = document.getElementById('dropdown').value;
            const token = document.getElementById('tokenInput').value;
            const getUrl = '/send_get_request?token=' + encodeURIComponent(token) + '&webinarId=' + encodeURIComponent(selectedValue);
            fetch(getUrl, {
                method: 'GET'
            })
            .then(response => response.json())
            .then(data => {
                showNotification('Пользователи добавлены в базу данных WhatsGRM');
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Произошла ошибка при обновлении базы.', true);
            });
        }
        function showNotification(message, isError = false) {
            const notyf = new Notyf({
                duration: 5000,
                position: {
                    x: 'right',
                    y: 'top',
                },
                types: [
                    {
                        type: 'success',
                        background: 'green',
                        icon: {
                            className: 'notyf__icon--success',
                            tagName: 'span',
                            text: ''
                        }
                    },
                    {
                        type: 'error',
                        background: 'red',
                        icon: {
                            className: 'notyf__icon--error',
                            tagName: 'span',
                            text: ''
                        }
                    }
                ]
            });
            if (isError) {
                notyf.open({
                    type: 'error',
                    message: message
                });
            } else {
                notyf.open({
                    type: 'success',
                    message: message
                });
            }
        }
    </script>
</body>
</html>