<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
    <title>批量付款 - {{ site_branding.browser_title }}</title>
    <style>
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: Arial, "Microsoft YaHei", sans-serif;
            background: #f5f5f7;
            color: #222;
            font-size: 15px;
        }
        a { text-decoration: none; color: inherit; }

        .topbar {
            background: #111;
            color: #fff;
            padding: 14px 24px;
        }
        .topbar-inner {
            width: 1200px;
            max-width: calc(100vw - 48px);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
        }
        .topbar-brand a {
            color: #fff;
            font-size: 20px;
            font-weight: 800;
        }
        .topbar-links {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .topbar-links a,
        .topbar-links span {
            color: #f3f3f3;
            font-size: 14px;
            white-space: nowrap;
        }

        .container {
            width: 1200px;
            max-width: calc(100vw - 48px);
            margin: 24px auto;
        }

        .card {
            background: #fff;
            border-radius: 18px;
            padding: 22px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 18px;
        }

        .title {
            margin: 0 0 16px;
            font-size: 28px;
            font-weight: 800;
        }

        .muted {
            color: #666;
            font-size: 14px;
            line-height: 1.8;
        }

        .order-box {
            border: 1px solid #eee;
            border-radius: 14px;
            padding: 16px;
            margin-top: 14px;
            background: #fafafa;
        }

        .order-name {
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .price {
            color: #d70018;
            font-weight: 800;
            font-size: 18px;
        }

        .total {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 20px;
            font-weight: 800;
        }

        .btn-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 18px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 46px;
            padding: 0 20px;
            border-radius: 10px;
            border: none;
            background: #111;
            color: white;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
        }

        .btn-light {
            background: #efefef;
            color: #222;
        }

        .error {
            margin-bottom: 16px;
            padding: 12px 14px;
            border-radius: 12px;
            background: #fff3f3;
            color: #c40000;
            border: 1px solid #ffd0d0;
            font-size: 14px;
            line-height: 1.7;
        }
    </style>
</head>
<body>
    <div class="topbar">
        <div class="topbar-inner">
            <div class="topbar-brand">
                <a href="/">{{ site_branding.site_name }}</a>
            </div>
            <div class="topbar-links">
                <a href="/orders">我的订单</a>
                <a href="/wallet">我的钱包</a>
                <a href="/account">用户主页</a>
                <a href="/logout">退出</a>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="card">
            <h1 class="title">批量付款</h1>
            <div class="muted">你的购物车中包含多个商家的商品，系统已自动拆分为多张订单。你可以在这里一次性完成付款。</div>
        </div>

        {% if error %}
            <div class="error">{{ error }}</div>
        {% endif %}

        <div class="card">
            {% for order in orders %}
                <div class="order-box">
                    <div class="order-name">订单号：{{ order.order_id }}</div>
                    <div class="muted">创建时间：{{ order.created_at }}</div>
                    <div class="muted">订单金额：<span class="price">¥ {{ "%.2f"|format(order.total_amount) }}</span></div>
                    <div style="margin-top:10px;">
                        {% for item in items_by_order.get(order.order_id, []) %}
                            <div class="muted">· {{ item.product_name }} × {{ item.quantity }}</div>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}

            <div class="total">
                <span>合计应付</span>
                <span style="color:#d70018;">¥ {{ "%.2f"|format(total_amount) }}</span>
            </div>

            <form method="post">
                <input type="hidden" name="order_ids" value="{{ orders | map(attribute='order_id') | join(',') }}">
                <div class="btn-row">
                    <button class="btn" type="submit">一键付款</button>
                    <a class="btn btn-light" href="/orders">返回订单列表</a>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
