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

<main class="mx-auto max-w-6xl px-4 py-10 lg:px-8">
  {{if .Single}}
  <article class="rounded-[2rem] border border-[var(--border)] bg-white p-6 shadow-sm md:p-10">
    {{if index .Single.Ext "banner_img"}}
    <img src='{{index .Single.Ext "banner_img"}}' alt="{{.Single.Name}}" class="mb-8 h-64 w-full rounded-3xl object-cover">
    {{end}}

    <h1 class="text-3xl font-semibold">{{.Single.Name}}</h1>
    {{if .Single.Description}}
    <p class="mt-4 text-sm leading-7 text-[var(--muted)]">{{.Single.Description}}</p>
    {{end}}

    <div class="mt-8 grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
      <section class="rounded-3xl bg-[var(--surface-soft)] p-6">
        <h2 class="text-xl font-semibold">联系方式</h2>
        <div class="mt-5 space-y-4 text-sm">
          {{if index .Single.Ext "contact_cards"}}
          {{range index .Single.Ext "contact_cards"}}
          <div class="rounded-2xl bg-white p-4 shadow-sm">
            <div class="font-medium">{{index . "title"}}</div>
            <div class="mt-1 text-[var(--primary)]">{{index . "value"}}</div>
            <div class="mt-1 leading-6 text-[var(--muted)]">{{index . "desc"}}</div>
          </div>
          {{end}}
          {{else}}
          <div class="rounded-2xl bg-white p-4 shadow-sm">电话：400-800-6688</div>
          <div class="rounded-2xl bg-white p-4 shadow-sm">邮箱：service@weijiaoqiyao.com</div>
          <div class="rounded-2xl bg-white p-4 shadow-sm">地址：广东省广州市白云区健康产业园</div>
          {{end}}
        </div>

        <div class="mt-6 rounded-2xl bg-white p-4 text-sm leading-7 text-[var(--muted)] shadow-sm">
          服务时间：周一至周六 9:00-18:00
          <br>
          响应承诺：常规咨询 2 小时内响应，样品申请 24 小时内处理。
        </div>
      </section>

      <section class="rounded-3xl border border-[var(--border)] bg-white p-6 shadow-sm">
        <h2 class="text-xl font-semibold">合作留言</h2>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">填写批发、样品、门店陈列或零售咨询信息，我们将按渠道类型优先回复。</p>
        {{if eq 1 .Site.EnableMessage}}
        <form id="message-form" class="mt-6 grid gap-4 md:grid-cols-2">
          <div>
            <label class="mb-1 block text-sm font-medium">您的称呼 *</label>
            <input type="text" name="nickname" required class="w-full rounded-2xl border border-[var(--border)] px-4 py-3">
          </div>
          <div>
            <label class="mb-1 block text-sm font-medium">联系电话</label>
            <input type="text" name="phone" class="w-full rounded-2xl border border-[var(--border)] px-4 py-3">
          </div>
          <div>
            <label class="mb-1 block text-sm font-medium">邮箱</label>
            <input type="email" name="email" class="w-full rounded-2xl border border-[var(--border)] px-4 py-3">
          </div>
          <div>
            <label class="mb-1 block text-sm font-medium">合作类型</label>
            <input type="text" name="ext" data-name="合作类型" placeholder="批发 / 样品 / 零售" class="w-full rounded-2xl border border-[var(--border)] px-4 py-3">
          </div>
          <div class="md:col-span-2">
            <label class="mb-1 block text-sm font-medium">留言内容 *</label>
            <textarea name="message" rows="6" required class="w-full rounded-2xl border border-[var(--border)] px-4 py-3"></textarea>
          </div>
          {{if .Site.EnableCaptcha}}
          <div class="md:col-span-2">
            <label class="mb-1 block text-sm font-medium">验证码</label>
            <div class="flex flex-wrap items-center gap-4">
              <input type="text" name="code" id="code" class="w-40 rounded-2xl border border-[var(--border)] px-4 py-3">
              <input type="hidden" name="id" id="id">
              <img id="refreshCaptcha" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAtCAMAAABS+V+kAAAAG1BMVEVHcEx6SOl4SOvjPGTjPGR5SOrjPGR5SOrjPGQZmST3AAAAB3RSTlMAgEC/QL+AqElEkgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAn9JREFUWEftVdt2hCAMBFTw/7+4cwniarXtWx/IOYuoWSYzuZjStKnAVGAqMBWYCvx7BeqqEOPyY7i5/OjyS4e90nHdjZ+Wbqe/540mxNxyvMh9MxyzLcX17tBdl/1iC4D3HdD4rWFEoxmxta0Dc1faYbjbNrxGhP3ZI3UdvVeu1RdRxgIZekwShJBknBtOjwdFyLSWuUqQ/tK+r3aR+gD2JikFBOUvYwFMR+6b40nyrigt5yCuEVTQ6bW1BrVlqRX8g3rdg21B/JZbTD9shCJZ4MH1kOYb3gCoriqgmTqSzBwzImJW0RbRtLWomsb7EFevj4KzuhZ5ey4ulZIZLxVAQu45dqHjuYGhckM2aZmMuAE9PDwBtw2h0fcjnDvjFewkpQFUWwNY6VUwknlLlw4WpoGNB0CH4+yOzN+Q2TM7Cvow6qpGEh64O8VgW7L7OPFMV/AJWDpQBS4FOWHfY3kVewFTILlvCacwCIygrL6ZAB2oQ9oTsAGQCAP3AfJeXqqetef6LDUo93lmgoQCi2jQGzAkNnC3F8YVJUw3XGNknnIM8n16RKIhN/IXw/IOrEI+AT9mmTydRcytqDICQ3kFgnAcPERGUas1IXecR2CJMMrIwBictMPxVlsip0ZlD7txsJXxFRIvqZG7LRcKXHBw6V8HjDDO5TtwpNhBPRqBNTuikACJqS2Nwdfd9jmGu4AoOQjwCRzdbbT3YQ2IULSPLkuf0OTruehYVTTNL5+LJ7pTH7ORIYxbzcDX0TrYV9TtyOSR0vg6UeYo940IRZ9lmRKgzh0m4ONs/eNR5xXTIvFLYRs7JLw/VbWb0F+M+f+L//SdCkwFpgJTgX+gwBegpA+1GZ0ezwAAAABJRU5ErkJggg==" alt="点击获取验证码" class="h-10 cursor-pointer rounded-xl border border-[var(--border)] bg-white p-1">
            </div>
          </div>
          {{end}}
          <div class="md:col-span-2">
            <button type="submit" id="submit" class="submit-btn rounded-full px-6 py-3 text-sm font-semibold text-white" style="background:#2f7ea8;border-color:#2f7ea8;">提交留言</button>
          </div>
          <div id="form-message" class="hidden md:col-span-2 rounded-2xl px-4 py-3 text-sm"></div>
        </form>
        {{end}}
      </section>
    </div>

    <section class="mt-8 grid gap-6 lg:grid-cols-[1fr_1fr]">
      <div class="rounded-3xl bg-[var(--surface-blue)] p-6">
        <h2 class="text-xl font-semibold">到访与路线</h2>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">可预约到访样品间、仓配区和合作洽谈。地图区域可后续替换为真实地图组件或嵌入链接。</p>
        <div class="mt-4 rounded-2xl bg-white p-4 text-sm leading-7 text-[var(--muted)] shadow-sm">
          地址：广东省广州市白云区健康产业园
          <br>
          建议路线：地铁到附近站点后打车约 10 分钟。
        </div>
      </div>

      <div class="rounded-3xl bg-[var(--surface-soft)] p-6">
        <h2 class="text-xl font-semibold">FAQ</h2>
        <div class="mt-4 space-y-3">
          {{if index .Single.Ext "faq"}}
          {{range index .Single.Ext "faq"}}
          <details class="rounded-2xl bg-white p-4 shadow-sm">
            <summary class="cursor-pointer font-medium">{{index . "q"}}</summary>
            <div class="mt-3 text-sm leading-7 text-[var(--muted)]">{{index . "a"}}</div>
          </details>
          {{end}}
          {{else}}
          <div class="rounded-2xl bg-white p-4 shadow-sm text-sm leading-7 text-[var(--muted)]">支持样品申请、批发报价、门店陈列支持和零售咨询。</div>
          {{end}}
        </div>
      </div>
    </section>
  </article>
  {{end}}
</main>

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

{{if eq 1 .Site.EnableMessage}}
<script>
  var csrf = '';
  $(function () {
    function setFormMessage(type, text) {
      var el = $('#form-message');
      if (!el.length) return;
      el.removeClass('hidden border bg-red-50 text-red-700 border-red-200 bg-green-50 text-green-700 border-green-200');
      if (type === 'success') {
        el.addClass('border bg-green-50 text-green-700 border-green-200');
      } else {
        el.addClass('border bg-red-50 text-red-700 border-red-200');
      }
      el.text(text);
    }

    function setSubmitting(submitting) {
      var btn = $('#submit');
      if (!btn.length) return;
      if (submitting) {
        btn.prop('disabled', true).text('提交中...').addClass('opacity-70 cursor-not-allowed');
      } else {
        btn.prop('disabled', false).text('提交留言').removeClass('opacity-70 cursor-not-allowed');
      }
    }

    $('#refreshCaptcha, #captcha-btn').on('click', function () {
      $.ajax({
        url: '/api/public/captcha',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        headers: { 'X-CSRF-Token': csrf },
        dataType: 'json',
        success: function (data) {
          if (data.code == 200) {
            $('#id').val(data.data.id);
            $('#refreshCaptcha').attr('src', data.data.imgbase64);
          } else {
            setFormMessage('error', data.msg || '验证码获取失败，请稍后重试');
          }
        },
        error: function () {
          setFormMessage('error', '验证码获取失败，请稍后重试');
        }
      });
      return false;
    });

    $('#message-form').on('submit', function (e) {
      e.preventDefault();
      var data = {};
      $.each($(this).serializeArray(), function (_, field) {
        data[field.name] = field.value;
      });
      data.article_id = 0;
      setSubmitting(true);
      $.ajax({
        url: '/message/create',
        type: 'POST',
        headers: { 'X-CSRF-Token': csrf },
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(data),
        success: function (response) {
          if (response.code == 200) {
            setFormMessage('success', '留言提交成功，我们会尽快联系你。');
            $('#message-form')[0].reset();
          } else {
            setFormMessage('error', response.msg || '提交失败，请稍后重试');
          }
          setSubmitting(false);
        },
        error: function () {
          setFormMessage('error', '提交失败，请检查网络后重试');
          setSubmitting(false);
        }
      });
    });
  });
</script>
{{end}}