{% extends 'base.html' %}

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

{% block extra_css %}
<style>
    /* Адаптивная grid-система для чекбоксов категорий и тегов */
    /* Нацеливаемся на любой UL внутри .checkbox-grid */
    #id_categories,
    #id_tags,
    .checkbox-grid ul,
    .checkbox-grid > ul,
    .checkbox-grid div > ul,
    .checkbox-grid * ul {
        display: grid !important;
        gap: 0.35rem !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        /* 1 столбец на маленьких экранах */
        grid-template-columns: 1fr !important;
    }

    /* 2 столбца на средних экранах (≥768px) */
    @media (min-width: 768px) {
        #id_categories,
        #id_tags,
        .checkbox-grid ul,
        .checkbox-grid > ul,
        .checkbox-grid div > ul,
        .checkbox-grid * ul {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    /* 3 столбца на больших экранах (≥1200px) */
    @media (min-width: 1200px) {
        #id_categories,
        #id_tags,
        .checkbox-grid ul,
        .checkbox-grid > ul,
        .checkbox-grid div > ul,
        .checkbox-grid * ul {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }

    /* 4 столбца на очень больших экранах (≥1600px) */
    @media (min-width: 1600px) {
        #id_categories,
        #id_tags,
        .checkbox-grid ul,
        .checkbox-grid > ul,
        .checkbox-grid div > ul,
        .checkbox-grid * ul {
            grid-template-columns: repeat(4, 1fr) !important;
        }
    }

    /* Стилизация элементов списка */
    #id_categories li,
    #id_tags li,
    .checkbox-grid li {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Стилизация чекбоксов */
    #id_categories label,
    #id_tags label,
    .checkbox-grid label {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        padding: 0.4rem 0.6rem !important;
        background: white !important;
        border-radius: 0.375rem !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
        height: 100% !important;
    }

    #id_categories label:hover,
    #id_tags label:hover,
    .checkbox-grid label:hover {
        background: #e9ecef !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }

    #id_categories input[type="checkbox"],
    #id_tags input[type="checkbox"],
    .checkbox-grid input[type="checkbox"] {
        margin-right: 0.5rem !important;
        cursor: pointer !important;
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }

    /* Стиль для выбранных чекбоксов */
    #id_categories li:has(input[type="checkbox"]:checked) label,
    #id_tags li:has(input[type="checkbox"]:checked) label,
    .checkbox-grid li:has(input[type="checkbox"]:checked) label {
        background: #e7f3ff !important;
        border-left: 3px solid #0d6efd !important;
        font-weight: 500 !important;
    }

    /* Стили для карточек фото */
    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    .photo-card .card {
        border: 1px solid #e0e0e0;
    }

    .photo-card:hover .card {
        border-color: #667eea;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-12 col-xl-10">
            <div class="card">
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}

                        {% if form.non_field_errors %}
                            <div class="alert alert-danger" role="alert">
                                {% for error in form.non_field_errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}

                        <!-- Блок 1: Основная информация -->
                        <div class="mb-4">
                            <!-- Название -->
                            <div class="mb-3">
                                <label for="id_name" class="form-label fw-bold fs-5">Название</label>
                                {{ form.name }}
                                {% if form.name.help_text %}
                                    <small class="form-text text-muted">{{ form.name.help_text }}</small>
                                {% endif %}
                                {% if form.name.errors %}
                                    <div class="text-danger">{{ form.name.errors }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <hr class="my-4">

                       <!-- Блок: Фотографии -->
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-gradient" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                <h5 class="mb-0 text-white">
                                    <i class="bi bi-images"></i> Фотографии товара
                                </h5>
                            </div>
                            <div class="card-body">
                                <!-- Контейнер для сообщений об операциях с фото -->
                                <div id="photos-messages-container"></div>
                                
                                <!-- Существующие фотографии (только при редактировании) -->
                                {% if object and product_photos %}
                                <div class="mb-4">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <div>
                                            <h6 class="mb-0 text-secondary">
                                                <i class="bi bi-collection"></i> Текущие фотографии 
                                                <span class="badge bg-primary rounded-pill" id="photos-count">{{ photos_count }}</span>
                                            </h6>
                                        </div>
                                        <button type="button" id="delete-selected-btn" class="btn btn-danger btn-sm shadow-sm" style="display: none;">
                                            <i class="bi bi-trash"></i> Удалить (<span id="selected-count">0</span>)
                                        </button>
                                    </div>
                                    <div class="row g-3 mb-3" id="photos-grid">
                                        {% for photo in product_photos %}
                                        <div class="col-lg-3 col-md-4 col-sm-6 photo-card" data-photo-id="{{ photo.pk }}">
                                            <div class="card h-100 border-0 shadow-sm hover-lift" style="transition: all 0.3s ease;">
                                                <!-- Чекбокс для выбора -->
                                                <div class="position-absolute" style="top: 8px; left: 8px; z-index: 10;">
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input photo-checkbox shadow-sm"
                                                               data-photo-id="{{ photo.pk }}"
                                                               id="photo-check-{{ photo.pk }}"
                                                               style="width: 22px; height: 22px; cursor: pointer; border-width: 2px;">
                                                    </div>
                                                </div>

                                                <!-- Бейдж главного фото -->
                                                {% if photo.order == 0 %}
                                                <div class="position-absolute" style="top: 8px; right: 8px; z-index: 10;">
                                                    <span class="badge bg-success shadow-sm">
                                                        <i class="bi bi-star-fill"></i> Главное
                                                    </span>
                                                </div>
                                                {% endif %}

                                                <!-- Кликабельное фото -->
                                                <div class="ratio ratio-1x1 bg-light rounded-top overflow-hidden" 
                                                     data-bs-toggle="modal"
                                                     data-bs-target="#photoModal{{ photo.pk }}"
                                                     style="cursor: pointer;">
                                                    <img src="{{ photo.image.url }}"
                                                         alt="Фото товара"
                                                         class="object-fit-contain p-2"
                                                         style="transition: transform 0.3s ease;"
                                                         onmouseover="this.style.transform='scale(1.05)'"
                                                         onmouseout="this.style.transform='scale(1)'">
                                                </div>

                                                <div class="card-body p-2 bg-white">
                                                    <!-- Кнопка "Сделать главным" -->
                                                    {% if photo.order != 0 %}
                                                    <a href="{% url 'products:product-photo-set-main' photo.pk %}"
                                                       class="btn btn-outline-warning btn-sm w-100 mb-2"
                                                       title="Сделать главным">
                                                        <i class="bi bi-star"></i> Сделать главным
                                                    </a>
                                                    {% endif %}

                                                    <!-- Кнопки перемещения -->
                                                    <div class="btn-group w-100 mb-2" role="group">
                                                        <a href="{% url 'products:product-photo-move-up' photo.pk %}"
                                                           class="btn btn-outline-secondary btn-sm"
                                                           title="Переместить вверх">
                                                            <i class="bi bi-arrow-up"></i>
                                                        </a>
                                                        <a href="{% url 'products:product-photo-move-down' photo.pk %}"
                                                           class="btn btn-outline-secondary btn-sm"
                                                           title="Переместить вниз">
                                                            <i class="bi bi-arrow-down"></i>
                                                        </a>
                                                    </div>

                                                    <!-- Кнопка удаления -->
                                                    <a href="{% url 'products:product-photo-delete' photo.pk %}"
                                                       class="btn btn-outline-danger btn-sm w-100"
                                                       onclick="return confirm('Удалить это фото?');">
                                                        <i class="bi bi-trash"></i> Удалить
                                                    </a>
                                                </div>

                                                <div class="card-footer bg-light text-center py-1">
                                                    <small class="text-muted">
                                                        <i class="bi bi-hash"></i> Позиция: {{ photo.order|add:1 }}
                                                    </small>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Модальное окно для просмотра фото -->
                                        <div class="modal fade" id="photoModal{{ photo.pk }}" tabindex="-1" aria-labelledby="photoModalLabel{{ photo.pk }}" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-xl">
                                                <div class="modal-content border-0 shadow">
                                                    <div class="modal-header bg-dark text-white">
                                                        <h5 class="modal-title" id="photoModalLabel{{ photo.pk }}">
                                                            <i class="bi bi-image"></i> Фото товара
                                                        </h5>
                                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                                                    </div>
                                                    <div class="modal-body text-center bg-dark">
                                                        <img src="{{ photo.image.url }}" class="img-fluid rounded" alt="Фото товара" style="max-height: 75vh;">
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                            <i class="bi bi-x-circle"></i> Закрыть
                                                        </button>
                                                        <a href="{% url 'products:product-photo-delete' photo.pk %}"
                                                           class="btn btn-danger"
                                                           onclick="return confirm('Удалить это фото?');">
                                                            <i class="bi bi-trash"></i> Удалить фото
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>

                            <!-- JavaScript для массового удаления фотографий -->
                            <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                const deleteBtn = document.getElementById('delete-selected-btn');
                                const selectedCount = document.getElementById('selected-count');
                                const photosCount = document.getElementById('photos-count');
                                const checkboxes = document.querySelectorAll('.photo-checkbox');

                                // Обновляем счётчик выбранных и видимость кнопки
                                function updateUI() {
                                    const checked = document.querySelectorAll('.photo-checkbox:checked').length;
                                    selectedCount.textContent = checked;
                                    deleteBtn.style.display = checked > 0 ? 'block' : 'none';
                                }

                                // Обработчик для каждого чекбокса
                                checkboxes.forEach(checkbox => {
                                    checkbox.addEventListener('change', updateUI);
                                });

                                // Обработчик кнопки удаления
                                deleteBtn.addEventListener('click', function() {
                                    const checked = document.querySelectorAll('.photo-checkbox:checked');
                                    if (checked.length === 0) return;

                                    const photoIds = Array.from(checked).map(cb => cb.dataset.photoId);
                                    const count = photoIds.length;

                                    if (!confirm(`Вы уверены, что хотите удалить ${count} фото?`)) return;

                                    // Отключаем кнопку на время операции
                                    deleteBtn.disabled = true;
                                    deleteBtn.innerHTML = '⏳ Удаление...';

                                    // Отправляем запрос на сервер
                                    fetch('{% url "products:product-photos-delete-bulk" %}', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRFToken': '{{ csrf_token }}'
                                        },
                                        body: JSON.stringify({ photo_ids: photoIds })
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            // Удаляем карточки фотографий из DOM
                                            photoIds.forEach(photoId => {
                                                const card = document.querySelector(`[data-photo-id="${photoId}"]`);
                                                if (card) card.remove();
                                            });

                                            // Обновляем счётчик фотографий
                                            const newCount = parseInt(photosCount.textContent) - count;
                                            photosCount.textContent = newCount;

                                            // Скрываем блок если фотографий больше нет
                                            if (newCount === 0) {
                                                const photosSection = document.querySelector('#photos-grid')?.closest('.mb-4');
                                                if (photosSection) {
                                                    photosSection.style.display = 'none';
                                                }
                                            }

                                            // Показываем сообщение об успехе
                                            const alert = document.createElement('div');
                                            alert.className = 'alert alert-success alert-dismissible fade show';
                                            alert.innerHTML = `✓ ${data.deleted} фото успешно удалено!
                                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>`;
                                            
                                            // Вставляем сообщение в специальный контейнер, который всегда существует
                                            const messagesContainer = document.getElementById('photos-messages-container');
                                            if (messagesContainer) {
                                                // Очищаем предыдущие сообщения и добавляем новое
                                                messagesContainer.innerHTML = '';
                                                messagesContainer.appendChild(alert);
                                            }

                                            // Скрываем кнопку
                                            deleteBtn.style.display = 'none';
                                            selectedCount.textContent = '0';
                                        } else {
                                            throw new Error(data.error || 'Неизвестная ошибка');
                                        }
                                    })
                                    .catch(error => {
                                        alert('Ошибка при удалении: ' + error.message);
                                        console.error(error);
                                    })
                                    .finally(() => {
                                        deleteBtn.disabled = false;
                                        deleteBtn.innerHTML = '🗑️ Удалить отмеченные (<span id="selected-count">' + selectedCount.textContent + '</span>)';
                                    });
                                });
                            });
                            </script>
                            {% endif %}

                            <!-- Поле для загрузки новых фотографий -->
                            <div class="alert alert-info border-0 shadow-sm mb-0">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="bi bi-cloud-upload fs-4 me-2"></i>
                                    <label for="id_photos" class="form-label fw-bold mb-0">
                                        {% if object %}
                                            <i class="bi bi-plus-circle"></i> Добавить новые фото
                                        {% else %}
                                            <i class="bi bi-upload"></i> Загрузить фото
                                        {% endif %}
                                    </label>
                                </div>
                                <input type="file" name="photos" accept="image/*" multiple class="form-control form-control-lg shadow-sm" id="id_photos">
                                <small class="form-text text-muted d-block mt-2">
                                    <i class="bi bi-info-circle"></i>
                                    {% if object %}
                                        Выберите фото для добавления к товару (можно выбрать несколько, до 10 штук всего)
                                    {% else %}
                                        Выберите фото для товара (можно выбрать несколько, до 10 штук)
                                    {% endif %}
                                </small>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Блок 1: Основная информация (продолжение) -->
                        <div class="mb-4">
                            <!-- Основная цена и Цена со скидкой -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="id_price" class="form-label fw-bold">Основная цена <span class="text-danger">*</span></label>
                                    {{ form.price }}
                                    <small class="form-text text-muted">Цена продажи товара</small>
                                    {% if form.price.errors %}
                                        <div class="text-danger">{{ form.price.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    <label for="id_sale_price" class="form-label">Цена со скидкой</label>
                                    {{ form.sale_price }}
                                    <small class="form-text text-muted">Необязательно. Если задана, товар будет продаваться по этой цене</small>
                                    {% if form.sale_price.errors %}
                                        <div class="text-danger">{{ form.sale_price.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- Артикул -->
                            <div class="mb-3">
                                {{ form.sku.label_tag }}
                                {{ form.sku }}
                                {% if form.sku.help_text %}
                                    <small class="form-text text-muted">{{ form.sku.help_text }}</small>
                                {% endif %}
                                {% if form.sku.errors %}
                                    <div class="text-danger">{{ form.sku.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Категория -->
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label fw-bold">Категория</label>
                                    <a href="{% url 'products:category-create' %}"
                                       target="_blank"
                                       class="btn btn-sm btn-outline-primary"
                                       title="Создать новую категорию">
                                        <i class="bi bi-plus-circle"></i> Новая
                                    </a>
                                </div>
                                <div class="p-3 bg-light rounded checkbox-grid">
                                    {{ form.categories }}
                                </div>
                                {% if form.categories.help_text %}
                                    <small class="form-text text-muted">{{ form.categories.help_text }}</small>
                                {% endif %}
                                {% if form.categories.errors %}
                                    <div class="text-danger">{{ form.categories.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Внешняя категория для интеграций -->
                            <div class="mb-3">
                                <label for="id_external_category" class="form-label">
                                    Внешняя категория
                                </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">{{ form.external_category.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Теги -->
                            <div class="mb-3">
                                {{ form.tags.label_tag }}
                                <div class="p-3 bg-light rounded checkbox-grid">
                                    {{ form.tags }}
                                </div>
                                {% if form.tags.help_text %}
                                    <small class="form-text text-muted">{{ form.tags.help_text }}</small>
                                {% endif %}
                                {% if form.tags.errors %}
                                    <div class="text-danger">{{ form.tags.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Описание -->
                            <div class="mb-3">
                                {{ form.description.label_tag }}
                                {{ form.description }}
                                {% if form.description.help_text %}
                                    <small class="form-text text-muted">{{ form.description.help_text }}</small>
                                {% endif %}
                                {% if form.description.errors %}
                                    <div class="text-danger">{{ form.description.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Краткое описание -->
                            <div class="mb-3">
                                <label for="id_short_description" class="form-label">Краткое описание</label>
                                {{ form.short_description }}
                                <small class="form-text text-muted">Может использоваться для карточек товаров на сайте</small>
                                {% if form.short_description.errors %}
                                    <div class="text-danger">{{ form.short_description.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Единица измерения, Основная цена, Цена со скидкой -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    {{ form.base_unit.label_tag }}
                                    {{ form.base_unit }}
                                    {% if form.base_unit.help_text %}
                                        <small class="form-text text-muted">{{ form.base_unit.help_text }}</small>
                                    {% endif %}
                                    {% if form.base_unit.errors %}
                                        <div class="text-danger">{{ form.base_unit.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    {{ form.status.label_tag }}
                                    {{ form.status }}
                                    {% if form.status.help_text %}
                                        <small class="form-text text-muted">{{ form.status.help_text }}</small>
                                    {% endif %}
                                    {% if form.status.errors %}
                                        <div class="text-danger">{{ form.status.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Блок: Маркетинговые флаги -->
                        <div class="mb-4">
                            <h5 class="mb-3"><i class="bi bi-tag"></i> Маркетинговые флаги</h5>
                            <p class="text-muted small mb-3">Отображаются на внешних площадках (Recommerce и др.)</p>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-check form-switch">
                                        {{ form.is_new }}
                                        <label class="form-check-label" for="id_is_new">
                                            <i class="bi bi-stars text-warning"></i> Новинка
                                        </label>
                                    </div>
                                    <small class="text-muted d-block ms-4">Товар отображается как новый</small>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check form-switch">
                                        {{ form.is_popular }}
                                        <label class="form-check-label" for="id_is_popular">
                                            <i class="bi bi-fire text-danger"></i> Популярный
                                        </label>
                                    </div>
                                    <small class="text-muted d-block ms-4">Товар отображается как популярный</small>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check form-switch">
                                        {{ form.is_special }}
                                        <label class="form-check-label" for="id_is_special">
                                            <i class="bi bi-percent text-success"></i> Спецпредложение
                                        </label>
                                    </div>
                                    <small class="text-muted d-block ms-4">Акционный товар (+ автоматически при скидке)</small>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Блок: Единицы продажи -->
                        {% if sales_unit_formset %}
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-gradient" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0 text-white">
                                        <i class="bi bi-box-seam"></i> Единицы продажи
                                    </h5>
                                    <a href="{% url 'products:unit-list' %}" class="btn btn-sm btn-light" target="_blank">
                                        <i class="bi bi-rulers"></i> Справочник единиц
                                    </a>
                                </div>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">
                                    Настройте, в каких единицах продается товар (ветка, кг, штука). 
                                    Коэффициент указывает, сколько единиц продажи получается из 1 базовой единицы.
                                </p>

                                {{ sales_unit_formset.management_form }}

                                <!-- Шаблон для новых форм (скрыт) -->
                                <template id="empty-sales-unit-template">
                                    {% with form=sales_unit_formset.empty_form %}
                                    <div class="sales-unit-row border rounded p-3 mb-2">
                                        <div class="row g-2 align-items-end">
                                            <div class="col-md-2">
                                                <label class="form-label small">Ед. измерения</label>
                                                {{ form.unit }}
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label small">Название</label>
                                                {{ form.name }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Коэфф.</label>
                                                {{ form.conversion_factor }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Цена</label>
                                                {{ form.price }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Скидка</label>
                                                {{ form.sale_price }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Мин.кол</label>
                                                {{ form.min_quantity }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Шаг</label>
                                                {{ form.quantity_step }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Поз.</label>
                                                {{ form.position }}
                                            </div>
                                            <div class="col-md-1 text-center">
                                                <label class="form-label small d-block">По умолч.</label>
                                                {{ form.is_default }}
                                            </div>
                                            <div class="col-md-1">
                                                <div class="d-flex gap-1">
                                                    <div class="form-check" title="Активна">
                                                        {{ form.is_active }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endwith %}
                                </template>

                                <div id="sales-units-container">
                                    {% for form in sales_unit_formset %}
                                    <div class="sales-unit-row border rounded p-3 mb-2 {% if form.instance.pk %}bg-light{% endif %}">
                                        <div class="row g-2 align-items-end">
                                            {% if form.instance.pk %}
                                            <input type="hidden" name="{{ form.prefix }}-id" value="{{ form.instance.pk }}">
                                            {% endif %}
                                            
                                            <div class="col-md-2">
                                                <label class="form-label small">Ед. измерения</label>
                                                {{ form.unit }}
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label small">Название</label>
                                                {{ form.name }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Коэфф.</label>
                                                {{ form.conversion_factor }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Цена</label>
                                                {{ form.price }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Скидка</label>
                                                {{ form.sale_price }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Мин.кол</label>
                                                {{ form.min_quantity }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Шаг</label>
                                                {{ form.quantity_step }}
                                            </div>
                                            <div class="col-md-1">
                                                <label class="form-label small">Поз.</label>
                                                {{ form.position }}
                                            </div>
                                            <div class="col-md-1 text-center">
                                                <label class="form-label small d-block">По умолч.</label>
                                                {{ form.is_default }}
                                            </div>
                                            <div class="col-md-1">
                                                <div class="d-flex gap-1">
                                                    <div class="form-check" title="Активна">
                                                        {{ form.is_active }}
                                                    </div>
                                                    {% if form.instance.pk %}
                                                    <div class="form-check" title="Удалить">
                                                        {{ form.DELETE }}
                                                    </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                        {% if form.errors %}
                                        <div class="text-danger small mt-1">
                                            {% for field, errors in form.errors.items %}
                                                {{ field }}: {{ errors|join:", " }}
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    {% endfor %}
                                </div>

                                <button type="button" class="btn btn-outline-success btn-sm mt-2" id="add-sales-unit">
                                    <i class="bi bi-plus-circle"></i> Добавить единицу продажи
                                </button>
                            </div>
                        </div>
                        {% endif %}

                        <hr class="my-4">

                        <!-- Блок 2.5: Информация о наличии (только при редактировании) -->
                        {% if object %}
                        <div class="mb-4 p-3 bg-info-light rounded border border-info">
                            <h5 class="mb-3"><i class="bi bi-info-circle"></i> Информация о наличии</h5>
                            <p class="mb-2">
                                <strong>Статус:</strong>
                                {% if object.in_stock %}
                                    <span class="badge bg-success"><i class="bi bi-check-circle"></i> В наличии</span>
                                {% else %}
                                    <span class="badge bg-danger"><i class="bi bi-x-circle"></i> Нет в наличии</span>
                                {% endif %}
                            </p>
                            <p class="mb-0">
                                <small class="text-muted">Статус обновляется автоматически на основе остатков на складе</small>
                            </p>
                        </div>
                        {% endif %}

                        <hr class="my-4">

                        <div class="d-flex justify-content-between mt-4 gap-2 flex-wrap">
                            <div>
                                <a href="{% url 'products:products-list' %}" class="btn btn-secondary">Отмена</a>
                            </div>
                            <button type="submit" class="btn btn-primary">{% if object %}Сохранить изменения{% else %}Создать товар{% endif %}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Диагностика и принудительное применение grid для чекбоксов
document.addEventListener('DOMContentLoaded', function() {
    console.log('=== Checkbox Grid Diagnostic ===');

    // Ищем все UL элементы внутри .checkbox-grid
    const checkboxGrids = document.querySelectorAll('.checkbox-grid');

    checkboxGrids.forEach((grid, index) => {
        console.log(`Grid ${index}:`, grid);

        // Ищем все UL внутри этого grid
        const lists = grid.querySelectorAll('ul');
        console.log(`  Found ${lists.length} UL elements`);

        lists.forEach((ul, ulIndex) => {
            console.log(`  UL ${ulIndex}:`, ul);
            console.log(`    ID: ${ul.id}`);
            console.log(`    Current display: ${window.getComputedStyle(ul).display}`);
            console.log(`    Current grid-template-columns: ${window.getComputedStyle(ul).gridTemplateColumns}`);

            // Принудительно применяем grid стили
            ul.style.setProperty('display', 'grid', 'important');
            ul.style.setProperty('list-style', 'none', 'important');
            ul.style.setProperty('padding', '0', 'important');
            ul.style.setProperty('margin', '0', 'important');
            ul.style.setProperty('gap', '0.35rem', 'important');

            // Определяем количество колонок на основе ширины экрана
            const width = window.innerWidth;
            let columns = 1;
            if (width >= 1600) columns = 4;
            else if (width >= 1200) columns = 3;
            else if (width >= 768) columns = 2;

            ul.style.setProperty('grid-template-columns', `repeat(${columns}, 1fr)`, 'important');

            console.log(`    Applied ${columns} columns`);
            console.log(`    New display: ${window.getComputedStyle(ul).display}`);
        });
    });

    // Также проверяем прямые ID
    ['id_categories', 'id_tags'].forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            console.log(`Found element with ID: ${id}`, element);
            console.log(`  Tag name: ${element.tagName}`);
            console.log(`  Parent: ${element.parentElement.className}`);
        } else {
            console.log(`Element with ID ${id} NOT found`);
        }
    });

    // Пересчитываем при изменении размера окна
    let resizeTimeout;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function() {
            const width = window.innerWidth;
            let columns = 1;
            if (width >= 1600) columns = 4;
            else if (width >= 1200) columns = 3;
            else if (width >= 768) columns = 2;

            document.querySelectorAll('.checkbox-grid ul, #id_categories, #id_tags').forEach(ul => {
                ul.style.setProperty('grid-template-columns', `repeat(${columns}, 1fr)`, 'important');
            });
        }, 250);
    });

    // === Динамическое добавление единиц продажи ===
    const addButton = document.getElementById('add-sales-unit');
    const container = document.getElementById('sales-units-container');
    const totalFormsInput = document.querySelector('[name="sales_units-TOTAL_FORMS"]');

    if (addButton && container && totalFormsInput) {
        addButton.addEventListener('click', function() {
            const formCount = parseInt(totalFormsInput.value);
            const template = document.getElementById('empty-sales-unit-template');

            if (template) {
                // Клонируем содержимое шаблона
                const newRow = template.content.cloneNode(true);
                const rowDiv = newRow.querySelector('.sales-unit-row');

                // Обновляем имена и id полей
                rowDiv.querySelectorAll('input, select').forEach(input => {
                    const name = input.getAttribute('name');
                    const id = input.getAttribute('id');

                    if (name) {
                        // Заменяем __prefix__ на текущий индекс
                        input.setAttribute('name', name.replace('__prefix__', formCount));
                    }
                    if (id) {
                        input.setAttribute('id', id.replace('__prefix__', formCount));
                    }

                    // Устанавливаем значения по умолчанию
                    if (input.type === 'checkbox') {
                        if (input.name.includes('is_active')) {
                            input.checked = true;
                        } else {
                            input.checked = false;
                        }
                    } else if (input.type !== 'hidden') {
                        if (input.name.includes('min_quantity') || input.name.includes('quantity_step')) {
                            input.value = '1';
                        } else if (input.name.includes('position')) {
                            input.value = formCount;
                        } else if (input.name.includes('conversion_factor')) {
                            input.value = '1';
                        }
                    }
                });

                container.appendChild(rowDiv);
                totalFormsInput.value = formCount + 1;
            }
        });
    }
});
</script>
{% endblock %}
