{% extends "base.html" %}

{% block title %}Корзина{% endblock %}

{% block content %}
<h3 class="mb-4">🛒 Корзина</h3>

{% if items %}
<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Товар</th>
                                <th style="width:130px;">Количество</th>
                                <th>Цена</th>
                                <th>Сумма</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in items %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        {% if item.product.image %}
                                            <img src="{{ url_for('static', filename='uploads/products/' ~ item.product.image) }}"
                                                 width="56" height="56" style="object-fit:cover;border-radius:8px;" alt="">
                                        {% else %}
                                            <div style="width:56px;height:56px;background:#e9ecef;border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                                🛍️
                                            </div>
                                        {% endif %}
                                        <div>
                                            <strong>{{ item.product.name }}</strong>
                                            {% if item.product.stock is defined %}
                                                <br><small class="text-muted">На складе: {{ item.product.stock }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <form method="POST" action="{{ url_for('cart_update', item_id=item.id) }}"
                                          class="d-flex align-items-center gap-1">
                                        <input type="number" name="quantity" value="{{ item.quantity }}"
                                               min="1" max="{{ item.product.stock or 99 }}"
                                               class="form-control form-control-sm" style="width:65px;"
                                               onchange="this.form.submit()">
                                    </form>
                                </td>
                                <td>{{ item.product.price }} ₽</td>
                                <td><strong>{{ item.product.price * item.quantity }} ₽</strong></td>
                                <td>
                                    <form method="POST" action="{{ url_for('cart_remove', item_id=item.id) }}">
                                        <button type="submit" class="btn btn-sm btn-outline-danger">✕</button>
                                    </form>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Итог -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">Итого</h5>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2">
                    <span>Товаров:</span>
                    <strong>{{ items|sum(attribute='quantity') }} шт.</strong>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <span>Сумма:</span>
                    <strong class="text-success fs-5">{{ total }} ₽</strong>
                </div>
                <a href="{{ url_for('checkout') }}" class="btn btn-success w-100 py-2">
                    ✅ Оформить заказ
                </a>
                <a href="{{ url_for('catalog') }}" class="btn btn-outline-secondary w-100 mt-2">
                    ← Продолжить покупки
                </a>
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="text-center py-5 text-muted">
    <div class="fs-1">🛒</div>
    <h5 class="mt-3">Корзина пуста</h5>
    <p>Добавьте товары из каталога</p>
    <a href="{{ url_for('catalog') }}" class="btn btn-primary">Перейти в каталог</a>
</div>
{% endif %}
{% endblock %}