{% extends 'inventory/base_inventory_minimal.html' %}
{% load inventory_filters %}
{% load static %}

{% block inventory_title %}Детали инвентаризации{% endblock %}
{% block breadcrumb_current %}
    <a href="{% url 'inventory:inventory-list' %}" class="text-decoration-none">Инвентаризация</a>
{% endblock %}

{% block inventory_content %}
<!-- CSS для компонента поиска товаров -->
<link rel="stylesheet" href="{% static 'products/css/product-search-picker.css' %}">
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="mb-0">Инвентаризация: {{ inventory.warehouse.name }}</h4>
        <a href="{% url 'inventory:inventory-list' %}" class="btn btn-secondary btn-sm">
            <i class="bi bi-arrow-left"></i> Вернуться
        </a>
    </div>

    <div class="card-body">
        <!-- Информация об инвентаризации - свернута по умолчанию -->
        <div class="row mb-4">
            <div class="col-md-6">
                <button class="btn btn-outline-primary btn-sm d-flex align-items-center gap-2 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#inventory-info-collapse" aria-expanded="false" aria-controls="inventory-info-collapse">
                    <i class="bi bi-chevron-down" id="info-collapse-icon"></i>
                    <span>Информация</span>
                </button>
                <div class="collapse" id="inventory-info-collapse">
                    <table class="table table-borderless">
                        {% if inventory.document_number %}
                        <tr>
                            <th>Номер документа:</th>
                            <td><strong>{{ inventory.document_number }}</strong></td>
                        </tr>
                        {% endif %}
                        <tr>
                            <th>Склад:</th>
                            <td><strong>{{ inventory.warehouse.name }}</strong></td>
                        </tr>
                        <tr>
                            <th>Статус:</th>
                            <td>
                                {% if inventory.status == 'draft' %}
                                    <span class="badge bg-secondary fs-6 px-3 py-2">
                                        <i class="bi bi-file-earmark"></i> Черновик
                                    </span>
                                {% elif inventory.status == 'processing' %}
                                    <span class="badge bg-warning text-dark fs-6 px-3 py-2">
                                        <i class="bi bi-hourglass-split"></i> В обработке
                                    </span>
                                {% else %}
                                    <span class="badge bg-success fs-6 px-3 py-2">
                                        <i class="bi bi-check-circle-fill"></i> Завершена
                                    </span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Дата:</th>
                            <td>{{ inventory.date|date:"d.m.Y H:i" }}</td>
                        </tr>
                        {% if inventory.conducted_by %}
                        <tr>
                            <th>Провёл:</th>
                            <td>{{ inventory.conducted_by }}</td>
                        </tr>
                        {% endif %}
                    </table>
                </div>
            </div>
        </div>

        <script>
        // Добавляем простую анимацию для иконки при сворачивании/разворачивании
        document.addEventListener('DOMContentLoaded', function() {
            const collapseElement = document.getElementById('inventory-info-collapse');
            const collapseIcon = document.getElementById('info-collapse-icon');
            
            collapseElement.addEventListener('show.bs.collapse', function() {
                collapseIcon.classList.remove('bi-chevron-down');
                collapseIcon.classList.add('bi-chevron-up');
            });
            
            collapseElement.addEventListener('hide.bs.collapse', function() {
                collapseIcon.classList.remove('bi-chevron-up');
                collapseIcon.classList.add('bi-chevron-down');
            });
        });
        </script>

        {% if inventory.status == 'completed' %}
        <!-- Информация о созданных документах -->
        <div class="alert alert-info mb-4">
            <h6><i class="bi bi-info-circle"></i> Инвентаризация завершена</h6>
            <div class="mt-2">
                {% if writeoff_document %}
                <p class="mb-1">
                    <strong>Документ списания:</strong>
                    <a href="{% url 'inventory:writeoff-document-detail' writeoff_document.pk %}" target="_blank">
                        {{ writeoff_document.document_number }}
                    </a>
                    <span class="badge {% if writeoff_document.status == 'confirmed' %}bg-success{% else %}bg-warning{% endif %} ms-2">
                        {{ writeoff_document.get_status_display }}
                    </span>
                </p>
                {% endif %}
                {% if incoming_document %}
                <p class="mb-1">
                    <strong>Документ оприходования:</strong>
                    <a href="{% url 'inventory:incoming-detail' incoming_document.pk %}" target="_blank">
                        {{ incoming_document.document_number }}
                    </a>
                    <span class="badge {% if incoming_document.status == 'confirmed' %}bg-success{% else %}bg-warning{% endif %} ms-2">
                        {{ incoming_document.get_status_display }}
                    </span>
                </p>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <hr>

        <h5>Строки инвентаризации</h5>

        <!-- Компонент поиска товаров - открыт по умолчанию, компактный -->
        {% if inventory.status != 'completed' %}
        <div class="card border-primary mb-4" id="product-search-section">
            <div class="card-header bg-light py-1">
                <h6 class="mb-0"><i class="bi bi-plus-square me-2"></i>Добавить товар в инвентаризацию</h6>
            </div>
            <div class="card-body p-2">
                {% include 'products/components/product_search_picker.html' with container_id='inventory-product-picker' title='Поиск товара...' warehouse_id=inventory.warehouse.id filter_in_stock_only=False categories=categories tags=tags add_button_text='Добавить' content_height='150px' skip_stock_filter=True %}
            </div>
        </div>
        {% endif %}

        <!-- Таблица строк инвентаризации -->
        <div class="table-responsive">
            <table class="table table-sm table-hover" id="inventory-lines-table">
                <thead class="table-light">
                    <tr>
                        <th>Товар</th>
                        <th class="text-center">Всего на складе</th>
                        <th class="text-center">В резервах</th>
                        <th class="bg-light text-center">В системе (свободно)</th>
                        <th class="text-center">Подсчитано (факт, свободные)</th>
                        <th class="text-center">Итоговая разница</th>
                        <th class="text-center">Статус</th>
                        {% if inventory.status != 'completed' %}
                        <th class="text-center">Действия</th>
                        {% endif %}
                    </tr>
                </thead>
                <tbody id="inventory-lines-tbody">
                    {% for line in lines %}
                    <tr data-line-id="{{ line.id }}" class="{% if line.difference != 0 %}table-warning{% endif %}">
                        <td>{{ line.product.name }}</td>
                        <td class="text-center">{{ line.quantity_available|smart_quantity }}</td>
                        <td class="text-center">{{ line.quantity_reserved|smart_quantity }}</td>
                        <td class="bg-light fw-semibold text-center">{{ line.quantity_system|smart_quantity }}</td>
                        <td class="text-center">
                            {% if inventory.status != 'completed' %}
                            <input type="number" 
                                   class="form-control form-control-sm quantity-fact-input mx-auto" 
                                   value="{{ line.quantity_fact|stringformat:'g' }}" 
                                   min="0" 
                                   step="0.001"
                                   data-line-id="{{ line.id }}"
                                   style="width: 100px;">
                            {% else %}
                            {{ line.quantity_fact|smart_quantity }}
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <span class="difference-badge" data-line-id="{{ line.id }}">
                                {% if line.difference > 0 %}
                                    <span class="badge bg-success">+{{ line.difference|smart_quantity }}</span>
                                {% elif line.difference < 0 %}
                                    <span class="badge bg-danger">{{ line.difference|smart_quantity }}</span>
                                {% else %}
                                    <span class="badge bg-secondary">0</span>
                                {% endif %}
                            </span>
                        </td>
                        <td class="text-center">
                            {% if line.processed %}
                                <span class="badge bg-success">Обработана</span>
                            {% else %}
                                <span class="badge bg-warning">Не проведено</span>
                            {% endif %}
                        </td>
                        {% if inventory.status != 'completed' %}
                        <td class="text-center">
                            <button class="btn btn-sm btn-danger delete-line-btn" 
                                    data-line-id="{{ line.id }}"
                                    data-product-name="{{ line.product.name }}"
                                    title="Удалить строку">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                        {% endif %}
                    </tr>
                    {% empty %}
                    <tr id="empty-lines-message">
                        <td colspan="{% if inventory.status != 'completed' %}8{% else %}7{% endif %}" class="text-center text-muted py-4">
                            <i class="bi bi-info-circle"></i> Строк инвентаризации не добавлено.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Кнопки действий -->
        <div class="d-flex gap-2 mt-4 align-items-center">
            {% if inventory.status != 'completed' %}
                <!-- Группа кнопок для незавершенной инвентаризации -->
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-primary" id="save-inventory-btn" onclick="location.reload();" title="Обновить страницу (изменения сохраняются автоматически)">
                        <i class="bi bi-save"></i> Сохранить
                    </button>
                    <button type="button" class="btn btn-primary" id="complete-inventory-btn" {% if not lines %}disabled{% endif %}>
                        <i class="bi bi-check-circle"></i> Завершить инвентаризацию
                    </button>
                    <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">
                        <i class="bi bi-trash"></i> Удалить инвентаризацию
                    </button>
                </div>
            {% endif %}
            <!-- Кнопка возврата всегда видна -->
            <div class="ms-auto">
                <a href="{% url 'inventory:inventory-list' %}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Вернуться к списку
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно подтверждения завершения инвентаризации -->
<div class="modal fade" id="confirmCompleteModal" tabindex="-1" aria-labelledby="confirmCompleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title" id="confirmCompleteModalLabel">
                    <i class="bi bi-exclamation-triangle-fill"></i> Завершить инвентаризацию?
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Вы уверены, что хотите завершить инвентаризацию?</p>
                <div id="complete-summary" class="alert alert-info">
                    <!-- Заполняется через JavaScript -->
                </div>
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle"></i>
                    <strong>Внимание!</strong> После завершения редактирование строк будет недоступно.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <form method="post" action="{% url 'inventory:inventory-complete' inventory.pk %}" id="complete-inventory-form">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-warning">Завершить инвентаризацию</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно подтверждения удаления инвентаризации -->
{% if inventory.status != 'completed' %}
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="confirmDeleteModalLabel">
                    <i class="bi bi-exclamation-triangle-fill"></i> Удалить инвентаризацию?
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Вы уверены, что хотите удалить эту инвентаризацию?</p>
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <strong>Внимание!</strong> Это действие нельзя отменить. Все строки инвентаризации будут удалены.
                </div>
                <p class="mb-0">
                    <strong>Склад:</strong> {{ inventory.warehouse.name }}<br>
                    {% if inventory.document_number %}
                    <strong>Номер документа:</strong> {{ inventory.document_number }}<br>
                    {% endif %}
                    <strong>Дата:</strong> {{ inventory.date|date:"d.m.Y H:i" }}
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <form method="post" action="{% url 'inventory:inventory-delete' inventory.pk %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Удалить инвентаризацию</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Подключаем JavaScript -->
<script src="{% static 'products/js/product-search-picker.js' %}" onerror="console.error('Failed to load product-search-picker.js');"></script>
<script src="{% static 'inventory/js/inventory_detail.js' %}" onerror="console.error('Failed to load inventory_detail.js');"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing inventory components...');

    // Проверка загрузки ProductSearchPicker
    if (typeof ProductSearchPicker === 'undefined') {
        console.error('ProductSearchPicker is not defined. Check if product-search-picker.js loaded correctly.');
        console.error('Script URL: {% static "products/js/product-search-picker.js" %}');
        return;
    } else {
        console.log('ProductSearchPicker is available');
    }

    // Инициализация компонента поиска товаров
    {% if inventory.status != 'completed' %}
    const pickerElement = document.querySelector('#inventory-product-picker');
    if (!pickerElement) {
        console.error('Picker container #inventory-product-picker not found');
        return;
    }

    console.log('Initializing ProductSearchPicker for inventory...');
    const picker = ProductSearchPicker.init('#inventory-product-picker', {
        apiUrl: '{% url "products:api-search-products-variants" %}',  // Явно указываем URL API
        excludeKits: true,  // Исключаем комплекты из поиска
        onSelect: function(product, instance) {
            console.log('Product selected:', product);
        },
        onAddSelected: function(product, instance) {
            console.log('Adding selected product to inventory:', product);
            if (product) {
                addInventoryLine(product.id);
                instance.clearSelection();
            }
        }
    });

    if (!picker) {
        console.error('Failed to initialize ProductSearchPicker');
    } else {
        console.log('ProductSearchPicker initialized successfully');
    }
    {% else %}
    console.log('Inventory is completed, skipping product picker initialization');
    {% endif %}

    // Инициализация обработчиков
    const inventoryId = {{ inventory.pk }};
    console.log('Initializing inventory detail handlers for ID:', inventoryId);
    window.inventoryDetailHandlers = initInventoryDetailHandlers(inventoryId, {
        addLineUrl: '{% url "inventory:inventory-line-add" inventory.pk %}',
        updateLineUrl: '{% url "inventory:inventory-line-update" inventory.pk 999 %}',
        deleteLineUrl: '{% url "inventory:inventory-line-delete" inventory.pk 999 %}',
        completeUrl: '{% url "inventory:inventory-complete" inventory.pk %}'
    });

    console.log('Inventory detail handlers initialized');
});
</script>
{% endblock %}
