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

{{if .Single}}
<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="grid gap-8 lg:grid-cols-[minmax(0,1.15fr)_360px]">
    <section class="space-y-8">
      <div class="overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-slate-200">
        <div class="bg-gradient-to-r from-primary/10 via-white to-secondary/10 px-6 py-8 sm:px-8">
          <div class="inline-flex rounded-full bg-white px-3 py-1 text-xs font-medium text-primary ring-1 ring-primary/20">联系我们</div>
          <h1 class="mt-4 text-3xl font-semibold text-slate-900">{{.Single.Name}}</h1>
          {{if .Single.Description}}<p class="mt-3 max-w-3xl text-sm leading-7 text-slate-600">{{.Single.Description}}</p>{{end}}
        </div>
        <div class="grid gap-4 border-t border-slate-200 p-6 sm:grid-cols-3">
          <div class="rounded-2xl bg-slate-50 p-4">
            <div class="text-xs font-medium text-slate-500">服务时间</div>
            <div class="mt-1 text-sm font-semibold text-slate-900">工作日 8:00 - 17:00</div>
          </div>
          <div class="rounded-2xl bg-slate-50 p-4">
            <div class="text-xs font-medium text-slate-500">咨询方式</div>
            <div class="mt-1 text-sm font-semibold text-slate-900">电话 / 邮件 / 留言</div>
          </div>
          <div class="rounded-2xl bg-slate-50 p-4">
            <div class="text-xs font-medium text-slate-500">回复说明</div>
            <div class="mt-1 text-sm font-semibold text-slate-900">尽快安排老师回复</div>
          </div>
        </div>
        {{if .Single.Content}}
        <div class="border-t border-slate-200 px-6 py-6 sm:px-8">
          <div class="grid gap-4 sm:grid-cols-2">
            <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
              <div class="text-sm font-semibold text-slate-900">联系信息</div>
              <div class="mt-4 space-y-3 text-sm text-slate-700">
                <div class="flex justify-between gap-4 border-b border-slate-200 pb-3">
                  <span class="text-slate-500">电话</span>
                  <span class="font-medium">010-8888-2026</span>
                </div>
                <div class="flex justify-between gap-4 border-b border-slate-200 pb-3">
                  <span class="text-slate-500">地址</span>
                  <span class="text-right font-medium">北京市朝阳区微微中学路 66 号</span>
                </div>
                <div class="flex justify-between gap-4">
                  <span class="text-slate-500">邮箱</span>
                  <span class="font-medium">info@weiwei-school.edu.cn</span>
                </div>
              </div>
            </div>
            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-slate-100">
              <img src="{{default (index .ThemesExt "school_qr") "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1200&q=80"}}" alt="学校二维码或校园示意图" class="h-full min-h-[240px] w-full object-cover">
            </div>
          </div>
          <div class="prose prose-slate mt-6 max-w-none">
            {{.Single.Content|Str2Html}}
          </div>
        </div>
        {{end}}
      </div>
    </section>

    <section class="space-y-8">
      <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
        <h2 class="text-2xl font-semibold">学校位置</h2>
        <div class="mt-4 overflow-hidden rounded-2xl bg-slate-100">
          <img src="{{default (index .ThemesExt "school_qr") "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1200&q=80"}}" alt="学校二维码或校园示意图" class="h-64 w-full object-cover">
        </div>
      </div>

      {{if eq 1 .Site.EnableMessage}}
      <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
        <h2 class="text-2xl font-semibold">留言功能</h2>
        <p class="mt-2 text-sm leading-7 text-slate-500">欢迎填写咨询、建议或合作信息，我们会在工作时间内尽快回复。</p>
        <form id="message-form" class="mt-6 space-y-4">
          <div class="grid gap-4 md:grid-cols-2">
            <div>
              <label class="mb-1 block text-sm font-medium text-slate-700">称呼<span class="text-rose-500">*</span></label>
              <input type="text" name="nickname" required class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-primary">
            </div>
            <div>
              <label class="mb-1 block text-sm font-medium text-slate-700">电话<span class="text-rose-500">*</span></label>
              <input type="tel" name="phone" required placeholder="请输入联系电话" class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-primary">
            </div>
            <div class="md:col-span-2">
              <label class="mb-1 block text-sm font-medium text-slate-700">邮箱<span class="text-rose-500">*</span></label>
              <input type="email" name="email" required class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-primary">
            </div>
          </div>
          <div>
            <label class="mb-1 block text-sm font-medium text-slate-700">留言内容<span class="text-rose-500">*</span></label>
            <textarea name="message" rows="6" required class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-primary"></textarea>
          </div>
          {{if .Site.EnableCaptcha}}
          <div>
            <label class="mb-1 block text-sm font-medium text-slate-700">验证码<span class="text-rose-500">*</span></label>
            <div class="flex flex-wrap items-center gap-4">
              <input type="text" name="code" id="code" required class="w-36 rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-primary">
              <input type="hidden" name="id" id="id">
              <img id="refreshCaptcha" src="" alt="点击获取验证码" class="h-12 cursor-pointer rounded border border-slate-200 bg-white px-2" title="点击获取验证码">
            </div>
          </div>
          {{end}}
          <button type="submit" id="submit" class="inline-flex rounded-xl bg-primary px-6 py-3 text-sm font-medium text-white">提交留言</button>
          <div id="form-message" class="hidden rounded-xl p-3 text-sm"></div>
        </form>
      </div>
      {{end}}
    </section>
  </div>
</main>
{{end}}

{{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;
      btn.prop('disabled', submitting);
      btn.text(submitting ? '提交中...' : '提交留言');
      btn.toggleClass('opacity-70 cursor-not-allowed', submitting);
    }

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

    $('#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}}