<!-- wp:html -->
<div id="form">
  <p id="error"></p>
  <label for="username">Create Account</label>
  Account Type:
  <select onchange="create_check();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
    name="account_type" id="account_type">
    <option value="select">Select</option>
    <option value="Fleet">Fleet</option>
    <option value="Personal">Personal</option>
    <option value="Reseller">Independent Sales Representative / Reseller</option>
    <option value="Shop">Shop</option>
  </select>
  <input onchange="create_check();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
    type="text" id="username" name="username" placeholder="Username"></input>
  <input onchange="create_check();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
    type="password" id="password" name="password" placeholder="Password"></input>
  <input type="checkbox" onclick="myFunction()">Show Password</input>
  <input onchange="create_check();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
    type="text" id="first_name" name="first_name" placeholder="First name"></input>
  <input onchange="create_check();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
    type="text" id="last_name" name="last_name" placeholder="Last name"></input>
  <!--<input type="text" id="company_name" name="company_name" placeholder="Company Name (Optional)"></input>-->
  <input onchange="create_check();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
    type="text" id="email" name="email" placeholder="Email"></input>
  <input onchange="create_check();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
    type="text" id="phone" name="phone" placeholder="Phone number(Optional)"></input>
  <!--
  <input type="text" id="street" name="street" placeholder="Street (Optional)"></input>
  <input type="text" id="city" name="city" placeholder="City (Optional)"></input>
  <input type="text" id="state" name="state" placeholder="State (Optional)"></input>
  <input onchange="create_check();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
    type="text" id="zip" name="zip" placeholder="Zip"></input>-->
  <input onchange="create_check();" onkeypress="this.onchange();" onpaste="this.onchange();" onclick="this.onchange();"
    type="checkbox" id="terms">I agree to the <a target="_blank" href="/legal/terms-of-use/">Terms of Use</a> and <a
    target="_blank" href="/legal/privacy-policy/">Privacy Terms</a></input><br>

  <input id="button" type="submit" value="Create Account" onclick="check_email();" href="#" disabled></input>
</div>

<p id="success">Account successfully created!</p>
<style>
  #success {
    display: none;
  }

  #error {
    display: none;
  }

  input:disabled {
    pointer-events: none;
    background-color: rgb(192, 192, 192) !important;
  }
</style>
<script>
  var username, firstname, lastname, email, phone, password, all_checked, account_type;

  function myFunction() {
    var x = document.getElementById("password");
    if (x.type === "password") {
      x.type = "text";
    } else {
      x.type = "password";
    }
  }
  document.addEventListener("DOMContentLoaded", function () {

    const urlParams = new URLSearchParams(window.location.search);
    const type = urlParams.get("type");

    if (type === "sales-rep") {

      document.getElementById("account_type").value = "Reseller";

    }

  });
  function create_check() {
    //document.getElementById("button").disabled = false;
    console.log("create_check called");
    all_checked = 1;
    if (!document.getElementById("terms").checked) {
      all_checked = 0;
    }
    account_type = document.getElementById("account_type").value;
    //zip = document.getElementById("zip").value;
    username = document.getElementById("username").value;
    firstname = document.getElementById("first_name").value;
    lastname = document.getElementById("last_name").value;
    email = document.getElementById("email").value;
    phone = document.getElementById("phone").value;
    password = document.getElementById("password").value;
    console.log(username);
    console.log(firstname);
    console.log(lastname);
    console.log(email);
    console.log(phone);
    console.log(password);
    console.log(all_checked);
    if (account_type == "select" || username == "" || firstname == "" || lastname == "" || email == "" || password == "") {
      all_checked = 0;
    }
    if (all_checked) {
      document.getElementById("button").disabled = false;
    }
    else {
      document.getElementById("button").disabled = true;

    }
  }
  function doSomething(res) {
    if (res == "success") {
      //get rid of buttons, give success message
      document.getElementById("form").style.display = "none";
      document.getElementById("success").style.display = "block";
      auto_login();
    }
    else {
      document.getElementById("error").innerText = res;
      document.getElementById("error").style.display = "block";
    }
    return res;
  }
  function check_email() {
    var formdata = new FormData();
    email = document.getElementById("email").value;


    formdata.append("user_email_check", email);


    var requestOptions = {
      method: 'POST',
      body: formdata,
      redirect: 'follow'
    };

    fetch("https://prod001.voyomotive.com/visualize/test_voyolink.php", requestOptions)
      .then(response => response.json())
      .then(res => {
        if (res.email_exists == true) {
          if (window.confirm("This email is already associated with an existing account. Visit https://www.voyomotive.com/forgot-username/ to retrieve your username.")) {
            window.location.href = "https://www.voyomotive.com/forgot-username/";

          }
          else {
            return;
          }
        }
        else {
          create_account();
        }


      })
      .then(result => console.log(result))
      .catch(error => ('error', error));
  }
  function create_account() {
    if (!document.getElementById("terms").checked) {
      window.alert("You must agree to the terms of use to create an account");
      return;
    }
    document.getElementById("error").style.display = "none";
    var formdata = new FormData();
    //find html values

    username = document.getElementById("username").value;
    if (! /^[A-Za-z0-9.@_ -]+$/.test(username)) {
      window.alert("Username must only have alphanumeric characters (letters and numbers), spaces, and/or certain special characters, namely spaces, underscores, hyphens, periods, and @ symbols");
      return;
    }
    account_type = document.getElementById("account_type").value;
    firstname = document.getElementById("first_name").value;
    lastname = document.getElementById("last_name").value;
    email = document.getElementById("email").value;
    phone = document.getElementById("phone").value == "" ? "NULL" : document.getElementById("phone").value;
    password = document.getElementById("password").value;

    formdata.append("create_username", username);
    formdata.append("create_firstname", firstname);
    formdata.append("create_lastname", lastname);
    formdata.append("create_email", email);
    formdata.append("create_password", password);
    formdata.append("create_phone", phone);
    formdata.append("create_type", account_type);

    var requestOptions = {
      method: 'POST',
      body: formdata,
      redirect: 'follow'
    };

    fetch("https://prod001.voyomotive.com/visualize/portalForgotPassword.php", requestOptions)
      .then(response => response.text())
      .then(res => doSomething(res))
      .then(result => console.log(result))
      .catch(error => ('error', error));


  }
  function auto_login() {
    var formdata = new FormData();
    formdata.append("auto_login_user_meta", username);
    formdata.append("auto_login_password_meta", password);
    formdata.append("voyolink_name_meta", "");
    formdata.append("voyolink_street_meta", "");
    formdata.append("voyolink_state_meta", "");
    formdata.append("voyolink_city_meta", "");
    formdata.append("voyolink_telephone_meta", phone);
    formdata.append("voyolink_email_meta", email);
    formdata.append("voyolink_zip_meta", "");
    formdata.append("voyolink_fleet_meta", account_type);

    // Check if the URL has a redirect_to parameter
    const urlParams = new URLSearchParams(window.location.search);
    const redirectTo = urlParams.get("redirect_to") || "/my-account"; // Default to /my-account

    formdata.append("redirect_to", redirectTo);

    var requestOptions = {
      method: 'POST',
      body: formdata,
      redirect: 'follow'
    };

    fetch("/", requestOptions)
      .then(response => response.text())
      .then(result => {
        if (account_type == "Reseller") {
          //window.alert("Thank you for applying to be an Independent Sales Representative / Reseller. Your application is being reviewed. We will be in contact about your application with you within 2 business days.");
        } 
        window.location.href = redirectTo; // Redirect to the intended page
      })
      .catch(error => console.log('error', error));
  }

</script><!-- /wp:html -->