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

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

{% block extra_css %}
<style>
/* Скрываем чекбоксы DELETE в formset */
input[name*="DELETE"] {
    display: none !important;
}

/* Стили для switch */
.form-check-input.is-default-switch {
    cursor: pointer;
    width: 3rem;
    height: 1.5rem;
}

.default-switch-label {
    font-size: 0.875rem;
    margin-left: 0.5rem;
    line-height: 1.5rem;
}

/* Выравнивание switch по центру */
.col-md-2 .form-check.form-switch {
    display: flex;
    align-items: center;
    min-height: 38px;
}

/* Стили для autocomplete товаров/комплектов */
.product-kit-select-wrapper {
    flex: 1;
    min-width: 200px;
}

/* Отображение типа товара в Select2 */
.select2-results__option .item-type-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    margin-left: 0.3rem;
    border-radius: 3px;
}

.item-type-kit {
    background-color: #0d6efd;
    color: white;
}

.item-type-product {
    background-color: #198754;
    color: white;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3">
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb breadcrumb-sm mb-0">
            <li class="breadcrumb-item"><a href="{% url 'products:configurableproduct-list' %}">Вариативные товары</a></li>
            <li class="breadcrumb-item active">{% if object %}Редактирование{% else %}Создание{% endif %}</li>
        </ol>
    </nav>

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

        <div class="row">
            <!-- Основная информация -->
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Основная информация</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="{{ form.name.id_for_label }}" class="form-label">Название <span class="text-danger">*</span></label>
                            {{ form.name }}
                            {% if form.name.errors %}
                                <div class="text-danger small">{{ form.name.errors.0 }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.sku.id_for_label }}" class="form-label">Артикул</label>
                            {{ form.sku }}
                            <div class="form-text">{{ form.fields.sku.help_text }}</div>
                            {% if form.sku.errors %}
                                <div class="text-danger small">{{ form.sku.errors.0 }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.short_description.id_for_label }}" class="form-label">Краткое описание</label>
                            {{ form.short_description }}
                            {% if form.short_description.errors %}
                                <div class="text-danger small">{{ form.short_description.errors.0 }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">Полное описание</label>
                            {{ form.description }}
                            {% if form.description.errors %}
                                <div class="text-danger small">{{ form.description.errors.0 }}</div>
                            {% endif %}
                        </div>

                        <!-- Внешняя категория для интеграций -->
                        <div class="mb-3">
                            <label for="id_external_category" class="form-label">
                                Внешняя категория
                                <small class="text-muted">(для интеграций)</small>
                            </label>
                            {{ form.external_category }}
                            {% if form.external_category.help_text %}
                                <div class="form-text">{{ form.external_category.help_text }}</div>
                            {% endif %}
                            {% if form.external_category.errors %}
                                <div class="text-danger small">{{ form.external_category.errors.0 }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-0">
                            <label for="{{ form.status.id_for_label }}" class="form-label">Статус</label>
                            {{ form.status }}
                            {% if form.status.errors %}
                                <div class="text-danger small">{{ form.status.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Атрибуты родительского товара - Карточный интерфейс -->
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Параметры товара</h5>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted mb-3">
                            Определите параметры вариативного товара и их значения. Например: Длина (50, 60, 70), Упаковка (БЕЗ, В УПАКОВКЕ).
                        </p>

                        {{ attribute_formset.management_form }}

                        <!-- Данные для JavaScript -->
                        <script>
                            // Справочник атрибутов с их значениями
                            window.PRODUCT_ATTRIBUTES = [
                                {% for attr in product_attributes %}
                                    {
                                        id: {{ attr.id }},
                                        name: "{{ attr.name|escapejs }}",
                                        slug: "{{ attr.slug|escapejs }}",
                                        values: [
                                            {% for val in attr.values.all %}
                                                { id: {{ val.id }}, value: "{{ val.value|escapejs }}", slug: "{{ val.slug|escapejs }}" }{% if not forloop.last %},{% endif %}
                                            {% endfor %}
                                        ]
                                    }{% if not forloop.last %},{% endif %}
                                {% endfor %}
                            ];

                            // URL для API
                            window.API_URLS = {
                                createAttribute: "{% url 'products:api-attribute-create' %}",
                                addValue: function(attrId) { return `/products/api/attributes/${attrId}/values/add/`; },
                                searchProductsAndVariants: "{% url 'products:api-search-products-variants' %}"
                            };
                        </script>

                        {% if attribute_formset.non_form_errors %}
                            <div class="alert alert-danger">
                                {{ attribute_formset.non_form_errors }}
                            </div>
                        {% endif %}

                        <div id="attributeFormsetContainer">
                            {% for form in attribute_formset %}
                                <div class="attribute-card border rounded p-4 mb-3" style="background: #f8f9fa;" data-formset-index="{{ forloop.counter0 }}">
                                    {{ form.id }}

                                    <div class="row align-items-end g-3 mb-3">
                                        <!-- Название параметра с выбором из справочника -->
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">{{ form.name.label }}</label>
                                            <div class="input-group">
                                                <select class="form-select param-name-select"
                                                        data-name-input="id_attributes-{{ forloop.counter0 }}-name">
                                                    <option value="">-- Выберите атрибут --</option>
                                                    {% for attr in product_attributes %}
                                                        <option value="{{ attr.name }}" {% if form.name.value == attr.name %}selected{% endif %}>
                                                            {{ attr.name }} ({{ attr.values.count }} знач.)
                                                        </option>
                                                    {% endfor %}
                                                    <option value="__new__">+ Создать новый...</option>
                                                </select>
                                                <input type="hidden"
                                                       name="attributes-{{ forloop.counter0 }}-name"
                                                       id="id_attributes-{{ forloop.counter0 }}-name"
                                                       class="param-name-input"
                                                       value="{{ form.name.value|default:'' }}">
                                            </div>
                                            {% if form.name.errors %}
                                                <div class="text-danger small">{{ form.name.errors.0 }}</div>
                                            {% endif %}
                                        </div>

                                        <!-- Позиция параметра -->
                                        <div class="col-md-2">
                                            <label class="form-label small">{{ form.position.label }}</label>
                                            {{ form.position }}
                                            {% if form.position.errors %}
                                                <div class="text-danger small">{{ form.position.errors.0 }}</div>
                                            {% endif %}
                                        </div>

                                        <!-- Видимость -->
                                        <div class="col-md-3">
                                            <div class="form-check form-switch">
                                                {{ form.visible }}
                                                <label class="form-check-label" for="{{ form.visible.id_for_label }}">
                                                    {{ form.visible.label }}
                                                </label>
                                            </div>
                                            {% if form.visible.errors %}
                                                <div class="text-danger small">{{ form.visible.errors.0 }}</div>
                                            {% endif %}
                                        </div>

                                        <!-- Удалить параметр -->
                                        <div class="col-md-2 text-end">
                                            {% if attribute_formset.can_delete %}
                                                {{ form.DELETE }}
                                                <label for="{{ form.DELETE.id_for_label }}" class="btn btn-sm btn-outline-danger">
                                                    <i class="bi bi-trash"></i> Удалить
                                                </label>
                                            {% endif %}
                                        </div>
                                    </div>

                                    <!-- Значения параметра -->
                                    <div class="parameter-values-container mt-3 p-3 bg-white rounded border">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <label class="form-label small fw-semibold mb-0">Значения параметра:</label>
                                            <button type="button" class="btn btn-sm btn-outline-primary load-values-btn" title="Загрузить значения из справочника">
                                                <i class="bi bi-arrow-down-circle me-1"></i> Загрузить из справочника
                                            </button>
                                        </div>
                                        <div class="value-fields-wrapper" data-param-index="{{ forloop.counter0 }}">
                                            <!-- Значения будут добавлены через JavaScript -->
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-secondary mt-2 add-value-btn">
                                            <i class="bi bi-plus-circle me-1"></i> Добавить значение
                                        </button>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                        <button type="button" class="btn btn-sm btn-outline-primary" id="addParameterBtn">
                            <i class="bi bi-plus-circle me-1"></i> Добавить параметр
                        </button>
                    </div>
                </div>

                <!-- Management form для option_formset (скрыт) -->
                {{ option_formset.management_form }}

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle me-1"></i>Сохранить
                    </button>
                    <a href="{% if object %}{% url 'products:configurableproduct-detail' object.pk %}{% else %}{% url 'products:configurableproduct-list' %}{% endif %}" 
                       class="btn btn-secondary">
                        <i class="bi bi-x-circle me-1"></i>Отмена
                    </a>
                </div>
            </div>

            <!-- Боковая панель -->
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white">
                        <h6 class="mb-0">Справка</h6>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted">
                            Вариативный товар объединяет несколько комплектов как варианты для экспорта на WooCommerce и подобные площадки.
                        </p>
                        <p class="small text-muted">
                            Каждый вариант — это отдельный ProductKit с собственной ценой, артикулом и атрибутами.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Переиспользуемый модуль для Select2 поиска товаров -->
<script src="{% static 'products/js/select2-product-search.js' %}"></script>

<script>
// === Управление параметрами товара (карточный интерфейс) ===

// Функция для добавления нового поля значения параметра с выбором Product/Kit через Select2
function addValueField(container, valueText = '', itemId = '', itemType = '') {
    const index = container.querySelectorAll('.value-field-group').length;
    const fieldId = `value-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
    const selectId = `product-kit-select-${fieldId}`;

    const html = `
        <div class="value-field-group d-flex gap-2 mb-2 align-items-start">
            <input type="text" class="form-control form-control-sm parameter-value-input"
                   placeholder="Введите значение"
                   value="${escapeHtml(valueText)}"
                   data-field-id="${fieldId}"
                   style="flex: 0 0 150px;">
            <select class="form-select form-select-sm product-kit-select"
                    id="${selectId}"
                    data-field-id="${fieldId}"
                    data-ajax-url="${window.API_URLS.searchProductsAndVariants}"
                    style="flex: 1; min-width: 200px;">
                <option value=""></option>
            </select>
            <button type="button" class="btn btn-sm btn-outline-danger remove-value-btn" title="Удалить значение">
                <i class="bi bi-trash"></i>
            </button>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', html);

    // Инициализируем Select2 для нового поля
    const newSelect = document.getElementById(selectId);
    if (newSelect) {
        // Если есть предзагруженные данные, добавляем option
        if (itemId && itemType) {
            const optionValue = `${itemType}_${itemId}`;
            const option = document.createElement('option');
            option.value = optionValue;
            option.selected = true;
            option.setAttribute('data-type', itemType);
            // Текст будет установлен через Select2
            newSelect.appendChild(option);
        }

        // Инициализируем Select2 с AJAX поиском
        window.initProductSelect2(newSelect, 'all', window.API_URLS.searchProductsAndVariants);
    }

    // Обработчик удаления значения
    const lastRemoveBtn = container.querySelector('.value-field-group:last-child .remove-value-btn');
    if (lastRemoveBtn) {
        lastRemoveBtn.addEventListener('click', function(e) {
            e.preventDefault();
            // Уничтожаем Select2 перед удалением элемента
            const select = this.closest('.value-field-group').querySelector('.product-kit-select');
            if (select && $(select).data('select2')) {
                $(select).select2('destroy');
            }
            this.closest('.value-field-group').remove();
        });
    }
}

// Экранирование HTML
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Найти атрибут в справочнике по имени
function findAttributeByName(name) {
    const attributes = window.PRODUCT_ATTRIBUTES || [];
    return attributes.find(attr => attr.name.toLowerCase() === name.toLowerCase());
}

// Инициализация существующих параметров с их значениями из БД
function initializeParameterCards() {
    document.querySelectorAll('.attribute-card').forEach(card => {
        initCardHandlers(card);
    });
}

// Инициализация всех обработчиков для карточки
function initCardHandlers(card) {
    initAddValueBtn(card);
    initLoadValuesBtn(card);
    initAttributeSelect(card);
    initParamDeleteToggle(card);
}

// Получить HTML опций для select атрибутов
function getAttributeOptionsHtml(selectedName = '') {
    const attributes = window.PRODUCT_ATTRIBUTES || [];
    let html = '<option value="">-- Выберите атрибут --</option>';
    attributes.forEach(attr => {
        const selected = attr.name === selectedName ? 'selected' : '';
        html += `<option value="${escapeHtml(attr.name)}" ${selected}>${escapeHtml(attr.name)} (${attr.values.length} знач.)</option>`;
    });
    html += '<option value="__new__">+ Создать новый...</option>';
    return html;
}

// Инициализация select выбора атрибута
function initAttributeSelect(card) {
    const select = card.querySelector('.param-name-select');
    if (select && !select.dataset.initialized) {
        select.dataset.initialized = 'true';
        select.addEventListener('change', function() {
            const hiddenInput = card.querySelector('.param-name-input');
            const value = this.value;

            if (value === '__new__') {
                // Открываем модальное окно для создания нового атрибута
                openCreateAttributeModal('', card);
                // Сбрасываем select
                this.value = '';
            } else {
                // Устанавливаем значение в скрытое поле
                if (hiddenInput) {
                    hiddenInput.value = value;
                }

                // Если выбран атрибут из справочника - предлагаем загрузить значения
                if (value) {
                    const attribute = findAttributeByName(value);
                    if (attribute && attribute.values.length > 0) {
                        const container = card.querySelector('.value-fields-wrapper');
                        const existingValues = container.querySelectorAll('.value-field-group');

                        if (existingValues.length === 0) {
                            // Автоматически загружаем значения если их ещё нет
                            attribute.values.forEach(val => {
                                addValueField(container, val.value, '');
                            });
                            showToast(`Загружено ${attribute.values.length} значений для "${value}"`, 'success');
                        }
                    }
                }
            }
        });
    }
}

// Инициализация кнопки добавления значения
function initAddValueBtn(card) {
    const addBtn = card.querySelector('.add-value-btn');
    if (addBtn && !addBtn.dataset.initialized) {
        addBtn.dataset.initialized = 'true';
        addBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const container = this.closest('.parameter-values-container').querySelector('.value-fields-wrapper');
            addValueField(container);
        });
    }
}

// Инициализация кнопки загрузки значений из справочника
function initLoadValuesBtn(card) {
    const loadBtn = card.querySelector('.load-values-btn');
    if (loadBtn && !loadBtn.dataset.initialized) {
        loadBtn.dataset.initialized = 'true';
        loadBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const nameInput = card.querySelector('.param-name-input');
            const attrName = nameInput ? nameInput.value.trim() : '';

            if (!attrName) {
                showToast('Сначала введите или выберите название параметра', 'warning');
                return;
            }

            const attribute = findAttributeByName(attrName);
            if (!attribute) {
                showToast(`Атрибут "${attrName}" не найден в справочнике. Создайте его или добавьте значения вручную.`, 'warning');
                return;
            }

            if (attribute.values.length === 0) {
                showToast(`У атрибута "${attrName}" нет значений в справочнике`, 'info');
                return;
            }

            // Загружаем значения из справочника
            const container = card.querySelector('.value-fields-wrapper');

            // Спрашиваем пользователя, если уже есть значения
            const existingValues = container.querySelectorAll('.value-field-group');
            if (existingValues.length > 0) {
                if (!confirm('Уже есть добавленные значения. Добавить значения из справочника дополнительно?')) {
                    return;
                }
            }

            // Добавляем значения
            attribute.values.forEach(val => {
                addValueField(container, val.value, '');
            });

            showToast(`Загружено ${attribute.values.length} значений из справочника`, 'success');
        });
    }
}

// Открыть модальное окно создания атрибута
function openCreateAttributeModal(attrName, card) {
    // Получаем или создаем модальное окно
    let modal = document.getElementById('createAttributeModal');
    if (!modal) {
        createAttributeModal();
        modal = document.getElementById('createAttributeModal');
    }

    // Заполняем название
    const nameInput = modal.querySelector('#newAttributeName');
    nameInput.value = attrName;

    // Очищаем значения
    const valuesContainer = modal.querySelector('#newAttributeValues');
    valuesContainer.innerHTML = '';
    addNewAttributeValueField(valuesContainer);

    // Сохраняем ссылку на карточку
    modal.dataset.targetCardIndex = card.dataset.formsetIndex;

    // Показываем модальное окно
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
}

// Создать модальное окно для создания атрибута
function createAttributeModal() {
    const modalHtml = `
        <div class="modal fade" id="createAttributeModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Создать новый атрибут</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Название атрибута</label>
                            <input type="text" class="form-control" id="newAttributeName" placeholder="Например: Длина стебля">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Значения атрибута <small class="text-muted">(опционально)</small></label>
                            <div id="newAttributeValues"></div>
                            <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="addNewAttributeValueBtn">
                                <i class="bi bi-plus-circle me-1"></i> Добавить значение
                            </button>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                        <button type="button" class="btn btn-primary" id="saveNewAttributeBtn">
                            <i class="bi bi-check-circle me-1"></i> Создать
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);

    // Инициализируем обработчики
    const modal = document.getElementById('createAttributeModal');

    document.getElementById('addNewAttributeValueBtn').addEventListener('click', function() {
        const container = document.getElementById('newAttributeValues');
        addNewAttributeValueField(container);
    });

    document.getElementById('saveNewAttributeBtn').addEventListener('click', async function() {
        await saveNewAttribute();
    });
}

// Добавить поле значения в модальном окне
function addNewAttributeValueField(container) {
    const html = `
        <div class="input-group mb-2 new-value-field">
            <input type="text" class="form-control" placeholder="Значение">
            <button type="button" class="btn btn-outline-danger remove-new-value-btn">
                <i class="bi bi-trash"></i>
            </button>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);

    const lastRemoveBtn = container.querySelector('.new-value-field:last-child .remove-new-value-btn');
    lastRemoveBtn.addEventListener('click', function() {
        this.closest('.new-value-field').remove();
    });
}

// Сохранить новый атрибут через API
async function saveNewAttribute() {
    const modal = document.getElementById('createAttributeModal');
    const name = document.getElementById('newAttributeName').value.trim();

    if (!name) {
        showToast('Введите название атрибута', 'warning');
        return;
    }

    const saveBtn = document.getElementById('saveNewAttributeBtn');
    saveBtn.disabled = true;
    saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Сохранение...';

    try {
        // Создаем атрибут
        const csrfToken = document.querySelector('[name="csrfmiddlewaretoken"]').value;

        const response = await fetch(window.API_URLS.createAttribute, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ name: name })
        });

        const data = await response.json();

        if (!data.success) {
            throw new Error(data.error || 'Ошибка создания атрибута');
        }

        const newAttr = {
            id: data.id,
            name: data.name,
            slug: data.slug,
            values: []
        };

        // Добавляем значения если они есть
        const valueInputs = document.querySelectorAll('#newAttributeValues .new-value-field input');
        for (const input of valueInputs) {
            const value = input.value.trim();
            if (value) {
                const valResponse = await fetch(window.API_URLS.addValue(data.id), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify({ value: value })
                });
                const valData = await valResponse.json();
                if (valData.success) {
                    newAttr.values.push({
                        id: valData.id,
                        value: valData.value,
                        slug: valData.slug
                    });
                }
            }
        }

        // Добавляем в локальный справочник
        window.PRODUCT_ATTRIBUTES.push(newAttr);

        // Обновляем все select'ы атрибутов
        updateAttributeSelects();

        // Закрываем модальное окно
        const bsModal = bootstrap.Modal.getInstance(modal);
        bsModal.hide();

        showToast(`Атрибут "${name}" успешно создан!`, 'success');

        // Если есть целевая карточка, обновляем её
        const cardIndex = modal.dataset.targetCardIndex;
        if (cardIndex !== undefined) {
            const card = document.querySelector(`[data-formset-index="${cardIndex}"]`);
            if (card) {
                // Устанавливаем новый атрибут в select
                const select = card.querySelector('.param-name-select');
                const hiddenInput = card.querySelector('.param-name-input');
                if (select) {
                    select.value = newAttr.name;
                }
                if (hiddenInput) {
                    hiddenInput.value = newAttr.name;
                }

                // Загружаем значения если есть
                if (newAttr.values.length > 0) {
                    const container = card.querySelector('.value-fields-wrapper');
                    newAttr.values.forEach(val => {
                        addValueField(container, val.value, '');
                    });
                }
            }
        }

    } catch (error) {
        showToast(error.message, 'danger');
    } finally {
        saveBtn.disabled = false;
        saveBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i> Создать';
    }
}

// Обновить все select'ы атрибутов после добавления нового
function updateAttributeSelects() {
    document.querySelectorAll('.param-name-select').forEach(select => {
        const currentValue = select.value;
        select.innerHTML = getAttributeOptionsHtml(currentValue);
    });
}

// Добавление нового параметра
document.getElementById('addParameterBtn')?.addEventListener('click', function() {
    const container = document.getElementById('attributeFormsetContainer');
    const totalForms = document.querySelector('[name="attributes-TOTAL_FORMS"]');
    const formIdx = parseInt(totalForms.value);

    const newCardHtml = `
        <div class="attribute-card border rounded p-4 mb-3" style="background: #f8f9fa;" data-formset-index="${formIdx}">
            <input type="hidden" name="attributes-${formIdx}-id">

            <div class="row align-items-end g-3 mb-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Название параметра</label>
                    <div class="input-group">
                        <select class="form-select param-name-select"
                                data-name-input="id_attributes-${formIdx}-name">
                            ${getAttributeOptionsHtml()}
                        </select>
                        <input type="hidden"
                               name="attributes-${formIdx}-name"
                               id="id_attributes-${formIdx}-name"
                               class="param-name-input"
                               value="">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Порядок</label>
                    <input type="number" name="attributes-${formIdx}-position"
                           id="id_attributes-${formIdx}-position"
                           class="form-control param-position-input"
                           min="0" value="${formIdx}">
                </div>
                <div class="col-md-3">
                    <div class="form-check form-switch">
                        <input type="checkbox" name="attributes-${formIdx}-visible"
                               id="id_attributes-${formIdx}-visible"
                               class="form-check-input param-visible-input"
                               checked>
                        <label class="form-check-label" for="id_attributes-${formIdx}-visible">
                            Видимый на витрине
                        </label>
                    </div>
                </div>
                <div class="col-md-2 text-end">
                    <input type="checkbox" name="attributes-${formIdx}-DELETE"
                           id="id_attributes-${formIdx}-DELETE"
                           style="display:none;">
                    <label for="id_attributes-${formIdx}-DELETE" class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-trash"></i> Удалить
                    </label>
                </div>
            </div>

            <div class="parameter-values-container mt-3 p-3 bg-white rounded border">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label small fw-semibold mb-0">Значения параметра:</label>
                    <button type="button" class="btn btn-sm btn-outline-primary load-values-btn" title="Загрузить значения из справочника">
                        <i class="bi bi-arrow-down-circle me-1"></i> Загрузить из справочника
                    </button>
                </div>
                <div class="value-fields-wrapper" data-param-index="${formIdx}">
                    <!-- Значения добавляются сюда -->
                </div>
                <button type="button" class="btn btn-sm btn-outline-secondary mt-2 add-value-btn">
                    <i class="bi bi-plus-circle me-1"></i> Добавить значение
                </button>
            </div>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', newCardHtml);
    totalForms.value = formIdx + 1;

    // Инициализируем новую карточку
    const newCard = container.querySelector(`[data-formset-index="${formIdx}"]`);
    initCardHandlers(newCard);

    // Фокус на select
    newCard.querySelector('.param-name-select')?.focus();
});

// Функция для скрытия удаленного параметра
function initParamDeleteToggle(card) {
    const deleteCheckbox = card.querySelector('input[type="checkbox"][name$="-DELETE"]');
    if (deleteCheckbox && !deleteCheckbox.dataset.initialized) {
        deleteCheckbox.dataset.initialized = 'true';
        deleteCheckbox.addEventListener('change', function() {
            if (this.checked) {
                card.style.opacity = '0.5';
                card.style.textDecoration = 'line-through';
            } else {
                card.style.opacity = '1';
                card.style.textDecoration = 'none';
            }
        });
    }
}

// Функция для сериализации значений параметров и их товаров/комплектов перед отправкой формы
function serializeAttributeValues() {
    document.querySelectorAll('.attribute-card').forEach((card, idx) => {
        const valueGroups = card.querySelectorAll('.value-field-group');
        const values = [];
        const itemIds = [];
        const itemTypes = [];

        valueGroups.forEach(group => {
            const valueInput = group.querySelector('.parameter-value-input');
            const itemSelect = group.querySelector('.product-kit-select');

            if (valueInput && itemSelect) {
                const value = valueInput.value.trim();
                const selectedValue = itemSelect.value; // Формат: "product_123" или "kit_456"

                if (value && selectedValue) {
                    const parts = selectedValue.split('_');
                    if (parts.length === 2) {
                        const type = parts[0]; // 'product' или 'kit'
                        const id = parts[1];

                        values.push(value);
                        itemIds.push(parseInt(id));
                        itemTypes.push(type);
                    }
                }
            }
        });

        // Создаем или обновляем скрытые поля JSON
        const valuesFieldName = `attributes-${idx}-values`;
        let valuesField = document.querySelector(`input[name="${valuesFieldName}"]`);
        if (!valuesField) {
            valuesField = document.createElement('input');
            valuesField.type = 'hidden';
            valuesField.name = valuesFieldName;
            card.appendChild(valuesField);
        }
        valuesField.value = JSON.stringify(values);

        const itemIdsFieldName = `attributes-${idx}-item_ids`;
        let itemIdsField = document.querySelector(`input[name="${itemIdsFieldName}"]`);
        if (!itemIdsField) {
            itemIdsField = document.createElement('input');
            itemIdsField.type = 'hidden';
            itemIdsField.name = itemIdsFieldName;
            card.appendChild(itemIdsField);
        }
        itemIdsField.value = JSON.stringify(itemIds);

        const itemTypesFieldName = `attributes-${idx}-item_types`;
        let itemTypesField = document.querySelector(`input[name="${itemTypesFieldName}"]`);
        if (!itemTypesField) {
            itemTypesField = document.createElement('input');
            itemTypesField.type = 'hidden';
            itemTypesField.name = itemTypesFieldName;
            card.appendChild(itemTypesField);
        }
        itemTypesField.value = JSON.stringify(itemTypes);
    });
}

// Toast уведомления
function showToast(message, type = 'info') {
    // Создаем контейнер если его нет
    let container = document.getElementById('toastContainer');
    if (!container) {
        container = document.createElement('div');
        container.id = 'toastContainer';
        container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
        container.style.zIndex = '1100';
        document.body.appendChild(container);
    }

    const bgClass = {
        'success': 'bg-success',
        'danger': 'bg-danger',
        'warning': 'bg-warning',
        'info': 'bg-info'
    }[type] || 'bg-info';

    const textClass = type === 'warning' ? 'text-dark' : 'text-white';

    const toastHtml = `
        <div class="toast ${bgClass} ${textClass}" role="alert">
            <div class="d-flex">
                <div class="toast-body">${escapeHtml(message)}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', toastHtml);
    const toastEl = container.lastElementChild;
    const toast = new bootstrap.Toast(toastEl, { delay: 4000 });
    toast.show();

    toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
    initializeParameterCards();

    // Добавляем сериализацию значений перед отправкой формы
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            serializeAttributeValues();
        });
    }
});
</script>
{% endblock %}
