{% extends 'base.html' %}
{% set title = 'Каталог игрушек' %}
{% block content %}
<div class="page-title-row">
    <div>
        <h1>Каталог игрушек</h1>
        <p class="muted">Всего найдено: {{ products|length }}</p>
    </div>
    {% if is_admin %}
        <a class="btn btn-accent" href="{{ url_for('product_add') }}">Добавить игрушку</a>
    {% endif %}
</div>

{% if can_search_products %}
<form class="toolbar auto-filter" method="get">
    <input type="text" name="search" value="{{ search }}" placeholder="Поиск по артикулу, названию, описанию, категории...">
    <select name="supplier">
        <option value="">Все поставщики</option>
        {% for supplier in suppliers %}
            <option value="{{ supplier.id_supplier }}" {% if selected_supplier|string == supplier.id_supplier|string %}selected{% endif %}>{{ supplier.supplier_name }}</option>
        {% endfor %}
    </select>
    <select name="sort">
        <option value="name" {% if sort == 'name' %}selected{% endif %}>По названию</option>
        <option value="stock_asc" {% if sort == 'stock_asc' %}selected{% endif %}>Количество ↑</option>
        <option value="stock_desc" {% if sort == 'stock_desc' %}selected{% endif %}>Количество ↓</option>
        <option value="price_asc" {% if sort == 'price_asc' %}selected{% endif %}>Цена ↑</option>
        <option value="price_desc" {% if sort == 'price_desc' %}selected{% endif %}>Цена ↓</option>
    </select>
    <a class="btn btn-secondary" href="{{ url_for('products') }}">Сброс</a>
</form>

{% endif %}

<div class="product-grid">
{% for product in products %}
    <article class="product-card {% if product.stock_quantity == 0 %}stock-empty{% elif product.discount_percent > 17 %}discount-high{% endif %}">
        <div class="product-image-wrap">
            <img src="{{ product_image_url(product.photo_url) }}" alt="{{ product.product_name }}">
        </div>
        <div class="product-main">
            <div class="product-head">
                <h2>{{ product.product_name }}</h2>
                <span class="article">{{ product.article_number }}</span>
            </div>
            <p class="description">{{ product.description or 'Описание отсутствует' }}</p>
            <div class="fields">
                <div><b>Категория:</b> {{ product.category_name }}</div>
                <div><b>Поставщик:</b> {{ product.supplier_name }}</div>
                <div><b>Производитель:</b> {{ product.manufacturer_name }}</div>
                <div><b>Ед. изм.:</b> {{ product.unit }}</div>
                <div><b>На складе:</b> {{ product.stock_quantity }}</div>
                <div><b>Статус:</b> {{ product.availability_status }}</div>
                <div class="full-width"><b>Цена:</b>
                    {% if product.discount_percent > 0 %}
                        <span class="old-price">{{ '%.2f'|format(product.price) }} ₽</span>
                        <span class="final-price">{{ '%.2f'|format(product.discounted_price) }} ₽</span>
                    {% else %}
                        <span class="final-price">{{ '%.2f'|format(product.price) }} ₽</span>
                    {% endif %}
                </div>
                <div><b>Скидка:</b> {{ '%.0f'|format(product.discount_percent) }}%</div>
            </div>
        </div>
        {% if is_admin %}
        <div class="card-actions">
            <a class="btn btn-small" href="{{ url_for('product_edit', product_id=product.id_product) }}">Редактировать</a>
            <form method="post" action="{{ url_for('product_delete', product_id=product.id_product) }}" onsubmit="return confirm('Удалить игрушку?')">
                <button class="btn btn-danger btn-small" type="submit">Удалить</button>
            </form>
        </div>
        {% endif %}
    </article>
{% else %}
    <div class="empty">Игрушки не найдены</div>
{% endfor %}
</div>

<script>
// Поиск, сортировка и фильтрация применяются автоматически, без кнопки «Найти».
const form = document.querySelector('.auto-filter');
if (form) {
    let timer;
    const submitForm = () => form.requestSubmit();
    form.querySelectorAll('select').forEach(el => el.addEventListener('change', submitForm));
    form.querySelectorAll('input[name="search"]').forEach(el => {
        el.addEventListener('input', () => {
            clearTimeout(timer);
            timer = setTimeout(submitForm, 500);
        });
    });
}
</script>
{% endblock %}