{% extends 'base.html' %}

{% block title %}Список категорий{% endblock %}

{% block content %}
<div class="container mt-5">
    <h2 class="mb-4">Категории товаров</h2>

    <!-- Панель фильтрации -->
    {% include 'components/filter_panel.html' with title="Категории" filters=filters action_buttons=action_buttons %}

    <!-- Кнопка "Развернуть/Свернуть все" -->
    <div class="mb-3">
        <button id="expandAllBtn" class="btn btn-sm btn-outline-secondary" onclick="expandAll()">
            Развернуть все
        </button>
        <button id="collapseAllBtn" class="btn btn-sm btn-outline-secondary" onclick="collapseAll()">
            Свернуть все
        </button>
    </div>

    {% if category_tree %}
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead class="table-dark">
                <tr>
                    <th>Название</th>
                    <th>Артикул</th>
                    <th>Статус</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for item in category_tree %}
                <tr data-category-id="{{ item.pk }}"
                    data-item-type="{{ item.item_type }}"
                    data-parent-id="{{ item.parent_id|default:'null' }}"
                    data-depth="{{ item.depth }}"
                    {% if item.depth > 0 %}style="display: none;"{% endif %}
                    class="category-row">

                    <!-- Колонка "Название" -->
                    <td style="padding-left: calc(20px * {{ item.depth }} + 12px);">
                        {% if item.item_type == 'category' %}
                            {% if item.has_children %}
                                <button class="btn btn-sm btn-outline-secondary p-0 toggle-btn"
                                        data-target="{{ item.pk }}"
                                        onclick="toggleCategory({{ item.pk }}); return false;"
                                        style="width: 24px; height: 24px; text-align: center; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; border-radius: 4px; font-weight: bold; font-size: 16px; line-height: 1;">
                                    +
                                </button>
                            {% else %}
                                <span style="display: inline-block; width: 24px; margin-right: 8px;"></span>
                            {% endif %}
                            <a href="{% url 'products:category-detail' item.pk %}"
                               style="font-weight: 600; color: #212529;">{{ item.name }}</a>
                            {% if item.has_children %}
                                <span class="badge bg-info text-dark ms-1">{{ item.obj.children.count }} подкат.</span>
                            {% endif %}

                        {% elif item.item_type == 'product' %}
                            <span style="display: inline-block; width: 24px; margin-right: 8px;"></span>
                            <a href="{% url 'products:product-detail' item.pk %}"
                               style="color: #6c757d;">{{ item.name }}</a>

                        {% elif item.item_type == 'kit' %}
                            <span style="display: inline-block; width: 24px; margin-right: 8px;"></span>
                            <a href="{% url 'products:productkit-detail' item.pk %}"
                               style="color: #6c757d;">{{ item.name }}</a>
                        {% endif %}
                    </td>

                    <!-- Колонка "Артикул" -->
                    <td>
                        {% if item.sku %}
                            <code>{{ item.sku }}</code>
                        {% else %}
                            <span class="text-muted">—</span>
                        {% endif %}
                    </td>

                    <!-- Колонка "Статус" (только для категорий) -->
                    <td>
                        {% if item.item_type == 'category' %}
                            {% if item.obj.is_active %}
                                <span class="badge bg-success">Активна</span>
                            {% else %}
                                <span class="badge bg-secondary">Неактивна</span>
                            {% endif %}
                        {% else %}
                            <span class="text-muted">—</span>
                        {% endif %}
                    </td>

                    <!-- Колонка "Действия" -->
                    <td>
                        {% if item.item_type == 'category' %}
                            <a href="{% url 'products:category-update' item.pk %}" class="btn btn-sm btn-outline-primary">Изменить</a>
                            <a href="{% url 'products:category-delete' item.pk %}" class="btn btn-sm btn-outline-danger">Удалить</a>
                        {% elif item.item_type == 'product' %}
                            <a href="{% url 'products:product-update' item.pk %}" class="btn btn-sm btn-outline-primary">Изменить</a>
                        {% elif item.item_type == 'kit' %}
                            <a href="{% url 'products:productkit-update' item.pk %}" class="btn btn-sm btn-outline-primary">Изменить</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="alert alert-info">
        <p>Категории не найдены.</p>
        <a href="{% url 'products:category-create' %}" class="btn btn-primary">Создать первую категорию</a>
    </div>
    {% endif %}
</div>

<script>
// Функция для раскрытия/сворачивания категории
function toggleCategory(categoryId) {
    // Находим все прямые дочерние элементы
    const children = document.querySelectorAll(`tr[data-parent-id="${categoryId}"]`);
    const toggleBtn = document.querySelector(`button[data-target="${categoryId}"]`);

    if (!toggleBtn) return;

    const isExpanded = toggleBtn.textContent.trim() === '-';

    children.forEach(child => {
        const childId = child.getAttribute('data-category-id');
        const childToggleBtn = child.querySelector(`button[data-target="${childId}"]`);

        if (isExpanded) {
            // Сворачиваем
            child.style.display = 'none';
            // Рекурсивно сворачиваем всех потомков
            collapseAllChildren(childId);
            if (childToggleBtn) {
                childToggleBtn.textContent = '+';
            }
        } else {
            // Раскрываем только прямых детей
            child.style.display = 'table-row';
        }
    });

    // Переключаем кнопку
    toggleBtn.textContent = isExpanded ? '+' : '-';
}

// Рекурсивно сворачивает всех потомков
function collapseAllChildren(categoryId) {
    const children = document.querySelectorAll(`tr[data-parent-id="${categoryId}"]`);
    children.forEach(child => {
        const childId = child.getAttribute('data-category-id');
        child.style.display = 'none';
        const childToggleBtn = child.querySelector(`button[data-target="${childId}"]`);
        if (childToggleBtn) {
            childToggleBtn.textContent = '+';
        }
        collapseAllChildren(childId);
    });
}

// Развернуть все категории
function expandAll() {
    const allRows = document.querySelectorAll('.category-row');
    const allToggleBtns = document.querySelectorAll('.toggle-btn');

    allRows.forEach(row => {
        row.style.display = 'table-row';
    });

    allToggleBtns.forEach(btn => {
        btn.textContent = '-';
    });
}

// Свернуть все категории (показать только корневые)
function collapseAll() {
    const allRows = document.querySelectorAll('.category-row');
    const allToggleBtns = document.querySelectorAll('.toggle-btn');

    allRows.forEach(row => {
        const depth = parseInt(row.getAttribute('data-depth'));
        if (depth > 0) {
            row.style.display = 'none';
        }
    });

    allToggleBtns.forEach(btn => {
        btn.textContent = '+';
    });
}

// При поиске автоматически раскрываем все категории
{% if has_search %}
document.addEventListener('DOMContentLoaded', function() {
    expandAll();
});
{% endif %}
</script>
{% endblock %}
