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

<main class="container contact-page">
  <section class="page-head">
    <p class="eyebrow">SUBMIT REQUEST</p>
    <h1>{{if .CurrentColumn}}{{.CurrentColumn.Title}}{{else}}发布需求{{end}}</h1>
    <p>{{if .CurrentColumn}}{{.CurrentColumn.Description}}{{else}}提交账号、租号、装备或游戏币交易需求。{{end}}</p>
  </section>

  <div class="contact-grid">
    <section class="form-card">
      {{if .Site}}{{if eq .Site.EnableMessage 1}}
      <form id="message-form">
        <div class="form-row two">
          <label>称呼 *<input name="nickname" required placeholder="例如：陈先生"></label>
          <label>电话 *<input name="phone" required placeholder="用于客服联系"></label>
        </div>
        <div class="form-row two">
          <label>邮箱<input type="email" name="email" placeholder="name@example.com"></label>
          <label>需求类型
            <select name="remark">
              <option value="账号买卖">账号买卖</option>
              <option value="账号租借">账号租借</option>
              <option value="装备买卖">装备买卖</option>
              <option value="游戏币买卖">游戏币买卖</option>
              <option value="交易安全咨询">交易安全咨询</option>
            </select>
          </label>
        </div>
        <label>需求描述 *<textarea name="message" rows="7" required placeholder="请写清楚游戏名称、区服、预算、商品类型、期望交付方式和风险要求。"></textarea></label>
        {{if eq .Site.EnableCaptcha 1}}
        <div class="captcha-row">
          <label>验证码 *<input name="code" id="code" required></label>
          <input type="hidden" name="id" id="id">
          <img id="refreshCaptcha" src="/api/public/captcha" alt="验证码" title="点击刷新">
        </div>
        {{end}}
        <button id="submit" class="btn btn-primary" type="submit">提交需求</button>
        <div id="form-message" class="form-message hidden"></div>
      </form>
      {{else}}
      <div class="empty-state">留言功能未开启，请通过右侧联系方式联系我们。</div>
      {{end}}{{end}}
    </section>
    <aside class="contact-side">
      <h2>联系客服</h2>
      {{$c := index .ThemesExt "contact"}}
      {{if $c}}
      <p><strong>电话</strong>{{index $c "phone"}}</p>
      <p><strong>邮箱</strong>{{index $c "email"}}</p>
      <p><strong>服务时间</strong>{{index $c "hours"}}</p>
      <p><strong>地址</strong>{{index $c "address"}}</p>
      {{end}}
      {{if .Single}}<div class="prose contact-content">{{.Single.Column.Content|Str2Html}}</div>{{end}}
    </aside>
  </div>

  {{$messages := Messages 6}}
  {{if $messages}}
  <section class="recent-messages">
    <h2>最近留言</h2>
    {{range $messages}}
    <article>
      <strong>{{.Nickname}}</strong>
      <span>{{ParseTime .CreatedAt "2006-01-02 15:04"}}</span>
      <p>{{.Content}}</p>
    </article>
    {{end}}
  </section>
  {{end}}
</main>

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

{{if .Site}}{{if eq .Site.EnableMessage 1}}
<script>
$(function () {
  function refreshCaptcha() {
    if (!$('#refreshCaptcha').length) return;
    $.ajax({
      url: '/api/public/captcha',
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      success: function (data) {
        if (data && data.data) {
          $('#id').val(data.data.id || '');
          $('#refreshCaptcha').attr('src', data.data.imgbase64 || data.data.img || ('/api/public/captcha?t=' + Date.now()));
        }
      },
      error: function () {
        $('#refreshCaptcha').attr('src', '/api/public/captcha?t=' + Date.now());
      }
    });
  }
  $('#refreshCaptcha').on('click', refreshCaptcha);
  refreshCaptcha();

  function notice(type, text) {
    $('#form-message').removeClass('hidden ok err').addClass(type).text(text);
  }

  $('#message-form').on('submit', function (e) {
    e.preventDefault();
    var data = {};
    $(this).serializeArray().forEach(function (it) { data[it.name] = it.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 (res) {
        if (res && res.code == 200) {
          notice('ok', '需求已提交，客服会尽快联系你。');
          $('#message-form')[0].reset();
        } else {
          notice('err', (res && res.msg) || '提交失败，请稍后重试。');
        }
      },
      error: function () {
        notice('err', '网络异常，请稍后重试。');
      },
      complete: function () {
        $('#submit').prop('disabled', false).text('提交需求');
        refreshCaptcha();
      }
    });
  });
});
</script>
{{end}}{{end}}