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

<main class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
  {{if .Single}}
  <article>
    {{if .Single.Column}}{{if .Single.Column.Ext}}{{if index .Single.Column.Ext "banner_img"}}<img src="{{index .Single.Column.Ext "banner_img"}}" alt="{{.Single.Column.Title}}" class="mb-8 aspect-[16/6] w-full rounded-3xl object-cover">{{end}}{{end}}{{end}}
    <h1 class="text-3xl font-semibold tracking-tight md:text-4xl">{{if .Single.Column}}{{.Single.Column.Title}}{{end}}</h1>
    {{if .Single.Column.Description}}<p class="mt-4 max-w-3xl text-[color:var(--muted)]">{{.Single.Column.Description}}</p>{{end}}
    <div class="mt-8 grid gap-8 lg:grid-cols-[1fr_1fr]">
      <div class="panel space-y-4">
        <div class="contact-box">电话：{{index (index .ThemesExt "contact") "phone"}}</div>
        <div class="contact-box">邮箱：{{index (index .ThemesExt "contact") "email"}}</div>
        <div class="contact-box">地址：{{index (index .ThemesExt "contact") "address"}}</div>
        <div class="contact-box">部门：{{index (index .ThemesExt "contact") "department"}}</div>
        <div class="contact-box">服务时间：{{index (index .ThemesExt "contact") "hours"}}</div>
        <div class="contact-box">响应承诺：{{index (index .ThemesExt "contact") "promise"}}</div>
      </div>
      <div class="panel">
        <div class="text-sm font-semibold text-[color:var(--primary)]">路线与地图</div>
        <div class="mt-3 rounded-3xl border border-[color:var(--border)] bg-[color:var(--surface-soft)] p-6 text-sm leading-7 text-[color:var(--muted)]">
          地铁 2 号线张江高科站步行约 12 分钟，园区访客可在一层登记，自驾客户可提前联系顾问登记车牌。
        </div>
        <div class="mt-6 rounded-3xl border border-[color:var(--border)] bg-white p-6">
          <h2 class="text-lg font-semibold">常见问题</h2>
          <div class="mt-4 space-y-3">
            {{range (index .ThemesExt "faq")}}
            <details class="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-soft)] p-4">
              <summary class="cursor-pointer font-medium">{{.q}}</summary>
              <p class="mt-3 text-sm leading-7 text-[color:var(--muted)]">{{.a}}</p>
            </details>
            {{end}}
          </div>
        </div>
      </div>
    </div>
    <div class="mt-8 panel">
      <div class="mb-4 text-sm font-semibold text-[color:var(--primary)]">快速咨询</div>
      <form id="message-form" class="grid gap-4 md:grid-cols-2">
        <div>
          <label class="form-label">姓名</label>
          <input class="form-input" name="nickname" required>
        </div>
        <div>
          <label class="form-label">邮箱</label>
          <input class="form-input" name="email" type="email" required>
        </div>
        <div>
          <label class="form-label">电话</label>
          <input class="form-input" name="phone">
        </div>
        <div>
          <label class="form-label">需求类型</label>
          <input class="form-input" name="subject" placeholder="如 产品演示 / 项目咨询 / 合作沟通">
        </div>
        <div class="md:col-span-2">
          <label class="form-label">项目需求</label>
          <textarea class="form-textarea" name="message" rows="5" required></textarea>
        </div>
        <div class="md:col-span-2 flex flex-wrap items-center gap-3">
          <button id="submit" type="submit" class="btn-primary">提交咨询</button>
          <a href="/message" class="btn-secondary">进入留言页</a>
        </div>
        <div class="md:col-span-2">
          <div id="form-message" class="hidden rounded-2xl border p-3 text-sm"></div>
        </div>
      </form>
    </div>
  </article>
  {{end}}
</main>

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

<script>
$(function() {
  $('#message-form').on('submit', function(e) {
    e.preventDefault();
    var formData = $(this).serializeArray();
    var data = {};
    $.each(formData, function(i, field) {
      data[field.name] = field.value;
    });
    data.article_id = 0;
    $('#submit').prop('disabled', true).text('提交中...');
    $.ajax({
      url: '/message/create',
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      data: JSON.stringify(data),
      success: function(resp) {
        var el = $('#form-message');
        el.removeClass('hidden bg-red-50 text-red-700 border-red-200 bg-green-50 text-green-700 border-green-200 border');
        if (resp && resp.code === 200) {
          el.addClass('border bg-green-50 text-green-700 border-green-200').text('提交成功，我们会尽快联系你。');
          $('#message-form')[0].reset();
        } else {
          el.addClass('border bg-red-50 text-red-700 border-red-200').text((resp && resp.msg) || '提交失败，请稍后重试');
        }
        $('#submit').prop('disabled', false).text('提交咨询');
      },
      error: function() {
        var el = $('#form-message');
        el.removeClass('hidden bg-red-50 text-red-700 border-red-200 bg-green-50 text-green-700 border-green-200 border');
        el.addClass('border bg-red-50 text-red-700 border-red-200').text('提交失败，请检查网络后重试');
        $('#submit').prop('disabled', false).text('提交咨询');
      }
    });
  });
});
</script>