doDOM = (ajaxURL) => {

  $(document).ready(function() {

    var logo = $('.header-mdl__logo').html();

    $('body').append('\
      <div class="modal modal-signup">\
        <div class="modal-signup__dialog">\
        \
          <div class="modal-content modal-bb">\
            <div class="modal-signup__dialog-header">\
              <div class="header-title">Daftar</div>\
              <div class="header-close modal-close"><i class="fa fa-times"></i></div>\
            </div>\
            \
            <div class="modal-signup__dialog-body">\
              <div class="img-container">'+ logo +'</div>\
              \
              <form id="ajax-form-join-special" action="/func/player/register" method="post" novalidate="novalidate">\
                <div class="form-container">\
                  \
                  <div class="form-input">\
                    \
                    <div class="form-group g8-refid" style="display:none">\
                      <label>Referral ID</label>\
                      <input type="text" class="form-control g8-rcode" name="rid" maxlength="12" minlength="6" placeholder="">\
                    </div>\
                    \
                    <div class="form-group">\
                      <label><span>*</span> Username / Nama Pengunna</label>\
                      <input type="text" class="form-control required" id="regbank-username" name="username" maxlength="12" minlength="6" placeholder="Minimal 6 huruf / angka">\
                    </div>\
                    \
                    <div class="form-group">\
                      <label><span>*</span> Email</label>\
                      <input type="text" class="form-control required email" name="email" maxlength="255">\
                    </div>\
                    \
                    <div class="form-group">\
                      <label><span>*</span> Password</label>\
                      <input type="password" class="form-control required password" id="password" name="password" maxlength="20" minlength="6" placeholder="Minimal 6 huruf & angka">\
                    </div>\
                    \
                    <div class="form-group">\
                      <label><span>*</span> Confirm Password</label>\
                      <input type="password" class="form-control required password" name="confirmPassword" maxlength="20" minlength="6" equalto="#password" placeholder="Ulangi password">\
                    </div>\
                  </div>\
                  \
                  <div class="form-input">\
                    <div class="form-group">\
                      <label><span>*</span> Nomer Handphone</label>\
                      <input type="text" class="form-control required number" id="regbank-phone" name="mobile" maxlength="15" minlength="7" placeholder="08xxx">\
                    </div>\
                    \
                    <div class="form-group regbank">\
                      <label><span>*</span> Bank</label>\
                      <select id="bank" name="bank" class="form-control required bank-getbank" >\
                        <option value="">Silahkan Pilih</option>\
                      </select>\
                    </div>\
                    \
                    <div class="form-group regbank regbank-info">\
                      <label><span>*</span> Nomer Rekening</label>\
                      <input type="text" class="form-control required" id="regbank-accno" name="accNo" minlength="9" maxlength="15">\
                    </div>\
                    \
                    <div class="form-group regbank regbank-info">\
                      <label><span>*</span> Nama Rekening</label>\
                      <input type="text" class="form-control required" id="regbank-accname" name="bankAccName" maxlength="25" placeholder="Nama sesuai di buku tabungan">\
                    </div>\
                  </div>\
                  \
                </div>\
                \
                <button type="submit" class="button button--register">Daftar</button>\
              </form>\
            </div>\
          </div>\
          \
        </div>\
      </div>\
      \
      <div class="modal modal-forgot">\
        <div class="modal-forgot__dialog">\
        \
          <div class="modal-content modal-bb">\
            <div class="modal-forgot__dialog-header">\
              <div class="forgot-title">Lupa Login</div>\
              <div class="forgot-close modal-close"><i class="fa fa-times"></i></div>\
            </div>\
            \
            <div class="modal-forgot__dialog-body">\
              \
              <div class="img-container">'+ logo +'</div>\
              \
              <form id="ajax-form-pwd" action="/func/account/forget" method="post" novalidate="novalidate">\
                <div class="form-container">\
                  \
                  <div class="form-group">\
                    <input type="text" class="form-control required number" name="otp" maxlength="12" minlength="6" placeholder="OTP">\
                    <div class="icon"><i class="fa fa-phone"></i></div>\
                  </div>\
                  \
                  <div class="form-group">\
                    <input type="password" class="form-control required number" id="newPassword" name="newPassword" maxlength="15" minlength="7" placeholder="New Password">\
                    <div class="icon"><i class="fas fa-user"></i></div>\
                  </div>\
                  <div class="form-group">\
                    <input type="password" class="form-control required number" name="confirmNewPassword" maxlength="15" minlength="7" equalto="#newPassword" placeholder="Confirm New Password">\
                    <div class="icon"><i class="fas fa-user"></i></div>\
                  </div>\
                  <button type="submit" class="button button--submit">Submit</button>\
                </div>\
              </form>\
              \
            </div>\
            \
          </div>\
          \
        </div>\
      </div>\
      \
      <div class="modal modal-login">\
        <div class="modal-login__dialog">\
          \
          <div class="modal-content modal-bb">\
            <div class="modal-login__dialog-header">\
              <div class="header-title">Login</div>\
              <div class="header-close modal-close"><i class="fa fa-times"></i></div>\
            </div>\
            \
            <div class="modal-login__dialog-body">\
              \
              <div class="img-container">'+ logo +'</div>\
              \
              <form id="login-form-2" action="/j_spring_security_check" method="post" novalidate="novalidate">\
                <div class="form-container">\
                \
                  <div class="form-input">\
                    <div class="form-group">\
                      <input type="text" placeholder="Username" name="j_username" class="form-control required" />\
                    </div>\
                    <div class="form-group">\
                      <input type="password" placeholder="Password" name="j_password" class="form-control required"/>\
                    </div>\
                    <div class="form-group">\
                      <label style="display: flex;align-items: center;gap: 5px;margin:0;text-transform: capitalize;color: #111111;"><input type="checkbox" value="1" style="margin: 0;" class="loginhelpremember"> Remember me</label>\
                    </div>\
                  </div>\
                  <button type="submit" class="button button--register">Login</button>\
                  \
                  <div class="text-center">\
                    <a href="#" class="button-forget g8pop-forgot">Lupa Rincian Masuk?</a>\
                    <a href="#" class="button button2 g8pop-signup">Daftar</a>\
                  </div>\
                  \
                </div>\
              </form>\
              \
            </div>\
            \
          </div>\
          \
        </div>\
      </div>\
    ');

    // Get Register Bank Info
    $.get(`${ajaxURL}/func/player/getRegisterBankInfo`).done(function (res) {
      if (res.code == "0") {
        res.result.bank.forEach(item => {
          $('.register-body #bank').append(`<option value="${item.transInfo.deposit.id}" wd_id="${item.transInfo.deposit.withdraw}">${item.bankName}</option>`);
        });
      }
    });

    $(document).on('click', '.g8pop-forgot', function(){
      $(".modal").fadeOut();
      $(".modal-forgot").fadeIn();
      $("body").css("overflow-y", "hidden");
      return false;
    });

    $(document).on('click', '.g8pop-login', function(){
      $(".modal").fadeOut();
      $(".modal-login").fadeIn();
      $("body").css("overflow-y", "hidden");
      return false;
    });

    $('#login-form').submit(function(e) {
        e.preventDefault();
      }).validate({
        errorPlacement: function(error, element) {
        },
        invalidHandler: function(form, validator) {
          if($.fn.effect) {
            $("#login-form").effect("shake", {distance: 6, times: 2}, 35);
          }
        },
        submitHandler: function(form) {
          request(`POST`, `/j_spring_security_check`, $(form).serialize(), {}).done(function (res) {
            if (res.code == "0") {
              localStorage.setItem('loginToken', res.loginToken);
              window.location = "/secure/home.html";
            }
            else {
              jAlert(res.description, `Alert!`);
            }
          });
        }
    });

    $('#login-form-2').submit(function(e) {
        e.preventDefault();
      }).validate({
        errorPlacement: function(error, element) {
        },
        invalidHandler: function(form, validator) {
          if($.fn.effect) {
            $("#login-form-2").effect("shake", {distance: 6, times: 2}, 35);
          }
        },
        submitHandler: function(form) {
          request(`POST`, `/j_spring_security_check`, $(form).serialize(), {}).done(function (res) {
            if (res.code == "0") {
              localStorage.setItem('loginToken', res.loginToken);
              window.location = "/secure/home.html";
            }
            else {
              jAlert(res.description, `Alert!`);
            }
          });
        }
    });

    $('#ajax-form-join-special').submit(function(e) {
        e.preventDefault();
      }).validate({
        submitHandler: function(form) {

          var flag = false;
          if(typeof $(form).data('flag') != "undefined"){
            flag = $(form).data('flag');
          }

          if($('#regbank-check').prop("checked") == true){
            $('#regbank-accno').val($('#regbank-phone').val());
            $('#regbank-accname').val($('#regbank-username').val());
          }

        // auth(form);

        let bank = $(form).find('[name="bank"]');
        let bankDetail = {
          account_no: $(form).find('[name="accNo"]').val(),
          account_name: $(form).find('[name="bankAccName"]').val(),
          depositBankId: bank.val(),
          withdrawBankId: bank.attr('wd_id'),
          extData: {
            firstName: '',
            lastName: '',
          }
        };
        bank_info = `&bank_info=${JSON.stringify(bankDetail)}`;

        request(`POST`, `/func/player/register`, $(form).serialize() + `${bank_info}`, {}).done(function (res) {
          if (res.code == "0") {
            localStorage.setItem('loginToken', res.result.loginToken);
            jAlert(`Welcome. Your registration is successful`, `Alert!`, function () {
              window.location = "/secure/home.html";
            });
          }
          else {
            jAlert(res.description, `Alert!`);
          }
        });
      }
    });

    $('#ajax-form-join-mob').submit(function(e) {
      e.preventDefault();
    }).validate({
      submitHandler: function(form) {

        var flag = false;
        if(typeof $(form).data('flag') != "undefined"){
          flag = $(form).data('flag');
        }

        if($('#regbank-check-mob').prop("checked") == true){
          $('#regbank-accno-mob').val($('#regbank-phone-mob').val());
          $('#regbank-accname-mob').val($('#regbank-username-mob').val());
        }

      // auth(form);

      let bank = $(form).find('[name="bank"]');
      let bankDetail = {
        account_no: $(form).find('[name="accNo"]').val(),
        account_name: $(form).find('[name="bankAccName"]').val(),
        depositBankId: bank.val(),
        withdrawBankId: bank.attr('wd_id'),
        extData: {
          firstName: '',
          lastName: '',
        }
      };
      bank_info = `&bank_info=${JSON.stringify(bankDetail)}`;

      request(`POST`, `/func/player/register`, $(form).serialize() + `${bank_info}`, {}).done(function (res) {
        if (res.code == "0") {
          localStorage.setItem('loginToken', res.result.loginToken);
          jAlert(`Welcome. Your registration is successful`, `Alert!`, function () {
            window.location = "/secure/home.html";
          });
        }
        else {
          jAlert(res.description, `Alert!`);
        }
      });
    }
  });

  });

};

const checkAPI = setInterval(() => {
  if (typeof ajaxURL != "undefined") doDOM(ajaxURL), clearInterval(checkAPI);
}, 100);