<section class="section plans welcome">
  <h2>Verify your phone number</h2>
  <div class="txt-Center"><img src="/img/catbus.png" alt="Neocities cat on a bus" width="90px"></div>
  <h3 class="subtitle">
    Last thing!<br>
    To prevent spam and keep the searchability of your site high, we have one last step:
    <br>please verify your mobile phone number.
  </h3>

  <div class="row">
    <div class="col col-100 txt-Center" style="margin-top: 10px;">
      <form method="POST" action="/site/<%= current_site.username %>/confirm_phone" class="content">
        <%== csrf_token_input_html %>

        <% if current_site.phone_verification_sid %>
          <fieldset>
            <label for="token">Enter the 6 digit code:<br></label>
          <input id="code" name="code" type="text" class="input-Area" autofill="off" autocapitalize="off" autocorrect="off" value="<%= flash[:code] %>" style="width: 100px" maxlength=6>
          </fieldset>
          <input id="submitButton" class="btn-Action" type="submit" value="Verify Code" style="display: none" autocomplete="off">

          <script>
            document.getElementById('code').addEventListener('input', function(e) {
              var inputVal = e.target.value;
              var submitButton = document.getElementById('submitButton');

              // Check if there are exactly 6 digits in the input
              var isValid = /^\d{6}$/.test(inputVal);

              if(isValid) {
                submitButton.style = 'display: inline-block';
              } else {
                submitButton.style = 'display: none';
              }
            });
          </script>

        <% else %>

          <fieldset>
            <label for="phone">Enter your phone number<br><small>(including country code)</small></label>
          <input id="phone" name="phone" type="text" class="input-Area" autofill="off" autocapitalize="off" autocorrect="off" autocomplete="off" style="width: 290px">
          <input id="phone_intl" name="phone_intl" type="hidden">
          </fieldset>
          <input id="submitButton" class="btn-Action" type="submit" value="Send Verification Code" style="display: none">


          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
          <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
          <script>
            const input = document.querySelector("#phone");
            const iti = window.intlTelInput(input, {
              nationalMode: true,
              utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
            });

            const handleChange = () => {
              let text;
              if(iti.isValidNumber()) {
                document.getElementById('submitButton').style = "display: inline-block"
                document.getElementById('phone_intl').value = iti.getNumber()
              } else {
                document.getElementById('submitButton').style = "display: none"
              }
            };

            // listen to "keyup", but also "change" to update when the user selects a country
            input.addEventListener('change', handleChange);
            input.addEventListener('keyup', handleChange);
          </script>

        <% end %>

      </form>
    </div>
  </div>

</section>
