<%~ includeFile("partials/header.eta", {
	user: user
}); %>
<%~ includeFile("partials/message.eta"); %>
<%~ includeFile("partials/title.eta", {
	icon: "fas fa-cog",
	title: "Verify Facebook ID"
}); %>

<section class="addsection bg-light py-3" id="verifyfbid">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <div class="card">
          <div class="card-header">
            <h4>
              <i class="fas fa-user"></i> Verify Facebook ID
            </h4>
          </div>
          <div class="card-body">
            <form id="verifyfbidForm" autocomplete="off">
              <div class="form-group">
                <label for="fbid">
                  <i class="fab fa-facebook-square mb-2"></i> Facebook ID
                </label>
                <input type="text" class="form-control" name="fbid" id="fbid" placeholder="Enter your Facebook ID or url profile" value="<%=user.facebookUserID || ''%>" required>
              </div>
              <div class="g-recaptcha mt-3 d-flex justify-content-center" data-sitekey="<%=gRecaptcha_siteKey%>"></div>
							<div class="mt-3 d-flex justify-content-center">
								<button type="submit" class="btn btn-primary btn-block mt-2 pe-4 ps-4" id="submitSend" <%=global.statusAccountBot == 'good' ? '' : 'disabled'%>>Send</button>
							</div>
              <div class="alert alert-info mt-3">
                <p>
                  <i class="fas fa-info-circle"></i> Chúng tôi sẽ gửi một tin nhắn kèm mã xác minh đến id facebook bạn điền vào ở phía trên để xác minh bạn là chủ của tài khoản đó
                </p>
              </div>
              <% if (global.statusAccountBot != 'good') {%>
              <div class="alert alert-danger mt-3">
                <p>
                  <i class="fas fa-exclamation-triangle"></i> Hiện tại bot đang offline, không thể thực hiện chức năng này
                </p>
              </div>
              <% } %>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
  (function() {
    const submitButton = $("#submitSend");
    submitButton.on("click", function(e) {
      e.preventDefault();
      "<% if (global.statusAccountBot == 'good') {%>"
      submitButton.disabled = true;
      submitButton.addClass("disabled");
      submitButton.html("<span class='spinner-border spinner-border-sm'></span> Sending...");
      const recaptcha = $("#g-recaptcha-response").val();
      $.ajax({
        url: "/verifyfbid",
        type: "POST",
        data: {
          fbid: $("#fbid").val(),
          "g-recaptcha-response": recaptcha
        },
        success: function() {
          window.location.href = "/verifyfbid/submit-code";
        },
        error: function(data) {
          recaptcha.reset();
          submitButton.disabled = false;
          submitButton.removeClass("disabled");
          submitButton.html("Send");
          $.createToast({
            type: "error",
            title: "Error",
            message: data.responseJSON.message
          });
        }
      });
      "<% } %>"
    });
  })();
</script>

<%~ includeFile("partials/footer.eta") %>