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

<!-- 统计 -->
<div class="stats">
  <div class="stat-card"><div class="num orange">{{ stats.pending }}</div><div class="label">待处理</div></div>
  <div class="stat-card"><div class="num" style="color:#0066CC;">{{ stats.processing }}</div><div class="label">跟进中</div></div>
  <div class="stat-card"><div class="num green">{{ stats.quoted }}</div><div class="label">已报价</div></div>
  <div class="stat-card"><div class="num">{{ stats.won }}</div><div class="label">成交</div></div>
  <div class="stat-card"><div class="num">{{ stats.total }}</div><div class="label">总计</div></div>
  <div class="stat-card"><div class="num" style="color:#e74c3c;">{{ stats.today }}</div><div class="label">今日新增</div></div>
</div>

<!-- 筛选 -->
<div class="card" style="padding:14px 20px;">
  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
    <span style="font-size:13px;font-weight:600;">状态：</span>
    <a href="/admin/inquiries/" class="btn btn-sm {{ 'btn-primary' if not status_filter else 'btn-gray' }}">全部</a>
    {% for s, label in [('pending','📝 待处理'),('processing','🔄 跟进中'),('quoted','📄 已报价'),('won','✅ 成交'),('lost','❌ 流失')] %}
    <a href="/admin/inquiries/?status={{ s }}" class="btn btn-sm {{ 'btn-primary' if status_filter==s else 'btn-gray' }}">{{ label }}</a>
    {% endfor %}
    <input type="text" id="searchInquiry" class="form-control" placeholder="🔍 搜索公司/联系人/邮箱…" style="max-width:220px;margin-left:auto;">
  </div>
</div>

<!-- 需求列表 -->
<div class="card" style="margin-top:16px;">
  <table>
    <tr>
      <th>ID</th><th>行业</th><th>公司</th><th>联系人</th><th>电话</th>
      <th>状态</th><th>时间</th><th>操作</th>
    </tr>
    {% for i in inquiries %}
    <tr>
      <td style="color:var(--muted);font-size:12px;">#{{ i.id }}</td>
      <td>{{ i.industry_type_icon | safe }} {{ i.industry_label or i.industry_type }}</td>
      <td><strong>{{ i.company or '—' }}</strong></td>
      <td>{{ i.contact_name or '—' }}</td>
      <td style="font-size:12px;">{{ i.contact_phone or '—' }}</td>
      <td>
        <select class="form-control" style="padding:3px 8px;font-size:11px;width:auto;" onchange="updateInquiryStatus({{ i.id }},this.value)">
          {% for s, label in [('pending','待处理'),('processing','跟进中'),('quoted','已报价'),('won','成交'),('lost','流失')] %}
          <option value="{{ s }}" {{ 'selected' if i.status==s else '' }}>{{ label }}</option>
          {% endfor %}
        </select>
      </td>
      <td style="font-size:11px;color:var(--muted);">{{ i.created_at[:10] }}</td>
      <td><button class="btn btn-sm btn-primary" onclick="showInquiry({{ i.id }})">查看详情</button></td>
    </tr>
    {% endfor %}
  </table>
</div>

<!-- 详情弹窗 -->
<div class="modal-overlay" id="inquiryModal">
  <div class="modal" style="max-width:720px;">
    <button class="close" onclick="closeModal('inquiryModal')">✕</button>
    <h3>📋 需求详情 <span id="modalId" style="font-size:13px;color:var(--muted);"></span></h3>
    <div id="modalContent"></div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function showInquiry(id) {
  const res = await fetch(`/admin/api/inquiry/${id}/`);
  const d = await res.json();
  document.getElementById('modalId').textContent = `#${id} · ${d.company || ''} · ${d.contact_name || ''}`;
  let html = `<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">`;
  html += `<div><strong>公司：</strong>${d.company||'—'}</div>`;
  html += `<div><strong>联系人：</strong>${d.contact_name||'—'}</div>`;
  html += `<div><strong>电话：</strong>${d.contact_phone||'—'}</div>`;
  html += `<div><strong>邮箱：</strong>${d.contact_email||'—'}</div>`;
  html += `<div><strong>行业：</strong>${d.industry_label||d.industry_type}</div>`;
  html += `<div><strong>提交时间：</strong>${d.created_at}</div></div>`;
  html += `<h4 style="margin:12px 0 8px;">需求参数</h4><div style="background:#f8f9fa;border-radius:8px;padding:14px;">`;
  for (const [k, v] of Object.entries(d.fields || {})) {
    html += `<div style="display:flex;padding:4px 0;border-bottom:1px solid #eee;font-size:13px;">
      <span style="min-width:140px;color:var(--muted);">${k}</span>
      <strong style="flex:1;">${v || '—'}</strong></div>`;
  }
  html += `</div><h4 style="margin:16px 0 8px;">内部备注</h4>
    <textarea id="adminNote" class="form-control" rows="3" placeholder="销售备注，内部可见">${d.admin_note||''}</textarea>
    <div class="btn-group" style="margin-top:12px;">
      <button class="btn btn-primary" onclick="saveInquiryNote(${id})">💾 保存备注</button>
      <button class="btn btn-gray" onclick="closeModal('inquiryModal')">关闭</button>
    </div>`;
  document.getElementById('modalContent').innerHTML = html;
  document.getElementById('inquiryModal').classList.add('show');
}

async function updateInquiryStatus(id, status) {
  await fetch(`/admin/api/inquiry/${id}/`, {
    method:'PUT', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({status})
  });
  showToast('状态已更新');
}

async function saveInquiryNote(id) {
  const note = document.getElementById('adminNote').value;
  await fetch(`/admin/api/inquiry/${id}/`, {
    method:'PUT', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({admin_note: note})
  });
  showToast('备注已保存');
}
</script>
{% endblock %}