{% extends 'base.html' %}
{% load static %}
{% load inventory_filters %}

{% block title %}Документ поступления {{ document.document_number }}{% endblock %}

{% block content %}
<!-- CSS для компонента поиска -->
<link rel="stylesheet" href="{% static 'products/css/product-search-picker.css' %}">

<div class="container-fluid px-4 py-3">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb" class="mb-2">
        <ol class="breadcrumb breadcrumb-sm mb-0">
            <li class="breadcrumb-item"><a href="{% url 'inventory:incoming-list' %}">Документы поступления</a></li>
            <li class="breadcrumb-item active">{{ document.document_number }}</li>
        </ol>
    </nav>

    <div class="row g-3">
        <!-- Основной контент - одна колонка -->
        <div class="col-12">
            <!-- Информация о документе - свернута по умолчанию -->
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
                    <button class="btn btn-outline-primary btn-sm d-flex align-items-center gap-2" type="button" data-bs-toggle="collapse" data-bs-target="#document-info-collapse" aria-expanded="false" aria-controls="document-info-collapse">
                        <i class="bi bi-chevron-down" id="document-info-collapse-icon"></i>
                        <span>
                            <i class="bi bi-file-earmark-plus me-2"></i>{{ document.document_number }}
                            {% if document.status == 'draft' %}
                            <span class="badge bg-warning text-dark ms-2">Черновик</span>
                            {% elif document.status == 'confirmed' %}
                            <span class="badge bg-success ms-2">Проведён</span>
                            {% elif document.status == 'cancelled' %}
                            <span class="badge bg-secondary ms-2">Отменён</span>
                            {% endif %}
                        </span>
                    </button>
                    {% if document.can_edit %}
                    <div class="btn-group">
                        <form method="post" action="{% url 'inventory:incoming-confirm' document.pk %}" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-success btn-sm" {% if not document.can_confirm %}disabled{% endif %}>
                                <i class="bi bi-check-lg me-1"></i>Провести
                            </button>
                        </form>
                        <form method="post" action="{% url 'inventory:incoming-cancel' document.pk %}" class="d-inline ms-2">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Отменить документ?')">
                                <i class="bi bi-x-lg me-1"></i>Отменить
                            </button>
                        </form>
                    </div>
                    {% endif %}
                </div>
                <div class="collapse" id="document-info-collapse">
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <p class="text-muted small mb-1">Склад</p>
                                <p class="fw-semibold">{{ document.warehouse.name }}</p>
                            </div>
                            <div class="col-md-3">
                                <p class="text-muted small mb-1">Дата документа</p>
                                <p class="fw-semibold">{{ document.date|date:"d.m.Y" }}</p>
                            </div>
                            <div class="col-md-3">
                                <p class="text-muted small mb-1">Тип поступления</p>
                                <p class="fw-semibold">{{ document.get_receipt_type_display }}</p>
                            </div>
                            <div class="col-md-3">
                                <p class="text-muted small mb-1">Создан</p>
                                <p class="fw-semibold">{{ document.created_at|date:"d.m.Y H:i" }}</p>
                            </div>
                        </div>

                        {% if document.supplier_name %}
                        <div class="mb-3">
                            <p class="text-muted small mb-1">Поставщик</p>
                            <p class="fw-semibold">{{ document.supplier_name }}</p>
                        </div>
                        {% endif %}

                        {% if document.notes %}
                        <div class="mb-3">
                            <p class="text-muted small mb-1">Примечания</p>
                            <p>{{ document.notes }}</p>
                        </div>
                        {% endif %}

                        {% if document.confirmed_at %}
                        <div class="row">
                            <div class="col-md-6">
                                <p class="text-muted small mb-1">Проведён</p>
                                <p class="fw-semibold">{{ document.confirmed_at|date:"d.m.Y H:i" }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-muted small mb-1">Провёл</p>
                                <p class="fw-semibold">{% if document.confirmed_by %}{{ document.confirmed_by.name|default:document.confirmed_by.email }}{% else %}-{% endif %}</p>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Добавление позиции -->
            {% if document.can_edit %}
            <div class="card border-0 shadow-sm mb-3">
                <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">
                    <!-- Компонент поиска товаров - компактный -->
                    <div class="mb-2">
                        {% include 'products/components/product_search_picker.html' with container_id='incoming-picker' title='Найти товар...' warehouse_id=document.warehouse.id filter_in_stock_only=False skip_stock_filter=True categories=categories tags=tags add_button_text='Выбрать' content_height='150px' %}
                    </div>

                    <!-- Информация о выбранном товаре -->
                    <div id="selected-product-info" class="alert alert-info mb-3" style="display: none;">
                        <div class="d-flex align-items-center">
                            <img id="selected-product-photo" src="" alt="" class="rounded me-2" style="width: 50px; height: 50px; object-fit: cover; display: none;">
                            <div class="flex-grow-1">
                                <strong id="selected-product-name" class="d-block"></strong>
                                <small class="text-muted" id="selected-product-sku"></small>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="clear-selected-product" title="Очистить">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Форма добавления позиции -->
                    <form method="post" action="{% url 'inventory:incoming-add-item' document.pk %}" id="add-item-form">
                        {% csrf_token %}

                        <div class="row g-3">
                            <div class="col-md-3">
                                <label for="id_product" class="form-label">Товар <span class="text-danger">*</span></label>
                                {{ item_form.product }}
                                {% if item_form.product.errors %}
                                <div class="text-danger small">{{ item_form.product.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-2">
                                <label for="id_quantity" class="form-label">Количество <span class="text-danger">*</span></label>
                                {{ item_form.quantity }}
                                {% if item_form.quantity.errors %}
                                <div class="text-danger small">{{ item_form.quantity.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-2">
                                <label for="id_cost_price" class="form-label">Закупочная цена <span class="text-danger">*</span></label>
                                {{ item_form.cost_price }}
                                {% if item_form.cost_price.errors %}
                                <div class="text-danger small">{{ item_form.cost_price.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-5">
                                <label for="id_notes" class="form-label">Примечания</label>
                                {{ item_form.notes }}
                            </div>
                        </div>

                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-1"></i>Добавить в документ
                            </button>
                            <small class="text-muted ms-3">
                                <i class="bi bi-info-circle"></i> Используйте поиск выше для быстрого выбора товара
                            </small>
                        </div>
                    </form>
                </div>
            </div>
            {% endif %}

            <!-- Таблица позиций -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light py-3">
                    <h6 class="mb-0"><i class="bi bi-table me-2"></i>Позиции документа</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" class="px-3 py-2">Товар</th>
                                    <th scope="col" class="px-3 py-2 text-end" style="width: 120px;">Количество</th>
                                    <th scope="col" class="px-3 py-2 text-end" style="width: 120px;">Закупочная цена</th>
                                    <th scope="col" class="px-3 py-2 text-end" style="width: 120px;">Сумма</th>
                                    <th scope="col" class="px-3 py-2">Примечания</th>
                                    <th scope="col" class="px-3 py-2 text-end" style="width: 120px;">Текущая цена продажи</th>
                                    {% if document.can_edit %}
                                    <th scope="col" class="px-3 py-2" style="width: 100px;"></th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in document.items.all %}
                                <tr id="item-row-{{ item.id }}" data-item-id="{{ item.id }}">
                                    <td class="px-3 py-2">
                                        <a href="{% url 'products:product-detail' item.product.id %}">{{ item.product.name }}</a>
                                    </td>
                                    <td class="px-3 py-2 text-end" style="width: 120px;">
                                        {% if document.can_edit %}
                                            <span class="editable-quantity"
                                                  data-item-id="{{ item.id }}"
                                                  data-current-value="{{ item.quantity }}"
                                                  title="Количество (клик для редактирования)"
                                                  style="cursor: pointer;">
                                                {{ item.quantity|smart_quantity }}
                                            </span>
                                            <input type="number" class="form-control form-control-sm item-quantity-input"
                                                   value="{{ item.quantity|stringformat:'g' }}" step="0.001" min="0.001"
                                                   style="display: none; width: 100px; text-align: right; margin-left: auto;">
                                        {% else %}
                                            <span>{{ item.quantity|smart_quantity }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-3 py-2 text-end" style="width: 120px;">
                                        {% if document.can_edit %}
                                            <span class="editable-cost-price"
                                                  data-item-id="{{ item.id }}"
                                                  data-current-value="{{ item.cost_price }}"
                                                  title="Закупочная цена (клик для редактирования)"
                                                  style="cursor: pointer;">
                                                {{ item.cost_price|floatformat:2 }}
                                            </span>
                                            <input type="number" class="form-control form-control-sm item-cost-price-input"
                                                   value="{{ item.cost_price|stringformat:'g' }}" step="0.01" min="0"
                                                   style="display: none; width: 100px; text-align: right; margin-left: auto;">
                                        {% else %}
                                            <span>{{ item.cost_price|floatformat:2 }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-3 py-2 text-end" style="width: 120px;">
                                        <strong>{{ item.total_cost|floatformat:2 }}</strong>
                                    </td>
                                    <td class="px-3 py-2">
                                        <span class="item-notes-display">{% if item.notes %}{{ item.notes|truncatechars:50 }}{% else %}-{% endif %}</span>
                                        {% if document.can_edit %}
                                        <input type="text" class="form-control form-control-sm item-notes-input"
                                               value="{{ item.notes }}" placeholder="Примечания"
                                               style="display: none;">
                                        {% endif %}
                                    </td>
                                    <td class="px-3 py-2 text-end" style="width: 120px;">
                                        {% if item.product.sale_price %}
                                            <div class="text-decoration-line-through text-muted small">{{ item.product.price|floatformat:2 }} руб.</div>
                                            {% if user.is_superuser or user.tenant_role.role.code == 'owner' or user.tenant_role.role.code == 'manager' %}
                                                <strong class="text-danger editable-price"
                                                        data-product-id="{{ item.product.pk }}"
                                                        data-field="sale_price"
                                                        data-current-value="{{ item.product.sale_price }}"
                                                        title="Цена со скидкой (клик для редактирования)"
                                                        style="cursor: pointer;">
                                                    {{ item.product.sale_price|floatformat:2 }} руб.
                                                </strong>
                                            {% else %}
                                                <strong class="text-danger">
                                                    {{ item.product.sale_price|floatformat:2 }} руб.
                                                </strong>
                                            {% endif %}
                                        {% else %}
                                            {% if user.is_superuser or user.tenant_role.role.code == 'owner' or user.tenant_role.role.code == 'manager' %}
                                                <strong class="editable-price"
                                                        data-product-id="{{ item.product.pk }}"
                                                        data-field="price"
                                                        data-current-value="{{ item.product.price }}"
                                                        title="Цена продажи (клик для редактирования)"
                                                        style="cursor: pointer;">
                                                    {{ item.product.price|floatformat:2 }} руб.
                                                </strong>
                                            {% else %}
                                                <strong>
                                                    {{ item.product.price|floatformat:2 }} руб.
                                                </strong>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    {% if document.can_edit %}
                                    <td class="px-3 py-2 text-end" style="width: 100px;">
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-outline-danger" 
                                                    onclick="if(confirm('Удалить позицию?')) document.getElementById('delete-form-{{ item.id }}').submit();" 
                                                    title="Удалить">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                        <form id="delete-form-{{ item.id }}" method="post" 
                                              action="{% url 'inventory:incoming-remove-item' document.pk item.pk %}" 
                                              style="display: none;">
                                            {% csrf_token %}
                                        </form>
                                    </td>
                                    {% endif %}
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="{% if document.can_edit %}7{% else %}6{% endif %}" class="px-3 py-4 text-center text-muted">
                                        <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                                        Позиций пока нет
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            {% if document.items.exists %}
                            <tfoot class="table-light">
                                <tr>
                                    <td class="px-3 py-2 fw-semibold">Итого:</td>
                                    <td class="px-3 py-2 fw-semibold text-end">{{ document.total_quantity|smart_quantity }}</td>
                                    <td colspan="3" class="px-3 py-2 fw-semibold text-end">{{ document.total_cost|floatformat:2 }}</td>
                                    <td colspan="{% if document.can_edit %}2{% else %}1{% endif %}"></td>
                                </tr>
                            </tfoot>
                            {% endif %}
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JS для компонента поиска -->
<script src="{% static 'products/js/product-search-picker.js' %}?v=3"></script>
<script src="{% static 'products/js/inline-price-edit.js' %}?v=1.5"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Элементы формы
    const productSelect = document.querySelector('#id_product');
    const quantityInput = document.querySelector('#id_quantity');
    const costPriceInput = document.querySelector('#id_cost_price');
    
    // Элементы отображения выбранного товара
    const selectedProductInfo = document.getElementById('selected-product-info');
    const selectedProductName = document.getElementById('selected-product-name');
    const selectedProductSku = document.getElementById('selected-product-sku');
    const selectedProductPhoto = document.getElementById('selected-product-photo');
    const clearSelectedBtn = document.getElementById('clear-selected-product');

    // Инициализация компонента поиска товаров
    const picker = ProductSearchPicker.init('#incoming-picker', {
        onAddSelected: function(product, instance) {
            if (product) {
                selectProduct(product);
                instance.clearSelection();
            }
        }
    });

    // Анимация для иконки сворачивания/разворачивания информации о документе
    const documentInfoCollapse = document.getElementById('document-info-collapse');
    const documentInfoCollapseIcon = document.getElementById('document-info-collapse-icon');
    
    if (documentInfoCollapse && documentInfoCollapseIcon) {
        documentInfoCollapse.addEventListener('show.bs.collapse', function() {
            documentInfoCollapseIcon.classList.remove('bi-chevron-down');
            documentInfoCollapseIcon.classList.add('bi-chevron-up');
        });
        
        documentInfoCollapse.addEventListener('hide.bs.collapse', function() {
            documentInfoCollapseIcon.classList.remove('bi-chevron-up');
            documentInfoCollapseIcon.classList.add('bi-chevron-down');
        });
    }

    // Функция выбора товара
    function selectProduct(product) {
        const productId = String(product.id).replace('product_', '');
        const productName = product.text || product.name || '';

        // Показываем информацию о выбранном товаре
        selectedProductName.textContent = productName;
        selectedProductSku.textContent = product.sku || '';

        if (product.photo_url) {
            selectedProductPhoto.src = product.photo_url;
            selectedProductPhoto.style.display = 'block';
        } else {
            selectedProductPhoto.style.display = 'none';
        }

        selectedProductInfo.style.display = 'block';

        // Устанавливаем значение в select формы
        if (productSelect) {
            // Очищаем существующие опции
            productSelect.innerHTML = '';
            
            // Создаем новую опцию для выбранного товара
            const option = document.createElement('option');
            option.value = productId;
            option.textContent = productName;
            option.selected = true;
            productSelect.appendChild(option);
            
            // Триггерим change для Select2, если он используется
            const event = new Event('change', { bubbles: true });
            productSelect.dispatchEvent(event);
        }

        // Фокус в поле количества
        if (quantityInput) {
            quantityInput.focus();
            quantityInput.select();
        }
    }

    // Функция очистки выбора товара
    function clearSelectedProduct() {
        selectedProductInfo.style.display = 'none';
        selectedProductName.textContent = '';
        selectedProductSku.textContent = '';
        selectedProductPhoto.style.display = 'none';

        if (productSelect) {
            productSelect.innerHTML = '';
            // Добавляем пустую опцию
            const emptyOption = document.createElement('option');
            emptyOption.value = '';
            emptyOption.textContent = '---------';
            emptyOption.selected = true;
            productSelect.appendChild(emptyOption);
        }
    }

    // Очистка выбора товара
    if (clearSelectedBtn) {
        clearSelectedBtn.addEventListener('click', clearSelectedProduct);
    }



    // ============================================
    // Inline редактирование количества и цены
    // ============================================

    function initInlineQuantityEdit() {
        // Проверяем, есть ли на странице редактируемые количества
        const editableQuantities = document.querySelectorAll('.editable-quantity');
        if (editableQuantities.length === 0) {
            return; // Нет элементов для редактирования
        }

        // Обработчик клика на редактируемое количество
        document.addEventListener('click', function(e) {
            const quantitySpan = e.target.closest('.editable-quantity');
            if (!quantitySpan) return;

            // Предотвращаем повторное срабатывание, если уже редактируем
            if (quantitySpan.querySelector('input')) return;

            const itemId = quantitySpan.dataset.itemId;
            const currentValue = quantitySpan.dataset.currentValue;

            // Сохраняем оригинальный HTML
            const originalHTML = quantitySpan.innerHTML;

            // Создаем input для редактирования
            const input = document.createElement('input');
            input.type = 'number';
            input.className = 'form-control form-control-sm';
            input.style.width = '100px';
            input.style.textAlign = 'right';
            input.value = parseFloat(currentValue).toFixed(3);
            input.step = '0.001';
            input.min = '0.001';
            input.placeholder = 'Количество';

            // Заменяем содержимое на input
            quantitySpan.innerHTML = '';
            quantitySpan.appendChild(input);
            input.focus();
            input.select();

            // Функция сохранения
            const saveQuantity = async () => {
                let newValue = input.value.trim();

                // Валидация
                if (!newValue || parseFloat(newValue) <= 0) {
                    alert('Количество должно быть больше нуля');
                    quantitySpan.innerHTML = originalHTML;
                    return;
                }

                // Проверяем, изменилось ли значение
                if (parseFloat(newValue) === parseFloat(currentValue)) {
                    // Значение не изменилось
                    quantitySpan.innerHTML = originalHTML;
                    return;
                }

                // Показываем загрузку
                input.disabled = true;
                input.style.opacity = '0.5';

                try {
                    // Получаем текущие значения других полей
                    const row = quantitySpan.closest('tr');
                    const costPrice = row.querySelector('.item-cost-price-input').value;
                    const notes = row.querySelector('.item-notes-input').value;

                    const response = await fetch(`/inventory/incoming-documents/{{ document.pk }}/update-item/${itemId}/`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                        },
                        body: new URLSearchParams({
                            quantity: newValue,
                            cost_price: costPrice,
                            notes: notes
                        })
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }

                    const data = await response.json();

                    if (data.success) {
                        // Обновляем отображение
                        let formattedQty = parseFloat(newValue);
                        if (formattedQty === Math.floor(formattedQty)) {
                            formattedQty = Math.floor(formattedQty).toString();
                        } else {
                            formattedQty = formattedQty.toString().replace('.', ',');
                        }
                        quantitySpan.textContent = formattedQty;
                        quantitySpan.dataset.currentValue = newValue;

                        // Пересчитываем сумму
                        const totalCost = (parseFloat(newValue) * parseFloat(costPrice)).toFixed(2);
                        row.querySelector('td:nth-child(4) strong').textContent = totalCost;

                        // Обновляем итого
                        updateTotals();
                    } else {
                        alert(data.error || 'Ошибка при обновлении количества');
                        quantitySpan.innerHTML = originalHTML;
                    }
                } catch (error) {
                    console.error('Error:', error);
                    alert('Ошибка сети при обновлении количества');
                    quantitySpan.innerHTML = originalHTML;
                }
            };

            // Функция отмены
            const cancelEdit = () => {
                quantitySpan.innerHTML = originalHTML;
            };

            // Enter - сохранить
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    saveQuantity();
                } else if (e.key === 'Escape') {
                    e.preventDefault();
                    cancelEdit();
                }
            });

            // Потеря фокуса - сохранить
            input.addEventListener('blur', function() {
                setTimeout(saveQuantity, 100);
            });
        });
    }

    function initInlineCostPriceEdit() {
        // Проверяем, есть ли на странице редактируемые цены
        const editableCostPrices = document.querySelectorAll('.editable-cost-price');
        if (editableCostPrices.length === 0) {
            return; // Нет элементов для редактирования
        }

        // Обработчик клика на редактируемую цену
        document.addEventListener('click', function(e) {
            const costPriceSpan = e.target.closest('.editable-cost-price');
            if (!costPriceSpan) return;

            // Предотвращаем повторное срабатывание, если уже редактируем
            if (costPriceSpan.querySelector('input')) return;

            const itemId = costPriceSpan.dataset.itemId;
            const currentValue = costPriceSpan.dataset.currentValue;

            // Сохраняем оригинальный HTML
            const originalHTML = costPriceSpan.innerHTML;

            // Создаем input для редактирования
            const input = document.createElement('input');
            input.type = 'number';
            input.className = 'form-control form-control-sm';
            input.style.width = '100px';
            input.style.textAlign = 'right';
            input.value = parseFloat(currentValue).toFixed(2);
            input.step = '0.01';
            input.min = '0';
            input.placeholder = 'Цена';

            // Заменяем содержимое на input
            costPriceSpan.innerHTML = '';
            costPriceSpan.appendChild(input);
            input.focus();
            input.select();

            // Функция сохранения
            const saveCostPrice = async () => {
                let newValue = input.value.trim();

                // Валидация
                if (!newValue || parseFloat(newValue) < 0) {
                    alert('Закупочная цена не может быть отрицательной');
                    costPriceSpan.innerHTML = originalHTML;
                    return;
                }

                // Проверяем, изменилось ли значение
                if (parseFloat(newValue) === parseFloat(currentValue)) {
                    // Значение не изменилось
                    costPriceSpan.innerHTML = originalHTML;
                    return;
                }

                // Показываем загрузку
                input.disabled = true;
                input.style.opacity = '0.5';

                try {
                    // Получаем текущие значения других полей
                    const row = costPriceSpan.closest('tr');
                    const quantity = row.querySelector('.item-quantity-input').value;
                    const notes = row.querySelector('.item-notes-input').value;

                    const response = await fetch(`/inventory/incoming-documents/{{ document.pk }}/update-item/${itemId}/`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                        },
                        body: new URLSearchParams({
                            quantity: quantity,
                            cost_price: newValue,
                            notes: notes
                        })
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }

                    const data = await response.json();

                    if (data.success) {
                        // Обновляем отображение
                        const formattedPrice = parseFloat(newValue).toFixed(2);
                        costPriceSpan.textContent = formattedPrice;
                        costPriceSpan.dataset.currentValue = newValue;

                        // Пересчитываем сумму
                        const totalCost = (parseFloat(quantity) * parseFloat(newValue)).toFixed(2);
                        row.querySelector('td:nth-child(4) strong').textContent = totalCost;

                        // Обновляем итого
                        updateTotals();
                    } else {
                        alert(data.error || 'Ошибка при обновлении цены');
                        costPriceSpan.innerHTML = originalHTML;
                    }
                } catch (error) {
                    console.error('Error:', error);
                    alert('Ошибка сети при обновлении цены');
                    costPriceSpan.innerHTML = originalHTML;
                }
            };

            // Функция отмены
            const cancelEdit = () => {
                costPriceSpan.innerHTML = originalHTML;
            };

            // Enter - сохранить
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    saveCostPrice();
                } else if (e.key === 'Escape') {
                    e.preventDefault();
                    cancelEdit();
                }
            });

            // Потеря фокуса - сохранить
            input.addEventListener('blur', function() {
                setTimeout(saveCostPrice, 100);
            });
        });
    }

    // Функция обновления итоговых сумм
    function updateTotals() {
        // Можно реализовать пересчет итогов, если нужно
        // Пока оставим как есть, так как сервер возвращает обновленные данные
    }

    // Инициализация inline редактирования
    initInlineQuantityEdit();
    initInlineCostPriceEdit();
});
</script>

<style>
/* Стили для редактируемых цен */
.editable-price {
    cursor: pointer;
    transition: color 0.2s ease;
}

.editable-price:hover {
    color: #0d6efd !important;
    text-decoration: underline;
}

.price-edit-container {
    min-height: 2.5rem;
}

/* Стили для редактируемого количества */
.editable-quantity {
    cursor: pointer;
    transition: color 0.2s ease;
}

.editable-quantity:hover {
    color: #0d6efd !important;
    text-decoration: underline;
}

/* Стили для редактируемой цены */
.editable-cost-price {
    cursor: pointer;
    transition: color 0.2s ease;
}

.editable-cost-price:hover {
    color: #0d6efd !important;
    text-decoration: underline;
}
</style>
{% endblock %}

