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

{% block title %}{{ product.name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'products/css/gallery.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3>{{ product.name }}</h3>
                        <div>
                            {% if perms.products.change_product %}
                            <a href="{% url 'products:product-update' product.pk %}" class="btn btn-outline-primary btn-sm">Редактировать</a>
                            {% endif %}
                            {% if perms.products.delete_product %}
                            <a href="{% url 'products:product-delete' product.pk %}" class="btn btn-outline-danger btn-sm">Удалить</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Секция фотографий в начале -->
                    {% if product_photos %}
                    <div class="mb-4">
                        <h5 class="mb-3">Фотографии товара ({{ photos_count }})</h5>
                        <div class="row g-2">
                            {% for photo in product_photos %}
                            <div class="col-md-3 col-sm-4 col-6">
                                <div class="card shadow-sm h-100 photo-card-with-quality">
                                    <!-- Миниатюра для отображения в сетке, при клике открывает large в модальном окне -->
                                    <div class="photo-container"
                                         data-bs-toggle="modal"
                                         data-bs-target="#photoGalleryModal"
                                         data-bs-slide-to="{{ forloop.counter0 }}"
                                         title="Нажмите для увеличения">
                                        <!-- Миниатюра 200x200 для быстрой загрузки -->
                                        <img src="{{ photo.get_thumbnail_url }}"
                                             alt="Фото товара"
                                             style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                    </div>
                                    <div class="card-body p-2 text-center">
                                        {% if photo.is_main %}
                                        <div class="badge bg-success w-100">⭐ Главное (позиция 1)</div>
                                        {% else %}
                                        <small class="text-muted">Позиция: {{ photo.order|add:1 }}</small>
                                        {% endif %}

                                        <!-- Статус качества под фото -->
                                        <div class="mt-1">
                                            {{ photo|quality_badge_full }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Модальное окно с галереей (Bootstrap Carousel) -->
                    <div class="modal fade" id="photoGalleryModal" tabindex="-1" aria-labelledby="photoGalleryModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="photoGalleryModalLabel">Галерея фотографий товара</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                                </div>
                                <div class="modal-body p-2 p-md-3">
                                    <div id="photoCarousel" class="carousel slide" data-bs-ride="carousel">
                                        <!-- Индикаторы (круглые точки) -->
                                        {% if photos_count > 1 %}
                                        <div class="carousel-indicators">
                                            {% for photo in product_photos %}
                                            <button type="button" data-bs-target="#photoCarousel" data-bs-slide-to="{{ forloop.counter0 }}"
                                                    {% if forloop.first %}class="active" aria-current="true"{% endif %}
                                                    aria-label="Слайд {{ forloop.counter }}"></button>
                                            {% endfor %}
                                        </div>
                                        {% endif %}

                                        <!-- Слайды с фотографиями -->
                                        <div class="carousel-inner">
                                            {% for photo in product_photos %}
                                            <div class="carousel-item {% if forloop.first %}active{% endif %}">
                                                <div class="text-center" style="min-height: 50vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                                    <img src="{{ photo.get_large_url }}" class="d-block" alt="Фото товара" style="height: auto; width: auto; max-height: 65vh; max-width: 90vw; object-fit: contain;">
                                                </div>
                                            </div>
                                            {% endfor %}
                                        </div>

                                        <!-- Кнопки навигации -->
                                        {% if photos_count > 1 %}
                                        <button class="carousel-control-prev" type="button" data-bs-target="#photoCarousel" data-bs-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Предыдущее</span>
                                        </button>
                                        <button class="carousel-control-next" type="button" data-bs-target="#photoCarousel" data-bs-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Следующее</span>
                                        </button>
                                        {% endif %}
                                    </div>

                                    <!-- Дополнительная информация под каруселью -->
                                    {% if photos_count > 1 %}
                                    <div class="text-center mt-2">
                                        <small class="text-muted">
                                            <span id="currentSlide">1</span> из {{ photos_count }}
                                        </small>
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="modal-footer py-2 flex-wrap">
                                    <div id="galleryQualityStatus" class="me-auto d-flex align-items-center gap-2">
                                        <!-- Индикатор качества текущего фото в галерее -->
                                        <span id="mainBadge" {% if not product_photos.0.is_main %}style="display: none;"{% endif %} class="badge bg-success">⭐ Главное</span>
                                    </div>
                                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Закрыть</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">
                    {% endif %}

                    <!-- Основная информация о товаре -->
                    <h5 class="mb-3">Основная информация</h5>
                    <table class="table">
                        <tr>
                            <th>Артикул:</th>
                            <td>{{ product.sku }}</td>
                        </tr>
                        <tr>
                            <th>Остаток:</th>
                            <td>
                                <strong class="fs-5 {% if product.total_free > 0 %}text-success{% else %}text-danger{% endif %}">{{ product.total_free|floatformat:-2 }}</strong> <span class="text-muted">свободно</span>
                                {% if product.total_reserved > 0 %}
                                    <a href="{% url 'inventory:reservation-list' %}?product={{ product.pk }}" class="ms-2 text-warning text-decoration-none" target="_blank" title="Посмотреть резервы"><i class="bi bi-lock"></i> {{ product.total_reserved|floatformat:-2 }} в резерве <i class="bi bi-box-arrow-up-right small"></i></a>
                                {% endif %}
                                <span class="ms-2 text-muted small">(всего: {{ product.total_available|floatformat:-2 }})</span>
                            </td>
                        </tr>
                        <tr>
                            <th>Описание:</th>
                            <td>{{ product.description|default:"-" }}</td>
                        </tr>
                        <tr>
                            <th>Категории:</th>
                            <td>
                                {% if product.categories.all %}
                                    {% for category in product.categories.all %}
                                        <span class="badge bg-primary">{{ category.name }}</span>
                                    {% endfor %}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Теги:</th>
                            <td>
                                {% if product.tags.all %}
                                    {% for tag in product.tags.all %}
                                        {% if tag.is_active %}
                                            <span class="badge bg-secondary">{{ tag.name }}</span>
                                        {% endif %}
                                    {% endfor %}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Единица измерения:</th>
                            <td>
                                {% if product.base_unit %}
                                    <span class="badge bg-secondary">{{ product.base_unit.short_name }}</span>
                                    <small class="text-muted ms-2">{{ product.base_unit.name }}</small>
                                {% else %}
                                    <span class="text-muted">Не указана</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Себестоимость:</th>
                            <td>
                                <strong class="fs-5">{{ product.cost_price }} руб.</strong>
                                {% if cost_price_details.batches %}
                                    <button class="btn btn-sm btn-outline-info ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#costDetails" aria-expanded="false" aria-controls="costDetails">
                                        <i class="bi bi-info-circle"></i> Детали расчета
                                    </button>
                                {% else %}
                                    <span class="badge bg-warning text-dark ms-2">Нет партий на складе</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% if cost_price_details.batches %}
                        <tr>
                            <td colspan="2">
                                <div class="collapse" id="costDetails">
                                    <div class="card card-body bg-light">
                                        <h6 class="mb-3">Разбивка себестоимости по партиям (FIFO)</h6>

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="alert alert-info mb-0">
                                                    <small><strong>Кешированная стоимость:</strong> {{ cost_price_details.cached_cost }} руб.</small>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="alert alert-{% if cost_price_details.is_synced %}success{% else %}warning{% endif %} mb-0">
                                                    <small><strong>Рассчитанная стоимость:</strong> {{ cost_price_details.calculated_cost }} руб.</small>
                                                    {% if not cost_price_details.is_synced %}
                                                        <br><small class="text-danger">⚠ Требуется синхронизация!</small>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered table-hover mb-0">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>Склад</th>
                                                        <th class="text-end">Количество</th>
                                                        <th class="text-end">Себестоимость за ед.</th>
                                                        <th class="text-end">Общая стоимость</th>
                                                        <th>Дата создания</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for batch in cost_price_details.batches %}
                                                    <tr>
                                                        <td>{{ batch.warehouse_name }}</td>
                                                        <td class="text-end">{{ batch.quantity }}</td>
                                                        <td class="text-end">{{ batch.cost_price }} руб.</td>
                                                        <td class="text-end"><strong>{{ batch.total_value }} руб.</strong></td>
                                                        <td>{{ batch.created_at|date:"d.m.Y H:i" }}</td>
                                                    </tr>
                                                    {% endfor %}
                                                </tbody>
                                                <tfoot class="table-secondary">
                                                    <tr>
                                                        <th>Итого:</th>
                                                        <th class="text-end">{{ cost_price_details.total_quantity }}</th>
                                                        <th class="text-end" colspan="3">
                                                            <strong>Средневзвешенная: {{ cost_price_details.calculated_cost }} руб.</strong>
                                                        </th>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>

                                        <div class="mt-3">
                                            <small class="text-muted">
                                                <i class="bi bi-info-circle"></i>
                                                Средневзвешенная себестоимость рассчитывается как: (Σ количество × стоимость) / Σ количество
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {% endif %}
                        <tr>
                            <th>Цена:</th>
                            <td>
                                {% if product.sale_price %}
                                    <span class="text-decoration-line-through text-muted">{{ product.price }} руб.</span>
                                    <strong class="text-danger fs-5">{{ product.sale_price }} руб.</strong>
                                    <span class="badge bg-danger ms-2">Акция</span>
                                {% else %}
                                    <strong class="fs-5">{{ product.price }} руб.</strong>
                                {% endif %}
                            </td>
                        </tr>
                        {% if sales_units %}
                        <tr>
                            <th>Единицы продажи:</th>
                            <td>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Название</th>
                                                <th class="text-end">Коэфф.</th>
                                                <th class="text-end">Цена</th>
                                                <th class="text-center">Мин. кол-во</th>
                                                <th class="text-center">Шаг</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for su in sales_units %}
                                            <tr{% if su.is_default %} class="table-success"{% endif %}>
                                                <td>
                                                    {{ su.name }}
                                                    {% if su.is_default %}<span class="badge bg-success ms-1">По умолчанию</span>{% endif %}
                                                </td>
                                                <td class="text-end">{{ su.conversion_factor }}</td>
                                                <td class="text-end">
                                                    {% if su.sale_price %}
                                                        <span class="text-decoration-line-through text-muted">{{ su.price }}</span>
                                                        <strong class="text-danger">{{ su.sale_price }}</strong> руб.
                                                    {% else %}
                                                        <strong>{{ su.price }}</strong> руб.
                                                    {% endif %}
                                                </td>
                                                <td class="text-center">{{ su.min_quantity }}</td>
                                                <td class="text-center">{{ su.quantity_step }}</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </td>
                        </tr>
                        {% endif %}
                        <tr>
                            <th>Статус:</th>
                            <td>
                                {% if product.is_active %}
                                    <span class="badge bg-info">Активен</span>
                                {% else %}
                                    <span class="badge bg-secondary">Неактивен</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Маркетинговые флаги:</th>
                            <td>
                                {% if product.is_new %}
                                    <span class="badge bg-warning text-dark"><i class="bi bi-stars"></i> Новинка</span>
                                {% endif %}
                                {% if product.is_popular %}
                                    <span class="badge bg-danger"><i class="bi bi-fire"></i> Популярный</span>
                                {% endif %}
                                {% if product.is_special %}
                                    <span class="badge bg-success"><i class="bi bi-percent"></i> Спецпредложение</span>
                                {% endif %}
                                {% if not product.is_new and not product.is_popular and not product.is_special %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Дата создания:</th>
                            <td>{{ product.created_at }}</td>
                        </tr>
                        <tr>
                            <th>Дата обновления:</th>
                            <td>{{ product.updated_at }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Комплекты, содержащие этот товар как единицу продажи -->
            {% if kit_items_using_sales_units %}
            <div class="card mt-4">
                <div class="card-header">
                    <h5>Комплекты, содержащие этот товар как единицу продажи</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>Комплект</th>
                                    <th>Количество в комплекте</th>
                                    <th>Цена за единицу</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for kit_item in kit_items_using_sales_units %}
                                <tr>
                                    <td>
                                        <a href="{% url 'products:productkit-detail' kit_item.kit.pk %}">
                                            {{ kit_item.kit.name }}
                                        </a>
                                    </td>
                                    <td>{{ kit_item.quantity|default:"1" }}</td>
                                    <td>{{ kit_item.sales_unit.actual_price|default:"0.00" }} руб.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Комплекты, содержащие этот товар напрямую -->
            {% if kit_items_using_products %}
            <div class="card mt-4">
                <div class="card-header">
                    <h5>Комплекты, содержащие этот товар напрямую</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>Комплект</th>
                                    <th>Количество в комплекте</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for kit_item in kit_items_using_products %}
                                <tr>
                                    <td>
                                        <a href="{% url 'products:productkit-detail' kit_item.kit.pk %}">
                                            {{ kit_item.kit.name }}
                                        </a>
                                    </td>
                                    <td>{{ kit_item.quantity|default:"1" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Комплекты, содержащие этот товар как часть группы вариантов -->
            {% if variant_group_kit_items %}
            <div class="card mt-4">
                <div class="card-header">
                    <h5>Комплекты, содержащие этот товар как часть группы вариантов</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>Комплект</th>
                                    <th>Группа вариантов</th>
                                    <th>Количество в комплекте</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for variant_group_item in variant_group_kit_items %}
                                    {% for kit_item in variant_group_item.variant_group.kit_items.all %}
                                        {% if kit_item.product == product %}
                                        <tr>
                                            <td>
                                                <a href="{% url 'products:productkit-detail' kit_item.kit.pk %}">
                                                    {{ kit_item.kit.name }}
                                                </a>
                                            </td>
                                            <td>{{ variant_group_item.variant_group.name }}</td>
                                            <td>{{ kit_item.quantity|default:"1" }}</td>
                                        </tr>
                                        {% endif %}
                                    {% endfor %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h4>Действия</h4>
                </div>
                <div class="card-body">
                    <a href="{% url 'products:products-list' %}" class="btn btn-secondary btn-block">Назад к списку</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Обработка галереи фотографий
document.addEventListener('DOMContentLoaded', function() {
    const photoGalleryModal = document.getElementById('photoGalleryModal');
    const photoCarousel = document.getElementById('photoCarousel');

    if (photoGalleryModal && photoCarousel) {
        const currentSlideEl = document.getElementById('currentSlide');
        const mainBadgeEl = document.getElementById('mainBadge');

        // Массив с информацией о фотографиях (включая качество)
        const photos = [
            {% for photo in product_photos %}
            {
                order: {{ photo.order }},
                index: {{ forloop.counter0 }},
                quality_level: '{{ photo.quality_level }}',
                quality_warning: {{ photo.quality_warning|lower }},
                width: {{ photo.width|default:0 }},
                height: {{ photo.height|default:0 }}
            }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];

        // Обработка клика на миниатюру для открытия галереи на нужном слайде
        photoGalleryModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const slideIndex = button.getAttribute('data-bs-slide-to');
            if (slideIndex !== null) {
                const carousel = bootstrap.Carousel.getOrCreateInstance(photoCarousel);
                carousel.to(parseInt(slideIndex));
            }
        });

        // Обновление статуса при переключении слайдов
        photoCarousel.addEventListener('slid.bs.carousel', function (event) {
            const activeIndex = event.to;
            const photoInfo = photos[activeIndex];

            // Обновляем счетчик слайдов
            if (currentSlideEl) {
                currentSlideEl.textContent = activeIndex + 1;
            }

            // Обновляем бейдж "Главное фото"
            if (mainBadgeEl && photoInfo) {
                mainBadgeEl.style.display = photoInfo.order === 0 ? 'inline' : 'none';
            }

            // Обновляем статус качества
            const qualityStatusEl = document.getElementById('galleryQualityStatus');
            if (qualityStatusEl && photoInfo) {
                updateQualityStatus(qualityStatusEl, photoInfo);
            }
        });

        // Обработка нажатий клавиш-стрелок для навигации
        const handleKeydown = function(event) {
            if (event.key === 'ArrowLeft') {
                event.preventDefault();
                const carousel = bootstrap.Carousel.getOrCreateInstance(photoCarousel);
                carousel.prev();
            } else if (event.key === 'ArrowRight') {
                event.preventDefault();
                const carousel = bootstrap.Carousel.getOrCreateInstance(photoCarousel);
                carousel.next();
            }
        };

        // Добавляем обработчик клавиш при открытии модального окна
        photoGalleryModal.addEventListener('shown.bs.modal', function () {
            document.addEventListener('keydown', handleKeydown);

            // Инициализируем статус качества первого фото
            const qualityStatusEl = document.getElementById('galleryQualityStatus');
            if (qualityStatusEl && photos[0]) {
                updateQualityStatus(qualityStatusEl, photos[0]);
            }
        });

        // Удаляем обработчик клавиш при закрытии модального окна
        photoGalleryModal.addEventListener('hidden.bs.modal', function () {
            document.removeEventListener('keydown', handleKeydown);
        });

        // Функция обновления статуса качества
        function updateQualityStatus(element, photoInfo) {
            let qualityHTML = '';

            if (photoInfo.quality_warning) {
                qualityHTML = '<span class="badge bg-danger"><i class="bi bi-exclamation-circle"></i> Требует обновления</span>';
            } else {
                const qualityInfo = {
                    'excellent': { symbol: '🟢', label: 'Отлично', color: 'success' },
                    'good': { symbol: '🟡', label: 'Хорошо', color: 'info' },
                    'acceptable': { symbol: '🟠', label: 'Приемлемо', color: 'warning' },
                    'poor': { symbol: '🔴', label: 'Плохо', color: 'danger' },
                    'very_poor': { symbol: '🔴', label: 'Очень плохо', color: 'danger' },
                };

                const info = qualityInfo[photoInfo.quality_level] || { symbol: '⚪', label: 'Неизвестно', color: 'secondary' };
                const sizeInfo = photoInfo.width && photoInfo.height ? ` (${photoInfo.width}×${photoInfo.height}px)` : '';

                qualityHTML = `<span class="badge bg-${info.color}">${info.symbol} ${info.label}${sizeInfo}</span>`;
            }

            element.innerHTML = qualityHTML;
        }
    }
});
</script>
{% endblock %}