{% extends 'base.html' %}

{% block title %}Преобразовать в постоянный комплект{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h1>Преобразовать временный комплект в постоянный</h1>
            <p class="text-muted">
                Этот комплект был создан специально для заказа. Вы можете добавить его в каталог,
                отредактировав название, описание и добавив категории.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <!-- Форма редактирования -->
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Информация о комплекте</h5>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        <div class="mb-3">
                            <label for="{{ form.name.id_for_label }}" class="form-label">Название *</label>
                            <input type="text"
                                   name="{{ form.name.html_name }}"
                                   class="form-control{% if form.name.errors %} is-invalid{% endif %}"
                                   id="{{ form.name.id_for_label }}"
                                   value="{{ form.name.value|default:'' }}"
                                   required>
                            {% if form.name.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.name.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">Описание</label>
                            <textarea name="{{ form.description.html_name }}"
                                      class="form-control{% if form.description.errors %} is-invalid{% endif %}"
                                      id="{{ form.description.id_for_label }}"
                                      rows="3">{{ form.description.value|default:'' }}</textarea>
                            {% if form.description.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.description.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.categories.id_for_label }}" class="form-label">Категории</label>
                            <select name="{{ form.categories.html_name }}"
                                    class="form-select{% if form.categories.errors %} is-invalid{% endif %}"
                                    id="{{ form.categories.id_for_label }}"
                                    multiple>
                                {% for value, label in form.categories.field.choices %}
                                    <option value="{{ value }}"
                                            {% if value in form.categories.value %}selected{% endif %}>
                                        {{ label }}
                                    </option>
                                {% endfor %}
                            </select>
                            {% if form.categories.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.categories.errors }}
                                </div>
                            {% endif %}
                            <small class="form-text text-muted">
                                Выберите категории, к которым относится этот комплект
                            </small>
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.tags.id_for_label }}" class="form-label">Теги</label>
                            <select name="{{ form.tags.html_name }}"
                                    class="form-select{% if form.tags.errors %} is-invalid{% endif %}"
                                    id="{{ form.tags.id_for_label }}"
                                    multiple>
                                {% for value, label in form.tags.field.choices %}
                                    <option value="{{ value }}"
                                            {% if value in form.tags.value %}selected{% endif %}>
                                        {{ label }}
                                    </option>
                                {% endfor %}
                            </select>
                            {% if form.tags.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.tags.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.sale_price.id_for_label }}" class="form-label">Цена со скидкой</label>
                            <input type="number"
                                   name="{{ form.sale_price.html_name }}"
                                   class="form-control{% if form.sale_price.errors %} is-invalid{% endif %}"
                                   id="{{ form.sale_price.id_for_label }}"
                                   value="{{ form.sale_price.value|default:'' }}"
                                   step="0.01"
                                   min="0">
                            {% if form.sale_price.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.sale_price.errors }}
                                </div>
                            {% endif %}
                            <small class="form-text text-muted">
                                Опционально. Если указано, комплект будет продаваться по этой цене.
                            </small>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-between">
                            <a href="{% url 'orders:order-detail' kit.order.order_number %}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Отмена
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-check-circle"></i> Сделать постоянным
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Компоненты комплекта (только для просмотра) -->
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Состав комплекта</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Товар</th>
                                <th>Количество</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for kit_item in kit_items %}
                            <tr>
                                <td>
                                    {% if kit_item.variant_group %}
                                        <span class="text-muted">[Варианты]</span> {{ kit_item.variant_group.name }}
                                    {% elif kit_item.product %}
                                        {{ kit_item.product.name }}
                                    {% endif %}
                                </td>
                                <td>{{ kit_item.quantity }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Ценообразование -->
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Ценообразование</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-6"><strong>Базовая цена:</strong></div>
                        <div class="col-6 text-end">{{ kit.base_price }} руб.</div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-6"><strong>Итоговая цена:</strong></div>
                        <div class="col-6 text-end"><strong>{{ kit.actual_price }} руб.</strong></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
