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

{% block title %}{{ configurable_kit.name }} - Детали{% endblock %}

{% block content %}
{% csrf_token %}
<div class="container-fluid px-4 py-3">
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb breadcrumb-sm mb-0">
            <li class="breadcrumb-item"><a href="{% url 'products:configurableproduct-list' %}">Вариативные товары</a></li>
            <li class="breadcrumb-item active">{{ configurable_kit.name }}</li>
        </ol>
    </nav>

    <!-- Заголовок -->
    <div class="mb-3 d-flex justify-content-between align-items-center">
        <h4 class="mb-0">{{ configurable_kit.name }}</h4>
        <div>
            <a href="{% url 'products:configurableproduct-update' configurable_kit.pk %}" class="btn btn-warning btn-sm">
                <i class="bi bi-pencil me-1"></i>Редактировать
            </a>
            <a href="{% url 'products:configurableproduct-delete' configurable_kit.pk %}" class="btn btn-danger btn-sm">
                <i class="bi bi-trash me-1"></i>Удалить
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Основная информация -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Основная информация</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tbody>
                            <tr>
                                <th style="width: 200px;">Название:</th>
                                <td>{{ configurable_kit.name }}</td>
                            </tr>
                            <tr>
                                <th>Артикул:</th>
                                <td>{{ configurable_kit.sku|default:"—" }}</td>
                            </tr>
                            <tr>
                                <th>Статус:</th>
                                <td>
                                    {% if configurable_kit.status == 'active' %}
                                        <span class="badge bg-success">Активный</span>
                                    {% elif configurable_kit.status == 'archived' %}
                                        <span class="badge bg-warning">Архивный</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Снятый</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Краткое описание:</th>
                                <td>{{ configurable_kit.short_description|default:"—" }}</td>
                            </tr>
                            <tr>
                                <th>Описание:</th>
                                <td>{{ configurable_kit.description|default:"—" }}</td>
                            </tr>
                            <tr>
                                <th>Дата создания:</th>
                                <td>{{ configurable_kit.created_at|date:"d.m.Y H:i" }}</td>
                            </tr>
                            <tr>
                                <th>Дата обновления:</th>
                                <td>{{ configurable_kit.updated_at|date:"d.m.Y H:i" }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Варианты (комплекты) -->
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Варианты (комплекты)</h5>
                </div>
                <div class="card-body">
                    {% if configurable_kit.options.all %}
                        <div class="table-responsive">
                            <table class="table table-hover table-sm mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Комплект</th>
                                        <th>Артикул</th>
                                        <th>Артикул варианта</th>
                                        <th>Цена</th>
                                        <th>Атрибуты</th>
                                        <th style="width: 120px;">По умолчанию</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for option in configurable_kit.options.all %}
                                    <tr>
                                        <td>
                                            <a href="{% url 'products:productkit-detail' option.kit.pk %}" class="text-decoration-none">
                                                {{ option.kit.name }}
                                            </a>
                                        </td>
                                        <td><small class="text-muted">{{ option.kit.sku|default:"—" }}</small></td>
                                        <td>
                                            <code class="small">{{ option.variant_sku|default:"—" }}</code>
                                        </td>
                                        <td><strong>{{ option.kit.actual_price }}</strong> руб.</td>
                                        <td><small class="text-muted">{{ option.attributes|default:"—" }}</small></td>
                                        <td class="text-center">
                                            {% if option.is_default %}
                                                <span class="badge bg-primary">Да</span>
                                            {% else %}
                                                <span class="badge bg-secondary">Нет</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted text-center py-4">
                            Нет вариантов. Перейдите в режим редактирования для добавления.
                        </p>
                    {% endif %}
                </div>
            </div>

            <!-- Атрибуты родительского товара -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Атрибуты товара</h5>
                </div>
                <div class="card-body">
                    {% if configurable_kit.parent_attributes.all %}
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Название атрибута</th>
                                        <th>Значение опции</th>
                                        <th>Комплект</th>
                                        <th>Порядок</th>
                                        <th>Видимый</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for attr in configurable_kit.parent_attributes.all %}
                                    <tr>
                                        <td><strong>{{ attr.name }}</strong></td>
                                        <td>{{ attr.option }}</td>
                                        <td>
                                            {% if attr.kit %}
                                                <a href="{% url 'products:productkit-detail' attr.kit.pk %}" class="text-decoration-none badge bg-info text-dark">
                                                    {{ attr.kit.name }}
                                                </a>
                                            {% else %}
                                                <span class="badge bg-secondary">—</span>
                                            {% endif %}
                                        </td>
                                        <td><span class="badge bg-secondary">{{ attr.position }}</span></td>
                                        <td>
                                            {% if attr.visible %}
                                                <span class="badge bg-success">Да</span>
                                            {% else %}
                                                <span class="badge bg-secondary">Нет</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted text-center py-4">
                            Нет атрибутов. Перейдите в режим редактирования для добавления.
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Боковая панель -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h6 class="mb-0">Справка</h6>
                </div>
                <div class="card-body">
                    <p class="small text-muted">
                        Вариативный товар предназначен для экспорта на внешние площадки как Variable Product.
                    </p>
                    <p class="small text-muted">
                        Каждый вариант — это отдельный ProductKit с собственной ценой, артикулом и атрибутами.
                    </p>
                    <p class="small text-muted">
                        <strong>Артикул варианта</strong> — дополнительный SKU для интеграций, генерируется автоматически.
                    </p>
                    <hr>
                    <p class="small text-muted mb-1">
                        <strong>Количество вариантов:</strong> {{ configurable_kit.options.count }}
                    </p>
                    <p class="small text-muted mb-0">
                        <strong>Атрибутов товара:</strong> {{ configurable_kit.parent_attributes.count }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
