{% extends "admin/change_list.html" %}
{% block content %}
    <!-- Кнопка импорта -->
    <div class="form-group mb-3">
        <button type="button" class="btn btn-primary" id="importHotelsButton">
            Импортировать выбранные отели
        </button>
    </div>
    
    <!-- Уведомление -->
    <div id="notification" class="alert alert-info d-none" role="alert">
        Здесь появятся уведомления.
    </div>
    
    <!-- Действия админки -->
    {{ block.super }}

    <!-- Список отелей для выбора в виде таблицы -->
    <form id="importHotelsForm" method="POST">
        {% csrf_token %}
        
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead class="thead-dark">
                    <tr>
                        <!-- Чекбокс для выбора всех отелей -->
                        <th><input type="checkbox" id="select-all" /></th>
                        <th>Внешний ID</th>
                        <th>Отображаемое имя</th>
                        <th>Имя отеля</th>
                        <th>Дата создания</th>
                        <th>Дата обновления</th>
                        <th>Импортирован в основную базу</th>
                    </tr>
                </thead>
                <tbody>
                    {% for hotel in imported_hotels %}
                        <tr>
                            <td>
                                <input type="checkbox" name="hotels" value="{{ hotel.id }}" id="hotel{{ hotel.id }}" class="select-row" />
                            </td>
                            <td>{{ hotel.external_id }}</td>
                            <td>{{ hotel.display_name }}</td>
                            <td>{{ hotel.name }}</td>
                            <td>{{ hotel.creation_date }}</td>
                            <td>{{ hotel.updated_at }}</td>
                            <td>{{ hotel.imported_to_main_db }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Здесь вы можете добавить скрытые поля или другие элементы формы, если они нужны -->
    </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 selectAllCheckbox = document.getElementById('select-all');
            selectAllCheckbox.addEventListener('change', function() {
                const checkboxes = document.querySelectorAll(".select-row");
                checkboxes.forEach(function(checkbox) {
                    checkbox.checked = selectAllCheckbox.checked;
                });
            });
    
            // Кнопка импорта
            const importButton = document.getElementById('importHotelsButton');
            const notificationElement = document.getElementById('notification');
    
            importButton.addEventListener('click', function(e) {
                e.preventDefault(); // предотвращаем стандартное поведение кнопки
    
                // Даем время DOM полностью загрузиться
                setTimeout(function() {
                    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);  // Отладка: выводим ID выбранного отеля
                    });
    
                    if (selectedHotels.length > 0) {
                        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
                        console.log("CSRF токен:", csrfToken);
    
                        importButton.disabled = true;
                        importButton.textContent = 'Импортируем...';
    
                        // Отправка выбранных отелей на сервер через fetch
                        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 = "Отели успешно импортированы!";
                            checkboxes.forEach(checkbox => checkbox.checked = false); // Снимаем выделение с чекбоксов
                        })
                        .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 = "Пожалуйста, выберите хотя бы один отель для импорта.";
                    }
                }, 100);  // Задержка 100ms, чтобы дождаться рендеринга всех элементов
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
            const checkboxes = document.querySelectorAll('input[name="hotels"]');
            console.log("Чекбоксы на странице:", checkboxes);  // Проверим, есть ли чекбоксы
        });
    </script>
{% endblock %}