<!doctype html>
<html lang="zh-cn">

<head>
  {{include "header.html"}}
</head>

<body class="bg-creative-50 text-creative-900">
  {{include "nav.html"}}
  {{include "bread.html"}}

  <main class="container mx-auto px-4 py-12">
    <div class="max-w-5xl mx-auto">
      <div class="text-center mb-12">
        <h1 class="text-2xl sm:text-3xl font-bold text-creative-900">联系我们</h1>
        <p class="mt-3 text-creative-600">项目咨询、商务合作、人才招聘，欢迎随时联系</p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
        <div class="lg:col-span-3">
          <section class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden">
            <div class="p-6 sm:p-8">
              <h2 class="text-lg font-semibold text-creative-900 mb-6">在线咨询</h2>

              {{if and .Site (eq 1 .Site.EnableMessage)}}
              <form class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-creative-800 mb-1"><span class="text-red-500">*</span>您的称呼</label>
                  <input type="text" id="nickname" name="nickname" required placeholder="怎么称呼您？" class="w-full h-11 px-4 rounded-xl bg-white border border-creative-200 focus:outline-none focus:ring-2 focus:ring-creative-200" />
                </div>
                <div>
                  <label class="block text-sm font-medium text-creative-800 mb-1">联系电话</label>
                  <input type="text" id="phone" name="phone" placeholder="手机/微信（选填）" class="w-full h-11 px-4 rounded-xl bg-white border border-creative-200 focus:outline-none focus:ring-2 focus:ring-creative-200" />
                </div>
                <div>
                  <label class="block text-sm font-medium text-creative-800 mb-1">公司名称</label>
                  <input type="text" name="ext" data-name="公司名称" placeholder="您的公司名称（选填）" class="w-full h-11 px-4 rounded-xl bg-white border border-creative-200 focus:outline-none focus:ring-2 focus:ring-creative-200" />
                </div>
                <div>
                  <label class="block text-sm font-medium text-creative-800 mb-1">意向服务</label>
                  <select name="ext" data-name="意向服务" class="w-full h-11 px-4 rounded-xl bg-white border border-creative-200 focus:outline-none focus:ring-2 focus:ring-creative-200">
                    <option value="">请选择（选填）</option>
                    <option value="品牌策划">品牌策划</option>
                    <option value="视觉设计">视觉设计</option>
                    <option value="数字营销">数字营销</option>
                    <option value="影视制作">影视制作</option>
                    <option value="活动策划">活动策划</option>
                    <option value="其他">其他</option>
                  </select>
                </div>
                <div class="sm:col-span-2">
                  <label class="block text-sm font-medium text-creative-800 mb-1">邮箱</label>
                  <input type="text" name="email" placeholder="用于接收回复（选填）" class="w-full h-11 px-4 rounded-xl bg-white border border-creative-200 focus:outline-none focus:ring-2 focus:ring-creative-200" />
                </div>
                <div class="sm:col-span-2">
                  <label class="block text-sm font-medium text-creative-800 mb-1"><span class="text-red-500">*</span>项目描述</label>
                  <textarea id="message" name="message" rows="5" placeholder="请简要描述您的项目需求（必填）" class="w-full px-4 py-3 rounded-xl bg-white border border-creative-200 focus:outline-none focus:ring-2 focus:ring-creative-200"></textarea>
                </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-xl border border-creative-200 bg-white" title="点击获取验证码" alt="点击获取验证码">
                </div>

                <div class="sm:col-span-2">
                  <label class="block text-sm font-medium text-creative-800 mb-1">验证码</label>
                  <input type="text" name="code" id="code" placeholder="请输入验证码" class="w-full h-11 px-4 rounded-xl bg-white border border-creative-200 focus:outline-none focus:ring-2 focus:ring-creative-200" />
                </div>
                {{end}}

                <div class="sm:col-span-2 pt-2">
                  <input type="button" id="submit" value="提交咨询" class="w-full h-12 rounded-xl bg-gradient-to-r from-creative-600 to-navy-600 hover:from-creative-700 hover:to-navy-700 text-white font-medium transition-all focus-visible:outline-none cursor-pointer" />
                </div>
                <div id="form-message" class="sm:col-span-2 hidden p-3 rounded-xl text-sm"></div>
              </form>
              {{else}}
              <div class="text-center py-10 text-creative-500">
                <i class="fa-solid fa-comments text-4xl mb-4 text-creative-300"></i>
                <p>咨询功能暂未开启</p>
              </div>
              {{end}}
            </div>
          </section>
        </div>

        <div class="lg:col-span-2 space-y-6">
          <section class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden">
            <div class="p-6">
              <h2 class="text-lg font-semibold text-creative-900 mb-4">联系方式</h2>
              <div class="space-y-4 text-sm text-creative-600">
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-xl bg-creative-50 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-location-dot text-creative-500"></i></div>
                  <div>
                    <div class="text-xs text-creative-500 mb-1">公司地址</div>
                    <div>{{default (index .ThemesExt "address") "地址请在后台配置"}}</div>
                  </div>
                </div>
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-xl bg-creative-50 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-phone text-creative-500"></i></div>
                  <div>
                    <div class="text-xs text-creative-500 mb-1">联系电话</div>
                    <div>{{default (index .ThemesExt "tel") "电话请在后台配置"}}</div>
                  </div>
                </div>
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-xl bg-creative-50 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-envelope text-creative-500"></i></div>
                  <div>
                    <div class="text-xs text-creative-500 mb-1">电子邮箱</div>
                    <div>{{default (index .ThemesExt "email") "邮箱请在后台配置"}}</div>
                  </div>
                </div>
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-xl bg-creative-50 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-clock text-creative-500"></i></div>
                  <div>
                    <div class="text-xs text-creative-500 mb-1">工作时间</div>
                    <div>{{default (index .ThemesExt "work_hours") "工作时间请配置"}}</div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {{$wechat_qr := index .ThemesExt "wechat_qr"}}
          {{if $wechat_qr}}
          <section class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden">
            <div class="p-6 text-center">
              <h2 class="text-lg font-semibold text-creative-900 mb-4">微信咨询</h2>
              <img src="{{$wechat_qr}}" alt="微信二维码" class="w-40 h-40 mx-auto rounded-xl border border-creative-100" />
              <p class="mt-3 text-sm text-creative-500">扫描二维码添加微信</p>
            </div>
          </section>
          {{end}}
        </div>
      </div>
    </div>
  </main>

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

  <script>
    var csrf = '';
  </script>
  <script>
    $(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 = $('form').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 () {
          key = this.getAttribute("data-name");
          value = this.value;
          if (value != "") {
            ex[key] = value
          }
        });
        $("select[name^='ext']").each(function () {
          key = this.getAttribute("data-name");
          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', '咨询提交成功！我们会尽快与您联系。');
              $('form')[0].reset();
            } else {
              setFormMessage('error', data.msg || '提交失败，请稍后重试');
            }
            setSubmitting(false);
            return false;
          },
          error: function () {
            setFormMessage('error', '提交失败，请检查网络后重试');
            setSubmitting(false);
          }
        })
        return false;
      });
    });
  </script>
</body>

</html>
