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

<main class="max-w-6xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
    <div class="lg:col-span-3">
      <section class="rounded-3xl border border-steel-200 bg-white p-6 md:p-8 shadow-soft">
        <div class="text-center">
          <h1 class="text-2xl font-semibold">在线咨询 / 留言</h1>
          <p class="mt-2 text-sm text-steel-600">提交需求，我们会尽快与您联系（留言需要审核后展示）。</p>
        </div>

        {{if and .Site (eq 1 .Site.EnableMessage)}}
        <form class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4" id="mmMessageForm">
          <div>
            <label class="block text-sm font-medium text-steel-800 mb-1"><span class="text-red-500">*</span>称呼</label>
            <input type="text" id="nickname" name="nickname" required class="w-full h-11 px-4 rounded-xl bg-white border border-steel-200 focus:outline-none focus:ring-2 focus:ring-amber2-200" placeholder="怎么称呼你？" />
          </div>
          <div>
            <label class="block text-sm font-medium text-steel-800 mb-1">联系电话</label>
            <input type="text" id="phone" name="phone" class="w-full h-11 px-4 rounded-xl bg-white border border-steel-200 focus:outline-none focus:ring-2 focus:ring-amber2-200" placeholder="手机/微信（选填）" />
          </div>
          <div>
            <label class="block text-sm font-medium text-steel-800 mb-1">邮箱</label>
            <input type="text" name="email" class="w-full h-11 px-4 rounded-xl bg-white border border-steel-200 focus:outline-none focus:ring-2 focus:ring-amber2-200" placeholder="用于接收回复（选填）" />
          </div>
          <div>
            <label class="block text-sm font-medium text-steel-800 mb-1">网站</label>
            <input type="text" name="web_site" class="w-full h-11 px-4 rounded-xl bg-white border border-steel-200 focus:outline-none focus:ring-2 focus:ring-amber2-200" placeholder="https://（选填）" />
          </div>
          <div class="sm:col-span-2">
            <label class="block text-sm font-medium text-steel-800 mb-1"><span class="text-red-500">*</span>需求描述</label>
            <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 rounded-xl bg-white border border-steel-200 focus:outline-none focus:ring-2 focus:ring-amber2-200" placeholder="请描述设备型号、产能、工况、交付周期等（必填）"></textarea>
          </div>

          <div>
            <label class="block text-sm font-medium text-steel-800 mb-1">设备类型</label>
            <input type="text" name="ext" data-name="设备类型" class="w-full h-11 px-4 rounded-xl bg-white border border-steel-200 focus:outline-none focus:ring-2 focus:ring-amber2-200" placeholder="例如：包装线/机床/自动化" />
          </div>
          <div>
            <label class="block text-sm font-medium text-steel-800 mb-1">预算范围</label>
            <input type="text" name="ext" data-name="预算范围" class="w-full h-11 px-4 rounded-xl bg-white border border-steel-200 focus:outline-none focus:ring-2 focus:ring-amber2-200" placeholder="例如：20-50 万" />
          </div>

          <input name="id" id="id" hidden>
          <input name="p_nickname" id="p_nickname" hidden>

          {{if and .Site (eq 1 .Site.EnableCaptcha)}}
          <div class="sm:col-span-2 text-center">
            <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==" class="w-48 h-24 cursor-pointer mx-auto rounded-2xl border border-steel-200 bg-white" title="点击获取验证码" alt="点击获取验证码">
          </div>
          <div class="sm:col-span-2">
            <label class="block text-sm font-medium text-steel-800 mb-1">验证码</label>
            <input type="text" name="code" id="code" class="w-full h-11 px-4 rounded-xl bg-white border border-steel-200 focus:outline-none focus:ring-2 focus:ring-amber2-200" placeholder="请输入验证码" />
          </div>
          {{end}}

          <div class="sm:col-span-2 pt-2">
            <input type="button" id="submit" value="提交" class="w-full h-11 rounded-xl bg-steel-900 hover:bg-steel-800 text-white font-semibold" />
          </div>
          <div id="form-message" class="sm:col-span-2 hidden p-3 rounded-xl text-sm"></div>
        </form>
        {{else}}
          <div class="mt-8 text-center text-sm text-steel-600">留言功能未开启</div>
        {{end}}
      </section>
    </div>

    <div class="lg:col-span-2">
      <section class="rounded-3xl border border-steel-200 bg-white p-6 md:p-8 shadow-soft">
        <div class="flex items-center justify-between">
          <h2 class="text-lg font-semibold">留言记录</h2>
          <div class="text-xs text-steel-500">最新 1000 条</div>
        </div>

        {{if and .Site (eq 1 .Site.EnableMessage)}}
        <div class="mt-6 space-y-4">
          {{range $k, $v := Messages 1000}}
            {{if eq $v.Status 1}}
            <div id="{{$v.Id}}" class="p-4 rounded-2xl border border-steel-200 bg-steel-50">
              <div class="flex items-start gap-3">
                <div class="w-10 h-10 rounded-2xl bg-white border border-steel-200 flex items-center justify-center text-xs font-semibold">{{$v.Nickname}}</div>
                <div class="flex-1">
                  <div class="flex flex-wrap items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                      <a href="#{{$v.Id}}" class="text-xs text-steel-500 hover:text-amber2-700">#{{$v.Id}}</a>
                      <div class="text-sm font-medium">{{$v.Nickname}}</div>
                      {{if ne 0 $v.Pid}}
                        <div class="text-xs text-steel-500">回复</div>
                        <a href="#{{$v.Pid}}" class="text-xs text-amber2-700 hover:underline">{{$v.PNickname}}</a>
                      {{end}}
                    </div>
                    <div class="text-xs text-steel-500">{{ParseTime $v.CreatedAt "2006-01-02"}}</div>
                  </div>
                  <div class="mt-2 text-sm text-steel-800 whitespace-pre-wrap">{{$v.Content}}</div>
                </div>
              </div>
            </div>
            {{end}}
          {{end}}
        </div>
        {{else}}
          <div class="mt-6 text-sm text-steel-600">留言功能未开启</div>
        {{end}}
      </section>

      <section class="mt-6 rounded-3xl border border-steel-200 bg-white p-6 md:p-8 shadow-soft">
        <div class="text-sm font-semibold">联系方式</div>
        <div class="mt-3 space-y-2 text-sm text-steel-700">
          <div>地址：{{default (index (index .ThemesExt "contact") "address") "地址请在 vvdata.json 配置"}}</div>
          <div>电话：{{default (index (index .ThemesExt "contact") "tel") "电话请配置"}}</div>
          <div>邮箱：{{default (index (index .ThemesExt "contact") "email") "邮箱请配置"}}</div>
        </div>
      </section>
    </div>
  </div>
</main>

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

<script>
  var csrf = '';
  $(function () {
    function setFormMessage(type, text) {
      var el = $('#form-message');
      if (!el.length) return;
      el.removeClass('hidden bg-red-50 text-red-700 border-red-200 bg-green-50 text-green-700 border-green-200 border');
      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;
      if (submitting) {
        btn.prop('disabled', true);
        btn.val('提交中...');
        btn.addClass('opacity-70 cursor-not-allowed');
      } else {
        btn.prop('disabled', false);
        btn.val('提交');
        btn.removeClass('opacity-70 cursor-not-allowed');
      }
    }

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

    $('#submit').click(function () {
      var d = {};
      var t = $('#mmMessageForm').serializeArray();
      $.each(t, function () {
        d[this.name] = this.value;
      });
      d.article_id = 0;
      if (!d.nickname || !d.message) {
        setFormMessage('error', '请填写称呼与需求描述');
        return false;
      }

      if ($('#refreshCaptcha').length && (!d.code || !d.id)) {
        setFormMessage('error', '请填写验证码');
        return false;
      }

      var ex = {};
      $("input[name^='ext']").each(function () {
        var key = this.getAttribute("data-name");
        var value = this.value;
        if (value != "") {
          ex[key] = value
        }
      });
      $("select[name^='ext']").each(function () {
        var key = this.getAttribute("data-name");
        var value = this.value;
        if (value != "") {
          ex[key] = value
        }
      });
      d.ext = ex;

      setSubmitting(true);
      $.ajax({
        url: "/message/create",
        headers: { "X-CSRF-Token": csrf },
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify(d),
        success: function (data) {
          if (data.code == 200) {
            setFormMessage('success', '提交成功！我们会尽快联系你。');
            $('#mmMessageForm')[0].reset();
          } else {
            setFormMessage('error', data.msg || '提交失败，请稍后重试');
          }
          setSubmitting(false);
          return false;
        },
        error: function () {
          setFormMessage('error', '提交失败，请检查网络后重试');
          setSubmitting(false);
        }
      })
      return false;
    });
  });
</script>