{% extends "base.html" %}

{% block content %}
<h1>📦 Управление товарами</h1>

<!-- Форма добавления -->
<div style="background: #FDF5E6; padding: 1rem; margin-bottom: 2rem; border-radius: 10px;">
    <h3>➕ Добавить товар</h3>
    <form method="POST">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem;">
            <input type="text" name="name" placeholder="Название" required style="padding: 0.5rem;">
            <input type="text" name="manufacturer" placeholder="Производитель" style="padding: 0.5rem;">
            <select name="product_type" style="padding: 0.5rem;">
                <option value="">Выберите категорию</option>
                {% for cat in categories %}
                <option value="{{ cat.name }}">{{ cat.name }}</option>
                {% endfor %}
            </select>
            <input type="number" name="purchase_price" placeholder="Цена закупки" step="0.01" style="padding: 0.5rem;">
            <input type="number" name="selling_price" placeholder="Цена продажи" step="0.01" style="padding: 0.5rem;">
            <input type="text" name="expiry_date" placeholder="Срок годности" style="padding: 0.5rem;">
            <input type="number" name="stock_quantity" placeholder="Начальный остаток" style="padding: 0.5rem;">
            <button type="submit" style="background: #CD853F; color: white; padding: 0.5rem;">Добавить</button>
        </div>
    </form>
</div>

<!-- Список товаров -->
<div class="products-grid">
    {% if products %}
        {% for product in products %}
        <div class="product-card">
            <h3>{{ product.name }}</h3>
            <p>🏭 Производитель: {{ product.manufacturer }}</p>
            <p>📋 Категория: {{ product.product_type }}</p>
            <p>💰 Закупка: {{ product.purchase_price }} ₽ | Продажа: {{ product.selling_price }} ₽</p>
            <p>📅 Срок годности: {{ product.expiry_date if product.expiry_date else 'не указан' }}</p>
            <p class="stock {% if product.stock_quantity > 0 %}in-stock{% else %}out-of-stock{% endif %}">
                📦 Остаток: {{ product.stock_quantity }} шт.
            </p>
            <div style="margin-top: 0.5rem; display: flex; gap: 0.5rem;">
                <a href="/products/edit/{{ product.id }}" style="background: #2196F3; color: white; padding: 0.2rem 0.5rem; text-decoration: none; border-radius: 3px;">✏️ Редактировать</a>
                <a href="/products/delete/{{ product.id }}" onclick="return confirm('Удалить товар?')" style="background: #f44336; color: white; padding: 0.2rem 0.5rem; text-decoration: none; border-radius: 3px;">🗑️ Удалить</a>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <p>Товаров пока нет</p>
    {% endif %}
</div>

<style>
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.product-card {
    background: white;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #CD853F30;
}
.product-card h3 {
    color: #CD853F;
    margin-bottom: 0.5rem;
}
.in-stock {
    color: #228B22;
    font-weight: bold;
}
.out-of-stock {
    color: #DC143C;
    font-weight: bold;
}
</style>
{% endblock %}