{% extends "admin/change_list.html" %}
{% block content %}
    

<!-- Кнопка импорта -->
<div class="form-group mb-3">
    <button type="submit" class="btn btn-primary" form="importHotelsForm">
        Импортировать выбранные отели
    </button>
</div>
    
<!-- Действия админки -->
{{ block.super }}

<!-- Уведомление -->
<div id="notification" class="alert alert-info d-none" role="alert">
    Здесь появятся уведомления.
</div>

<!-- Форма для импорта отелей -->
<form id="importHotelsForm" method="POST">
    {% csrf_token %}
    {{ form.as_p }}  <!-- Отображаем форму -->
</form>

{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <!-- Подключаем Bootstrap 4 -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <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.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const importButton = document.querySelector("button[type='submit']");
            const notificationElement = document.getElementById('notification');

            // Слушатель для отправки формы
            importButton.addEventListener('click', function(e) {
                e.preventDefault(); // предотвращаем стандартное поведение кнопки
                
                // Извлекаем выбранные отели
                const checkboxes = document.querySelectorAll('input[name="hotels"]:checked');
                const selectedHotels = [];
                console.log("Чекбоксы:", checkboxes); // Консольная отладка
                
                checkboxes.forEach(function(checkbox) {
                    selectedHotels.push(checkbox.value);
                    console.log("Выбранный отель:", checkbox.value); // Консольная отладка
                });

                // Если выбраны отели
                if (selectedHotels.length > 0) {
                    // Преобразуем CSRF токен
                    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
                    console.log("CSRF токен:", csrfToken); // Консольная отладка
                    
                    // Отправляем данные на сервер
                    fetch('/import_hotels/', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': csrfToken,
                        },
                        body: JSON.stringify({ hotels: selectedHotels })
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log("Ответ от сервера:", data); // Консольная отладка
                        // Показать успешное уведомление
                        notificationElement.classList.remove('d-none');
                        notificationElement.classList.add('alert-success');
                        notificationElement.textContent = data.message || "Отели успешно импортированы!";
                    })
                    .catch((error) => {
                        console.error("Ошибка при импорте:", error); // Консольная отладка
                        // Показать ошибку
                        notificationElement.classList.remove('d-none');
                        notificationElement.classList.add('alert-danger');
                        notificationElement.textContent = "Произошла ошибка при импорте отелей.";
                    })
                    .finally(() => {
                        // Сброс кнопки
                        importButton.disabled = false;
                        importButton.textContent = 'Импортировать выбранные отели';
                    });
                } else {
                    console.log("Не выбраны отели"); // Консольная отладка
                    notificationElement.classList.remove('d-none');
                    notificationElement.classList.add('alert-warning');
                    notificationElement.textContent = "Пожалуйста, выберите хотя бы один отель для импорта.";
                }
            });
        });
    </script>
{% endblock %}
