{% extends "site/base.html" %}
{% block page_title %}提交需求 - ARIFU 艾瑞浮
<style>
.industry-btn {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:20px 12px; border-radius:12px; border:2px solid #e2e8f0;
  background:#fff; cursor:pointer; transition:.25s; text-align:center;
}
.industry-btn:hover { border-color:var(--primary); background:rgba(0,102,204,.03); transform:translateY(-2px); }
</style>
{% endblock %}

{% block body %}
<!-- 询价 Hero -->
<section style="padding-top:96px;padding-bottom:40px;background:linear-gradient(135deg,#0066CC,#0088DD);text-align:center;color:#fff;">
  <div class="container">
    <h1 style="font-size:clamp(24px,4vw,36px);font-weight:800;margin-bottom:10px;">提交您的水处理需求</h1>
    <p style="opacity:.85;">专业工程师将在 <strong>24 小时内</strong>联系您，提供初步技术方案</p>
  </div>
</section>

<section class="section-sm">
  <div class="container" style="max-width:800px;">
    <!-- 步骤指示 -->
    <div class="step-indicator">
      <div class="step active" id="step1-indicator"><div class="step-circle">1</div></div>
      <div class="step-line"></div>
      <div class="step" id="step2-indicator"><div class="step-circle">2</div></div>
      <div class="step-line"></div>
      <div class="step" id="step3-indicator"><div class="step-circle">3</div></div>
    </div>

    <form id="inquiryForm" class="card" style="padding:32px;">
      <!-- Step 1: 选择行业 -->
      <div id="step1" class="step-content">
        <h2 style="font-size:20px;margin-bottom:20px;text-align:center;">🗂 请选择您的行业类型</h2>
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px;">
          {% set industries = [('oilfield','🛢️','油气田'),('industrial','🏭','工业废水'),('municipal','🏙️','市政污水'),('drinking','💧','饮用水'),('aquaculture','🐟','水产养殖'),('other','📋','其他')] %}
          {% for key, icon, label in industries %}
          <button type="button" class="industry-btn" data-type="{{ key }}" onclick="selectIndustry('{{ key }}')">
            <span style="font-size:32px;">{{ icon }}</span>
            <span style="font-size:14px;font-weight:600;">{{ label }}</span>
          </button>
          {% endfor %}
        </div>
        <input type="hidden" name="industry_type" id="industryType" required>
      </div>

      <!-- Step 2: 动态参数字段 -->
      <div id="step2" class="step-content" style="display:none;">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:24px;">
          <button type="button" class="btn btn-gray btn-sm" onclick="goStep(1)">← 上一步</button>
          <h2 id="step2Title" style="font-size:20px;margin:0;">请填写需求参数</h2>
        </div>
        <div id="dynamicFields" style="margin-bottom:24px;"></div>
        <div id="step2-error" style="color:#e74c3c;font-size:13px;margin-bottom:12px;display:none;">请填写必填项后再继续</div>
        <div style="display:flex;gap:12px;justify-content:center;">
          <button type="button" class="btn btn-gray" onclick="goStep(1)">← 上一步</button>
          <button type="button" class="btn btn-primary btn-lg" onclick="goStep(3)">下一步 →</button>
        </div>
      </div>

      <!-- Step 3: 联系信息 -->
      <div id="step3" class="step-content" style="display:none;">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:24px;">
          <button type="button" class="btn btn-gray btn-sm" onclick="goStep(2)">← 上一步</button>
          <h2 style="font-size:20px;margin:0;">📋 您的联系信息</h2>
        </div>
        <div style="display:grid;gap:16px;max-width:480px;margin:0 auto 24px;">
          <div class="form-group">
            <label>公司名称 *</label>
            <input type="text" name="company" class="form-control" placeholder="请输入公司全称" required>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
            <div class="form-group">
              <label>联系人 *</label>
              <input type="text" name="contact_name" class="form-control" placeholder="您的姓名" required>
            </div>
            <div class="form-group">
              <label>联系电话 *</label>
              <input type="tel" name="contact_phone" class="form-control" placeholder="手机号码" required>
            </div>
          </div>
          <div class="form-group">
            <label>电子邮箱</label>
            <input type="email" name="contact_email" class="form-control" placeholder="选填，用于发送方案">
          </div>
        </div>
        <div id="step3-error" style="color:#e74c3c;font-size:13px;margin-bottom:12px;text-align:center;display:none;">请填写必填联系信息</div>
        <div style="display:flex;gap:12px;justify-content:center;">
          <button type="button" class="btn btn-gray" onclick="goStep(2)">← 上一步</button>
          <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">🚀 提交需求</button>
        </div>
      </div>

      <!-- 成功提示 -->
      <div id="stepSuccess" class="step-content" style="display:none;text-align:center;padding:40px 0;">
        <div style="font-size:64px;margin-bottom:20px;">🎉</div>
        <h2 style="font-size:24px;color:var(--secondary);margin-bottom:12px;">需求已提交成功！</h2>
        <p style="color:var(--muted);max-width:400px;margin:0 auto 24px;">我们的工程师将在 <strong>24 小时内</strong>审核您的需求并联系您，请保持电话畅通。</p>
        <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
          <a href="/" class="btn btn-primary">← 返回首页</a>
          <button type="button" class="btn btn-gray" onclick="resetForm()">继续提交另一需求</button>
        </div>
      </div>
    </form>
  </div>
</section>

<!-- FAQ -->
<section class="block-section alt">
  <div class="container" style="max-width:800px;">
    <h2 style="text-align:center;margin-bottom:32px;">常见问题</h2>
    {% set faqs = [('需要多久可以得到回复？','我们承诺在您提交需求后 24 小时内回复，复杂项目 3 个工作日内提供初步方案。'),('报价后可以修改方案吗？','可以。我们会根据您的反馈调整参数，直至方案完全符合您的需求。'),('有上门看现场服务吗？','有。对于大型项目或特殊需求，我们可以安排工程师上门踏勘，费用另议。'),('设备交付周期多长？','标准产品 2–4 周，定制产品 4–8 周，具体以合同为准。')] %}
    {% for q, a in faqs %}
    <details style="background:#fff;border-radius:8px;margin-bottom:10px;padding:16px 20px;border:1px solid var(--border);">
      <summary style="font-weight:600;cursor:pointer;list-style:none;font-size:15px;">{{ q }}</summary>
      <p style="margin-top:10px;color:var(--muted);font-size:14px;line-height:1.8;">{{ a }}</p>
    </details>
    {% endfor %}
  </div>
</section>

{% block scripts %}
{% endblock %}
<script>
// 行业配置（与后端一致）
const INDUSTRIES = {{ industry_types | tojson }};

let currentStep = 1;
let selectedIndustry = null;

function selectIndustry(type) {
  selectedIndustry = type;
  document.getElementById('industryType').value = type;
  // 高亮选中
  document.querySelectorAll('.industry-btn').forEach(btn => {
    btn.style.borderColor = btn.dataset.type === type ? 'var(--primary)' : '#e2e8f0';
    btn.style.background  = btn.dataset.type === type ? 'rgba(0,102,204,.05)' : '#fff';
    btn.style.boxShadow   = btn.dataset.type === type ? '0 0 0 3px rgba(0,102,204,.2)' : 'none';
  });
  goStep(2);
}

function goStep(n) {
  // Step2 验证
  if (n === 3 && selectedIndustry) {
    const fields = INDUSTRIES[selectedIndustry]?.fields || [];
    let valid = true;
    fields.forEach(f => {
      if (f.required) {
        const el = document.querySelector(`[name="field_${f.key}"]`);
        if (el && !el.value.trim()) { el.style.borderColor = '#e74c3c'; valid = false; }
        else if (el) el.style.borderColor = '';
      }
    });
    if (!valid) {
      document.getElementById('step2-error').style.display = 'block';
      return;
    }
    document.getElementById('step2-error').style.display = 'none';
  }
  // Step3 验证
  if (n === 3) {
    const form = document.getElementById('inquiryForm');
    if (!form.company.value || !form.contact_name.value || !form.contact_phone.value) {
      document.getElementById('step3-error').style.display = 'block';
      return;
    }
    document.getElementById('step3-error').style.display = 'none';
  }
  currentStep = n;
  document.querySelectorAll('.step-content').forEach(el => el.style.display = 'none');
  document.getElementById(`step${n}`).style.display = '';
  updateStepIndicators();
  if (n === 2) renderDynamicFields();
}

function updateStepIndicators() {
  for (let i = 1; i <= 3; i++) {
    const el = document.getElementById(`step${i}-indicator`);
    el.className = 'step' + (i < currentStep ? ' done' : i === currentStep ? ' active' : '');
  }
}

function renderDynamicFields() {
  if (!selectedIndustry) return;
  const ind = INDUSTRIES[selectedIndustry];
  if (!ind) return;
  document.getElementById('step2Title').textContent = `${ind.icon} ${ind.label} — 请填写参数`;

  const container = document.getElementById('dynamicFields');
  container.innerHTML = '';

  ind.fields.forEach(f => {
    const div = document.createElement('div');
    div.className = 'form-group';
    div.innerHTML = `<label>${f.label}${f.required ? ' *' : ''}</label>`;

    if (f.type === 'select') {
      const sel = document.createElement('select');
      sel.className = 'form-control';
      sel.name = `field_${f.key}`;
      sel.required = f.required;
      sel.innerHTML = `<option value="">请选择${f.label}</option>` +
        (f.options||[]).map(o => `<option value="${o}">${o}</option>`).join('');
      div.appendChild(sel);
    } else if (f.type === 'textarea') {
      const ta = document.createElement('textarea');
      ta.className = 'form-control';
      ta.name = `field_${f.key}`;
      ta.required = f.required;
      ta.placeholder = f.placeholder || '';
      ta.rows = 3;
      div.appendChild(ta);
    } else if (f.type === 'radio') {
      div.innerHTML += `<div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;">` +
        (f.options||[]).map((o,i) => `<label style="display:flex;align-items:center;gap:4px;cursor:pointer;font-weight:normal;font-size:14px;"><input type="radio" name="field_${f.key}" value="${o}"${i===0?' checked':''}> ${o}</label>`).join('') + `</div>`;
    } else if (f.type === 'multiselect') {
      div.innerHTML += `<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;">` +
        (f.options||[]).map(o => `<label style="display:flex;align-items:center;gap:4px;cursor:pointer;font-weight:normal;font-size:13px;background:#f0f4f8;padding:4px 10px;border-radius:20px;"><input type="checkbox" name="field_${f.key}" value="${o}"> ${o}</label>`).join('') + `</div>`;
    } else {
      const inp = document.createElement('input');
      inp.className = 'form-control';
      inp.type = f.type === 'number' ? 'number' : 'text';
      inp.name = `field_${f.key}`;
      inp.required = f.required;
      inp.placeholder = f.placeholder || '';
      div.appendChild(inp);
    }
    container.appendChild(div);
  });
}

// 提交
document.getElementById('inquiryForm').addEventListener('submit', async e => {
  e.preventDefault();
  const btn = document.getElementById('submitBtn');
  btn.disabled = true; btn.textContent = '提交中…';

  const form = e.target;
  const fields = {};
  form.querySelectorAll('[name^="field_"]').forEach(el => {
    if (el.type === 'checkbox') {
      if (!fields[el.name]) fields[el.name] = [];
      if (el.checked) fields[el.name].push(el.value);
    } else if (el.type === 'radio') {
      if (el.checked) fields[el.name] = el.value;
    } else {
      fields[el.name] = el.value;
    }
  });
  // 清理前缀
  const cleanFields = {};
  for (const [k, v] of Object.entries(fields)) {
    cleanFields[k.replace('field_', '')] = Array.isArray(v) ? v.join('、') : v;
  }

  const data = {
    industry_type: selectedIndustry,
    fields_data: cleanFields,
    company: form.company.value,
    contact_name: form.contact_name.value,
    contact_phone: form.contact_phone.value,
    contact_email: form.contact_email.value || ''
  };

  try {
    const res = await fetch('/api/inquiry/submit/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
    });
    const d = await res.json();
    if (d.ok) {
      document.querySelectorAll('.step-content').forEach(el => el.style.display = 'none');
      document.getElementById('stepSuccess').style.display = '';
      window.scrollTo({top: 0, behavior: 'smooth'});
    } else {
      alert(d.error || '提交失败，请重试');
      btn.disabled = false; btn.textContent = '🚀 提交需求';
    }
  } catch(err) {
    alert('网络错误，请稍后重试');
    btn.disabled = false; btn.textContent = '🚀 提交需求';
  }
});

function resetForm() {
  document.getElementById('inquiryForm').reset();
  currentStep = 1; selectedIndustry = null;
  document.querySelectorAll('.industry-btn').forEach(b => { b.style.borderColor=''; b.style.background=''; b.style.boxShadow=''; });
  document.querySelectorAll('.step-content').forEach(el => el.style.display = 'none');
  document.getElementById('step1').style.display = '';
  updateStepIndicators();
}
</script>
{% endblock %}