<!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;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .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;
            text-decoration: none;
        }
        .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;
            line-height: 1;
            white-space: nowrap;
        }
        .topbar-user {
            padding: 8px 12px;
            background: rgba(255,255,255,0.08);
            border-radius: 999px;
        }

        .container {
            width: 1200px;
            max-width: calc(100vw - 48px);
            margin: 24px auto;
            display: grid;
            grid-template-columns: 1fr 360px;
            gap: 18px;
        }

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

        .item {
            display: grid;
            grid-template-columns: 100px 1fr 120px 120px 120px;
            gap: 14px;
            align-items: center;
            padding: 14px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .item:last-child { border-bottom: none; }

        .item img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 12px;
            background: #eee;
        }

        .name {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 6px;
        }

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

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

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

        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;
            font-size: 15px;
        }

        .summary-row.total {
            margin-top: 18px;
            padding-top: 14px;
            border-top: 1px solid #eee;
            font-size: 18px;
            font-weight: 800;
        }

        .btn {
            width: 100%;
            height: 46px;
            border: none;
            border-radius: 10px;
            background: #111;
            color: white;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
        }

        .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;
        }

        .address-box {
            background: #fafafa;
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 14px;
        }

        .address-actions {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
        .address-actions a {
            color: #111;
            font-weight: 700;
        }
    </style>
</head>
<body>
{% set shipping_fee = shipping_fee|default(0) %}
{% set coupon_discount = coupon_discount|default(0) %}
{% set total_amount = total_amount|default(0) %}
{% set payable_amount = payable_amount|default(total_amount + shipping_fee - coupon_discount) %}

{% set shipping_fee = shipping_fee|default(0) %}
{% set total_amount = total_amount|default(0) %}

    <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="/">首页</a>
                <a href="/products">全部商品</a>
                <a href="/cart">购物车</a>
                <a href="/orders">我的订单</a>
                <a href="/wallet">我的钱包</a>
                <a href="/addresses">地址管理</a>
                <a href="/account">用户主页</a>
                <span class="topbar-user">你好，{{ session.get("biz_display_name") }}</span>
                <a href="/logout">退出</a>
            </div>
        </div>
    </div>

    <div class="container">
        <div>
            <div class="card">
                <h2 class="title">确认商品</h2>
                {% for item in items %}
                <div class="item">
                    <div><img src="{{ item.media_url }}" alt="{{ item.product_name }}"></div>
                    <div>
                        <div class="name">{{ item.product_name }}</div>
                        <div class="muted">商品 ID：{{ item.product_id }}</div>
                    </div>
                    <div>
                        <div class="muted">单价</div>
                        <div class="price">¥ {{ "%.2f"|format(item.price) }}</div>
                    </div>
                    <div>
                        <div class="muted">数量</div>
                        <div>{{ item.quantity }}</div>
                    </div>
                    <div>
                        <div class="muted">小计</div>
                        <div class="price">¥ {{ "%.2f"|format(item.subtotal) }}</div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <div>
            <form method="post">
                <div class="card">
                    <h2 class="title">收货地址</h2>

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

                    {% if addresses %}
                        {% for addr in addresses %}
                        <label class="address-box" style="display:block; cursor:pointer;">
                            <div style="margin-bottom:10px;">
                                <input type="radio" name="address_id" value="{{ addr.address_id }}"
                                       {% if addr.is_default or (default_address and addr.address_id == default_address.address_id) %}checked{% endif %}>
                                <strong style="margin-left:6px;">{{ addr.receiver_name }}</strong>
                                <span class="muted"> / {{ addr.receiver_phone }}</span>
                            </div>
                            <div class="muted">
                                {{ addr.province }} {{ addr.city }} {{ addr.district or '' }} {{ addr.detail_address }}
                            </div>
                            <div class="muted">邮编：{{ addr.postal_code or '暂无' }}</div>
                        </label>
                        {% endfor %}
                    {% else %}
                        <div class="error">你还没有收货地址，请先去地址管理新增地址。</div>
                    {% endif %}

                    <div class="address-actions">
                        <a href="/addresses">去地址管理</a>
                    </div>
                </div>

                <div class="card">
                    <h2 class="title">订单汇总</h2>
                    <div class="summary-row">
                        <span>商品数量</span>
                        <span>{{ total_quantity }}</span>
                    </div>
                    <div class="summary-row">
                        <span>商品金额</span>
                        <span>¥ {{ "%.2f"|format(total_amount) }}</span>
                    </div>
                    <div class="summary-row">
                        <span>运费</span>
                        <span>¥ {{ "%.2f"|format(shipping_fee) }}</span>
                    </div>
                    <div class="summary-row total">
                        <span>应付总额</span>
                        <span style="color:#d70018;">¥ {{ "%.2f"|format(payable_amount) }}</span>
                    </div>

                    {% if default_address %}
                        <button class="btn" type="submit" style="margin-top:18px;">提交订单</button>
                    {% else %}
                        <button class="btn" type="button" disabled style="margin-top:18px; opacity:0.6;">请先添加地址</button>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>
</body>
</html>
