{% extends 'inventory/base_inventory_minimal.html' %}

{% block inventory_title %}Управление складами{% endblock %}
{% block breadcrumb_current %}Склады{% endblock %}

{% block inventory_content %}
<!-- Скрытое поле для CSRF токена (нужно для AJAX запросов) -->
<div style="display: none;">
    {% csrf_token %}
</div>
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="mb-0">Список складов</h4>
        <a href="{% url 'inventory:warehouse-create' %}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-circle"></i> Новый склад
        </a>
    </div>

    <div class="card-body">
        {% if warehouses %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 40px;">✓</th>
                            <th>Название</th>
                            <th>Описание</th>
                            <th>Статус</th>
                            <th>Дата создания</th>
                            <th class="text-end">Действия</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for warehouse in warehouses %}
                        <tr {% if warehouse.is_default %}class="table-warning"{% endif %} data-warehouse-id="{{ warehouse.pk }}">
                            <td class="text-center">
                                <input type="checkbox" class="default-warehouse-checkbox"
                                       data-warehouse-id="{{ warehouse.pk }}"
                                       data-set-default-url="{% url 'inventory:warehouse-set-default' warehouse.pk %}"
                                       {% if warehouse.is_default %}checked{% endif %}
                                       style="cursor: pointer; width: 18px; height: 18px;">
                            </td>
                            <td>
                                <strong>{{ warehouse.name }}</strong>
                                {% if warehouse.is_default %}
                                    <span class="badge bg-warning text-dark ms-2">По умолчанию</span>
                                {% endif %}
                            </td>
                            <td>{{ warehouse.description|truncatewords:10 }}</td>
                            <td>
                                {% if warehouse.is_active %}
                                    <span class="badge bg-success">Активен</span>
                                {% else %}
                                    <span class="badge bg-secondary">Неактивен</span>
                                {% endif %}
                            </td>
                            <td>{{ warehouse.created_at|date:"d.m.Y H:i" }}</td>
                            <td class="text-end">
                                <a href="{% url 'inventory:warehouse-update' warehouse.pk %}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <a href="{% url 'inventory:warehouse-delete' warehouse.pk %}" class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-trash"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Пагинация -->
            {% if is_paginated %}
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1">Первая</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Предыдущая</a>
                        </li>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% else %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}">Следующая</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Последняя</a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        {% else %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> Складов не найдено.
                <a href="{% url 'inventory:warehouse-create' %}" class="alert-link">Создать новый</a>
            </div>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Обработчик для галочек "По умолчанию"
    const checkboxes = document.querySelectorAll('.default-warehouse-checkbox');

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const warehouseId = this.dataset.warehouseId;
            const setDefaultUrl = this.dataset.setDefaultUrl;

            // Получаем CSRF токен из скрытого input в форме
            let csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;

            // Если токена нет в form, ищем в meta тегах
            if (!csrfToken) {
                csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            }

            // Если токена еще нет, ищем его в самой странице через Cookies
            if (!csrfToken) {
                const name = 'csrftoken';
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                csrfToken = cookieValue;
            }

            console.log('CSRF Token:', csrfToken ? 'найден (' + csrfToken.length + ' символов)' : 'не найден');

            // Если галочка установлена, отправляем запрос
            if (this.checked) {
                // Визуально обновляем таблицу сразу (оптимистичное обновление)
                document.querySelectorAll('input.default-warehouse-checkbox').forEach(cb => {
                    cb.checked = false;
                });
                document.querySelectorAll('tr[data-warehouse-id]').forEach(tr => {
                    tr.classList.remove('table-warning');
                    tr.querySelector('.badge.bg-warning')?.remove();
                });

                // Отмечаем текущую строку
                this.checked = true;
                const currentRow = document.querySelector(`tr[data-warehouse-id="${warehouseId}"]`);
                currentRow.classList.add('table-warning');

                // Добавляем бейдж "По умолчанию" если его нет
                const nameCell = currentRow.querySelector('td:nth-child(2)');
                if (!nameCell.querySelector('.badge.bg-warning')) {
                    const badge = document.createElement('span');
                    badge.className = 'badge bg-warning text-dark ms-2';
                    badge.textContent = 'По умолчанию';
                    nameCell.appendChild(badge);
                }

                // Отправляем AJAX запрос на правильный URL из атрибута data
                console.log('Отправляем запрос на:', setDefaultUrl);
                console.log('С заголовками:', {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken ? '***' + csrfToken.slice(-10) : 'не найден'
                });

                const headers = {
                    'Content-Type': 'application/json'
                };

                // Добавляем CSRF токен если он найден
                if (csrfToken) {
                    headers['X-CSRFToken'] = csrfToken;
                }

                fetch(setDefaultUrl, {
                    method: 'POST',
                    headers: headers,
                    body: JSON.stringify({})
                })
                .then(response => {
                    console.log('Ответ сервера:', response.status);
                    if (!response.ok) {
                        return response.text().then(text => {
                            throw new Error(`HTTP ${response.status}: ${text}`);
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Данные:', data);
                    if (data.status === 'success') {
                        console.log(data.message);
                        // Показываем уведомление
                        showNotification(data.message, 'success');
                    } else {
                        throw new Error(data.message);
                    }
                })
                .catch(error => {
                    console.error('Ошибка при запросе:', error);
                    // Откатываем визуальные изменения при ошибке
                    showNotification('Ошибка при установке склада по умолчанию: ' + error.message, 'error');
                    // Перезагружаем через 2 секунды
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
                });
            }
        });
    });

    // Функция для показа уведомлений
    function showNotification(message, type = 'info') {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;

        const cardBody = document.querySelector('.card-body');
        const alertElement = document.createElement('div');
        alertElement.innerHTML = alertHtml;
        cardBody.insertBefore(alertElement.firstElementChild, cardBody.firstChild);

        // Автоматически скрываем через 4 секунды
        setTimeout(() => {
            const alert = cardBody.querySelector('.alert');
            if (alert) {
                alert.remove();
            }
        }, 4000);
    }
});
</script>
{% endblock %}
