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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-slate-200 bg-white">
  <div class="mx-auto max-w-7xl px-4 py-4 text-sm text-slate-500 sm:px-6 lg:px-8">
    <a href="/" class="hover:text-primary">首页</a>
    {{range .Nav}} <span class="px-2">/</span> <a href="{{.URL}}" class="hover:text-primary">{{.Name}}</a>{{end}}
  </div>
</nav>
{{end}}
{{end}}

{{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-[380px_minmax(0,1fr)] lg:items-start">
    <aside class="space-y-6">
      <section class="overflow-hidden rounded-3xl bg-slate-950 text-white shadow-xl">
        <div class="p-8">
          <p class="text-sm text-emerald-200">联系我们</p>
          <h1 class="mt-3 text-4xl font-semibold leading-tight">{{.Single.Name}}</h1>
          {{if .Single.Description}}<p class="mt-5 text-sm leading-7 text-slate-300">{{.Single.Description}}</p>{{end}}
        </div>
      </section>

      <section class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
        <h2 class="text-lg font-semibold text-slate-900">联系信息</h2>
        <div class="mt-5 space-y-4 text-sm text-slate-600">
          {{range index .ThemesExt "contact_cards"}}
          <div class="rounded-2xl bg-slate-50 p-4">
            <div class="text-slate-500">{{index . "label"}}</div>
            <div class="mt-1 text-base font-medium text-slate-900">{{index . "value"}}</div>
          </div>
          {{end}}
        </div>
      </section>

      <section class="rounded-3xl bg-gradient-to-br from-teal-600 to-cyan-700 p-6 text-white shadow-sm">
        <h2 class="text-lg font-semibold">服务承诺</h2>
        <ul class="mt-4 space-y-3 text-sm leading-6 text-teal-50">
          <li>真实房源，信息核验后发布。</li>
          <li>看房、签约、过户全流程协助。</li>
          <li>租售委托、代办手续均可咨询。</li>
        </ul>
      </section>

      {{if .Single.Ext}}{{if index .Single.Ext "banner_img"}}
      <div class="overflow-hidden rounded-3xl shadow-sm ring-1 ring-slate-200">
        <img src="{{index .Single.Ext "banner_img"}}" alt="{{.Single.Name}}" class="h-56 w-full object-cover">
      </div>
      {{end}}{{end}}
    </aside>

    <section class="space-y-6">
      <div class="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-slate-200">
        <div class="prose prose-slate max-w-none">
          {{.Single.Content|Str2Html}}
        </div>
      </div>

      {{if eq 1 .Site.EnableMessage}}
      <div class="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-slate-200">
        <div class="flex items-end justify-between gap-4">
          <div>
            <h2 class="text-2xl font-semibold text-slate-900">给我们留言</h2>
            <p class="mt-2 text-sm leading-6 text-slate-500">留下你的需求，我们会尽快联系你安排房源、看房或交易咨询。</p>
          </div>
          <div class="hidden rounded-full bg-teal-50 px-4 py-2 text-sm font-medium text-teal-700 sm:block">支持租房 / 买房 / 委托</div>
        </div>

        <form id="message-form" class="mt-8 space-y-5">
          <div class="grid gap-5 md:grid-cols-2">
            <div>
              <label class="mb-2 block text-sm font-medium text-slate-700">称呼</label>
              <input type="text" name="nickname" required class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-2 focus:ring-teal-100">
            </div>
            <div>
              <label class="mb-2 block text-sm font-medium text-slate-700">电话</label>
              <input type="text" name="phone" class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-2 focus:ring-teal-100">
            </div>
          </div>

          <div class="grid gap-5 md:grid-cols-2">
            <div>
              <label class="mb-2 block text-sm font-medium text-slate-700">邮箱</label>
              <input type="email" name="email" class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-2 focus:ring-teal-100">
            </div>
            <div>
              <label class="mb-2 block text-sm font-medium text-slate-700">需求类型</label>
              <select name="remark" class="w-full rounded-xl border border-slate-300 bg-white px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-2 focus:ring-teal-100">
                <option value="租房咨询">租房咨询</option>
                <option value="买房咨询">买房咨询</option>
                <option value="委托出售">委托出售</option>
                <option value="委托出租">委托出租</option>
                <option value="交易流程">交易流程</option>
                <option value="协议条款">协议条款</option>
              </select>
            </div>
          </div>

          <div>
            <label class="mb-2 block text-sm font-medium text-slate-700">留言内容</label>
            <textarea name="message" rows="6" required placeholder="例如：想咨询地铁沿线两居室租房、学区房购买预算、委托出租流程等" class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-2 focus:ring-teal-100"></textarea>
          </div>

          {{if .Site.EnableCaptcha}}
          <div>
            <label class="mb-2 block text-sm font-medium text-slate-700">验证码</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 transition focus:border-teal-500 focus:ring-2 focus:ring-teal-100">
              <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-11 cursor-pointer rounded-lg border border-slate-200 bg-white p-1" title="点击获取验证码">
            </div>
          </div>
          {{end}}

          <div class="flex flex-wrap items-center gap-4">
            <button type="submit" id="submit" class="rounded-xl bg-teal-600 px-6 py-3 font-medium text-white transition hover:bg-teal-700">提交留言</button>
            <p class="text-sm text-slate-500">我们会优先通过电话或邮件联系你。</p>
          </div>
          <div id="form-message" class="hidden rounded-xl px-4 py-3 text-sm"></div>
        </form>
      </div>
      {{end}}

      <div class="grid gap-4 md:grid-cols-3">
        {{range index .ThemesExt "service_cards"}}
        <div class="rounded-3xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
          <div class="text-base font-semibold text-slate-900">{{index . "title"}}</div>
          <p class="mt-2 text-sm leading-6 text-slate-600">{{index . "desc"}}</p>
        </div>
        {{end}}
      </div>
    </section>
  </div>
</main>
{{end}}

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

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

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

    $('#message-form').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;

      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}}