{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}{{ t.invoice_title }} — {{ t.order_hash_prefix }}{{ order.id }} — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <a href="{% url 'market:order_detail' order.id %}" class="auth-switch" style="display: inline-block; margin-bottom: 10px;">&larr; {{ t.invoice_back_to_order }}</a>
        <h1>{{ t.invoice_title }} — {{ t.order_hash_prefix }}{{ order.id }}</h1>

        <div class="order-card" style="margin-bottom: 20px;">
            <p style="margin: 0 0 4px;"><strong>{{ t.invoice_bill_to }}:</strong> {{ business_name|default:'' }}</p>
            <p style="margin: 0 0 4px; color: var(--muted);">{{ t.invoice_date_label }}: {{ order.delivery_date }} ({{ order.delivery_time_slot }})</p>
            {% if truck_type %}
            <p style="margin: 0; color: var(--muted);">{{ t.invoice_truck_label }}: {{ truck_type.name }} ({{ truck_type.capacity_label }})</p>
            {% endif %}
        </div>

        <table class="cart-table">
            <thead>
                <tr>
                    <th>{{ t.invoice_item_col }}</th>
                    <th>{{ t.invoice_qty_col }}</th>
                    <th style="text-align: right;">{{ t.invoice_unit_price_col }}</th>
                    <th style="text-align: right;">{{ t.invoice_line_total_col }}</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr>
                    <td>{{ item.product_name }}</td>
                    <td>{{ item.qty_label }}</td>
                    <td style="text-align: right;">TSh {{ item.unit_price|floatformat:0 }}</td>
                    <td style="text-align: right;">TSh {{ item.line_total|floatformat:0 }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <div class="cart-summary" style="margin-left: 0; max-width: 100%; margin-top: 12px;">
            <div class="cart-summary-row">
                <span>{{ t.invoice_subtotal_label }}</span>
                <span>TSh {{ order.items_subtotal|floatformat:0 }}</span>
            </div>
            <div class="cart-summary-row">
                <span>{{ t.invoice_delivery_fee_label }}</span>
                <span>TSh {{ order.delivery_fee|floatformat:0 }}</span>
            </div>
            <div class="cart-summary-row">
                <span>{{ t.invoice_picking_fee_label }}</span>
                <span>TSh {{ order.picking_fee|floatformat:0 }}</span>
            </div>
            {% if order.package_fee %}
            <div class="cart-summary-row">
                <span>{{ t.invoice_package_fee_label }}</span>
                <span>TSh {{ order.package_fee|floatformat:0 }}</span>
            </div>
            {% endif %}
            <div class="cart-summary-row total">
                <span>{{ t.invoice_grand_total_label }}</span>
                <span>TSh {{ order.total_amount|floatformat:0 }}</span>
            </div>
        </div>

        <div class="order-card" style="margin-top: 20px; text-align: center;">
            <p style="color: var(--muted); margin-bottom: 14px;">{{ t.invoice_payment_held_notice }}</p>

            {% if payment_methods %}
            <p style="color: var(--muted); margin-bottom: 14px;">{{ t.payment_send_to_one }}</p>
            <div class="payment-methods-list">
                {% for m in payment_methods %}
                <div class="payment-method-row">
                    <span class="provider-badge" style="background: {{ m.provider_color }};">{{ m.provider_label }}</span>
                    <strong>{{ m.lipa_number }}</strong>
                    {% if m.account_name %}<span style="color: var(--muted); font-size: 0.88rem;">{{ m.account_name }}</span>{% endif %}
                    {% if m.instructions %}<span style="color: var(--muted); font-size: 0.82rem;">{{ m.instructions }}</span>{% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}