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

<main class="enterprise-shell enterprise-page">
  {{if index .ThemesExt "show_breadcrumb"}}
  {{if .Nav}}
  <div class="enterprise-section enterprise-breadcrumb">
    <div class="enterprise-breadcrumb-trail">
      <a href="/" class="enterprise-text-primary enterprise-text-no-decoration">首页</a>
      {{range .Nav}}
      <span class="enterprise-muted">/</span>
      <a href="{{.URL}}" class="enterprise-text-no-decoration">{{.Name}}</a>
      {{end}}
    </div>
  </div>
  {{end}}
  {{end}}

  {{if .Single}}
  <section class="enterprise-section">
    {{if .Single.Ext}}
    {{$banner := index .Single.Ext "banner_img"}}
    {{if $banner}}
      <div class="enterprise-card enterprise-card-margin">
      <img src="{{$banner}}" alt="{{.Single.Name}}" class="enterprise-card-min-h-banner enterprise-card-image-cover">
    </div>
    {{end}}
    {{end}}

    <div class="enterprise-kicker">Contact</div>
    <h1 class="enterprise-title">{{.Single.Name}}</h1>
    {{if .Single.Description}}<p class="enterprise-muted enterprise-section-desc">{{.Single.Description}}</p>{{end}}

    <div class="enterprise-grid enterprise-grid-2 enterprise-mt-lg enterprise-align-start">
      <div class="enterprise-card enterprise-padding-xl">
        <h2 class="enterprise-padding-top-none">联系方式</h2>
        <div class="enterprise-note-box">
          <div><strong>电话：</strong>400-123-4567</div>
          <div><strong>邮箱：</strong>contact@example.com</div>
          <div><strong>地址：</strong>北京市朝阳区某某大厦 18 层</div>
          <div><strong>工作时间：</strong>周一至周五 9:00-18:00</div>
        </div>
      </div>
      <div class="enterprise-card">
        <img src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1400&q=80" alt="企业办公场景" class="enterprise-card-min-h-cover enterprise-card-image-cover enterprise-card-image-fill">
      </div>
    </div>

    <div class="enterprise-prose-spacer prose prose-lg max-w-none">
      {{.Single.Content|Str2Html}}
    </div>

    {{if eq 1 .Site.EnableMessage}}
    <div class="enterprise-card enterprise-mt-lg enterprise-padding-xl">
      <h2 class="enterprise-padding-top-none">给我们留言</h2>
      <form id="message-form" class="enterprise-form-box">
        <div class="enterprise-form-field">
          <label>昵称</label>
          <input type="text" name="nickname" required>
        </div>
        <div class="enterprise-form-field">
          <label>邮箱</label>
          <input type="email" name="email" required>
        </div>
        <div class="enterprise-form-field">
          <label>内容</label>
          <textarea name="message" rows="5" required></textarea>
        </div>
        {{if .Site.EnableCaptcha}}
        <div>
          <label>验证码</label>
          <div class="enterprise-inline-form-row">
            <input type="text" name="code" id="code" required class="enterprise-width-code">
            <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="enterprise-captcha-img" title="点击获取验证码">
          </div>
        </div>
        {{end}}
        <button type="submit" id="submit" class="enterprise-btn">提交留言</button>
        <div id="form-message" class="enterprise-feedback"></div>
      </form>
    </div>
    {{end}}
  </section>
  {{end}}
</main>

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

{{if eq 1 .Site.EnableMessage}}
<script>
  $(document).ready(function() {
    if ($('#refreshCaptcha').length) {
      $('#refreshCaptcha').click(function() {
        $.ajax({
          url: "/api/public/captcha",
          type: "POST",
          contentType: "application/json; charset=utf-8",
          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(data) {
            alert((data && data.msg) || '验证码获取失败，请稍后重试');
          }
        });
        return false;
      });
    }

    function setFormMessage(type, text) {
      var el = $('#form-message');
      if (!el.length) return;
      el.show().text(text).css({
        border: '1px solid ' + (type === 'success' ? '#86efac' : '#fecaca'),
        background: type === 'success' ? '#f0fdf4' : '#fef2f2',
        color: type === 'success' ? '#166534' : '#991b1b'
      });
    }

    function setSubmitting(submitting) {
      var btn = $('#submit');
      if (!btn.length) return;
      btn.prop('disabled', submitting).text(submitting ? '提交中...' : '提交留言');
    }

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