{% extends "cms/base.html" %}
{% block title %}客户管理 - ARIFU CMS{% endblock %}
{% set active='customers' %}
{% block content %}
<h2 style="margin-bottom:20px;">👥 注册客户管理</h2>

<div class="stats">
  <div class="stat-card"><div class="num">{{ customers|length }}</div><div class="label">注册客户</div></div>
  <div class="stat-card"><div class="num green">{{ active_count }}</div><div class="label">活跃客户</div></div>
  <div class="stat-card"><div class="num" style="color:#e74c3c;">{{ blocked_count }}</div><div class="label">已冻结</div></div>
</div>

<div class="card">
  <h2>👥 客户列表</h2>
  <div class="toolbar">
    <input type="text" id="searchCust" class="form-control" placeholder="🔍 搜索公司/姓名/邮箱…" style="max-width:280px;">
  </div>
  <table>
    <tr><th>公司</th><th>联系人</th><th>邮箱</th><th>电话</th><th>行业</th><th>状态</th><th>注册时间</th><th>最近登录</th><th>操作</th></tr>
    {% for c in customers %}
    <tr>
      <td><strong>{{ c.company or '—' }}</strong></td>
      <td>{{ c.name }}</td>
      <td style="font-size:12px;">{{ c.email }}</td>
      <td style="font-size:12px;">{{ c.phone or '—' }}</td>
      <td style="font-size:12px;color:var(--muted);">{{ c.industry or '—' }}</td>
      <td><span class="status-{{ c.status }}">{{ c.status }}</span></td>
      <td style="font-size:11px;color:var(--muted);">{{ c.created_at[:10] }}</td>
      <td style="font-size:11px;color:var(--muted);">{{ c.last_login[:10] if c.last_login else '从未' }}</td>
      <td>
        <div class="btn-group">
          {% if c.status == 'active' %}
          <button class="btn btn-sm btn-danger" onclick="toggleCustomer({{ c.id }},'blocked')">冻结</button>
          {% else %}
          <button class="btn btn-sm btn-green" onclick="toggleCustomer({{ c.id }},'active')">激活</button>
          {% endif %}
          <button class="btn btn-sm btn-danger" onclick="delCustomer({{ c.id }},'{{ c.name }}')">删除</button>
        </div>
      </td>
    </tr>
    {% endfor %}
  </table>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('searchCust').addEventListener('input', e => {
  const q = e.target.value.toLowerCase();
  document.querySelectorAll('tbody tr').forEach(row => {
    row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
  });
});
async function toggleCustomer(id, status) {
  await fetch(`/admin/api/customers/${id}/`, {
    method:'PUT', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({status})
  });
  location.reload();
}
async function delCustomer(id, name) {
  if (!confirm(`删除客户「${name}」？此操作不可恢复。`)) return;
  await fetch(`/admin/api/customers/${id}/`, {method:'DELETE'});
  location.reload();
}
</script>
{% endblock %}