{% extends "base.html" %}

{% block content %}
<h1>📋 Заказы поставщика: {{ supplier.name }}</h1>

<div style="background: #FDF5E6; padding: 1rem; margin-bottom: 2rem; border-radius: 10px;">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
        <div>
            <strong>📞 Контакт:</strong> {{ supplier.contact }}
        </div>
        <div>
            <strong>📱 Телефон:</strong> {{ supplier.phone }}
        </div>
        <div>
            <strong>📦 Всего поставок:</strong> {{ orders|length }}
        </div>
        <div>
            <strong>📦 Всего товара:</strong> {{ total_items }} шт.
        </div>
        <div>
            <strong>💰 Общая сумма:</strong> {{ "{:,.0f}".format(total_sum) }} ₽
        </div>
    </div>
    <div style="margin-top: 1rem;">
        <a href="/suppliers" class="btn-back">← Назад к поставщикам</a>
    </div>
</div>

{% if orders %}
    <div class="orders-list">
        {% for order in orders %}
        <div class="order-card">
            <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
                <strong>📄 Поступление #{{ order.id }}</strong>
                <span style="color: #666;">{{ order.date }}</span>
            </div>
            <p><strong>📦 Товар:</strong> {{ order.product_name }}</p>
            <p><strong>📦 Количество:</strong> {{ order.quantity }} шт.</p>
            <p><strong>💰 Цена закупки:</strong> {{ order.purchase_price }} ₽</p>
            <p><strong>💰 Общая сумма:</strong> {{ order.total }} ₽</p>
        </div>
        {% endfor %}
    </div>
{% else %}
    <div style="text-align: center; padding: 3rem; background: #FDF5E6; border-radius: 10px;">
        <p>📭 У этого поставщика пока нет заказов.</p>
        <p><a href="/incoming" class="btn-primary">➕ Оформить поступление</a></p>
    </div>
{% endif %}

<style>
.order-card {
    background: #FDF5E6;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    border-left: 4px solid #CD853F;
}
.btn-back {
    display: inline-block;
    background: #666;
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 5px;
}
.btn-back:hover {
    background: #555;
}
.btn-primary {
    display: inline-block;
    background: #CD853F;
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 5px;
}
.btn-primary:hover {
    background: #B87333;
}
.orders-list {
    margin-top: 1rem;
}
</style>
{% endblock %}