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

{% block title %}{% if is_create %}Создать группу вариантов{% else %}Редактировать группу вариантов{% endif %}{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3" style="max-width: 1200px;">
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb breadcrumb-sm mb-0">
            <li class="breadcrumb-item"><a href="{% url 'products:variantgroup-list' %}">Группы вариантов</a></li>
            <li class="breadcrumb-item active">{% if is_create %}Новая{% else %}Редактирование{% endif %}</li>
        </ol>
    </nav>

    {% if form.non_field_errors or items_formset.non_form_errors %}
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {% for error in form.non_field_errors %}{{ error }}{% endfor %}
            {% for error in items_formset.non_form_errors %}{{ error }}{% endfor %}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endif %}

    <form method="post">
        {% csrf_token %}

        <!-- Основная информация о группе -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-3">
                <h5 class="card-title mb-3">Информация о группе</h5>

                <div class="mb-3">
                    <label for="{{ form.name.id_for_label }}" class="form-label">{{ form.name.label }}</label>
                    {{ form.name }}
                    {% if form.name.errors %}
                        <div class="text-danger small mt-1">{{ form.name.errors }}</div>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <label for="{{ form.description.id_for_label }}" class="form-label">{{ form.description.label }}</label>
                    {{ form.description }}
                    {% if form.description.errors %}
                        <div class="text-danger small mt-1">{{ form.description.errors }}</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Товары в группе -->
        <div class="card border-0 shadow-sm">
            <div class="card-body p-3">
                <h5 class="card-title mb-3">Товары в группе (в порядке приоритета)</h5>

                        {{ items_formset.management_form }}

                        <div id="items-container" class="table-responsive">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 40px; text-align: center;">№</th>
                                        <th>Товар</th>
                                        <th style="width: 110px;">Артикул</th>
                                        <th style="width: 100px;">Цена</th>
                                        <th style="width: 110px;">В наличии</th>
                                        <th style="width: 150px; text-align: right;">Действия</th>
                                    </tr>
                                </thead>
                                <tbody id="items-tbody">
                                    {% for item_form in items_formset %}
                                        <tr class="item-row" data-form-index="{{ forloop.counter0 }}"{% if item_form.DELETE.value %} style="display: none;"{% endif %}>
                                            <!-- Приоритет (номер) -->
                                            <td class="item-priority text-center fw-bold align-middle">{{ forloop.counter }}</td>

                                            <!-- Выбор товара -->
                                            <td class="align-middle">
                                                {{ item_form.product }}
                                                {% if item_form.product.errors %}
                                                    <div class="text-danger small">{{ item_form.product.errors }}</div>
                                                {% endif %}
                                            </td>

                                            <!-- Артикул -->
                                            <td class="align-middle">
                                                <small class="text-muted" data-product-sku="-">-</small>
                                            </td>

                                            <!-- Цена -->
                                            <td class="align-middle">
                                                <small class="text-muted" data-product-price="-">-</small>
                                            </td>

                                            <!-- Статус наличия -->
                                            <td class="align-middle">
                                                <small class="text-muted" data-product-stock="-">-</small>
                                            </td>

                                            <!-- Действия (стрелки + корзина) -->
                                            <td class="align-middle" style="padding-right: 8px;">
                                                <div class="btn-group btn-group-sm gap-1" role="group">
                                                    <button type="button" class="btn btn-outline-secondary move-up-btn" title="Переместить вверх">
                                                        <i class="bi bi-arrow-up"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary move-down-btn" title="Переместить вниз">
                                                        <i class="bi bi-arrow-down"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-danger delete-btn" title="Удалить товар">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </div>
                                                {{ item_form.priority }}
                                                {{ item_form.id }}
                                                {{ item_form.DELETE }}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- Кнопка для добавления товара -->
                        <div class="mt-3 pt-3 border-top">
                            <button type="button" class="btn btn-sm btn-outline-success w-100" id="add-item-btn">
                                <i class="bi bi-plus-circle me-1"></i>Добавить товар
                            </button>
                        </div>
                    </div>
                </div>

        <!-- Sticky Footer -->
        <div class="sticky-bottom bg-white border-top mt-4 p-3 d-flex justify-content-between align-items-center shadow-sm">
            <a href="{% url 'products:variantgroup-list' %}" class="btn btn-outline-secondary">Отмена</a>
            <button type="submit" class="btn btn-success px-4">
                <i class="bi bi-check-circle me-1"></i>{% if is_create %}Создать{% else %}Сохранить{% endif %}
            </button>
        </div>
    </form>
</div>

<style>
/* Таблица товаров в группе */
.table {
    margin-bottom: 0;
}

/* Строки таблицы */
.item-row {
    position: relative;
}

.item-row td {
    padding: 4px 6px !important;
    vertical-align: middle;
}

/* Select2 контейнеры в таблице */
.item-row .select2-container {
    width: 100% !important;
    display: block !important;
}

.item-row .select2-container .select2-selection {
    border-radius: 4px !important;
    border: 1px solid #dee2e6 !important;
}

/* Ограничить dropdown список от растягивания */
.select2-container--open .select2-dropdown {
    max-height: 300px !important;
}

.select2-results__option {
    padding: 8px !important;
    line-height: 1.4 !important;
}

/* Стили для кнопок навигации */
.item-row .btn-outline-secondary {
    opacity: 0.6;
}

.item-row .btn-outline-secondary:hover {
    opacity: 1;
}

/* Скрыть поля priority и DELETE */
[name$="-priority"], [name$="-DELETE"], [name$="-id"] {
    display: none !important;
}

/* Sticky footer */
.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 100;
}

/* Данные товара (артикул, цена, наличие) */
[data-product-sku],
[data-product-price],
[data-product-stock] {
    display: block;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<!-- Инициализация Select2 для поиска товаров -->
{% include 'products/includes/select2-product-init.html' %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('items-tbody');
    const totalFormsInput = document.querySelector('[name$="TOTAL_FORMS"]');
    const apiUrl = '{% url "products:api-search-products-variants" %}';

    // Валидация
    if (!container) {
        console.error('items-tbody container not found');
        return;
    }

    if (!totalFormsInput) {
        console.error('TOTAL_FORMS input not found');
        return;
    }

    if (!apiUrl || apiUrl.includes('undefined')) {
        console.error('Invalid API URL:', apiUrl);
        return;
    }

    console.log('Initializing variant group form with API URL:', apiUrl);

    // Инициализируем Select2 для всех селектов товаров
    function initSelect2ForRow(row) {
        if (!row) {
            console.error('initSelect2ForRow: row is null');
            return false;
        }

        const productSelect = row.querySelector('[name$="-product"]');
        if (!productSelect) {
            console.warn('initSelect2ForRow: product select not found in row');
            return false;
        }

        // Убираем старые обработчики перед повторной инициализацией
        $(productSelect).off('select2:select');

        const success = window.initProductSelect2(productSelect, 'product', apiUrl);

        if (success) {
            // Обработчик события при выборе товара
            $(productSelect).on('select2:select', function(e) {
                // Извлекаем числовой ID из формата "product_123"
                let selectedValue = e.params.data.id;
                if (typeof selectedValue === 'string' && selectedValue.startsWith('product_')) {
                    selectedValue = selectedValue.replace('product_', '');

                    // Создаем новую опцию с правильным ID
                    const selectedOption = $(this).find('option[value="' + e.params.data.id + '"]');
                    if (selectedOption.length > 0) {
                        // Обновляем существующую опцию
                        selectedOption.val(selectedValue);
                        // Устанавливаем новое значение
                        $(this).val(selectedValue);
                    }
                }
                updateRowData(row);
            });
            return true;
        } else {
            console.error('initSelect2ForRow: failed to initialize Select2');
            return false;
        }
    }

    // Функция для обновления данных строки при выборе товара
    function updateRowData(row) {
        if (!row) return;

        const productSelect = row.querySelector('[name$="-product"]');
        if (!productSelect || !productSelect.value) {
            // Сброс данных
            row.querySelector('[data-product-sku]').textContent = '-';
            row.querySelector('[data-product-price]').textContent = '-';
            row.querySelector('[data-product-stock]').innerHTML = '-';
            return;
        }

        // Находим selected option для получения данных
        const selectedOption = productSelect.options[productSelect.selectedIndex];
        const text = selectedOption.text;

        // Пытаемся извлечь SKU из текста опции (формат: "Name (SKU)")
        const skuMatch = text.match(/\(([^)]+)\)$/);
        const sku = skuMatch ? skuMatch[1] : '-';

        // Получаем цену и статус через AJAX (используем числовой ID)
        const numericId = productSelect.value;

        // Добавляем timeout для fetch
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 5000);

        fetch(`${apiUrl}?id=${numericId}`, { signal: controller.signal })
            .then(response => {
                clearTimeout(timeoutId);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.results && data.results.length > 0) {
                    const product = data.results[0];
                    row.querySelector('[data-product-sku]').textContent = product.sku || sku;

                    const price = product.price || product.actual_price || '0';
                    row.querySelector('[data-product-price]').innerHTML = `<strong>${price}</strong> руб.`;

                    // Отображаем статус наличия
                    const stockCell = row.querySelector('[data-product-stock]');
                    if (product.in_stock) {
                        stockCell.innerHTML = '<span class="badge bg-success"><i class="bi bi-check-circle"></i> Да</span>';
                    } else {
                        stockCell.innerHTML = '<span class="badge bg-danger"><i class="bi bi-x-circle"></i> Нет</span>';
                    }
                } else {
                    // Fallback: используем данные из опции
                    row.querySelector('[data-product-sku]').textContent = sku;
                    row.querySelector('[data-product-price]').textContent = '-';
                    row.querySelector('[data-product-stock]').textContent = '-';
                }
            })
            .catch(error => {
                clearTimeout(timeoutId);
                console.error('updateRowData: fetch error', error);
                // Fallback: данные из опции
                row.querySelector('[data-product-sku]').textContent = sku;
                row.querySelector('[data-product-price]').textContent = '-';
                row.querySelector('[data-product-stock]').textContent = '-';
            });
    }

    // Инициализируем для существующих строк с небольшой задержкой
    setTimeout(function() {
        container.querySelectorAll('.item-row').forEach(row => {
            const success = initSelect2ForRow(row);
            if (success) {
                // Загружаем данные только если Select2 инициализирован
                setTimeout(() => updateRowData(row), 200);
            }
        });
    }, 100);

    // ДОБАВЛЕНИЕ НОВОГО ТОВАРА
    document.getElementById('add-item-btn').addEventListener('click', function(e) {
        e.preventDefault();

        const totalForms = totalFormsInput.value;
        const newFormIndex = parseInt(totalForms);

        // Создаем новую строку
        const newRow = document.createElement('tr');
        newRow.className = 'item-row';
        newRow.innerHTML = `
            <td class="item-priority text-center fw-bold align-middle">${newFormIndex + 1}</td>
            <td class="align-middle">
                <select name="items-${newFormIndex}-product" id="items-${newFormIndex}-product" class="form-control form-control-sm">
                    <option value="">---------</option>
                </select>
            </td>
            <td class="align-middle">
                <small class="text-muted" data-product-sku="-">-</small>
            </td>
            <td class="align-middle">
                <small class="text-muted" data-product-price="-">-</small>
            </td>
            <td class="align-middle">
                <small class="text-muted" data-product-stock="-">-</small>
            </td>
            <td class="align-middle" style="padding-right: 8px;">
                <div class="btn-group btn-group-sm gap-1" role="group">
                    <button type="button" class="btn btn-outline-secondary move-up-btn" title="Переместить вверх">
                        <i class="bi bi-arrow-up"></i>
                    </button>
                    <button type="button" class="btn btn-outline-secondary move-down-btn" title="Переместить вниз">
                        <i class="bi bi-arrow-down"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger delete-btn" title="Удалить товар">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
                <input type="hidden" name="items-${newFormIndex}-priority" value="${newFormIndex + 1}">
                <input type="hidden" name="items-${newFormIndex}-id" value="">
                <input type="checkbox" name="items-${newFormIndex}-DELETE">
            </td>
        `;

        container.appendChild(newRow);

        // Увеличиваем счетчик форм
        totalFormsInput.value = newFormIndex + 1;

        // Даем время браузеру отрисовать элемент перед инициализацией Select2
        setTimeout(function() {
            const success = initSelect2ForRow(newRow);
            if (!success) {
                console.error('Failed to initialize Select2 for new row, retrying...');
                // Повторная попытка через 500ms
                setTimeout(function() {
                    initSelect2ForRow(newRow);
                }, 500);
            }
        }, 50);

        // Обновляем приоритеты
        updatePriorities();

        // Скролим к новой форме
        newRow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    });

    // UP/DOWN функции для локального перемещения
    function moveItemUp(btn) {
        const row = btn.closest('.item-row');
        const prevRow = row.previousElementSibling;
        if (prevRow && prevRow.classList.contains('item-row')) {
            row.parentNode.insertBefore(row, prevRow);
            updatePriorities();
        }
    }

    function moveItemDown(btn) {
        const row = btn.closest('.item-row');
        const nextRow = row.nextElementSibling;
        if (nextRow && nextRow.classList.contains('item-row')) {
            row.parentNode.insertBefore(nextRow, row);
            updatePriorities();
        }
    }

    function deleteItem(btn) {
        const row = btn.closest('.item-row');
        const deleteCheckbox = row.querySelector('[name$="-DELETE"]');
        if (deleteCheckbox) {
            deleteCheckbox.checked = true;
            row.style.display = 'none';
            updatePriorities();
        }
    }

    function updatePriorities() {
        let priority = 1;
        container.querySelectorAll('.item-row:not([style*="display: none"])').forEach(row => {
            const priorityCell = row.querySelector('.item-priority');
            const priorityInput = row.querySelector('input[name$="-priority"]');

            if (priorityCell) {
                priorityCell.textContent = priority;
            }

            if (priorityInput) {
                priorityInput.value = priority;
                console.log(`Обновлено поле приоритета: ${priorityInput.name} = ${priority}`);
            }

            priority++;
        });
    }

    // Обработчики событий
    container.addEventListener('click', function(e) {
        if (e.target.closest('.move-up-btn')) {
            e.preventDefault();
            moveItemUp(e.target.closest('.move-up-btn'));
        }
        if (e.target.closest('.move-down-btn')) {
            e.preventDefault();
            moveItemDown(e.target.closest('.move-down-btn'));
        }
        if (e.target.closest('.delete-btn')) {
            e.preventDefault();
            deleteItem(e.target.closest('.delete-btn'));
        }
    });

    // Инициализация при загрузке
    updatePriorities();
});
</script>
{% endblock %}
