{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/vendor/assets/css/vendor.ui.css">
{% endblock %}

{% block content %}
<div class="container vendor-portal" data-vendor-page="settlements"
     data-currency="{{ currency_symbol | default(value='₹') }}">
    {% if vendor %}
    <header class="vendor-hero">
        <h1>Money waiting</h1>
        <p class="text-muted">Amounts the store still needs to pay you for packed orders.</p>
    </header>

    <div class="vendor-kpi-card vendor-kpi-card--solo">
        <span class="vendor-kpi-label">Total waiting</span>
        <span class="vendor-kpi-value">{{ currency_symbol | default(value='₹') }}{{ pending_total | default(value=0) | round(precision=2) }}</span>
    </div>

    <section class="vendor-section">
        <h2>By product</h2>
        {% if consolidation | length > 0 %}
        <div class="vendor-settle-list">
            {% for row in consolidation %}
            <div class="vendor-settle-product">
                <h3>{{ row.product_title }}</h3>
                <div class="vendor-settle-band">
                    <div>
                        <span class="vendor-settle-qty">{{ row.total_quantity }} units</span>
                        <span class="text-muted">at {{ currency_symbol | default(value='₹') }}{{ row.vendor_unit_price }} each</span>
                        {% if row.first_fulfilled_at and row.last_fulfilled_at and row.first_fulfilled_at != row.last_fulfilled_at %}
                        <span class="vendor-settle-dates text-muted">
                            {{ row.first_fulfilled_at | date_in_tz(timezone=settings.timezone) }}
                            –
                            {{ row.last_fulfilled_at | date_in_tz(timezone=settings.timezone) }}
                        </span>
                        {% elif row.last_fulfilled_at %}
                        <span class="vendor-settle-dates text-muted">{{ row.last_fulfilled_at | date_in_tz(timezone=settings.timezone) }}</span>
                        {% endif %}
                    </div>
                    <strong>{{ currency_symbol | default(value='₹') }}{{ row.total_amount | round(precision=2) }}</strong>
                </div>
            </div>
            {% endfor %}
        </div>
        <p class="text-muted vendor-settle-note">If the same product shows more than one price, that means your rate changed between orders.</p>
        {% else %}
        <div class="empty-state card p-4 text-center">
            <p class="mb-0 text-muted">Nothing waiting right now. Packed orders will show up here.</p>
        </div>
        {% endif %}
    </section>

    <section class="vendor-section">
        <h2>Already paid</h2>
        {% if settled_history | length > 0 %}
        <ul class="vendor-settled-list">
            {% for s in settled_history %}
            <li>
                <div>
                    <strong>{{ s.product_title }}</strong>
                    <span class="text-muted">Order #{{ s.order_number }} · {{ s.quantity }} × {{ currency_symbol | default(value='₹') }}{{ s.vendor_unit_price }}</span>
                </div>
                <div class="vendor-settled-right">
                    <strong>{{ currency_symbol | default(value='₹') }}{{ s.amount | round(precision=2) }}</strong>
                    {% if s.settled_at %}<span class="text-muted">{{ s.settled_at | date_in_tz(timezone=settings.timezone) }}</span>{% endif %}
                </div>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="text-muted">No paid history yet.</p>
        {% endif %}
    </section>
    {% else %}
    <div class="card p-5 text-center vendor-access-denied">
        <h3>Vendor access needed</h3>
    </div>
    {% endif %}
</div>
{% endblock %}