{{include "header.html"}}
{{include "nav.html"}}
<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <section class="rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
    {{if .Single}}
    {{if index .Single.Ext "banner_img"}}<img src="{{index .Single.Ext "banner_img"}}" alt="{{.Single.Name}}" class="mb-8 h-[320px] w-full rounded-3xl object-cover">{{end}}
    <div class="section-kicker">{{.Single.Name}}</div>
    <h1 class="mt-4 text-4xl font-semibold">{{.Single.Name}}</h1>
    <div class="mt-8 grid gap-8 lg:grid-cols-12">
      <div class="lg:col-span-7">
        <div class="prose max-w-none">{{.Single.Content|Str2Html}}</div>
        <div class="mt-8 grid gap-4 sm:grid-cols-2">
          <div class="rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] p-5">
            <div class="text-sm text-[var(--muted)]">服务热线</div>
            <div class="mt-1 text-lg font-semibold">400-800-8899</div>
          </div>
          <div class="rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] p-5">
            <div class="text-sm text-[var(--muted)]">办公地址</div>
            <div class="mt-1 text-lg font-semibold">上海市浦东新区智慧农业产业园</div>
          </div>
        </div>
      </div>
      <div class="lg:col-span-5">
        <div class="rounded-[2rem] border border-[var(--border)] bg-[var(--surface-soft)] p-6">
          <h2 class="text-2xl font-semibold">留言咨询</h2>
          <form id="message-form" class="mt-6 grid gap-4">
            <div>
              <label class="mb-2 block text-sm font-medium">姓名</label>
              <input class="w-full rounded-xl border border-[var(--border)] px-4 py-3" type="text" name="nickname" required>
            </div>
            <div>
              <label class="mb-2 block text-sm font-medium">电话</label>
              <input class="w-full rounded-xl border border-[var(--border)] px-4 py-3" type="text" name="phone" required>
            </div>
            <div>
              <label class="mb-2 block text-sm font-medium">邮箱</label>
              <input class="w-full rounded-xl border border-[var(--border)] px-4 py-3" type="email" name="email">
            </div>
            <div>
              <label class="mb-2 block text-sm font-medium">需求说明</label>
              <textarea class="min-h-36 w-full rounded-xl border border-[var(--border)] px-4 py-3" name="content" required></textarea>
            </div>
            {{if .Site.EnableCaptcha}}
            <div>
              <label class="mb-2 block text-sm font-medium">验证码</label>
              <div class="flex flex-wrap items-center gap-3">
                <input class="w-36 rounded-xl border border-[var(--border)] px-4 py-3" type="text" name="code" id="code" required>
                <input type="hidden" name="id" id="id">
                <img id="refreshCaptcha" src="" alt="点击获取验证码" class="h-12 cursor-pointer rounded-xl border border-[var(--border)] bg-white px-2 object-contain" title="点击获取验证码">
              </div>
            </div>
            {{end}}
            <button type="submit" class="w-fit rounded-full bg-[var(--primary)] px-6 py-3 text-sm font-medium text-white">提交留言</button>
          </form>
          <div id="form-message" class="mt-4 hidden rounded-xl border p-3 text-sm"></div>
        </div>
      </div>
    </div>
    {{end}}
  </section>
</main>
{{include "footer.html"}}
{{include "js.html"}}

{{if eq 1 .Site.EnableMessage}}
<script>
  var csrf = '';

  $(document).ready(function() {
    if ($('#refreshCaptcha').length) {
      $('#refreshCaptcha').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 {
              alert(data.msg || '验证码获取失败，请稍后重试');
            }
          },
          error: function() {
            alert('验证码获取失败，请稍后重试');
          }
        });
        return false;
      });
    }

    function setFormMessage(type, text) {
      var el = $('#form-message');
      if (!el.length) return;
      el.removeClass('hidden bg-red-50 text-red-700 border-red-200 bg-green-50 text-green-700 border-green-200 border');
      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).removeClass('hidden');
    }

    function setSubmitting(submitting) {
      var btn = $('#message-form button[type="submit"]');
      if (!btn.length) return;
      if (submitting) {
        btn.prop('disabled', true).text('提交中...');
      } else {
        btn.prop('disabled', false).text('提交留言');
      }
    }

    $('#message-form').submit(function(e) {
      e.preventDefault();
      var data = {};
      $.each($(this).serializeArray(), function(i, 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}}