{{include "header.html"}}
{{include "nav.html"}}

<section class="bg-stone-50 py-12 border-b border-stone-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <nav class="text-xs text-muted mb-3 tracking-wider">
      <a href="/" class="hover:text-primary">首页</a><span class="mx-2">/</span><span>在线咨询</span>
    </nav>
    <h1 class="text-3xl md:text-4xl font-serif font-semibold text-ink">在线咨询</h1>
    <p class="text-sm md:text-base text-muted mt-3 max-w-2xl">尺码 · 保养 · 定制 · 企业团购,留下您的需求,1 个工作日内回复。</p>
  </div>
</section>

<section class="py-16 bg-paper">
  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-5 gap-10">
    <div class="lg:col-span-3">
      {{if .Site}}{{if eq .Site.EnableMessage 1}}
      <form id="messageForm" class="space-y-5 bg-white p-8 border border-stone-200">
        <div>
          <label class="block text-xs tracking-wider text-muted mb-2">称呼 *</label>
          <input name="nickname" required class="w-full px-4 py-2.5 border border-stone-300 bg-paper focus:border-primary outline-none text-sm">
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs tracking-wider text-muted mb-2">电话</label>
            <input name="phone" class="w-full px-4 py-2.5 border border-stone-300 bg-paper focus:border-primary outline-none text-sm">
          </div>
          <div>
            <label class="block text-xs tracking-wider text-muted mb-2">邮箱 *</label>
            <input type="email" name="email" required class="w-full px-4 py-2.5 border border-stone-300 bg-paper focus:border-primary outline-none text-sm">
          </div>
        </div>
        <div>
          <label class="block text-xs tracking-wider text-muted mb-2">需求描述 *</label>
          <textarea name="content" required rows="5" class="w-full px-4 py-2.5 border border-stone-300 bg-paper focus:border-primary outline-none text-sm" placeholder="例如:想咨询 Atlas 通勤托特的颜色 / 公司年会礼品团购 50 件 ..."></textarea>
        </div>
        {{if eq .Site.EnableCaptcha 1}}
        <div>
          <label class="block text-xs tracking-wider text-muted mb-2">验证码 *</label>
          <div class="flex gap-3">
            <input name="code" id="code" required class="px-4 py-2.5 border border-stone-300 bg-paper focus:border-primary outline-none text-sm flex-1">
            <img id="refreshCaptcha" src="/api/public/captcha" class="h-11 cursor-pointer border border-stone-300" alt="验证码">
            <input type="hidden" name="id" id="id">
          </div>
          <p class="text-xs text-muted mt-1">点击验证码可刷新</p>
        </div>
        {{end}}
        <button type="submit" class="px-8 py-3 bg-accent text-white text-sm tracking-wider hover:opacity-90 transition">提交咨询</button>
      </form>
      {{else}}
      <div class="bg-white p-8 border border-stone-200 text-muted text-sm">留言功能未开启,请通过右侧联系方式联系我们。</div>
      {{end}}{{end}}
    </div>

    <aside class="lg:col-span-2 bg-ink text-stone-200 p-8 self-start">
      <h2 class="text-xl font-serif font-semibold text-white mb-6">联系方式</h2>
      {{$c := index .ThemesExt "contact"}}
      {{if $c}}
      <ul class="space-y-5 text-sm">
        {{if $c.phone}}<li><div class="text-xs text-stone-400 tracking-wider mb-1">客服电话</div><div class="text-base">{{$c.phone}}</div></li>{{end}}
        {{if $c.email}}<li><div class="text-xs text-stone-400 tracking-wider mb-1">邮件</div><div class="text-base">{{$c.email}}</div></li>{{end}}
        {{if $c.address}}<li><div class="text-xs text-stone-400 tracking-wider mb-1">工坊地址</div><div class="leading-relaxed">{{$c.address}}</div></li>{{end}}
        {{if $c.hours}}<li><div class="text-xs text-stone-400 tracking-wider mb-1">服务时间</div><div>{{$c.hours}}</div></li>{{end}}
      </ul>
      {{end}}
    </aside>
  </div>

  {{$messages := Messages 6}}
  {{if $messages}}
  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-10 mt-16">
    <h2 class="text-2xl font-serif font-semibold text-ink mb-6">最近留言</h2>
    <div class="space-y-4">
      {{range $messages}}
      <div class="bg-stone-50 p-5 border-l-2 border-accent">
        <div class="text-xs text-muted mb-2 tracking-wider">{{.Nickname}} · {{ParseTime .CreatedAt "2006-01-02 15:04"}}</div>
        <div class="text-sm text-ink/80 leading-relaxed">{{.Content}}</div>
      </div>
      {{end}}
    </div>
  </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);
  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) {
        if (res && res.code === 0) {
          alert('留言已提交,我们会尽快回复您!');
          $('#messageForm')[0].reset();
          refreshCaptcha();
        } else {
          alert((res && res.msg) || '提交失败,请重试。');
          refreshCaptcha();
        }
      },
      error: function () { alert('网络错误,请重试。'); refreshCaptcha(); }
    });
  });
});
</script>