<!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; }
    .page { width:1200px; max-width:calc(100vw - 48px); margin:24px auto; }
    .panel, .card { background:#fff; border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:18px; }
    .hero h1 { margin:0 0 8px; font-size:30px; font-weight:800; }
    .muted { color:#666; font-size:14px; line-height:1.8; }
    .flash { padding:12px 14px; border-radius:12px; margin-bottom:14px; font-size:14px; line-height:1.8; background:#ecfdf5; color:#166534; }
    .status { font-size:16px; font-weight:800; margin-bottom:10px; }
    .status.pending { color:#b45309; }
    .status.active { color:#2563eb; }
    .status.done { color:#15803d; }
    .status.cancel { color:#b91c1c; }
    .row { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
    .left { flex:1; min-width:260px; }
    .right { min-width:240px; text-align:right; }
    .amount { font-size:24px; font-weight:800; color:#d70018; }
    .countdown { margin-top:10px; padding:10px 12px; border-radius:12px; background:#fff7ed; color:#9a3412; font-size:14px; }
    .actions { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    .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; }
  </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="/merchant/dashboard">商家后台主页</a>
        <a href="/merchant/products">商品管理</a>
        <a href="/merchant/orders">订单管理</a>
        <a href="/account">用户主页</a>
        <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>
      </div>
    </div>
  </div>

  <div class="page">
    {% if ship_msg %}
      <div class="flash">{{ ship_msg }}</div>
    {% endif %}

    <div class="panel hero">
      <h1>商家订单管理</h1>
      <div class="muted">店铺：{{ merchant_ctx.shop_name }}　merchant_id={{ merchant_ctx.merchant_id }}　shop_id={{ merchant_ctx.shop_id }}</div>
    </div>

    {% for o in orders %}
    <div class="card">
      <div class="row">
        <div class="left">
          <div class="status
            {% if o.order_status == 0 %}pending
            {% elif o.order_status in (1, 2) %}active
            {% elif o.order_status == 3 %}done
            {% else %}cancel{% endif %}">
            {{ o.status_text }}
          </div>
          <div class="muted">订单号：{{ o.order_id }}</div>
          <div class="muted">商品件数：{{ o.item_count or 0 }}</div>
          <div class="muted">创建时间：{{ o.created_at }}</div>
          <div class="muted">支付时间：{{ o.paid_at or '未支付' }}</div>
          <div class="muted">发货时间：{{ o.shipped_at or '未发货' }}</div>
          <div class="muted">签收时间：{{ o.received_at or '未签收' }}</div>

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

        <div class="right">
          <div class="amount">¥ {{ '%.2f'|format(o.total_amount) }}</div>
          <div class="actions">
            {% if o.can_ship %}
              <form method="post" action="/merchant/orders/{{ o.order_id }}/ship">
                <button class="btn" type="submit">确认发货</button>
              </form>
            {% else %}
              <button class="btn btn-light" type="button" disabled>当前不可发货</button>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% else %}
      <div class="card muted">当前还没有待处理订单。</div>
    {% endfor %}
  </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>
