{% extends 'base.html' %}

{% block title %}Создать комплект{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3" style="max-width: 1400px;">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb" class="mb-2">
        <ol class="breadcrumb breadcrumb-sm mb-0">
            <li class="breadcrumb-item"><a href="{% url 'products:products-list' %}">Комплекты</a></li>
            <li class="breadcrumb-item active">Новый</li>
        </ol>
    </nav>

    <!-- Errors -->
    {% if form.non_field_errors or kititem_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 kititem_formset.non_form_errors %}{{ error }}{% endfor %}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endif %}

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}

        <div class="row g-3">
            <!-- ЛЕВАЯ КОЛОНКА: Основная информация -->
            <div class="col-lg-8">
                <!-- Название -->
                <div class="mb-3">
                    {{ 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 small text-muted mb-1">
                        <i class="bi bi-text-paragraph"></i> Описание комплекта
                    </label>
                    {{ form.description }}
                    {% if form.description.errors %}
                    <div class="text-danger small mt-1">{{ form.description.errors }}</div>
                    {% endif %}
                </div>

                <!-- Краткое описание -->
                <div class="mb-3">
                    <label for="{{ form.short_description.id_for_label }}" class="form-label small text-muted mb-1">
                        <i class="bi bi-lightning"></i> Краткое описание
                    </label>
                    {{ form.short_description }}
                    <small class="form-text text-muted">Используется для карточек комплектов, превью и площадок</small>
                    {% if form.short_description.errors %}
                    <div class="text-danger small mt-1">{{ form.short_description.errors }}</div>
                    {% endif %}
                </div>

                <!-- КОМПОНЕНТЫ КОМПЛЕКТА -->
                {% include 'products/includes/kititem_formset.html' %}

                <!-- ФОТОГРАФИИ -->
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body p-3">
                        <h6 class="mb-2 text-muted"><i class="bi bi-images me-1"></i>Фотографии</h6>

                        <!-- Загрузка по URL -->
                        <div class="input-group input-group-sm mb-2">
                            <input type="url" id="photoUrlInput" class="form-control"
                                placeholder="Вставьте ссылку на изображение (https://...)">
                            <button type="button" id="addPhotoByUrlBtn" class="btn btn-outline-secondary">
                                <i class="bi bi-download"></i> Загрузить
                            </button>
                        </div>

                        <!-- Загрузка с устройства -->
                        <input type="file" name="photos" accept="image/*" multiple class="form-control form-control-sm"
                            id="id_photos">
                        <div id="photoPreviewContainer" class="mt-2" style="display: none;">
                            <div id="photoPreview" class="row g-1"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ПРАВАЯ КОЛОНКА: Настройки -->
            <div class="col-lg-4">
                <!-- Генератор названия -->
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-transparent border-bottom-0 p-3 d-flex justify-content-between align-items-center cursor-pointer"
                        data-bs-toggle="collapse" data-bs-target="#nameGeneratorCollapse" aria-expanded="false">
                        <h6 class="mb-0 text-muted"><i class="bi bi-lightbulb me-1"></i>Генератор названия</h6>
                        <i class="bi bi-chevron-down text-muted"></i>
                    </div>
                    <div id="nameGeneratorCollapse" class="collapse">
                        <div class="card-body p-3">
                            <p class="small text-muted mb-3">
                                Сгенерируйте привлекательное название для вашего букета автоматически
                                <br><span class="badge bg-secondary mt-1">В базе: <span id="bouquetNamesCount">{{
                                        bouquet_names_count }}</span> названий</span>
                            </p>
                            <div class="d-flex gap-2 mb-4">
                                <button type="button" class="btn btn-outline-primary btn-sm" id="populateNamesBtn">
                                    <i class="bi bi-magic"></i> Пополнить базу названиями
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="getThreeNamesBtn">
                                    <i class="bi bi-refresh"></i> Дать три варианта
                                </button>
                            </div>

                            <!-- Предложения названий -->
                            <div class="name-suggestions">
                                <!-- Строка 1 -->
                                <div class="d-flex justify-content-between align-items-center py-2 border-bottom name-row"
                                    data-name-id="">
                                    <span class="text-muted small name-text">-</span>
                                    <div class="d-flex gap-1 name-buttons" style="display: none;">
                                        <button type="button"
                                            class="btn btn-success btn-xs btn-take-name">Взять</button>
                                        <button type="button"
                                            class="btn btn-outline-danger btn-xs btn-delete-name">Удалить</button>
                                    </div>
                                </div>
                                <!-- Строка 2 -->
                                <div class="d-flex justify-content-between align-items-center py-2 border-bottom name-row"
                                    data-name-id="">
                                    <span class="text-muted small name-text">-</span>
                                    <div class="d-flex gap-1 name-buttons" style="display: none;">
                                        <button type="button"
                                            class="btn btn-success btn-xs btn-take-name">Взять</button>
                                        <button type="button"
                                            class="btn btn-outline-danger btn-xs btn-delete-name">Удалить</button>
                                    </div>
                                </div>
                                <!-- Строка 3 -->
                                <div class="d-flex justify-content-between align-items-center py-2 name-row"
                                    data-name-id="">
                                    <span class="text-muted small name-text">-</span>
                                    <div class="d-flex gap-1 name-buttons" style="display: none;">
                                        <button type="button"
                                            class="btn btn-success btn-xs btn-take-name">Взять</button>
                                        <button type="button"
                                            class="btn btn-outline-danger btn-xs btn-delete-name">Удалить</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Расчет цены -->
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body p-3">
                        <h6 class="mb-3 text-muted"><i class="bi bi-calculator me-1"></i>Расчет Цены</h6>

                        <!-- Информация о базовой цене -->
                        <div class="alert alert-info alert-sm mb-3" style="font-size: 0.875rem;">
                            <i class="bi bi-info-circle me-1"></i>
                            <strong>Итоговая цена</strong> формируется из цен компонентов.
                            Добавьте компоненты выше или отрегулируйте цену ниже.
                        </div>

                        <!-- Базовая цена (отображение) -->
                        <div class="mb-3 p-2 rounded" style="background: #f8f9fa; border-left: 3px solid #6c757d;">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted small"><i class="bi bi-calculator"></i> Сумма цен
                                    компонентов:</span>
                                <span id="basePriceDisplay" class="fw-semibold" style="font-size: 1.1rem;">0.00
                                    руб.</span>
                            </div>
                        </div>

                        <hr class="my-2">

                        <!-- Увеличить цену -->
                        <div class="mb-3">
                            <label class="form-label small text-muted mb-2">
                                <i class="bi bi-arrow-up"></i> Увеличить итоговую цену на:
                            </label>
                            <div class="row g-2">
                                <div class="col-6">
                                    <div class="input-group input-group-sm">
                                        <input type="number" id="id_increase_percent" class="form-control"
                                            placeholder="%" step="0.01" min="0">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="input-group input-group-sm">
                                        <input type="number" id="id_increase_amount" class="form-control"
                                            placeholder="руб" step="0.01" min="0">
                                        <span class="input-group-text">руб</span>
                                    </div>
                                </div>
                            </div>
                            <small class="form-text text-muted mt-1">Заполните только одно поле</small>
                        </div>

                        <!-- Уменьшить цену -->
                        <div class="mb-3">
                            <label class="form-label small text-muted mb-2">
                                <i class="bi bi-arrow-down"></i> Уменьшить итоговую цену на:
                            </label>
                            <div class="row g-2">
                                <div class="col-6">
                                    <div class="input-group input-group-sm">
                                        <input type="number" id="id_decrease_percent" class="form-control"
                                            placeholder="%" step="0.01" min="0">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="input-group input-group-sm">
                                        <input type="number" id="id_decrease_amount" class="form-control"
                                            placeholder="руб" step="0.01" min="0">
                                        <span class="input-group-text">руб</span>
                                    </div>
                                </div>
                            </div>
                            <small class="form-text text-muted mt-1">Заполните только одно поле</small>
                        </div>

                        <hr class="my-2">

                        <!-- Итоговая цена -->
                        <div class="p-2 rounded" style="background: #e7f5e7; border-left: 3px solid #198754;">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-dark small"><i class="bi bi-check-circle me-1"></i><strong>Итоговая
                                        цена:</strong></span>
                                <span id="finalPriceDisplay" class="fw-bold"
                                    style="font-size: 1.3rem; color: #198754;">0.00 руб.</span>
                            </div>
                        </div>

                        <!-- Скрытые поля для формы (автоматически заполняются JavaScript) -->
                        <input type="hidden" id="id_price_adjustment_type" name="price_adjustment_type" value="none">
                        <input type="hidden" id="id_price_adjustment_value" name="price_adjustment_value" value="0">
                    </div>
                </div>

                <!-- Цена со скидкой -->
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body p-3">
                        <h6 class="mb-2 text-muted"><i class="bi bi-tag-discount"></i> Цена со скидкой</h6>
                        <label class="form-label small mb-1">{{ form.sale_price.label }}</label>
                        {{ form.sale_price }}
                        <small class="form-text text-muted">Если указана, будет использоваться вместо расчетной
                            цены</small>
                        {% if form.sale_price.errors %}
                        <div class="text-danger small mt-1">{{ form.sale_price.errors }}</div>
                        {% endif %}
                    </div>
                </div>

                <!-- Категории и теги -->
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body p-3">
                        <div class="mb-2">
                            <label class="form-label small mb-1 text-muted">{{ form.categories.label }}</label>
                            <div class="compact-checkboxes">
                                {{ form.categories }}
                            </div>
                            {% if form.categories.errors %}
                            <div class="text-danger small mt-1">{{ form.categories.errors }}</div>
                            {% endif %}
                        </div>

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

                        <div class="mb-0">
                            <label class="form-label small mb-1 text-muted">{{ form.tags.label }}</label>
                            <div class="compact-checkboxes">
                                {{ form.tags }}
                            </div>
                            {% if form.tags.errors %}
                            <div class="text-danger small mt-1">{{ form.tags.errors }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Дополнительные настройки -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-3">
                        <h6 class="mb-2 text-muted"><i class="bi bi-gear me-1"></i>Дополнительно</h6>

                        <div class="mb-2">
                            <label class="form-label small mb-1">{{ form.sku.label }}</label>
                            {{ form.sku }}
                            {% if form.sku.errors %}
                            <div class="text-danger small mt-1">{{ form.sku.errors }}</div>
                            {% endif %}
                        </div>

                        <div>
                            {{ form.status.label_tag }}
                            {{ form.status }}
                            {% if form.status.errors %}
                            <div class="text-danger small mt-1">{{ form.status.errors }}</div>
                            {% endif %}
                        </div>
                    </div>
                </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:products-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>Создать комплект
            </button>
        </div>
    </form>
</div>

<style>
    /* Breadcrumbs */
    .breadcrumb-sm {
        font-size: 0.875rem;
        padding: 0.5rem 0;
    }

    /* Крупное поле названия */
    #id_name {
        font-size: 1.5rem;
        font-weight: 500;
        border: 3px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        background: #fff;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    #id_name:focus {
        border-color: #198754;
        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.15);
        outline: 0;
    }

    /* Описание */
    #id_description {
        font-size: 0.95rem;
        min-height: 80px;
    }

    /* Компактные чекбоксы */
    .compact-checkboxes {
        max-height: 200px;
        overflow-y: auto;
        font-size: 0.875rem;
    }

    .compact-checkboxes ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .compact-checkboxes li {
        padding: 0.25rem 0;
    }

    .compact-checkboxes label {
        font-weight: normal;
        margin-bottom: 0;
    }

    /* Компонент комплекта */
    .kititem-form {
        transition: all 0.2s;
    }

    .kititem-form:hover {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    }

    .kititem-form .card-body {
        background: #fafbfc;
    }

    .kititem-form input[type="checkbox"][name$="-DELETE"] {
        display: none;
    }

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

    /* Карточки */
    .card.border-0 {
        border-radius: 0.5rem;
    }

    /* Лейблы */
    .form-label.small {
        font-size: 0.8rem;
        font-weight: 500;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Фото превью */
    #photoPreview .col-4,
    #photoPreview .col-md-3,
    #photoPreview .col-lg-2 {
        padding: 0.25rem;
    }

    #photoPreview .card {
        border-radius: 0.375rem;
    }

    #photoPreview img {
        height: 100px;
        object-fit: cover;
    }

    /* Alert компактный */
    .alert-sm {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0;
    }

    /* Анимация */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .kititem-form.new-item {
        animation: slideIn 0.3s ease-out;
    }

    /* Разделитель ИЛИ */
    .kit-item-separator {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 40px;
    }

    .kit-item-separator .separator-text {
        font-size: 0.75rem;
        font-weight: 600;
        color: #adb5bd;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .kit-item-separator .separator-help {
        font-size: 0.85rem;
        color: #6c757d;
        cursor: help;
    }

    .kit-item-separator .separator-help:hover {
        color: #0d6efd;
    }

    /* Стили для генератора названий */
    .cursor-pointer {
        cursor: pointer;
    }

    .card-header[data-bs-toggle="collapse"]:hover {
        background-color: #f8f9fa;
    }

    .card-header[data-bs-toggle="collapse"] .bi-chevron-down {
        transition: transform 0.2s ease;
    }

    .collapse.show .card-header[data-bs-toggle="collapse"] .bi-chevron-down {
        transform: rotate(180deg);
    }

    /* Кнопки очень маленького размера */
    .btn-xs {
        padding: 0.125rem 0.25rem;
        font-size: 0.75rem;
        line-height: 1;
        border-radius: 0.2rem;
    }

    .btn-xs:hover {
        transform: translateY(-1px);
    }

    /* Стили для списка предложений */
    .name-suggestions {
        background-color: #f8f9fa;
        border-radius: 0.375rem;
        overflow: hidden;
    }

    .name-suggestions .text-muted {
        font-size: 0.875rem;
    }

    .name-suggestions .border-bottom {
        border-color: #e9ecef !important;
    }

    /* Стили для полей корректировки цены */
    #id_increase_percent:disabled,
    #id_increase_amount:disabled,
    #id_decrease_percent:disabled,
    #id_decrease_amount:disabled {
        background-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
        opacity: 0.6;
    }

    #id_increase_percent.is-invalid,
    #id_increase_amount.is-invalid,
    #id_decrease_percent.is-invalid,
    #id_decrease_amount.is-invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    /* Адаптивность */
    @media (max-width: 991px) {

        .col-lg-8,
        .col-lg-4 {
            max-width: 100%;
        }
    }
</style>

<!-- Select2 инициализация -->
{% include 'products/includes/select2-product-init.html' %}

{{ selected_products|default:"{}"|json_script:"selected-products-data" }}
{{ selected_variants|default:"{}"|json_script:"selected-variants-data" }}
{{ selected_sales_units|default:"{}"|json_script:"selected-sales-units-data" }}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // ========== УПРАВЛЕНИЕ ЦЕНОЙ КОМПЛЕКТА ==========
        const increasePercentInput = document.getElementById('id_increase_percent');
        const increaseAmountInput = document.getElementById('id_increase_amount');
        const decreasePercentInput = document.getElementById('id_decrease_percent');
        const decreaseAmountInput = document.getElementById('id_decrease_amount');
        const adjustmentTypeInput = document.getElementById('id_price_adjustment_type');
        const adjustmentValueInput = document.getElementById('id_price_adjustment_value');
        const basePriceDisplay = document.getElementById('basePriceDisplay');
        const finalPriceDisplay = document.getElementById('finalPriceDisplay');

        let basePrice = 0;
        let activeUpdates = 0; // Счетчик активных обновлений

        // Кэш цен товаров для быстрого доступа
        const priceCache = {};

        // Функция для получения цены товара с AJAX если необходимо
        async function getProductPrice(selectElement) {
            // Строгая проверка: нужен валидный element с value
            if (!selectElement) {
                console.warn('getProductPrice: selectElement is null or undefined');
                return 0;
            }

            const rawValue = selectElement.value;
            if (!rawValue) {
                console.warn('getProductPrice: no value');
                return 0;
            }

            // Извлекаем числовой ID из значения (может быть "product_123" или "123")
            let productId;
            if (rawValue.includes('_')) {
                const parts = rawValue.split('_');
                productId = parseInt(parts[1]);
            } else {
                productId = parseInt(rawValue);
            }

            if (isNaN(productId) || productId <= 0) {
                console.warn('getProductPrice: invalid product id', rawValue);
                return 0;
            }

            // Если уже загружена в кэш - возвращаем
            if (priceCache[productId] !== undefined) {
                const cachedPrice = parseFloat(priceCache[productId]) || 0;
                console.log('getProductPrice: from cache', productId, cachedPrice);
                return cachedPrice;
            }

            // Пытаемся получить из data-атрибутов формы
            const form = selectElement.closest('.kititem-form');
            if (form) {
                const formPrice = form.getAttribute('data-product-price');
                const formProductId = form.getAttribute('data-product-id');
                if (formPrice && productId.toString() === formProductId) {
                    const price = parseFloat(formPrice) || 0;
                    if (price > 0) {
                        priceCache[productId] = price;
                        console.log('getProductPrice: from form data', productId, price);
                        return price;
                    }
                }
            }

            // Пытаемся получить из Select2 data (приоритет: actual_price > price)
            const $select = $(selectElement);
            const selectedData = $select.select2('data');
            if (selectedData && selectedData.length > 0) {
                const itemData = selectedData[0];
                const priceData = itemData.actual_price || itemData.price;
                if (priceData) {
                    const price = parseFloat(priceData) || 0;
                    if (price > 0) {
                        priceCache[productId] = price;
                        console.log('getProductPrice: from select2 data', productId, price);
                        return price;
                    }
                }
            }

            // Если не нашли - загружаем через AJAX
            try {
                console.log('getProductPrice: fetching from API', productId);
                const response = await fetch(
                    `{% url "products:api-search-products-variants" %}?id=${productId}`,
                    { method: 'GET', headers: { 'Accept': 'application/json' } }
                );
                if (response.ok) {
                    const data = await response.json();
                    if (data.results && data.results.length > 0) {
                        const productData = data.results[0];
                        const price = parseFloat(productData.actual_price || productData.price || 0);
                        if (price > 0) {
                            priceCache[productId] = price;
                            console.log('getProductPrice: from API', productId, price);
                        }
                        return price;
                    }
                }
            } catch (error) {
                console.error('Error fetching product price:', error);
            }

            console.warn('getProductPrice: returning 0 for product', productId);
            return 0;
        }

        // Функция для получения цены единицы продажи
        async function getSalesUnitPrice(selectElement) {
            if (!selectElement) {
                console.warn('getSalesUnitPrice: selectElement is null or undefined');
                return 0;
            }

            const rawValue = selectElement.value;
            if (!rawValue) {
                console.warn('getSalesUnitPrice: no value');
                return 0;
            }

            // Извлекаем числовой ID из значения (может быть "sales_unit_123" или "123")
            let salesUnitId;
            if (rawValue.includes('_')) {
                const parts = rawValue.split('_');
                salesUnitId = parseInt(parts[1]);
            } else {
                salesUnitId = parseInt(rawValue);
            }

            if (isNaN(salesUnitId) || salesUnitId <= 0) {
                console.warn('getSalesUnitPrice: invalid sales unit id', rawValue);
                return 0;
            }

            // Если уже загружена в кэш - возвращаем
            const cacheKey = `sales_unit_${salesUnitId}`;
            if (priceCache[cacheKey] !== undefined) {
                const cachedPrice = parseFloat(priceCache[cacheKey]) || 0;
                console.log('getSalesUnitPrice: from cache', salesUnitId, cachedPrice);
                return cachedPrice;
            }

            // Пытаемся получить цену из выбранного option элемента (приоритет)
            const selectedOption = $(selectElement).find('option:selected');
            if (selectedOption.length > 0) {
                const priceData = selectedOption.data('actual_price') || selectedOption.data('price');
                if (priceData) {
                    const price = parseFloat(priceData) || 0;
                    if (price > 0) {
                        priceCache[cacheKey] = price;
                        console.log('getSalesUnitPrice: from option data', salesUnitId, price);
                        return price;
                    }
                }
            }

            // Пытаемся получить из Select2 data
            const $select = $(selectElement);
            const selectedData = $select.select2('data');
            if (selectedData && selectedData.length > 0) {
                const itemData = selectedData[0];
                const priceData = itemData.actual_price || itemData.price;
                if (priceData) {
                    const price = parseFloat(priceData) || 0;
                    if (price > 0) {
                        priceCache[cacheKey] = price;
                        console.log('getSalesUnitPrice: from select2 data', salesUnitId, price);
                        return price;
                    }
                }
            }

            // Загружаем информацию о единице продажи через API
            try {
                console.log('getSalesUnitPrice: fetching from API', salesUnitId);
                const response = await fetch(
                    `{% url "products:api-product-sales-units" product_id=0 %}`.replace('/0/', `/${salesUnitId}/`),
                    { method: 'GET', headers: { 'Accept': 'application/json' } }
                );
                if (response.ok) {
                    const data = await response.json();
                    if (data.sales_units && data.sales_units.length > 0) {
                        const salesUnitData = data.sales_units.find(su => su.id == salesUnitId);
                        if (salesUnitData) {
                            const price = parseFloat(salesUnitData.actual_price || salesUnitData.price || 0);
                            if (price > 0) {
                                priceCache[cacheKey] = price;
                                console.log('getSalesUnitPrice: from API', salesUnitId, price);
                            }
                            return price;
                        }
                    }
                }
            } catch (error) {
                console.error('Error fetching sales unit price:', error);
            }

            console.warn('getSalesUnitPrice: returning 0 for sales unit', salesUnitId);
            return 0;
        }

        // Функция для обновления списка единиц продажи при выборе товара
        async function updateSalesUnitsOptions(salesUnitSelect, productValue) {
            activeUpdates++; // Начинаем обновление
            try {
                // Сохраняем текущее значение перед очисткой (важно для редактирования и копирования)
                let targetValue = salesUnitSelect.value;

                // Если значения нет, проверяем preloaded данные (фаллбэк для инициализации)
                if (!targetValue) {
                    const fieldName = salesUnitSelect.name;
                    if (selectedSalesUnits && selectedSalesUnits[fieldName]) {
                        targetValue = selectedSalesUnits[fieldName].id;
                    }
                }

                // Очищаем текущие опции
                salesUnitSelect.innerHTML = '<option value="">---------</option>';
                salesUnitSelect.disabled = true;

                if (!productValue) {
                    return;
                }

                // Извлекаем ID товара
                let productId;
                if (productValue.includes('_')) {
                    const parts = productValue.split('_');
                    productId = parseInt(parts[1]);
                } else {
                    productId = parseInt(productValue);
                }

                if (isNaN(productId) || productId <= 0) {
                    return;
                }

                try {
                    // Загружаем единицы продажи для выбранного товара
                    const response = await fetch(
                        `{% url "products:api-product-sales-units" product_id=0 %}`.replace('/0/', `/${productId}/`),
                        { method: 'GET', headers: { 'Accept': 'application/json' } }
                    );
                    if (response.ok) {
                        const data = await response.json();
                        if (data.sales_units && data.sales_units.length > 0) {
                            data.sales_units.forEach(su => {
                                const option = document.createElement('option');
                                option.value = su.id;
                                option.textContent = `${su.name} (${su.actual_price || su.price} руб.)`;
                                option.dataset.price = su.actual_price || su.price;
                                option.dataset.actual_price = su.actual_price;
                                salesUnitSelect.appendChild(option);
                            });
                            salesUnitSelect.disabled = false;

                            // Восстанавливаем значение
                            if (targetValue) {
                                $(salesUnitSelect).val(targetValue).trigger('change');
                            } else {
                                // Обновляем Select2 без значения
                                $(salesUnitSelect).trigger('change');
                            }
                        }
                    }
                } catch (error) {
                    console.error('Error fetching sales units:', error);
                }
            } finally {
                activeUpdates--; // Завершаем обновление
                if (activeUpdates === 0) {
                    calculateFinalPrice();
                }
            }
        }

        // Обновляем data-product-id и загружаем цену при выборе товара
        $('[name$="-product"]').on('select2:select', async function () {
            const form = $(this).closest('.kititem-form');
            if (this.value) {
                // Извлекаем числовой ID из "product_123"
                let numericId = this.value;
                if (this.value.includes('_')) {
                    numericId = this.value.split('_')[1];
                }
                form.attr('data-product-id', numericId);
                // Загружаем цену и пересчитываем
                await getProductPrice(this);
                // Обновляем список единиц продажи для выбранного товара
                const salesUnitSelect = form.find('[name$="-sales_unit"]')[0];
                if (salesUnitSelect) {
                    await updateSalesUnitsOptions(salesUnitSelect, this.value);
                }
            }
            calculateFinalPrice();
        }).on('select2:unselect', function () {
            const form = $(this).closest('.kititem-form');
            // Очищаем список единиц продажи
            const salesUnitSelect = form.find('[name$="-sales_unit"]')[0];
            if (salesUnitSelect) {
                salesUnitSelect.innerHTML = '<option value="">---------</option>';
                $(salesUnitSelect).trigger('change');
            }
            calculateFinalPrice();
        });

        // Функция для получения цены группы вариантов
        async function getVariantGroupPrice(selectElement) {
            if (!selectElement) {
                console.warn('getVariantGroupPrice: selectElement is null or undefined');
                return 0;
            }

            const variantGroupId = parseInt(selectElement.value);

            if (!selectElement.value || isNaN(variantGroupId) || variantGroupId <= 0) {
                console.warn('getVariantGroupPrice: no valid variant group id', selectElement.value);
                return 0;
            }

            // Если уже загружена в кэш - возвращаем
            const cacheKey = `variant_${variantGroupId}`;
            if (priceCache[cacheKey] !== undefined) {
                const cachedPrice = parseFloat(priceCache[cacheKey]) || 0;
                console.log('getVariantGroupPrice: from cache', variantGroupId, cachedPrice);
                return cachedPrice;
            }

            // Пытаемся получить из Select2 option data
            const selectedOption = $(selectElement).find('option:selected');
            let priceData = selectedOption.data('actual_price') || selectedOption.data('price');
            if (priceData) {
                const price = parseFloat(priceData) || 0;
                if (price > 0) {
                    priceCache[cacheKey] = price;
                    console.log('getVariantGroupPrice: from select2 data', variantGroupId, price);
                    return price;
                }
            }

            // Если не нашли - загружаем через AJAX
            try {
                console.log('getVariantGroupPrice: fetching from API', variantGroupId);
                const response = await fetch(
                    `{% url "products:api-search-products-variants" %}?id=variant_${variantGroupId}`,
                    { method: 'GET', headers: { 'Accept': 'application/json' } }
                );
                if (response.ok) {
                    const data = await response.json();
                    if (data.results && data.results.length > 0) {
                        const variantData = data.results[0];
                        const price = parseFloat(variantData.actual_price || variantData.price || 0);
                        if (price > 0) {
                            priceCache[cacheKey] = price;
                            console.log('getVariantGroupPrice: from API', variantGroupId, price);
                        }
                        return price;
                    }
                }
            } catch (error) {
                console.error('Error fetching variant group price:', error);
            }

            console.warn('getVariantGroupPrice: returning 0 for variant group', variantGroupId);
            return 0;
        }

        // Функция для расчета финальной цены
        async function calculateFinalPrice() {
            // Если идут обновления - не считаем, ждем их завершения
            if (activeUpdates > 0) {
                return;
            }

            // Получаем базовую цену (сумма всех компонентов)
            let newBasePrice = 0;
            const formsContainer = document.getElementById('kititem-forms');

            if (formsContainer) {
                const forms = formsContainer.querySelectorAll('.kititem-form');
                for (const form of forms) {
                    const productSelect = form.querySelector('[name$="-product"]');
                    const variantGroupSelect = form.querySelector('[name$="-variant_group"]');
                    const salesUnitSelect = form.querySelector('[name$="-sales_unit"]');
                    const quantity = parseFloat(form.querySelector('[name$="-quantity"]')?.value || '1');
                    const deleteCheckbox = form.querySelector('[name$="-DELETE"]');

                    if (deleteCheckbox && deleteCheckbox.checked) continue;

                    // Пропускаем если количество не валидно
                    const validQuantity = quantity > 0 ? quantity : 1;

                    // Проверяем единицу продажи (имеет наивысший приоритет)
                    if (salesUnitSelect && salesUnitSelect.value) {
                        const salesUnitPrice = await getSalesUnitPrice(salesUnitSelect);
                        if (salesUnitPrice > 0) {
                            newBasePrice += (salesUnitPrice * validQuantity);
                        }
                    }
                    // Проверяем товар (если нет единицы продажи)
                    else if (productSelect && productSelect.value) {
                        const productPrice = await getProductPrice(productSelect);
                        if (productPrice > 0) {
                            newBasePrice += (productPrice * validQuantity);
                        }
                    }
                    // Проверяем группу вариантов (если нет ни единицы продажи, ни товара)
                    else if (variantGroupSelect && variantGroupSelect.value) {
                        const variantPrice = await getVariantGroupPrice(variantGroupSelect);
                        if (variantPrice > 0) {
                            newBasePrice += (variantPrice * validQuantity);
                        }
                    }
                }
            }

            basePrice = newBasePrice;
            basePriceDisplay.textContent = basePrice.toFixed(2) + ' руб.';

            // Определяем тип и значение корректировки АВТОМАТИЧЕСКИ
            let adjustmentType = 'none';
            let adjustmentValue = 0;

            // Получаем значения из всех полей
            const increasePercent = parseFloat(increasePercentInput.value) || 0;
            const increaseAmount = parseFloat(increaseAmountInput.value) || 0;
            const decreasePercent = parseFloat(decreasePercentInput.value) || 0;
            const decreaseAmount = parseFloat(decreaseAmountInput.value) || 0;

            // Автоматически определяем тип корректировки (только ОДНО значение может быть заполнено)
            if (increasePercent > 0 && increaseAmount === 0 && decreasePercent === 0 && decreaseAmount === 0) {
                adjustmentType = 'increase_percent';
                adjustmentValue = increasePercent;
            } else if (increaseAmount > 0 && increasePercent === 0 && decreasePercent === 0 && decreaseAmount === 0) {
                adjustmentType = 'increase_amount';
                adjustmentValue = increaseAmount;
            } else if (decreasePercent > 0 && decreaseAmount === 0 && increasePercent === 0 && increaseAmount === 0) {
                adjustmentType = 'decrease_percent';
                adjustmentValue = decreasePercent;
            } else if (decreaseAmount > 0 && decreasePercent === 0 && increasePercent === 0 && increaseAmount === 0) {
                adjustmentType = 'decrease_amount';
                adjustmentValue = decreaseAmount;
            }

            // Обновляем скрытые поля (автоматически, без очистки пользовательского ввода)
            adjustmentTypeInput.value = adjustmentType;
            adjustmentValueInput.value = adjustmentValue;

            // Рассчитываем финальную цену
            let finalPrice = basePrice;

            if (adjustmentType !== 'none' && adjustmentValue > 0) {
                if (adjustmentType.includes('percent')) {
                    const adjustment = basePrice * adjustmentValue / 100;
                    finalPrice = adjustmentType.includes('increase')
                        ? basePrice + adjustment
                        : Math.max(0, basePrice - adjustment);
                } else { // amount
                    finalPrice = adjustmentType.includes('increase')
                        ? basePrice + adjustmentValue
                        : Math.max(0, basePrice - adjustmentValue);
                }
            }

            finalPriceDisplay.textContent = finalPrice.toFixed(2) + ' руб.';
        }

        // Функция для управления состоянием полей (только одно может быть заполнено)
        function validateSingleAdjustment() {
            const increasePercent = parseFloat(increasePercentInput.value) || 0;
            const increaseAmount = parseFloat(increaseAmountInput.value) || 0;
            const decreasePercent = parseFloat(decreasePercentInput.value) || 0;
            const decreaseAmount = parseFloat(decreaseAmountInput.value) || 0;

            // Подсчитываем сколько полей заполнено
            const filledCount = (increasePercent > 0 ? 1 : 0) +
                (increaseAmount > 0 ? 1 : 0) +
                (decreasePercent > 0 ? 1 : 0) +
                (decreaseAmount > 0 ? 1 : 0);

            const allInputs = [increasePercentInput, increaseAmountInput, decreasePercentInput, decreaseAmountInput];

            if (filledCount === 0) {
                // Ничего не заполнено - все поля активны
                allInputs.forEach(input => {
                    input.disabled = false;
                    input.classList.remove('is-invalid');
                });
            } else if (filledCount === 1) {
                // Ровно одно поле заполнено - отключаем остальные
                allInputs.forEach(input => {
                    const isCurrentField = (
                        input === increasePercentInput && increasePercent > 0 ||
                        input === increaseAmountInput && increaseAmount > 0 ||
                        input === decreasePercentInput && decreasePercent > 0 ||
                        input === decreaseAmountInput && decreaseAmount > 0
                    );

                    input.disabled = !isCurrentField;
                    input.classList.remove('is-invalid');
                });
            } else {
                // Несколько полей заполнено - помечаем как ошибку и очищаем лишние
                allInputs.forEach(input => {
                    input.classList.add('is-invalid');
                });

                // Оставляем только первое заполненное поле, остальные очищаем
                let foundFirst = false;
                if (increasePercent > 0 && !foundFirst) {
                    foundFirst = true;
                } else if (foundFirst || increasePercent > 0) {
                    increasePercentInput.value = '';
                }

                if (increaseAmount > 0 && !foundFirst) {
                    foundFirst = true;
                } else if (foundFirst || increaseAmount > 0) {
                    increaseAmountInput.value = '';
                }

                if (decreasePercent > 0 && !foundFirst) {
                    foundFirst = true;
                } else if (foundFirst || decreasePercent > 0) {
                    decreasePercentInput.value = '';
                }

                if (decreaseAmount > 0 && !foundFirst) {
                    foundFirst = true;
                } else if (foundFirst || decreaseAmount > 0) {
                    decreaseAmountInput.value = '';
                }
            }
        }

        // Добавляем обработчики для всех полей цены
        [increasePercentInput, increaseAmountInput, decreasePercentInput, decreaseAmountInput].forEach(input => {
            if (input) {
                input.addEventListener('input', () => {
                    validateSingleAdjustment();
                    calculateFinalPrice();
                });
                input.addEventListener('change', () => {
                    validateSingleAdjustment();
                    calculateFinalPrice();
                });
            }
        });

        // Инициальный расчет не нужен, так как он выполняется по событиям изменения полей
        // и после завершения загрузки единиц продажи

        // ========== SELECT2 ИНИЦИАЛИЗАЦИЯ ==========
        function initSelect2(element, type, preloadedData) {
            window.initProductSelect2(element, type, '{% url "products:api-search-products-variants" %}');
            if (preloadedData && !$(element).find('option[value="' + preloadedData.id + '"]').length) {
                const option = new Option(preloadedData.text, preloadedData.id, true, true);
                $(element).append(option).trigger('change');
            }
        }

        const selectedProducts = JSON.parse(document.getElementById('selected-products-data').textContent || '{}');
        const selectedVariants = JSON.parse(document.getElementById('selected-variants-data').textContent || '{}');
        const selectedSalesUnits = JSON.parse(document.getElementById('selected-sales-units-data').textContent || '{}');

        $('[name$="-product"]').each(function () {
            const fieldName = $(this).attr('name');
            const preloadedData = selectedProducts[fieldName] || null;
            initSelect2(this, 'product', preloadedData);
            // Обработчик уже добавлен выше (строки 673-701)
        });

        $('[name$="-variant_group"]').each(function () {
            const fieldName = $(this).attr('name');
            const preloadedData = selectedVariants[fieldName] || null;
            initSelect2(this, 'variant', preloadedData);
            // При выборе варианта очищаем единицу продажи
            $(this).on('select2:select', function () {
                const form = $(this).closest('.kititem-form');
                const salesUnitSelect = form.find('[name$="-sales_unit"]')[0];
                if (salesUnitSelect) {
                    salesUnitSelect.innerHTML = '<option value="">---------</option>';
                    $(salesUnitSelect).trigger('change');
                }
                calculateFinalPrice();
            }).on('select2:unselect', calculateFinalPrice);
        });

        $('[name$="-sales_unit"]').each(function () {
            const fieldName = $(this).attr('name');
            const preloadedData = selectedSalesUnits[fieldName] || null;
            initSelect2(this, 'sales_unit', preloadedData);
            $(this).on('select2:select select2:unselect', calculateFinalPrice);
        });

        // ========== УПРАВЛЕНИЕ КОМПОНЕНТАМИ ==========
        function updateFieldStatus(form) {
            const productSelect = form.querySelector('[name$="-product"]');
            const variantGroupSelect = form.querySelector('[name$="-variant_group"]');
            const salesUnitSelect = form.querySelector('[name$="-sales_unit"]');

            if (!productSelect || !variantGroupSelect || !salesUnitSelect) return;

            const hasProduct = productSelect.value;
            const hasVariant = variantGroupSelect.value;
            const hasSalesUnit = salesUnitSelect.value;

            // Если выбрана группа вариантов, блокируем товар и единицу продажи
            if (hasVariant) {
                productSelect.disabled = true;
                salesUnitSelect.disabled = true;
            }
            // Если выбран товар, разблокируем единицу продажи и блокируем группу вариантов
            else if (hasProduct) {
                salesUnitSelect.disabled = false;
                variantGroupSelect.disabled = true;
            }
            // Если выбрана только единица продажи, но не товар - блокируем все остальные
            else if (hasSalesUnit) {
                productSelect.disabled = true;
                variantGroupSelect.disabled = true;
            }
            // Если ничего не выбрано - разблокируем товар и группу вариантов, блокируем единицу продажи
            else {
                productSelect.disabled = false;
                variantGroupSelect.disabled = false;
                salesUnitSelect.disabled = true;
            }
        }

        function initializeForm(form) {
            updateFieldStatus(form);
            const productSelect = form.querySelector('[name$="-product"]');
            const variantGroupSelect = form.querySelector('[name$="-variant_group"]');
            const salesUnitSelect = form.querySelector('[name$="-sales_unit"]');

            [productSelect, variantGroupSelect, salesUnitSelect].forEach(field => {
                if (field) {
                    field.addEventListener('change', () => {
                        updateFieldStatus(form);
                        // Обновляем список единиц продажи при изменении товара
                        if (field === productSelect) {
                            updateSalesUnitsOptions(salesUnitSelect, productSelect.value);
                        }
                        calculateFinalPrice();
                    });
                }
            });

            // Инициализируем список единиц продажи, если товар уже выбран
            if (productSelect && productSelect.value) {
                updateSalesUnitsOptions(salesUnitSelect, productSelect.value);
            }

            const quantityInput = form.querySelector('[name$="-quantity"]');
            if (quantityInput) {
                quantityInput.addEventListener('change', calculateFinalPrice);
                // Выделяем весь текст при фокусе на поле количества
                quantityInput.addEventListener('focus', function () {
                    this.select();
                });
            }
        }

        document.querySelectorAll('.kititem-form').forEach(initializeForm);

        // ========== ДОБАВЛЕНИЕ НОВЫХ КОМПОНЕНТОВ ==========
        function addEmptyKitItemForm() {
            const formsContainer = document.getElementById('kititem-forms');
            const totalFormsInput = document.querySelector('[name$="TOTAL_FORMS"]');
            const totalForms = parseInt(totalFormsInput.value);
            const newFormId = totalForms;

            const newFormHtml = `
            <div class="card mb-2 kititem-form border new-item">
                <div class="card-body p-2">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-4">
                            <label class="form-label small text-muted mb-1">Товар</label>
                            <select class="form-control form-control-sm" name="kititem-${newFormId}-product">
                                <option value="">---------</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Единица продажи</label>
                            <select class="form-control form-control-sm" name="kititem-${newFormId}-sales_unit">
                                <option value="">---------</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Группа вариантов</label>
                            <select class="form-control form-control-sm" name="kititem-${newFormId}-variant_group">
                                <option value="">---------</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small text-muted mb-1">Кол-во</label>
                            <input type="number" class="form-control form-control-sm" name="kititem-${newFormId}-quantity" value="1" step="0.001" min="0">
                        </div>
                        <div class="col-md-1 text-end">
                            <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="this.nextElementSibling.checked = true; this.closest('.kititem-form').style.display='none'; calculateFinalPrice();">
                                <i class="bi bi-x-lg"></i>
                            </button>
                            <input type="checkbox" name="kititem-${newFormId}-DELETE">
                        </div>
                    </div>
                    <input type="hidden" name="kititem-${newFormId}-id">
                </div>
            </div>
        `;

            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = newFormHtml.trim();
            const newForm = tempDiv.firstElementChild;
            formsContainer.appendChild(newForm);

            totalFormsInput.value = totalForms + 1;

            const productSelect = newForm.querySelector('[name$="-product"]');
            const variantSelect = newForm.querySelector('[name$="-variant_group"]');
            const salesUnitSelect = newForm.querySelector('[name$="-sales_unit"]');

            initSelect2(productSelect, 'product');
            initSelect2(variantSelect, 'variant');
            initSelect2(salesUnitSelect, 'sales_unit');

            // Добавляем обработчики для новой формы (как в основном коде)
            $(productSelect).on('select2:select', async function () {
                const form = $(this).closest('.kititem-form');
                if (this.value) {
                    let numericId = this.value;
                    if (this.value.includes('_')) {
                        numericId = this.value.split('_')[1];
                    }
                    form.attr('data-product-id', numericId);
                    await getProductPrice(this);
                    if (salesUnitSelect) {
                        await updateSalesUnitsOptions(salesUnitSelect, this.value);
                    }
                }
                calculateFinalPrice();
            }).on('select2:unselect', function () {
                if (salesUnitSelect) {
                    salesUnitSelect.innerHTML = '<option value="">---------</option>';
                    $(salesUnitSelect).trigger('change');
                }
                calculateFinalPrice();
            });

            $(variantSelect).on('select2:select', function () {
                if (salesUnitSelect) {
                    salesUnitSelect.innerHTML = '<option value="">---------</option>';
                    $(salesUnitSelect).trigger('change');
                }
                calculateFinalPrice();
            }).on('select2:unselect', calculateFinalPrice);

            $(salesUnitSelect).on('select2:select select2:unselect', calculateFinalPrice);

            initializeForm(newForm);

            setTimeout(() => newForm.classList.remove('new-item'), 300);
            newForm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

            calculateFinalPrice();
        }

        const addKitItemBtn = document.getElementById('addKitItemBtn');
        if (addKitItemBtn) {
            addKitItemBtn.addEventListener('click', addEmptyKitItemForm);
        }

        // ========== ФОТО ПРЕВЬЮ ==========
        const photoInput = document.getElementById('id_photos');
        const photoPreview = document.getElementById('photoPreview');
        const photoPreviewContainer = document.getElementById('photoPreviewContainer');
        let selectedFiles = [];

        if (photoInput) {
            photoInput.addEventListener('change', function (e) {
                selectedFiles = Array.from(e.target.files);

                if (selectedFiles.length > 0) {
                    photoPreviewContainer.style.display = 'block';
                    photoPreview.innerHTML = '';

                    selectedFiles.forEach((file, index) => {
                        const reader = new FileReader();
                        reader.onload = function (event) {
                            const col = document.createElement('div');
                            col.className = 'col-4 col-md-3 col-lg-2';
                            col.innerHTML = `
                            <div class="card position-relative border-0 shadow-sm">
                                <img src="${event.target.result}" class="card-img-top" alt="Preview">
                                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1" onclick="removePhoto(${index})">
                                    <i class="bi bi-x"></i>
                                </button>
                            </div>
                        `;
                            photoPreview.appendChild(col);
                        };
                        reader.readAsDataURL(file);
                    });
                } else {
                    photoPreviewContainer.style.display = 'none'; // Only hide if no source photos too (will check later)
                    photoPreview.innerHTML = '';

                    // Re-render source photos if they exist and we just cleared new files
                    if (document.querySelectorAll('.source-photo-item').length > 0) {
                        photoPreviewContainer.style.display = 'block';
                    }
                }
            });
        }

        // Render source photos if present
        {% if source_photos %}
        photoPreviewContainer.style.display = 'block';
        {% for photo in source_photos %}
        (function () {
            const col = document.createElement('div');
            col.className = 'col-4 col-md-3 col-lg-2 source-photo-item';
            col.innerHTML = `
                        <div class="card position-relative border-0 shadow-sm">
                            <img src="{{ photo.image.url }}" class="card-img-top" alt="Source Photo">
                            <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1" onclick="this.closest('.col-4').remove();">
                                <i class="bi bi-x"></i>
                            </button>
                            <input type="hidden" name="copied_photos" value="{{ photo.id }}">
                        </div>
                    `;
            photoPreview.appendChild(col);
        })();
        {% endfor %}
        {% endif %}

        window.removePhoto = function (index) {
            selectedFiles.splice(index, 1);
            const dataTransfer = new DataTransfer();
            selectedFiles.forEach(file => dataTransfer.items.add(file));
            photoInput.files = dataTransfer.files;
            photoInput.dispatchEvent(new Event('change'));
        };

        // ========== ЗАГРУЗКА ФОТО ПО URL ==========
        const photoUrlInput = document.getElementById('photoUrlInput');
        const addPhotoByUrlBtn = document.getElementById('addPhotoByUrlBtn');

        async function addPhotoFromUrl(imageUrl) {
            // Валидация URL
            try {
                new URL(imageUrl);
            } catch {
                alert('Пожалуйста, введите корректный URL (начинающийся с https://)');
                return;
            }

            if (!imageUrl.match(/\.(jpg|jpeg|png|gif|webp|heic|heif|svg)$/i) && !imageUrl.includes('/')) {
                alert('URL должен указывать на изображение (jpg, png, webp, etc.)');
                return;
            }

            try {
                // Показываем индикатор загрузки
                addPhotoByUrlBtn.disabled = true;
                addPhotoByUrlBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Загрузка...';

                // Скачиваем изображение
                const response = await fetch(imageUrl, { mode: 'cors' });
                if (!response.ok) throw new Error('Не удалось скачать изображение');

                const blob = await response.blob();

                // Проверяем, что это изображение
                if (!blob.type.startsWith('image/')) {
                    throw new Error('Файл не является изображением');
                }

                // Создаем File объект
                const filename = imageUrl.split('/').pop().split('?')[0] || 'image.jpg';
                const file = new File([blob], filename, { type: blob.type });

                // Добавляем в selectedFiles и обновляем input
                selectedFiles.push(file);
                const dataTransfer = new DataTransfer();
                selectedFiles.forEach(f => dataTransfer.items.add(f));
                photoInput.files = dataTransfer.files;

                // Триггерим событие change для обновления превью
                photoInput.dispatchEvent(new Event('change'));

                // Очищаем поле ввода
                photoUrlInput.value = '';

            } catch (error) {
                console.error('Error loading image from URL:', error);
                alert('Ошибка загрузки изображения: ' + error.message + '\n\nУбедитесь, что сервер изображений поддерживает CORS.');
            } finally {
                addPhotoByUrlBtn.disabled = false;
                addPhotoByUrlBtn.innerHTML = '<i class="bi bi-download"></i> Загрузить';
            }
        }

        if (addPhotoByUrlBtn) {
            addPhotoByUrlBtn.addEventListener('click', () => {
                const url = photoUrlInput.value.trim();
                if (url) {
                    addPhotoFromUrl(url);
                }
            });

            // Загрузка по Enter
            photoUrlInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    const url = photoUrlInput.value.trim();
                    if (url) {
                        addPhotoFromUrl(url);
                    }
                }
            });
        }

        // ========== ГЕНЕРАТОР НАЗВАНИЙ ==========

        // Обработчик для кнопки "Пополнить базу названиям��"
        const populateNamesBtn = document.getElementById('populateNamesBtn');
        if (populateNamesBtn) {
            populateNamesBtn.addEventListener('click', async function () {
                const originalHTML = populateNamesBtn.innerHTML;
                populateNamesBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Пополнение...';
                populateNamesBtn.disabled = true;

                try {
                    const response = await fetch("{% url 'products:api-generate-bouquet-names' %}", {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: new URLSearchParams({ 'count': 100 })
                    });
                    const data = await response.json();

                    if (data.success) {
                        // Обновляем счётчик
                        updateBouquetNamesCount();
                        alert(data.message);
                    } else {
                        alert('Ошибка: ' + (data.error || 'Неизвестная ошибка'));
                    }
                } catch (error) {
                    console.error('Error:', error);
                    alert('Ошибка при пополнении базы названий. Проверьте, что настроена AI-интеграция.');
                } finally {
                    populateNamesBtn.innerHTML = originalHTML;
                    populateNamesBtn.disabled = false;
                }
            });
        }

        // Обработчик для кнопки "Дать три варианта"
        const getThreeNamesBtn = document.getElementById('getThreeNamesBtn');
        if (getThreeNamesBtn) {
            getThreeNamesBtn.addEventListener('click', loadThreeRandomNames);
        }

        // Функция для загрузки трёх случайных названий
        async function loadThreeRandomNames() {
            const originalHTML = getThreeNamesBtn.innerHTML;
            getThreeNamesBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Загрузка...';
            getThreeNamesBtn.disabled = true;

            try {
                const response = await fetch("{% url 'products:api-random-bouquet-names' %}?count=3");
                const data = await response.json();

                if (data.names && data.names.length > 0) {
                    updateNameRows(data.names);
                } else {
                    alert('В базе пока нет названий. Сначала запустите загрузку из JSON или нажмите "Пополнить базу названиями"');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Ошибка при загрузке названий');
            } finally {
                getThreeNamesBtn.innerHTML = originalHTML;
                getThreeNamesBtn.disabled = false;
            }
        }

        // Функция для обновления строк с названиями
        function updateNameRows(names) {
            const rows = document.querySelectorAll('.name-row');

            rows.forEach((row, index) => {
                const nameTextElement = row.querySelector('.name-text');
                const buttonsElement = row.querySelector('.name-buttons');

                if (index < names.length) {
                    // Если есть название для этой строки
                    const nameObj = names[index];
                    nameTextElement.textContent = nameObj.name;
                    row.setAttribute('data-name-id', nameObj.id);

                    // Показываем кнопки
                    buttonsElement.style.display = 'flex';
                } else {
                    // Если нет названия для этой строки
                    nameTextElement.textContent = '-';
                    row.setAttribute('data-name-id', '');

                    // Скрываем кнопки
                    buttonsElement.style.display = 'none';
                }
            });

            // Устанавливаем обработчики событий для новых кнопок
            attachNameRowHandlers();
        }

        // Обработчики для кнопок "Взять" и "Удалить"
        function attachNameRowHandlers() {
            // Обработчик для кнопки "Взять"
            document.querySelectorAll('.btn-take-name').forEach(button => {
                // Проверяем, был ли уже добавлен обработчик
                if (!button.dataset.handlerAttached) {
                    button.addEventListener('click', async function () {
                        const row = this.closest('.name-row');
                        const nameText = row.querySelector('.name-text').textContent;
                        const nameId = row.getAttribute('data-name-id');
                        const nameInput = document.getElementById('id_name');

                        if (nameInput) {
                            nameInput.value = nameText;
                            nameInput.style.borderColor = '#198754';
                            nameInput.style.boxShadow = '0 0 0 0.25rem rgba(25, 135, 84, 0.15)';
                            setTimeout(() => {
                                nameInput.style.borderColor = '';
                                nameInput.style.boxShadow = '';
                            }, 2000);
                        }

                        // Удаляем название из базы данных
                        if (nameId) {
                            await removeNameFromDatabase(nameId);

                            // Заменяем название новым из базы данных
                            await replaceNameInRow(row);
                        }
                    });

                    // Отмечаем, что обработчик уже добавлен
                    button.dataset.handlerAttached = 'true';
                }
            });

            // Обработчик для кнопки "Удалить"
            document.querySelectorAll('.btn-delete-name').forEach(button => {
                // Проверяем, был ли уже добавлен обработчик
                if (!button.dataset.handlerAttached) {
                    button.addEventListener('click', async function () {
                        const row = this.closest('.name-row');
                        const nameId = row.getAttribute('data-name-id');

                        // Удаляем название из базы данных
                        if (nameId) {
                            await removeNameFromDatabase(nameId);

                            // Заменяем название новым из базы данных
                            await replaceNameInRow(row);
                        }
                    });

                    // Отмечаем, что обработчик уже добавлен
                    button.dataset.handlerAttached = 'true';
                }
            });
        }

        // Функция для удаления названия из базы данных
        async function removeNameFromDatabase(nameId) {
            try {
                const response = await fetch(`{% url 'products:api-delete-bouquet-name' 0 %}`.replace('/0/', `/${nameId}/`), {
                    method: 'DELETE',
                    headers: {
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                        'Content-Type': 'application/json'
                    }
                });

                if (response.ok) {
                    // Обновляем счётчик
                    updateBouquetNamesCount();
                } else {
                    console.error('Failed to delete name from database');
                }
            } catch (error) {
                console.error('Error deleting name:', error);
            }
        }

        // Функция для замены названия в строке новым из базы данных
        async function replaceNameInRow(row) {
            try {
                const response = await fetch("{% url 'products:api-random-bouquet-names' %}?count=1");
                const data = await response.json();

                if (data.names && data.names.length > 0) {
                    const newName = data.names[0];
                    const nameTextElement = row.querySelector('.name-text');
                    const buttonsElement = row.querySelector('.name-buttons');

                    nameTextElement.textContent = newName.name;
                    row.setAttribute('data-name-id', newName.id);

                    // Показываем кнопки
                    buttonsElement.style.display = 'flex';
                } else {
                    // Если в базе больше нет названий
                    const nameTextElement = row.querySelector('.name-text');
                    const buttonsElement = row.querySelector('.name-buttons');

                    nameTextElement.textContent = '-';
                    row.setAttribute('data-name-id', '');

                    // Скрываем кнопки
                    buttonsElement.style.display = 'none';
                }
            } catch (error) {
                console.error('Error replacing name:', error);
            }
        }

        // Функция для обновления счётчика названий в базе
        async function updateBouquetNamesCount() {
            try {
                const response = await fetch("{% url 'products:api-get-bouquet-names-count' %}");
                const data = await response.json();
                const countEl = document.getElementById('bouquetNamesCount');
                if (countEl) countEl.textContent = data.count;
            } catch (error) {
                console.error('Error updating count:', error);
            }
        }

        // Инициализация обработчиков кнопок
        document.addEventListener('click', function (e) {
            if (e.target.classList.contains('btn-take-name') || e.target.classList.contains('btn-delete-name')) {
                attachNameRowHandlers();
            }
        });

        // ========== ВАЛИДАЦИЯ ПЕРЕД ОТПРАВКОЙ ==========
        const kitForm = document.querySelector('form[method="post"]');
        if (kitForm) {
            kitForm.addEventListener('submit', function (e) {
                const formsContainer = document.getElementById('kititem-forms');
                if (formsContainer) {
                    const allForms = formsContainer.querySelectorAll('.kititem-form');
                    allForms.forEach(form => {
                        const productSelect = form.querySelector('[name$="-product"]');
                        const variantGroupSelect = form.querySelector('[name$="-variant_group"]');
                        const salesUnitSelect = form.querySelector('[name$="-sales_unit"]');
                        const deleteCheckbox = form.querySelector('[name$="-DELETE"]');

                        // Проверяем, что выбран хотя бы один компонент (товар, группа вариантов или единица продажи)
                        // Если выбрана единица продажи, товар должен быть выбран
                        if (salesUnitSelect && salesUnitSelect.value && (!productSelect || !productSelect.value)) {
                            // Если выбрана единица продажи, но не выбран товар - это ошибка
                            alert('Если выбрана единица продажи, должен быть выбран соответствующий товар.');
                            e.preventDefault();
                            return;
                        }

                        // Если ничего не выбрано, отмечаем для удаления
                        if (!productSelect.value && !variantGroupSelect.value && !salesUnitSelect.value && deleteCheckbox) {
                            deleteCheckbox.checked = true;
                        }
                    });
                }

                const allSelects = kitForm.querySelectorAll('select[disabled]');
                allSelects.forEach(select => select.disabled = false);
            });
        }
    });
</script>
{% endblock %}