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

<main class="max-w-6xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <div class="lg:col-span-2">
      <div class="rounded-2xl border border-ink-200 bg-white p-8 shadow-soft">
        <div class="text-xs uppercase tracking-widest text-teal2-700/80">Service</div>
        <h1 class="mt-2 text-3xl font-semibold tracking-tight">在线咨询</h1>
        <div class="mt-3 text-sm text-ink-600">本主题无购买/支付流程，请通过咨询完成下单与服务对接。</div>

        {{if eq 1 .Site.EnableMessage}}
        <form class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4" id="shopMessageForm">
          <input name="nickname" class="px-4 py-3 rounded-xl bg-white border border-ink-200 focus:outline-none focus:ring-2 focus:ring-teal2-500/30" placeholder="你的称呼" />
          <input name="phone" class="px-4 py-3 rounded-xl bg-white border border-ink-200 focus:outline-none focus:ring-2 focus:ring-teal2-500/30" placeholder="联系电话（选填）" />
          <input name="email" class="md:col-span-2 px-4 py-3 rounded-xl bg-white border border-ink-200 focus:outline-none focus:ring-2 focus:ring-teal2-500/30" placeholder="邮箱（选填）" />
          <textarea name="message" rows="5" class="md:col-span-2 px-4 py-3 rounded-xl bg-white border border-ink-200 focus:outline-none focus:ring-2 focus:ring-teal2-500/30" placeholder="咨询内容（商品型号/数量/收货地区/预算等）"></textarea>

          <input name="id" id="id" hidden>
          <input name="p_nickname" id="p_nickname" hidden>

          {{if eq 1 .Site.EnableCaptcha}}
          <div class="md:col-span-2 grid grid-cols-3 gap-2 items-center">
            <input name="code" id="code" class="col-span-2 px-4 py-3 rounded-xl bg-white border border-ink-200 focus:outline-none focus:ring-2 focus:ring-teal2-500/30" placeholder="验证码" />
            <img class="h-12 w-full rounded-xl border border-ink-200 cursor-pointer" src="/captcha" onclick="this.src='/captcha?'+Math.random()" />
          </div>
          {{end}}

          <div class="md:col-span-2">
            <button type="button" id="shopMessageSubmit" class="w-full px-4 py-3 rounded-xl bg-teal2-600 text-white hover:bg-teal2-700">提交咨询</button>
          </div>
          <div id="shopMessageTip" class="md:col-span-2 text-sm text-ink-600"></div>
        </form>

        <script>
          $(function(){
            function tip(t){ $('#shopMessageTip').text(t || ''); }
            $('#shopMessageSubmit').on('click', function(){
              var d = {};
              var t = $('#shopMessageForm').serializeArray();
              $.each(t, function(){ d[this.name] = this.value; });
              d.article_id = 0;
              if(!d.nickname || !d.message){ tip('请填写称呼与咨询内容'); return; }
              tip('提交中...');
              $.ajax({
                url: '/message/create',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                data: JSON.stringify(d),
                success: function(res){
                  if(res && (res.code === 200 || res.code === 0)){
                    tip('提交成功，我们会尽快联系你。');
                    $('#shopMessageForm')[0].reset();
                  }else{
                    tip((res && res.msg) ? res.msg : '提交失败');
                  }
                },
                error: function(){ tip('提交失败'); }
              });
            });
          });
        </script>
        {{else}}
        <div class="mt-8 text-sm text-ink-600">咨询功能未开启。</div>
        {{end}}
      </div>

      {{if eq 1 .Site.EnableMessage}}
      <div class="mt-6 space-y-4">
        {{range $k, $v := Messages 50}}
          {{if eq $v.Status 1}}
          <div id="{{$v.Id}}" class="rounded-2xl border border-ink-200 bg-white p-6 shadow-soft">
            <div class="flex items-start justify-between gap-4">
              <div>
                <div class="text-sm font-semibold">{{$v.Nickname}}</div>
                <div class="mt-2 text-sm text-ink-700 whitespace-pre-wrap">{{$v.Content}}</div>
              </div>
              <div class="text-xs text-ink-500">{{ParseTime $v.CreatedAt "2006-01-02"}}</div>
            </div>
          </div>
          {{end}}
        {{end}}
      </div>
      {{end}}

    </div>

    <div>
      {{include "sidebar.html"}}
    </div>
  </div>
</main>

{{include "footer.html"}}
{{include "js.html"}}