<!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; }
    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; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .topbar-links a, .topbar-links span { color:#f3f3f3; font-size:14px; white-space:nowrap; }
    .topbar-user { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; background:rgba(255,255,255,.08); border-radius:999px; }
    .topbar-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#eee; }

    .container { width:1200px; max-width:calc(100vw - 48px); margin:24px auto; }
    .card { background:#fff; border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:18px; }
    .title { font-size:30px; font-weight:800; margin:0 0 10px; }
    .muted { color:#666; font-size:14px; line-height:1.8; }
    .notice { margin-bottom:14px; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.8; background:#f2fff4; color:#157a28; border:1px solid #c9f0d0; }
    .status { font-size:18px; font-weight:800; margin-bottom:12px; }
    .countdown { margin-top:12px; padding:10px 12px; border-radius:12px; background:#fff7ed; color:#9a3412; font-size:14px; }
    .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; background:#111; color:#fff; border:none; font-size:14px; cursor:pointer; }
    .btn-light { background:#efefef; color:#222; }
    table { width:100%; border-collapse:collapse; }
    th, td { padding:12px 10px; border-bottom:1px solid #eee; text-align:left; vertical-align:middle; }
    th { background:#fafafa; }
    .thumb { width:72px; height:72px; object-fit:cover; border-radius:12px; border:1px solid #ddd; }
  </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="/">首页</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>
        {% if session.get("biz_is_merchant") %}
          <a href="/merchant/dashboard">商家后台主页</a>
        {% else %}
          <a href="/merchant/apply">商家入驻申请</a>
        {% endif %}
        {% if session.get("biz_is_admin") %}
          <a href="/admin/">管理员后台主页</a>
        {% endif %}
        {% if session.get("biz_user_id") %}
          <span class="topbar-user">
            <img class="topbar-avatar" src="{{ session.get('biz_avatar_url') or '/uploads/avatars/default-avatar.png' }}" alt="头像">
            <span>你好，{{ session.get("biz_display_name") }}</span>
          </span>
          <a href="/logout">退出</a>
        {% else %}
          <a href="/firebase-login">登录</a>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="container">
    {% if pay_msg or request.args.get('pay_msg') %}
      <div class="notice">{{ pay_msg or request.args.get('pay_msg') }}</div>
    {% endif %}

    <div class="card">
      <h1 class="title">订单详情</h1>
      <div class="status">
        {{ order.status_text if order.status_text is defined else ('待支付' if order.order_status == 0 else '已支付，待发货' if order.order_status == 1 else '已发货，待收货' if order.order_status == 2 else '已完成' if order.order_status == 3 else '已取消') }}
      </div>
      <div class="muted">订单号：{{ order.order_id }}</div>
      <div class="muted">订单金额：¥ {{ '%.2f'|format(order.total_amount) }}</div>
      <div class="muted">创建时间：{{ order.created_at }}</div>
      <div class="muted">支付时间：{{ order.paid_at or '未支付' }}</div>

      {% if order.countdown_label is defined and order.countdown_deadline_iso %}
        <div class="countdown" data-deadline="{{ order.countdown_deadline_iso }}">
          {{ order.countdown_label }}：<span class="time-text">{{ order.countdown_text }}</span>
        </div>
      {% endif %}

      <div class="actions">
        {% if order.order_status == 0 %}
          <a class="btn" href="/orders/{{ order.order_id }}/pay">立即支付</a>
        {% endif %}

        {% if order.can_confirm_receipt is defined and order.can_confirm_receipt %}
          <form method="post" action="/orders/{{ order.order_id }}/confirm-receipt">
            <button class="btn" type="submit">确认收货</button>
          </form>
        {% elif shipment and shipment.status == 1 %}
          <form method="post" action="/orders/{{ order.order_id }}/confirm-receipt">
            <button class="btn" type="submit">确认收货</button>
          </form>
        {% endif %}

        <a class="btn btn-light" href="/orders">返回订单列表</a>
      </div>
    </div>

    {% if address %}
    <div class="card">
      <h2 style="margin-top:0;">收货地址</h2>
      <div class="muted">{{ address.receiver_name }}　{{ address.receiver_phone }}</div>
      <div class="muted">{{ address.province }} {{ address.city }} {{ address.district }} {{ address.detail_address }}</div>
      <div class="muted">邮编：{{ address.postal_code or '暂无' }}</div>
    </div>
    {% endif %}

    {% if shipment %}
    <div class="card">
      <h2 style="margin-top:0;">物流信息</h2>
      <div class="muted">
        物流状态：
        {% if shipment.status == 0 %}
          待发货
        {% elif shipment.status == 1 %}
          已发货
        {% elif shipment.status == 2 %}
          已签收
        {% else %}
          状态 {{ shipment.status }}
        {% endif %}
      </div>
      <div class="muted">物流公司：{{ shipment.carrier_name or '暂无' }}</div>
      <div class="muted">运单号：{{ shipment.tracking_no or '暂无' }}</div>
      <div class="muted">发货时间：{{ shipment.shipped_at or '暂无' }}</div>
      <div class="muted">签收时间：{{ shipment.received_at or '暂无' }}</div>
    </div>
    {% endif %}

    <div class="card">
      <h2 style="margin-top:0;">商品明细</h2>
      <table>
        <thead>
          <tr>
            <th>图片</th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
          </tr>
        </thead>
        <tbody>
          {% for item in items %}
          <tr>
            <td><img class="thumb" src="{{ item.media_url or '/uploads/products/default.png' }}" alt=""></td>
            <td>{{ item.product_name }}</td>
            <td>¥ {{ '%.2f'|format(item.price) }}</td>
            <td>{{ item.quantity }}</td>
            <td>¥ {{ '%.2f'|format(item.subtotal) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% if logs %}
    <div class="card">
      <h2 style="margin-top:0;">状态日志</h2>
      {% for log in logs %}
        <div class="muted">{{ log.created_at }}　{{ log.remark }}</div>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <script>
    function formatRemain(seconds) {
      if (seconds < 0) seconds = 0;
      const days = Math.floor(seconds / 86400);
      seconds %= 86400;
      const hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      const minutes = Math.floor(seconds / 60);
      const secs = seconds % 60;
      const pad = n => String(n).padStart(2, '0');
      if (days > 0) return `${days}天 ${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
      return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
    }

    function refreshCountdowns() {
      document.querySelectorAll('[data-deadline]').forEach(el => {
        const raw = el.dataset.deadline || '';
        const deadline = new Date(raw.replace(' ', 'T'));
        const now = new Date();
        const sec = Math.floor((deadline - now) / 1000);
        const txt = el.querySelector('.time-text');
        if (txt) txt.textContent = formatRemain(sec);
      });
    }

    refreshCountdowns();
    setInterval(refreshCountdowns, 1000);
  </script>
</body>
</html>
