{% extends 'base.html' %}

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

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <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>

                            <!-- Артикул и Slug в один ряд -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    {{ 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="col-md-6">
                                    {{ form.slug.label_tag }}
                                    {{ form.slug }}
                                    {% if form.slug.help_text %}
                                        <small class="form-text text-muted">{{ form.slug.help_text }}</small>
                                    {% endif %}
                                    {% if form.slug.errors %}
                                        <div class="text-danger">{{ form.slug.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- Родитель и Статус в один ряд -->
                            <div class="row mb-3">
                                <div class="col-md-8">
                                    {{ form.parent.label_tag }}
                                    {{ form.parent }}
                                    {% if form.parent.help_text %}
                                        <small class="form-text text-muted">{{ form.parent.help_text }}</small>
                                    {% endif %}
                                    {% if form.parent.errors %}
                                        <div class="text-danger">{{ form.parent.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check mt-4">
                                        {{ form.is_active }}
                                        {{ form.is_active.label_tag }}
                                    </div>
                                    {% if form.is_active.help_text %}
                                        <small class="form-text text-muted">{{ form.is_active.help_text }}</small>
                                    {% endif %}
                                    {% if form.is_active.errors %}
                                        <div class="text-danger">{{ form.is_active.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Блок 2: Фотографии -->
                        <div class="mb-4 p-3 bg-light rounded">
                            <h5 class="mb-3">Фотографии</h5>

                            <!-- Существующие фотографии (только при редактировании) -->
                            {% if object and category_photos %}
                            <div class="mb-3">
                                <h6 class="mb-3">Текущие фотографии ({{ photos_count }})</h6>
                                <div class="row g-2 mb-3">
                                    {% for photo in category_photos %}
                                    <div class="col-md-3 col-sm-4 col-6">
                                        <div class="card shadow-sm h-100">
                                            <div style="width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; cursor: pointer; overflow: hidden;"
                                                 data-bs-toggle="modal"
                                                 data-bs-target="#photoModal{{ photo.pk }}"
                                                 title="Нажмите для увеличения">
                                                <img src="{{ photo.image.url }}"
                                                     alt="Фото категории"
                                                     style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                            </div>
                                            <div class="card-body p-2">
                                                {% if photo.order == 0 %}
                                                <div class="badge bg-success w-100 mb-1">Главное</div>
                                                {% else %}
                                                <a href="{% url 'products:category-photo-set-main' photo.pk %}"
                                                   class="btn btn-outline-primary btn-sm w-100 mb-1 py-0"
                                                   title="Сделать главным">
                                                    Главным
                                                </a>
                                                {% endif %}

                                                <div class="btn-group w-100 mb-1" role="group">
                                                    <a href="{% url 'products:category-photo-move-up' photo.pk %}"
                                                       class="btn btn-outline-secondary btn-sm py-0">
                                                        ↑
                                                    </a>
                                                    <a href="{% url 'products:category-photo-move-down' photo.pk %}"
                                                       class="btn btn-outline-secondary btn-sm py-0">
                                                        ↓
                                                    </a>
                                                </div>

                                                <a href="{% url 'products:category-photo-delete' photo.pk %}"
                                                   class="btn btn-danger btn-sm w-100 py-0"
                                                   onclick="return confirm('Удалить это фото?');">
                                                    Удалить
                                                </a>

                                                <small class="text-muted d-block mt-1 text-center">Позиция: {{ photo.order }}</small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Модальное окно для просмотра фото -->
                                    <div class="modal fade" id="photoModal{{ photo.pk }}" tabindex="-1">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <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">
                                                    <img src="{{ photo.image.url }}" class="img-fluid" alt="Фото категории" style="max-height: 70vh;">
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                                                    <a href="{% url 'products:category-photo-delete' photo.pk %}"
                                                       class="btn btn-danger"
                                                       onclick="return confirm('Удалить это фото?');">
                                                        Удалить фото
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% endif %}

                            <!-- Поле для загрузки новых фотографий -->
                            <div class="mb-0">
                                <label for="id_photos" class="form-label fw-bold">
                                    {% if object %}Добавить новые фото{% else %}Загрузить фото{% endif %}
                                </label>
                                <input type="file" name="photos" accept="image/*" multiple class="form-control" id="id_photos">
                                <small class="form-text text-muted">
                                    Выберите фото для категории (можно выбрать несколько, до 10 штук)
                                </small>
                            </div>
                        </div>

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