{% extends 'base.html' %}
{% load inventory_filters %}
{% load quality_tags %}

{% block title %}{{ kit.name }} - Комплект{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2>{{ kit.name }}</h2>
            <p class="text-muted">Артикул: <strong>{{ kit.sku }}</strong></p>
        </div>
        <div class="col-md-4 text-end">
            {% if perms.products.change_productkit %}
            <a href="{% url 'products:productkit-update' kit.pk %}" class="btn btn-primary">
                <i class="bi bi-pencil"></i> Редактировать
            </a>
            {% endif %}
            {% if perms.products.delete_productkit %}
            <a href="{% url 'products:productkit-delete' kit.pk %}" class="btn btn-danger">
                <i class="bi bi-trash"></i> Удалить
            </a>
            {% endif %}
        </div>
    </div>

    <div class="row">
        <!-- Основная информация -->
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Основная информация</h5>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-4">Название:</dt>
                        <dd class="col-sm-8">{{ kit.name }}</dd>

                        <dt class="col-sm-4">Артикул:</dt>
                        <dd class="col-sm-8">{{ kit.sku }}</dd>

                        {% if kit.categories.all %}
                        <dt class="col-sm-4">Категории:</dt>
                        <dd class="col-sm-8">
                            {% for category in kit.categories.all %}
                                <span class="badge bg-primary">{{ category.name }}</span>
                            {% endfor %}
                        </dd>
                        {% endif %}

                        <dt class="col-sm-4">Базовая цена:</dt>
                        <dd class="col-sm-8">
                            <strong>{{ kit.base_price|floatformat:2 }} руб.</strong>
                            <small class="text-muted d-block">(сумма компонентов)</small>
                        </dd>

                        <dt class="col-sm-4">Итоговая цена:</dt>
                        <dd class="col-sm-8">
                            {% if kit.sale_price %}
                                <span class="text-decoration-line-through text-muted">{{ kit.price|floatformat:2 }} руб.</span>
                                <br>
                                <strong class="text-danger fs-5">{{ kit.sale_price|floatformat:2 }} руб.</strong>
                                <span class="badge bg-danger ms-2">Акция</span>
                            {% else %}
                                <strong class="text-success fs-5">{{ kit.price|floatformat:2 }} руб.</strong>
                            {% endif %}
                        </dd>

                        {% if kit.price_adjustment_type != 'none' and kit.price_adjustment_value > 0 %}
                        <dt class="col-sm-4">Корректировка цены:</dt>
                        <dd class="col-sm-8">
                            {% if kit.price_adjustment_type == 'increase_percent' %}
                                <span class="badge bg-success">Увеличить на {{ kit.price_adjustment_value }}%</span>
                            {% elif kit.price_adjustment_type == 'increase_amount' %}
                                <span class="badge bg-success">Увеличить на {{ kit.price_adjustment_value }} руб.</span>
                            {% elif kit.price_adjustment_type == 'decrease_percent' %}
                                <span class="badge bg-warning">Уменьшить на {{ kit.price_adjustment_value }}%</span>
                            {% elif kit.price_adjustment_type == 'decrease_amount' %}
                                <span class="badge bg-warning">Уменьшить на {{ kit.price_adjustment_value }} руб.</span>
                            {% endif %}
                        </dd>
                        {% endif %}

                        <dt class="col-sm-4">Статус:</dt>
                        <dd class="col-sm-8">
                            {% if kit.is_active %}
                            <span class="badge bg-success">Активен</span>
                            {% else %}
                            <span class="badge bg-secondary">Неактивен</span>
                            {% endif %}
                        </dd>
                    </dl>

                    {% if kit.description %}
                    <div class="mt-3">
                        <h6>Описание:</h6>
                        <p>{{ kit.description|linebreaks }}</p>
                    </div>
                    {% endif %}

                    {% if kit.tags.all %}
                    <div class="mt-3">
                        <h6>Теги:</h6>
                        <div class="d-flex flex-wrap gap-2">
                            {% for tag in kit.tags.all %}
                            {% if tag.is_active %}
                            <span class="badge bg-secondary">{{ tag.name }}</span>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Компоненты комплекта -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Состав комплекта ({{ kit_items.count }} компонентов)</h5>
                </div>
                <div class="card-body">
                    {% if kit_items %}
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Компонент</th>
                                    <th>Тип</th>
                                    <th>Количество</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in kit_items %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>
                                        {% if item.sales_unit %}
                                        <a href="{% url 'products:product-detail' item.sales_unit.product.pk %}">
                                            {{ item.sales_unit.name }}
                                        </a>
                                        <br>
                                        <small class="text-muted">Единица продажи: {{ item.sales_unit.product.name }}</small>
                                        {% elif item.product %}
                                        <a href="{% url 'products:product-detail' item.product.pk %}">
                                            {{ item.product.name }}
                                        </a>
                                        <br>
                                        <small class="text-muted">Артикул: {{ item.product.sku }}</small>
                                        {% else %}
                                        <span class="badge bg-primary">{{ item.variant_group.name }}</span>
                                        <br>
                                        <small class="text-muted">Варианты: {{ item.variant_group.get_products_count }} товаров</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if item.sales_unit %}
                                        <span class="badge bg-info">Единица продажи</span>
                                        {% elif item.product %}
                                        <span class="badge bg-success">Товар</span>
                                        {% else %}
                                        <span class="badge bg-primary">Варианты</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ item.quantity|smart_quantity }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">Нет компонентов в этом комплекте</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Сбоку: фотографии и информация -->
        <div class="col-md-4">
            <!-- Фотографии -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Фотографии ({{ photos_count }})</h5>
                </div>
                <div class="card-body">
                    {% if productkit_photos %}
                    <div class="row g-2">
                        {% for photo in productkit_photos %}
                        <div class="col-6">
                            <div class="card photo-card-with-quality">
                                <!-- Миниатюра 200x200 для быстрой загрузки, при клике открывает large -->
                                <div class="photo-container"
                                     data-bs-toggle="modal"
                                     data-bs-target="#photoModal{{ photo.pk }}"
                                     title="Нажмите для увеличения">
                                    <img src="{{ photo.get_thumbnail_url }}" class="card-img-top" alt="{{ kit.name }}"
                                         style="height: 100%; width: 100%; object-fit: cover;">
                                </div>
                                {% if photo.order == 0 %}
                                <div class="card-footer bg-success text-white text-center small">⭐ Главное</div>
                                {% else %}
                                <div class="card-footer text-center">
                                    {{ photo|quality_badge_full }}
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Модальное окно для просмотра -->
                        <div class="modal fade" id="photoModal{{ photo.pk }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Фото комплекта</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body text-center" style="min-height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                        <!-- Large 1200x1200 WebP для полного размера просмотра -->
                                        <img src="{{ photo.get_large_url }}" class="img-fluid" style="height: auto; width: auto; max-height: 75vh; max-width: 85vw;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">Нет фотографий</p>
                    {% endif %}
                </div>
            </div>

            <!-- Метаинформация -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Информация</h5>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-8 text-truncate">Создан:</dt>
                        <dd class="col-sm-4">{{ kit.created_at|date:"d.m.Y H:i" }}</dd>

                        <dt class="col-sm-8 text-truncate">Обновлен:</dt>
                        <dd class="col-sm-4">{{ kit.updated_at|date:"d.m.Y H:i" }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Кнопка назад -->
    <div class="row mt-4">
        <div class="col-12">
            <a href="{% url 'products:products-list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> К списку комплектов
            </a>
        </div>
    </div>
</div>
{% endblock %}
