<div>
  <style>
    .infopage,
    #main_page,
    .infopage,
    #main_page > .container {
      padding: 0;
    }

    #main_page > .container .page-name {
      margin: 1.2rem 0 0 0;
    }

    #main_page {
      height: auto !important;
      padding: 0 !important;
    }

    #main_page > .container {
      position: relative !important;
      transform: none !important;
      top: auto !important;
      max-width: none !important;
      width: 100% !important;
    }

    #main_page,
    #main_page .page_content,
    .info_page {
      width: 100%;
      margin: 0;
    }

    .article_header,
    .curated-group,
    .page_nav,
    .curated-wrapper {
      display: none;
    }

    #digital-wallet {
      padding: 5rem 0 0;
    }

    #digital-wallet h2 {
      margin: 0 0 32px;
      color: #000000;
      font-size: 26px;
      font-weight: 300;
      letter-spacing: 1.08px;
      line-height: 33px;
      text-align: center;
      text-transform: none;
    }

    #digital-wallet p {
      margin: auto;
      padding: 0 5rem;
      color: #6a6a6a;
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 0.58px;
      line-height: 19px;
      width: 574px;
      text-align: center;
    }

    #digital-wallet .digital-wallet-content {
      background: #f4f4f4;
      margin: 5rem 0 0;
      padding: 5rem 4rem;
    }

    #digital-wallet .digital-wallet-content h2 {
      text-align: left;
    }

    #digital-wallet .digital-wallet-content p {
      text-align: left;
      margin: 0 0 4rem;
      padding: 0;
    }

    #digital-wallet .digital-wallet-content input {
      font-size: 16px;
      padding: 1rem;
      z-index: 1;
    }

    #digital-wallet .digital-wallet-content input::placeholder {
      text-transform: none;
    }

    #digital-wallet .digital-wallet-content .terms {
      margin: 2rem 0 0 0;
      display: flex;
    }

    #digital-wallet .digital-wallet-content .terms label {
      font-size: 12px;
      color: #55565c;
      font-weight: 300;
      text-align: left;
      margin-left: 10px;
    }

    #digital-wallet .digital-wallet-content .terms label a {
      color: #55565c;
      text-decoration: none;
      border-bottom: 1px solid #55565c;
      padding: 0 0 2px 0;
    }

    #digital-wallet .digital-wallet-content button {
      width: auto;
      color: #000000;
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 0.58px;
      line-height: 20px;
      margin: 3rem 0 0 0;
      border: 0;
      background: transparent;
      text-decoration: underline;
    }

    #digital-wallet figure {
      background: #f4f4f4;
      width: 70%;
      margin: 0 auto;
      padding: 5rem 0;
    }

    #digital-wallet figure img {
      width: 100%;
    }

    @media only screen and (min-width: 768px) {
      #main_page,
      #main_page .page_content,
      .info_page {
        min-width: 990px;
      }

      #main_page .page_content form.existing-handler + .content {
        width: 100%;
        float: none;
      }

      #digital-wallet h2 {
        margin: 0 0 2rem;
      }

      #digital-wallet .digital-wallet-content {
        position: relative;
      }

      #digital-wallet .digital-wallet-content:after {
        content: '';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      }

      #digital-wallet .digital-wallet-content > div {
        width: 23%;
        position: absolute;
        top: 50%;
        left: 18%;
        transform: translateY(-50%);
      }

      #digital-wallet figure {
        width: 20%;
        float: right;
        margin: 0 19% 0 0;
      }
    }

    @media (max-width: 990px) {
      #digital-wallet .mim-logo {
        width: 213.13px;
      }

      #digital-wallet .digital-wallet-content .terms label {
        font-size: 12px;
        color: #55565c;
        font-weight: 300;
        text-align: left;
        margin-left: 10px;
      }

      #digital-wallet p {
        margin: auto;
        width: 255px !important;
        padding: 0;
      }

      #digital-wallet h2 {
        margin: 10px auto 20px;
        width: 200px;
        color: #000000;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 0.67px;
        line-height: 21px;
        text-align: center;
        text-transform: none;
      }

      #digital-wallet .copy {
        width: 255px !important;
        color: #000;
      }
    }

    #digital-wallet #form-message {
      display: none;
      font-size: 12px;
      margin: 1rem 0 0 0;
      background: none;
      padding: 0;
    }

    #digital-wallet #form-message.error p {
      color: #c90707;
    }

    #digital-wallet #form-message.success {
      color: #55565c;
      font-size: 14px;
    }

    #digital-wallet #form-message.success strong {
      font-size: 16px;
    }

    #digital-wallet #form-message.success a {
      text-decoration: none;
      border-bottom: 1px solid #55565c;
    }

    #digital-wallet .mim-logo {
      width: 273.13px;
      margin: 0 0 17px 0;
    }

    #digital-wallet .text-center {
      text-align: center;
    }

    #digital-wallet .copy {
      width: 450px;
      color: #000;
    }
  </style>
</div>
<div id="digital-wallet">
  <div class="text-center"><img class="mim-logo" style="margin: 0 auto 17px" src="https://www.mimco.com.au/images/assetimages/Digit-wallets/2022/logo.png" border="0" alt="" /></div>
  <h2>Already a member? Download your card</h2>
  <p>You can save your MIMCollective card to your mobile phone, making it easy to show your card in store.</p>
  <div class="digital-wallet-content">
    <div>
      <p class="copy">Enter the email address registered to your account below and we'll send you a link to save your card to Apple Wallet, Google Pay or Stocard.</p>
      <input type="text" id="emailid" name="emailid" placeholder="Enter your email address" onkeypress="hideMessage();" />
      <div class="terms">
        <div class=""><input type="checkbox" id="terms" name="terms" value="checkbox" /></div>
        <div class="">
          <label for="terms" class="checkbox"> <em>*</em>I agree to the MIMCollective <a href="/member/terms-and-conditions/" target="_blank" rel="noopener">terms and conditions</a> and <a href="/help/privacy/" target="_blank" rel="noopener">privacy policy</a>.</label>
        </div>
      </div>
      <div id="form-message"></div>
      <button type="button" id="btn-submit">Send email</button>
    </div>
    <figure><img src="https://www.mimco.com.au/images/assetimages/Digit-wallets/2022/wallet.png" border="0" alt="" /></figure>
  </div>
</div>
<script type="text/javascript">
  (function () {
    var element;
    const btnSubmit = document.getElementById('btn-submit');

    function validateEmail(email) {
      return email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/);
    }

    function wait(ms) {
      var start = new Date().getTime();
      var end = start;
      while (end < start + ms) {
        end = new Date().getTime();
      }
    }

    function hideMessage() {
      element = document.getElementById('form-message');
      element.style.display = 'none';
      element.className = '';
      //console.log(1)
      return false;
    }

    function showMessage(message, type = 'error') {
      element = document.getElementById('form-message');
      element.innerHTML = message;
      if (type == 'success') {
        element.className = 'success';
      } else {
        element.className = 'error';
      }
      element.style.display = 'block';
      //alert(errorMessage);
    }

    function SendDigitalWalletRequest() {
      if (!document.getElementById('terms').checked) {
        showMessage('<p>You must agree to the terms and conditions to proceed.</p>');
        return false;
      }

      var emailID = document.getElementById('emailid').value;
      var isValidEmail = validateEmail(emailID);
      if (isValidEmail !== null) {
        //showMessage("Form Submitted Successfully. You will recieve an email from us shortly.","success");
        var data = {
          emailid: emailID,
        };
        $.ajax({
          url: '/cr_DigitalWallet.ashx',
          dataType: 'json',
          type: 'GET',
          contentType: 'application/json; charset=utf-8',
          data: data,
          success: function (data) {
            //alert("Success");
            if (data.ResponseStatus == 200) {
              $('#digital-wallet .digital-wallet-content p,#digital-wallet .digital-wallet-content input,#digital-wallet .digital-wallet-content .terms,#digital-wallet .digital-wallet-content button').hide();

              showMessage('<h2>Thank you, your link has been sent</h2><p>Please check your inbox on your mobile device for a link to save your card to Apple Wallet, Google Pay, or Stocard.</p><p>If you do not receive an email from us within 24 hours, please reach out to our Customer Service team on 1800 994 340.</p>', 'success');

              $('#form-message').show();
            } else {
              showMessage('<p>Oops! Something went wrong. Please try again later.</p>', 'error');
            }
          },
          error: function (response) {
            //alert("Error");
            showMessage('<p>Oops, an error occured. Please try again.</p>');
          },
        });
      } else {
        showMessage('<p>Oops, email unknown. Please enter the email address registered to your loyalty account.</p>');
        return false;
      }
    }

    document.getElementById('btn-submit').onclick = function () {
      SendDigitalWalletRequest();
    };
  })();
</script>
