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

{{$contact := index .ThemesExt "contact"}}
<section class="bg-slate-900 text-white py-14">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <nav class="text-xs text-slate-400 mb-4 flex gap-2 items-center">
      <a href="/" class="hover:text-accent">首页</a><span>/</span><span class="text-slate-200">在线留言</span>
    </nav>
    <h1 class="text-3xl md:text-4xl font-bold mb-3">在线留言</h1>
    <p class="text-slate-300 max-w-2xl">填写下方表单，顾问会在 1 个工作日内回复您。</p>
  </div>
</section>

<section class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
  {{if .Site}}{{if eq .Site.EnableMessage 1}}
  <div class="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
    <form id="message-form" class="p-7 md:p-10 space-y-5">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
          <label class="flex items-center gap-2 text-xs font-semibold text-slate-700 mb-2">
            <span class="w-1 h-3.5 bg-accent rounded"></span>姓名 <span class="text-rose-500">*</span>
          </label>
          <input type="text" name="nickname" required placeholder="您的称呼" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:bg-white focus:border-primary focus:ring-0 outline-none transition text-sm">
        </div>
        <div>
          <label class="flex items-center gap-2 text-xs font-semibold text-slate-700 mb-2">
            <span class="w-1 h-3.5 bg-accent rounded"></span>电话 / 邮箱 <span class="text-rose-500">*</span>
          </label>
          <input type="text" name="email" required placeholder="电话或邮箱" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:bg-white focus:border-primary focus:ring-0 outline-none transition text-sm">
        </div>
      </div>

      <div>
        <label class="flex items-center gap-2 text-xs font-semibold text-slate-700 mb-2">
          <span class="w-1 h-3.5 bg-accent rounded"></span>留言内容 <span class="text-rose-500">*</span>
        </label>
        <textarea name="message" required rows="6" placeholder="请简述您的需求……" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:bg-white focus:border-primary focus:ring-0 outline-none transition text-sm resize-none"></textarea>
      </div>

      {{if .Site.EnableCaptcha}}
      <div>
        <label class="flex items-center gap-2 text-xs font-semibold text-slate-700 mb-2">
          <span class="w-1 h-3.5 bg-accent rounded"></span>验证码 <span class="text-rose-500">*</span>
        </label>
        <div class="flex gap-3">
          <input type="text" name="code" id="code" required placeholder="请输入" class="flex-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:bg-white focus:border-primary focus:ring-0 outline-none transition text-sm">
          <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-[46px] w-[120px] object-cover rounded-lg cursor-pointer border border-slate-200 hover:border-primary transition" title="点击刷新验证码">
        </div>
      </div>
      {{end}}

      <button type="submit" id="submit" class="w-full px-6 py-3.5 bg-gradient-to-r from-primary to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition flex items-center justify-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
        提交留言
      </button>

      <div id="form-message" class="hidden p-3.5 rounded-lg text-sm"></div>
    </form>
  </div>
  {{else}}
  <div class="bg-amber-50 border border-amber-200 text-amber-800 rounded-xl p-6 text-sm">
    留言功能未开启，{{if $contact}}{{if $contact.phone}}请拨打 {{$contact.phone}}{{end}}{{end}} 联系我们。
  </div>
  {{end}}{{end}}
</section>
{{include "js.html"}}
{{if .Site}}{{if eq .Site.EnableMessage 1}}
<script>
$(function () {
  var csrf = '';
  function setFormMessage(type, text) {
    var $el = $('#form-message');
    if (!$el.length) return;
    $el.removeClass('hidden bg-rose-50 text-rose-700 border-rose-200 bg-emerald-50 text-emerald-700 border-emerald-200 border').addClass('border');
    if (type === 'success') { $el.addClass('bg-emerald-50 text-emerald-700 border-emerald-200'); }
    else { $el.addClass('bg-rose-50 text-rose-700 border-rose-200'); }
    $el.html('<span>' + text + '</span>');
  }
  function refreshCaptcha() {
    $.ajax({ url: '/api/public/captcha', type: 'POST', headers: { 'X-CSRF-Token': csrf }, dataType: 'json', data: '{}',
      success: function (data) { if (data.code == 200) { $('#id').val(data.data.id); $('#refreshCaptcha').attr('src', data.data.imgbase64); } } });
  }
  if ($('#refreshCaptcha').length) { $('#refreshCaptcha').on('click', refreshCaptcha); refreshCaptcha(); }

  $('#message-form').on('submit', function (e) {
    e.preventDefault();
    var data = {};
    $(this).serializeArray().forEach(function (f) { data[f.name] = f.value; });
    data.article_id = 0;
    if (!data.nickname || !data.email || !data.message) { setFormMessage('error', '请填写姓名、联系方式和留言内容'); return; }
    $('#submit').prop('disabled', true).addClass('opacity-70 cursor-not-allowed');
    $.ajax({
      url: '/message/create', type: 'POST', contentType: 'application/json; charset=utf-8', headers: { 'X-CSRF-Token': csrf }, dataType: 'json', data: JSON.stringify(data),
      success: function (res) {
        if (res.code == 200) { setFormMessage('success', '提交成功！顾问会在 1 个工作日内与您联系。'); $('#message-form')[0].reset(); if ($('#refreshCaptcha').length) refreshCaptcha(); }
        else { setFormMessage('error', res.msg || '提交失败，请稍后重试'); if ($('#refreshCaptcha').length) refreshCaptcha(); }
        $('#submit').prop('disabled', false).removeClass('opacity-70 cursor-not-allowed');
      },
      error: function () { setFormMessage('error', '提交失败，请检查网络后重试'); $('#submit').prop('disabled', false).removeClass('opacity-70 cursor-not-allowed'); }
    });
  });
});
</script>
{{end}}{{end}}
{{include "footer.html"}}