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

<section class="relative h-72 md:h-96 overflow-hidden bg-ink">
  <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1800&q=80" alt="inquiry" class="w-full h-full object-cover opacity-50">
  <div class="absolute inset-0 flex items-center justify-center text-mist text-center px-6">
    <div>
      <div class="text-xs tracking-wider2 text-accent mb-3">INQUIRY · 在线询盘</div>
      <h1 class="font-serif text-4xl md:text-5xl">提交一份询盘 · 1 个工作日回复</h1>
      <p class="text-mist/80 mt-4 max-w-2xl mx-auto">留下品牌、款式偏好、目标交期与起订量,我们将安排资深销售顾问与你接洽。</p>
    </div>
  </div>
</section>

<section class="max-w-[1080px] mx-auto px-6 lg:px-10 py-14 lg:py-20 grid grid-cols-1 lg:grid-cols-12 gap-10">
  <div class="lg:col-span-7">
    <div class="bg-mist border border-sand p-8 lg:p-10">
      <h2 class="font-serif text-2xl text-ink mb-2">填写询盘表</h2>
      <p class="text-sm text-gray-500 mb-8">带 * 为必填项。提交后会同步抄送至 biz@liya-apparel.com。</p>

      {{if .Site}}{{if eq .Site.EnableComment 1}}
      <form id="messageForm" class="space-y-5">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs text-gray-500 mb-2 tracking-wide">称呼 / 姓名 *</label>
            <input name="nickname" required class="w-full px-4 py-3 border border-sand bg-mist focus:border-ink focus:outline-none text-sm">
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-2 tracking-wide">手机或邮箱 *</label>
            <input name="phone" required class="w-full px-4 py-3 border border-sand bg-mist focus:border-ink focus:outline-none text-sm">
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs text-gray-500 mb-2 tracking-wide">品牌名 (可选)</label>
            <input name="web_site" class="w-full px-4 py-3 border border-sand bg-mist focus:border-ink focus:outline-none text-sm">
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-2 tracking-wide">微信 (可选)</label>
            <input name="wechat" class="w-full px-4 py-3 border border-sand bg-mist focus:border-ink focus:outline-none text-sm">
          </div>
        </div>
        <div>
          <label class="block text-xs text-gray-500 mb-2 tracking-wide">需求描述 *</label>
          <textarea name="content" rows="6" required placeholder="请简述:产品方向(大衣 / 西装 / 衬衫…)、起订量、目标交期、是否需要打样" class="w-full px-4 py-3 border border-sand bg-mist focus:border-ink focus:outline-none text-sm"></textarea>
        </div>
        {{if eq .Site.EnableCaptcha 1}}
        <div class="flex gap-3 items-end">
          <div class="flex-1">
            <label class="block text-xs text-gray-500 mb-2 tracking-wide">验证码 *</label>
            <input name="code" id="code" required class="w-full px-4 py-3 border border-sand bg-mist focus:border-ink focus:outline-none text-sm">
          </div>
          <img id="refreshCaptcha" src="/api/public/captcha" class="h-12 cursor-pointer border border-sand" alt="captcha">
          <input type="hidden" name="id" id="id">
        </div>
        {{end}}
        <button type="submit" class="w-full md:w-auto px-10 py-4 bg-ink text-mist text-sm tracking-wider2 hover:bg-primary transition">提交询盘 →</button>
        <div id="messageResult" class="text-sm hidden"></div>
      </form>
      {{else}}
      <div class="text-center py-10 text-gray-500 border border-dashed border-sand">站点未开启留言功能,请通过下方电话或邮箱联系我们。</div>
      {{end}}{{end}}
    </div>
  </div>

  <aside class="lg:col-span-5">
    {{$c := index .ThemesExt "contact"}}
    {{if $c}}
    <div class="bg-ink text-mist p-8 lg:p-10">
      <div class="text-xs tracking-wider2 text-accent mb-3">DIRECT CONTACT</div>
      <h3 class="font-serif text-2xl mb-6">不想填表?直接联系</h3>
      <ul class="space-y-4 text-sm">
        <li><span class="text-gray-400 mr-2">电话</span>{{$c.phone}}</li>
        <li><span class="text-gray-400 mr-2">邮箱</span>{{$c.email}}</li>
        <li><span class="text-gray-400 mr-2">微信</span>{{$c.wechat}}</li>
        <li><span class="text-gray-400 mr-2">地址</span>{{$c.address}}</li>
        <li><span class="text-gray-400 mr-2">工时</span>{{$c.hours}}</li>
      </ul>
    </div>
    {{end}}

    <div class="mt-6 bg-sand p-8">
      <div class="text-xs tracking-wider2 text-gray-500 mb-3">RESPONSE TIME</div>
      <p class="text-sm text-gray-600 leading-relaxed">收到询盘后,我们会在 <strong class="text-ink">1 个工作日内</strong>由销售顾问对接。如需当日加急对接,可同时通过电话与微信联系我们。</p>
    </div>
  </aside>
</section>

{{$messages := Messages 6}}
{{if $messages}}
<section class="bg-mist border-t border-sand py-14">
  <div class="max-w-[1080px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">RECENT INQUIRIES</div>
    <h3 class="font-serif text-2xl text-ink mb-8">近期询盘 (已脱敏)</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
      {{range $messages}}
      <div class="bg-sand p-6">
        <div class="flex justify-between text-xs text-gray-500 mb-2">
          <span>{{.Nickname}}</span>
          <span>{{ParseTime .CreatedAt "2006.01.02"}}</span>
        </div>
        <p class="text-sm text-ink leading-relaxed">{{.Content}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

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

<script>
$(function(){
  $('#refreshCaptcha').on('click', function(){
    var src = $(this).attr('src').split('?')[0];
    $(this).attr('src', src + '?_=' + Date.now());
  });
  $('#messageForm').on('submit', function(e){
    e.preventDefault();
    var $form = $(this);
    var $btn = $form.find('button[type=submit]');
    var $result = $('#messageResult');
    var data = {};
    $form.serializeArray().forEach(function(it){ data[it.name] = it.value; });
    data.target_type = 1;
    $btn.prop('disabled', true).text('提交中…');
    $result.removeClass('hidden text-emerald-600 text-rose-600').addClass('text-gray-500').text('正在发送 …');
    $.ajax({
      url: '/api/public/message',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(data),
      success: function(resp){
        if (resp && (resp.code === 0 || resp.success)) {
          $result.removeClass('text-gray-500 text-rose-600').addClass('text-emerald-600').text('已收到!我们会在 1 个工作日内回复。');
          $form[0].reset();
        } else {
          $result.removeClass('text-gray-500 text-emerald-600').addClass('text-rose-600').text((resp && resp.message) || '提交失败,请稍后重试。');
        }
      },
      error: function(){
        $result.removeClass('text-gray-500 text-emerald-600').addClass('text-rose-600').text('提交失败,请稍后重试。');
      },
      complete: function(){
        $btn.prop('disabled', false).text('提交询盘 →');
        $('#refreshCaptcha').trigger('click');
      }
    });
  });
});
</script>