<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Модальное окно для заявки на услугу</title>
    <style>
        /* Стили для модального окна */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        #qrCodeImg {
            display: block;
            margin: 20px auto;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<!-- Модальное окно -->
<div id="serviceModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h4>Заполните заявку на услугу</h4>
        <p>QR-код для завершения регистрации:</p>
        <img id="qrCodeImg" src="" alt="QR Code">
        <form id="serviceRequestForm">
            <div class="form-group">
                <label for="clientName">Ваше имя:</label>
                <input type="text" class="form-control" id="clientName" name="client_name" placeholder="Введите ваше имя" required minlength="2" maxlength="50" readonly>
            </div>
            <div class="form-group">
                <label for="clientChatId">Ваш chat ID:</label>
                <input type="text" class="form-control" id="clientChatId" name="client_chat_id" placeholder="Ваш chat ID" readonly>
            </div>
            <div class="form-group">
                <label for="clientEmail">Ваш email:</label>
                <input type="email" class="form-control" id="clientEmail" name="client_email" placeholder="Введите ваш email" required>
            </div>
            <div class="form-group">
                <label for="clientPhone">Ваш телефон:</label>
                <input type="text" class="form-control" id="clientPhone" name="client_phone" placeholder="Введите ваш телефон" required pattern="^\+?[0-9\s\-]{7,15}$">
            </div>
            <div class="form-group">
                <label for="description">Описание заявки:</label>
                <textarea class="form-control" id="description" name="description" placeholder="Опишите вашу заявку" required></textarea>
            </div>
            <button type="submit" class="btn btn-success" id="submitButton" disabled>Отправить заявку</button>
        </form>
    </div>
</div>

<script>
    // Обработчик открытия модального окна
    document.getElementById('openModalBtn').addEventListener('click', function () {
        const serviceId = this.getAttribute('data-service-id');
        // Открываем модальное окно
        document.getElementById('serviceModal').style.display = 'block';

        // Выполняем запрос на генерацию QR-кода
        fetch(`/service/generate_qr_code/${serviceId}/`)
            .then(response => response.json())
            .then(data => {
                // Обновляем src изображения QR-кода
                document.getElementById('qrCodeImg').src = data.qr_code_url;

                // Запуск проверки статуса каждые 5 секунд
                const interval = setInterval(() => {
                    checkVerificationStatus(data.service_request_id, interval);
                }, 5000);
            })
            .catch(error => console.error('Ошибка при генерации QR-кода:', error));
    });

    // Обработчик закрытия модального окна
    document.querySelector('.close').addEventListener('click', function () {
        document.getElementById('serviceModal').style.display = 'none';
    });

    // Обработчик отправки формы
    document.getElementById('serviceRequestForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const formData = new FormData(this);
        const serviceId = document.getElementById('openModalBtn').getAttribute('data-service-id');
        // Отправка данных формы на сервер
        fetch('/service/request/' + serviceId + '/', {
            method: 'POST',
            body: formData
        }).then(response => {
            if (response.ok) {
                alert('Заявка успешно отправлена!');
                document.getElementById('serviceModal').style.display = 'none';
                // Отправка сообщения в Telegram
                sendTelegramNotification(formData);
            } else {
                alert('Ошибка при отправке заявки. Пожалуйста, попробуйте снова.');
            }
        }).catch(error => console.error('Ошибка при отправке данных формы:', error));
    });

    // Проверка статуса заявки на наличие подтверждения Telegram
    const checkVerificationStatus = (serviceRequestId, interval) => {
        fetch(`/service/request_status/${serviceRequestId}/`)
            .then(response => response.json())
            .then(data => {
                if (data.is_verified) {
                    // Заполнение полей формы данными пользователя
                    document.getElementById('clientName').value = data.client_name;
                    document.getElementById('clientChatId').value = data.client_chat_id;

                    // Активируем кнопку отправки, если все поля заполнены
                    updateButtonState();

                    // Останавливаем интервал проверки статуса
                    clearInterval(interval);
                }
            })
            .catch(error => console.error('Ошибка при проверке статуса заявки:', error));
    };

    // Код для активации кнопки "Отправить" при заполнении всех полей
    const clientEmail = document.getElementById('clientEmail');
    const clientPhone = document.getElementById('clientPhone');
    const clientName = document.getElementById('clientName');
    const description = document.getElementById('description');
    const clientChatId = document.getElementById('clientChatId');
    const submitButton = document.getElementById('submitButton');

    const updateButtonState = () => {
        if (clientEmail.value && clientPhone.value && clientName.value && description.value && clientChatId.value) {
            submitButton.disabled = false;
        } else {
            submitButton.disabled = true;
        }
    };

    // Привязка событий к полям для обновления состояния кнопки отправки
    clientEmail.addEventListener('input', updateButtonState);
    clientPhone.addEventListener('input', updateButtonState);
    description.addEventListener('input', updateButtonState);

    // Удаление placeholder при установке фокуса на поле
    document.querySelectorAll('input, textarea').forEach(field => {
        field.addEventListener('focus', function () {
            this.dataset.placeholder = this.placeholder;
            this.placeholder = '';
        });
        field.addEventListener('blur', function () {
            this.placeholder = this.dataset.placeholder;
        });
    });

    // Функция для отправки уведомления в Telegram
    const sendTelegramNotification = (formData) => {
        const clientName = formData.get('client_name');
        const serviceDescription = formData.get('description');
        const chatId = formData.get('client_chat_id');
        const message = `Здравствуйте, ${clientName}! Ваша заявка успешно зарегистрирована. Детали: ${serviceDescription}`;

        fetch('/service/send_telegram_notification/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ chat_id: chatId, message: message })
        }).then(response => {
            if (response.ok) {
                console.log('Уведомление успешно отправлено в Telegram');
            } else {
                console.error('Ошибка при отправке уведомления в Telegram');
            }
        }).catch(error => console.error('Ошибка при отправке уведомления в Telegram:', error));
    };
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>