<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Register</title> 

  <!-- layui css -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.17/dist/css/layui.css">
  <!-- your custom styles -->
  <link rel="stylesheet" href="/static/home/css/reset.css"> 
  <link rel="stylesheet" href="/static/home/css/style.css"> 
  <style>
    .login-btn[disabled] {
      opacity: 0.7;
      cursor: not-allowed;
    }
    .otpBtn[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
    }
  </style>
</head>
<body class="bgColor"> 

  <div class="top"> 
    <a href="/login" class="topLeft"> 
      <i class="layui-icon layui-icon-left"></i> 
    </a> 
    <div class="topTit">Register</div> 
  </div> 

  <form class="layui-form layui-form-pane" id="registerForm">
    @csrf
    <div class="warp"> 
      <div class="login"> 
        <div class="login-head"> 
          <img src="/static/home/images/logo.png" alt="Logo"> 
        </div>

        <div class="loginCon"> 
          <div class="info"> 
            <div class="circlebg"> 
              <span class="areaCode">+27</span> 
              <input type="tel" name="mobile" placeholder="Please enter your phone number" autocomplete="off">
            </div> 
            <div class="circlebg"> 
              <input type="password" name="password" placeholder="Please enter your password" autocomplete="off">
            </div> 
            <div class="circlebg"> 
              <input type="text" name="inviteCode" placeholder="Please enter the invitation code" value="b8bb1cc6" readonly>
            </div> 
            <div class="circlebg"> 
              <input type="text" name="code" placeholder="Please enter the OTP code"> 
              <button type="button" class="otpBtn login-main-otp-btn">Send</button> 
            </div> 
          </div> 

          <div class="continue"> 
            <button type="submit" class="add-btn login-btn" lay-submit lay-filter="register">Register</button> 
          </div> 
        </div> 
      </div> 

      <div class="login-btm"> 
        <p>Already have an account?</p> 
        <a href="/login">Back Login Now</a> 
      </div> 
    </div> 
  </form>

  <!-- layui js -->
  <script src="https://cdn.jsdelivr.net/npm/layui@2.8.17/dist/layui.js"></script>
  <script>
  layui.use(['form','layer'], function(){
      const $ = layui.jquery;
      const form = layui.form;
      const layer = layui.layer;

      // OTP send button with countdown
      $(".otpBtn").on("click", function(){
          const btn = $(this);
          let phone = $.trim($("input[name='mobile']").val());
          if (!phone) {
              setTimeout(() => {
                  layer.msg("Please enter mobile number first!", {icon: 5, anim: 6, time: 1500});
              }, 400);
              return false;
          }

          btn.attr("disabled", true).text("Sending...");
          setTimeout(() => {
              layer.msg("OTP sent successfully!", {icon: 1, time: 1500});
              let count = 60;
              let timer = setInterval(function(){
                  if (count <= 0) {
                      clearInterval(timer);
                      btn.removeAttr("disabled").text("Send");
                  } else {
                      btn.text(count + "s");
                      count--;
                  }
              }, 1000);
          }, 1000);
      });

      // Register function
      function doRegister(data){
          const btn = $(".login-btn");
          const originalText = btn.html();

          btn.attr("disabled", true).html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> Registering...');

          const phone = $.trim(data.field.mobile);
          const password = data.field.password;
          const code = data.field.code;

          if (!phone) {
              btn.attr("disabled", false).html(originalText);
              setTimeout(() => {
                  layer.msg('Please enter mobile number...', {icon: 5, anim: 6, time: 1500});
              }, 400);
              return false;
          }
          if (!password) {
              btn.attr("disabled", false).html(originalText);
              setTimeout(() => {
                  layer.msg('Please enter password...', {icon: 5, anim: 6, time: 1500});
              }, 400);
              return false;
          }
          if (!code) {
              btn.attr("disabled", false).html(originalText);
              setTimeout(() => {
                  layer.msg('Please enter OTP code...', {icon: 5, anim: 6, time: 1500});
              }, 400);
              return false;
          }

          $.ajax({
              url: "{{ route('register') }}",
              type: "POST",
              data: {
                  mobile: phone,
                  password: password,
                  inviteCode: data.field.inviteCode,
                  code: code,
                  _token: "{{ csrf_token() }}"
              },
              dataType: "json",
              success: function(res){
                  btn.attr("disabled", false).html(originalText);
                  if (res.success) {
                      layer.msg(res.message, {icon: 1, time: 1200}, function(){
                          window.location.href = res.redirect ?? "/login";
                      });
                  } else {
                      setTimeout(() => {
                          layer.msg(res.message, {icon: 2, anim: 6, time: 2000});
                      }, 400);
                  }
              },
              error: function(){
                  btn.attr("disabled", false).html(originalText);
                  setTimeout(() => {
                      layer.msg('Server error, please try again later.', {icon: 2, anim: 6, time: 2000});
                  }, 400);
              }
          });

          return false;
      }

      // Form submit
      form.on('submit(register)', function(data){
          return doRegister(data);
      });

      // Enter key also triggers register
      $(document).on("keydown", function(e){
          if (e.key === "Enter") {
              e.preventDefault();
              $("#registerForm").submit();
          }
      });
  });
  </script>
</body>
</html>
