<!-- web/templates/web/modal_order_form.html -->
<div id="orderModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Оформление заявки на услугу</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="orderForm" method="post" action="{% url 'create_service_request' service_id=service.pk %}">

                    {% csrf_token %}
                    <div class="form-group mb-3">
                        <label class="form-label">Имя</label>
                        <input id="client_name" class="form-control" type="text" name="client_name" required minlength="2" maxlength="50" />
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Телефон</label>
                        <input id="client_phone" class="form-control" type="tel" name="client_phone" required pattern="^\+?[0-9\s\-]{7,15}$" />
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Адрес электронной почты</label>
                        <input id="client_email" class="form-control" type="email" name="client_email" required />
                    </div>
                    <div class="form-group mb-3 text-center">
                        <label class="form-label">Сканируйте QR код для регистрации в Telegram боте</label>
                        <div id="qrCodeContainer">
                            <img src="{{ qr_code }}" alt="QR код для Telegram бота" class="img-fluid" />
                        </div>
                        <div class="form-group mt-3">
                            <a href="{{ registration_link }}" target="_blank">Перейдите по этой ссылке для регистрации в Telegram боте</a>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                        <button type="submit" class="btn btn-primary" id="submitButton" disabled>Отправить заявку</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkVerificationStatus = () => {
            fetch(`/service/request_status/{{ service_request_id }}/`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.is_verified) {
                        document.getElementById('submitButton').disabled = false;
                    }
                })
                .catch(error => console.error('Ошибка при проверке статуса:', error));
        };

        setInterval(checkVerificationStatus, 5000);
    });
</script>