const phoneInput = document.getElementById('phone-input');
    
      phoneInput.addEventListener('input', function () {
        // Заменяем все символы, НЕ входящие в список [()+0-9-], на пустую строку
        this.value = this.value.replace(/[^()+0-9\-]/g, '');
      });
  
        document.addEventListener('DOMContentLoaded', function() {
            // Обработка сабмита формы
            document.getElementById('phone-form').addEventListener('submit', function(event) {
                event.preventDefault();
                const phone = document.getElementById('phone-input').value;
 
                checkPhone(phone);
            });

            // Автоматическая проверка, если в URL есть ?num=...
            const urlParams = new URLSearchParams(window.location.search);
            const phoneParam = urlParams.get('num');
            if (phoneParam && phoneParam.length >= 3 && phoneParam.length <= 11 && /^\d+$/.test(phoneParam)) {
                document.getElementById('phone-input').value = phoneParam;
                checkPhone(phoneParam);
            }
        });

        // Функция отправляет POST-запрос и обрабатывает ответ
        function checkPhone(phone) {
            console.log('Проверяем номер:', phone);

            // Показываем индикатор загрузки, скрываем результат
            document.getElementById('result').classList.add('hidden');
            document.getElementById('progress').classList.remove('hidden');

            // Отправляем запрос обычным POST (application/x-www-form-urlencoded)
            fetch('/ajax_phones.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
                body: 'num=' + encodeURIComponent(phone)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                // Скрываем «крутилку»
                document.getElementById('progress').classList.add('hidden');

                if (data.length > 0 && data[0].hasOwnProperty('message')) {
                    // Если есть "message", показываем её
                    document.getElementById('result').innerHTML =
                        '<p class="text-red-600">' + data[0].message + '</p>';
                } else {
                    // Иначе выводим список данных
                    let resultHTML = '';
                    data.forEach(item => {
                        // Блок с информацией по номеру (если поле 'number' есть)
                        if (item.number) {
                            resultHTML += `
                                <div class="bg-blue-50 p-4 mb-4 rounded-lg shadow-md">
                                    <!-- Номер -->
                                    <div class="flex mb-3">
                                        <!-- Левая колонка (описание) -->
                                        <div class="w-32 flex items-center justify-begin pr-4">
                                            <span class="font-bold text-gray-700">Номер</span>
                                        </div>
                                        <!-- Средняя колонка (иконка) -->
                                        <div class="w-12 flex items-center justify-center">
                                            <i class="fas fa-phone-alt text-blue-500"></i>
                                        </div>
                                        <!-- Правая колонка (данные) -->
                                        <div class="flex-1">
                                            <span>${item.number}</span>
                                        </div>
                                    </div>
                                    
                                    <hr class="mb-3">
                                                                    
                                    <!-- Регион -->
                                    <div class="flex mb-2">
                                        <div class="w-32 flex items-center justify-begin pr-4">
                                            <span class="font-bold text-gray-700">Регион</span>
                                        </div>
                                        <div class="w-12 flex items-center justify-center">
                                            <i class="fas fa-map-marker-alt text-green-500"></i>
                                        </div>
                                        <div class="flex-1">
                                            <span>${item.region}</span>
                                        </div>
                                    </div>

                                 <!-- Оператор -->
                                    <div class="flex mb-3">
                                        <div class="w-32 flex items-center justify-begin pr-4">
                                            <span class="font-bold text-gray-700">Оператор</span>
                                        </div>
                                        <div class="w-12 flex items-center justify-center">
                                            <i class="fas fa-broadcast-tower text-red-500"></i>
                                        </div>
                                        <div class="flex-1">
                                            <!-- Проверка на платный номер -->
                                            ${
                                                item.operator.is_premium 
                                                    ? '<i class="fas fa-exclamation-triangle text-red-600 mr-1" title="Платный номер!"></i>'
                                                    : ''
                                            }
                                            ${item.operator.name}
                                            <br>
                                            <small class="text-gray-500">ИНН ${item.operator.inn}</small>
                                        </div>
                                    </div>
                                                  
 
                                    <hr class="mb-3">
                                     
                                              
                                    <!-- Диапазон -->
                                    <div class="flex mb-2">
                                        <div class="w-32 flex items-center justify-begin pr-4">
                                            <span class="font-bold text-gray-700">Диапазон</span>
                                        </div>
                                        <div class="w-12 flex items-center justify-center">
                                            <i class="fas fa-arrows-alt-h text-purple-500"></i>
                                        </div>
                                        <div class="flex-1">
                                            <!-- Можно выводить в несколько строк -->
                                            <span>${item.range.start}</span><br>
                                            <span>${item.range.end}</span>
                                        </div>
                                    </div>
                                
                                    <!-- Кол-во номеров -->
                                    <div class="flex mb-2">
                                        <div class="w-32 flex items-center justify-begin pr-4">
                                            <span class="font-bold text-gray-700">Номеров</span>
                                        </div>
                                        <div class="w-12 flex items-center justify-center">
                                            <i class="fas fa-list-ol text-purple-500"></i>
                                        </div>
                                        <div class="flex-1">
                                            <span>${item.count}</span>
                                        </div>
                                    </div>
                                
   
                                </div>

                            `;
                        }
                        // Блок со «ссылкой на нумерацию» (если поле 'link' есть)
                        else if (item.link) {
                            // Показываем только если это не "?num=" и не содержит "null"
                            if (item.link !== '?num=' && !item.link.includes('null')) {
                                // Иконка уменьшена (fa-sm), по центру, с надписью
                                resultHTML += `
                                    <div class="flex justify-center mb-4">
                                        <a href="${item.link}"
                                           class="text-blue-500 hover:text-blue-600 flex items-center space-x-2" title="Перейти к найденному номеру">
                                            <i class="fas fa-link fa-sm"></i>
                                            <span>Ссылка на найденную нумерацию</span>
                                        </a>
                                    </div>
                                `;
                            }
                        }
                    });
                    document.getElementById('result').innerHTML = resultHTML;
                }

                // Показываем блок с результатом
                document.getElementById('result').classList.remove('hidden');
            })
            .catch(error => {
                // Прячем «крутилку» и выводим ошибку
                document.getElementById('progress').classList.add('hidden');
                document.getElementById('result').innerHTML =
                    '<p class="text-red-600">Произошла ошибка при выполнении запроса: ' 
                    + error.message + '</p>';
                document.getElementById('result').classList.remove('hidden');
                console.error('Ошибка при запросе данных:', error);
            });
        }