{{include "header.html"}}
{{include "nav.html"}}
<section class="page-hero">
  <div class="wrap page-hero-content">
    <nav class="breadcrumb"><a href="/">首页</a><span>/</span><span>在线咨询</span></nav>
    <p class="eyebrow">商品咨询</p>
    <h1>告诉我们您想了解的商品</h1>
    <p>可提交商品名称、数量、使用场景、是否需要礼品包装或隐藏价格等需求。</p>
  </div>
</section>
<section class="section">
  <div class="wrap message-grid">
    <div>
      {{if .Site}}{{if eq .Site.EnableMessage 1}}
      <form id="messageForm" class="message-form">
        <label>称呼 *<input name="nickname" required></label>
        <div class="form-row"><label>电话<input name="phone"></label><label>邮箱 *<input type="email" name="email" required></label></div>
        <label>咨询内容 *<textarea name="content" required rows="6" placeholder="例如：想了解企业礼赠办公套装，预计 80 份，需要 logo 定制和礼盒包装。"></textarea></label>
        {{if eq .Site.EnableCaptcha 1}}
        <label>验证码 *<span class="captcha-row"><input name="code" id="code" required><img id="refreshCaptcha" src="/api/public/captcha" alt="验证码"><input type="hidden" name="id" id="id"></span></label>
        {{end}}
        <button class="btn primary" type="submit">提交咨询</button>
      </form>
      {{else}}<div class="empty-state">留言功能未开启，请通过右侧联系方式联系我们。</div>{{end}}{{end}}
    </div>
    {{$contact := index .ThemesExt "contact"}}
    {{if $contact}}<aside class="info-panel"><h2>响应说明</h2><p>我们会根据商品名称、数量和使用场景整理回复。</p><p>电话：{{$contact.phone}}</p><p>邮箱：{{$contact.email}}</p><p>时间：{{$contact.hours}}</p></aside>{{end}}
  </div>
  {{$messages := Messages 6}}
  {{if $messages}}<div class="wrap recent-messages"><h2>最近留言</h2>{{range $messages}}<article><strong>{{.Nickname}}</strong><span>{{ParseTime .CreatedAt "2006-01-02 15:04"}}</span><p>{{.Content}}</p></article>{{end}}</div>{{end}}
</section>
{{include "footer.html"}}
{{include "js.html"}}
<script>
$(function () {
  function refreshCaptcha() {
    $.get('/api/public/captcha', function (data) {
      if (data && data.data) {
        $('#refreshCaptcha').attr('src', data.data.img || ('/api/public/captcha?t=' + Date.now()));
        $('#id').val(data.data.id || '');
      } else {
        $('#refreshCaptcha').attr('src', '/api/public/captcha?t=' + Date.now());
      }
    }).fail(function () {
      $('#refreshCaptcha').attr('src', '/api/public/captcha?t=' + Date.now());
    });
  }
  $('#refreshCaptcha').on('click', refreshCaptcha);
  if ($('#refreshCaptcha').length) refreshCaptcha();
  $('#messageForm').on('submit', function (e) {
    e.preventDefault();
    var data = $(this).serializeArray().reduce(function (acc, kv) { acc[kv.name] = kv.value; return acc; }, {});
    $.ajax({
      url: '/api/public/message',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(data),
      success: function (res) {
        alert(res && res.code === 0 ? '咨询已提交，我们会尽快回复。' : ((res && res.msg) || '提交失败，请重试。'));
        if (res && res.code === 0) $('#messageForm')[0].reset();
        refreshCaptcha();
      },
      error: function () { alert('网络错误，请重试。'); refreshCaptcha(); }
    });
  });
});
</script>