{% comment %} {% assign groupValidator = false %}
{% for group in current_person.groups %}
  {% if group %}
    {% assign groupValidator = true %}
  {% endif %}
{% endfor %}

{% if current_person.signed_in? %}
  {% if groupValidator == true %}
    <script>
      if (window.location.pathname != '/app/dashboard'){
        window.location.replace('/app/dashboard');
      }
    </script>
  {% endif %}
{% endif %} {% endcomment %}

<main class="np-main np-box-container">
  <div class="np-box">
    {% include "header_minimal" %}
    <div class="np-box-content-container">
      <form class="np-form np-box-content" name="secondaryRegistrationForm" onsubmit(return false)>
        <input class="sign-up-follow-up-input" placeholder="Agency Name"/>
        <input class="sign-up-follow-up-input" placeholder="Agency ID # (Optional)" id="agency-id-input"/>
        <input class="sign-up-follow-up-input" placeholder="Medicaid ID #" id="medicaid-id-input"/>
        <span class="sign-up-follow-up-error-label" id="medicaid-id-label">Please enter a valid, 5-12 digit Medicaid ID number</span>
        <input class="sign-up-follow-up-input" placeholder="Provider ID #" id="provider-id-input"/>
        <span class="sign-up-follow-up-error-label" id="provider-id-label">Please enter a valid, 10 digit Provider ID number</span>

        {% comment %} <h1 class="sign-up-follow-up-prompt">Role: </h1> {% endcomment %}
        {% include "sign_up_follow_up_roles_dropdown" %}

        {% comment %} <h1 class="sign-up-follow-up-prompt">State: </h1> {% endcomment %}
        {% include "sign_up_follow_up_states_dropdown" %}
        <input class="sign-up-follow-up-input" id="calEVV-input" placeholder="CalEVV Identifier" style="display: none;"/>
        <span class="sign-up-follow-up-error-label" id="calEVV-label">Please enter a valid, 10 digit California EVV ID Number</span>

        {% comment %} <input class="sign-up-follow-up-input" id="oh-input" placeholder="OH Identifier" style="display: none;"/> {% endcomment %}
        <div id="oh-input" placeholder="OH Identifier" style="display: none;">
          <div class='oh-button' type="radio" value="EVV"
			onclick="validateForm()">Ohio EVV</div>
          <div class='oh-button' type="radio" value="ALT EVV"
			onclick="validateForm()">Ohio Alt EVV</div>
        </div>
        <div id="ca-input" placeholder="CA Identifier" style="display: none;">
          {% comment %} <div class='ca-button' type="radio" value="ST - CA CHHS BOTH (PCS & HHCS)" {% endcomment %}
          <div class='ca-button' type="radio" value="EVV"
			onclick="validateForm()">Sandata EVV</div>
          {% comment %} <div class='ca-button' type="radio" value="ST - CA CHHS JE & ST - CA CHHS STATE" {% endcomment %}
          <div class='ca-button' type="radio" value="ALT EVV"
			onclick="validateForm()">Sandata Alt EVV Aggregator</div>
        </div>
        <span class="sign-up-follow-up-error-label" id="oh-label">Please select your affiliation</span>

        {% comment %} <button class="sign-up-follow-up-button" onclick="submitData()">Submit</button> {% endcomment %}
        <div class="sign-up-follow-up-button" onclick="submitData()">Submit</div>
      </form>
    </div>
  </div>
</main>

<style>
  .sign-up-follow-up-image{
    max-width: 50%;
  }

  #medcaid-id-input,
  #provider-id-input,
  #calEVV-input{
    border: 1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-radius: 2px;
  }

  #oh-input,
  #ca-input {
    display: flex;
    flex-direction: column;
    border: 0;
    margin-top: 10px;
  }


  #medicaid-id-label,
  #provider-id-label,
  #calEVV-label,
  #oh-label {
    color: red;
    display: none;
  }

  .oh-button,
  .ca-button {
    border: 1px solid grey;
    border-radius: 2px;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    margin-bottom: 5px;
    padding: 5px;
    text-align: center;
  }

  .oh-button:hover,
  .ca-button:hover {
    cursor: pointer;
  }

  .oh-button:focus,
  .ca-button:focus {
    background: pink;
  }

  .sign-up-dropdown,
  .sign-up-follow-up-input{
    text-align: center;
  }

  .sign-up-dropdown{
    margin-top: 20px;
    padding: 0;
  }

  .sign-up-follow-up-input{
    height: 30px;
    margin-top: 1.1rem;
  }

  .sign-up-follow-up-button{
    align-items: center;
    align-self: flex-end;
    background: #f2f4f5;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 100%;
    height: 30px;
    justify-content: center;
    margin-top: 10px;
    width: 90px;
  }

  @media screen and (min-width: 768px){
    .np-box-header{
      height: 120px;
      padding-top: 30px;
    }

    .np-box-content-container{
      margin-top: 0;
    }
  }
</style>

<script>
  let fullPropsObj = {};
  let revisedPropsObj = {};

  document.getElementById("sign-up-state-dropdown").addEventListener('change', (event) => {
    if(event.target.value == 'California'){
      document.querySelector('#calEVV-input').style.display = 'block';
      document.querySelector('#ca-input').style.display = 'block';
    } else {
      document.querySelector('#calEVV-input').style.display = 'none';
      document.querySelector('#calEVV-label').style.display = 'none';
      document.querySelector('#ca-input').style.display = 'none';
    };
    if(event.target.value == 'Ohio'){
	  console.log("Ohio selected!")
      document.querySelector('#oh-input').style.display = 'block';
    } else {
      document.querySelector('#oh-input').style.display = 'none';
      document.querySelector('#oh-label').style.display = 'none';
    }
  });

  let digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  let validateForm = () => {
    let validForm = false;

    if(event.target.placeholder){
      if(event.target.placeholder == 'Agency Name'){
        if(event.target.value == ''){
          fullPropsObj['agency_name'] = undefined;
        } else {
          fullPropsObj['agency_name'] = event.target.value;
        }
      }

      if(event.target.placeholder == 'Agency ID # (Optional)'){
        if(event.target.value == ''){
          fullPropsObj['agency_id'] = undefined;
        } else {
          fullPropsObj['agency_id'] = event.target.value;
        }
      }

      if(event.target.placeholder == 'Medicaid ID #'){
        if(event.target.value == ''){
          fullPropsObj['medicaid_id'] = undefined;
          document.querySelector('#medicaid-id-input').style.border = '1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133))';
          document.querySelector('#medicaid-id-label').style.display = 'none';
        } else {
          let splitID = event.target.value.split('');
          let valid = true;

          if(splitID.length >= 5 && splitID.length <= 12){
            for(let i = 0; i < splitID.length; i++){
              if(digits[splitID[i]] != splitID[i]){
                valid = false;
              }
            }
          } else {
            valid = false;
          }

          if(valid){
            fullPropsObj['medicaid_id'] = event.target.value;
            document.querySelector('#medicaid-id-input').style.border = '1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133))';
            document.querySelector('#medicaid-id-label').style.display = 'none';
          } else {
            fullPropsObj['medicaid_id'] = undefined;
            document.querySelector('#medicaid-id-input').style.border = '1px solid red';
            document.querySelector('#medicaid-id-input').style.borderRadius = '2px';
            document.querySelector('#medicaid-id-label').style.display = 'block';
          }
        }
      }

      if(event.target.placeholder == 'Provider ID #'){
        if(event.target.value == ''){
          fullPropsObj['provider_id'] = undefined;
          document.querySelector('#provider-id-input').style.border = '1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133))';
          document.querySelector('#provider-id-label').style.display = 'none';
        } else {
          let splitID = event.target.value.split('');
          let valid = true;

          if(splitID.length == 10){
            for(let i = 0; i < splitID.length; i++){
              if(digits[splitID[i]] != splitID[i]){
                valid = false;
              }
            }
          } else {
            valid = false;
          }

          if(valid){
            fullPropsObj['provider_id'] = event.target.value;
            document.querySelector('#provider-id-input').style.border = '1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133))';
            document.querySelector('#provider-id-label').style.display = 'none';
          } else {
            fullPropsObj['provider_id'] = undefined;
            document.querySelector('#provider-id-input').style.border = '1px solid red';
            document.querySelector('#provider-id-input').style.borderRadius = '2px';
            document.querySelector('#provider-id-label').style.display = 'block';
          }
        }
      }

      if(event.target.placeholder == 'CalEVV Identifier'){
        if(fullPropsObj['learner_state'] == 'California'){
          if(event.target.value == ''){
            fullPropsObj['cal_evv_id'] = undefined;
            document.querySelector('#calEVV-input').style.border = '1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133))';
            document.querySelector('#calEVV-label').style.display = 'none';
          } else {
            let splitID = event.target.value.split('');
            let valid = true;

            if(splitID.length == 10){
              for(let i = 0; i < splitID.length; i++){
                if(digits[splitID[i]] != splitID[i]){
                  valid = false;
                }
              }
            } else {
              valid = false;
            }

            if(valid){
              fullPropsObj['cal_evv_id'] = event.target.value;
              document.querySelector('#calEVV-input').style.border = '1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133))';
              document.querySelector('#calEVV-label').style.display = 'none';
            } else {
              fullPropsObj['cal_evv_id'] = undefined;
              document.querySelector('#calEVV-input').style.border = '1px solid red';
              document.querySelector('#calEVV-input').style.borderRadius = '2px';
              document.querySelector('#calEVV-label').style.display = 'block';
            }
          }
        } else {
          document.querySelector('#calEVV-input').style.border = '1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133))';
          document.querySelector('#calEVV-label').style.display = 'none';
        }
      }
    }
	// Ohio Additional Options
    if(event.target.parentNode.getAttribute('placeholder') == 'OH Identifier'){
      if(fullPropsObj['learner_state'] == 'Ohio'){
        if(event.target.getAttribute('value') == ''){
          fullPropsObj['oh_group_name'] = undefined;
          document.querySelector('#oh-label').style.display = 'none';
        } else {
          for(let i = 0; i < event.target.parentNode.children.length; i++){
            event.target.parentNode.children[i].style.background = '#f2f4f5';
          }

          event.target.style.background = 'rgb(242, 169, 0)';
          event.target.style.color = '#000';

          let valid = true;

          if(valid){
            fullPropsObj['oh_group_name'] = event.target.getAttribute('value');
            document.querySelector('#oh-label').style.display = 'none';
          } else {
            fullPropsObj['oh_group_name'] = undefined;
            document.querySelector('#oh-label').style.display = 'block';
          }
        }
      } else {
        fullPropsObj['oh_group_name'] = undefined;
        document.querySelector('#oh-label').style.display = 'none';
      }
    }

	// California Additional Options
	if(event.target.parentNode.getAttribute('placeholder') == 'CA Identifier'){
      if(fullPropsObj['learner_state'] == 'California'){
        if(event.target.getAttribute('value') == ''){
          fullPropsObj['ca_group_name'] = undefined;
          document.querySelector('#calEVV-label').style.display = 'none';
        } else {
          for(let i = 0; i < event.target.parentNode.children.length; i++){
            event.target.parentNode.children[i].style.background = '#f2f4f5';
          }

          event.target.style.background = 'rgb(242, 169, 0)';
          event.target.style.color = '#000';

          let valid = true;

          if(valid){
            fullPropsObj['ca_group_name'] = event.target.getAttribute('value');
            document.querySelector('#calEVV-label').style.display = 'none';
          } else {
            fullPropsObj['ca_group_name'] = undefined;
            document.querySelector('#calEVV-label').style.display = 'block';
          }
        }
      } else {
        fullPropsObj['ca_group_name'] = undefined;
        document.querySelector('#calEVV-label').style.display = 'none';
      }
    }

    if(event.target.children[0]){
      if(event.target.children[0].textContent == 'Select a state'){
        // console.log(event.target.value)
        if(event.target.value == ''){
          fullPropsObj['learner_state'] = undefined;
        } else {
          fullPropsObj['learner_state'] = event.target.value;
        }
      }

      if(event.target.children[0].textContent == 'Select a role'){
        if(event.target.value == ''){
          fullPropsObj['learner_role'] = undefined;
        } else {
          fullPropsObj['learner_role'] = event.target.value;
        }
      }
    }
    revisedPropsObj = {};
    let fullPropsObjKeyMap = Object.keys(fullPropsObj);

    for(let i = 0; i < fullPropsObjKeyMap.length; i++){
      let currentKey = fullPropsObjKeyMap[i];
      if(fullPropsObj[currentKey] != undefined){
        revisedPropsObj[currentKey] = fullPropsObj[currentKey];
      }
    }

    if(Object.keys(revisedPropsObj).length > 0){
      let validationFlag = true;
      let allRequiredFields = ['agency_name', 'medicaid_id', 'provider_id', 'learner_state', 'learner_role', 'ca_group_name', 'oh_group_name'];

      for(let i = 0; i < allRequiredFields.length; i++){
        if(Object.keys(revisedPropsObj).indexOf(allRequiredFields[i]) == -1){
          validationFlag = false;
        } else {
          if(allRequiredFields[i] == 'learner_state' && revisedPropsObj[allRequiredFields[i]] == 'California'){
            if(Object.keys(revisedPropsObj).indexOf('cal_evv_id') == -1){
              validationFlag = false;
              document.querySelector('#calEVV-input').style.border = '1px solid red';
              document.querySelector('#calEVV-input').style.borderRadius = '2px';
              document.querySelector('#calEVV-label').style.display = 'block';
            } else {
              document.querySelector('#calEVV-input').style.border = '1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133))';
              document.querySelector('#calEVV-label').style.display = 'none';
            }
          } else if(allRequiredFields[i] == 'learner_state' && revisedPropsObj[allRequiredFields[i]] == 'Ohio'){
            if(Object.keys(revisedPropsObj).indexOf('oh_group_name') == -1){
              validationFlag = false;
              document.querySelector('#oh-label').style.display = 'block';
            } else {
              document.querySelector('#oh-label').style.display = 'none';
            }
          }
        }
      }
      if(validationFlag){
        document.querySelector('.sign-up-follow-up-button').style.background = '#f2a900';
        document.querySelector('.sign-up-follow-up-button').style.color = '#4964a2';
        revisedPropsObj['successfully_completed_secondary_registration'] = true;

        validForm = true;
      } else {
        document.querySelector('.sign-up-follow-up-button').style.background = '#f2f4f5';
        document.querySelector('.sign-up-follow-up-button').style.color = '#000';
      }
    } else {
      document.querySelector('.sign-up-follow-up-button').style.background = '#f2f4f5';
      document.querySelector('.sign-up-follow-up-button').style.color = '#000';
    }
    return validForm;
  }
  document.addEventListener('keyup', validateForm);
  document.getElementsByClassName("sign-up-follow-up-input")[0].addEventListener('change', validateForm);
  document.getElementById("sign-up-role-dropdown").addEventListener('change', validateForm);
  document.getElementById("sign-up-state-dropdown").addEventListener('change', validateForm);

  let submitData = async () => {
    event.preventDefault();

    if(validateForm()){
      let userID = '{{ current_person.id }}'
      let email = '{{ current_person.email }}'
      console.log('SUBMIT!')
      console.log(userID);

      if(revisedPropsObj['learner_state'] != 'Ohio'){
        revisedPropsObj['oh_group_name'] = null;
      }

      if(revisedPropsObj['learner_state'] != 'California'){
        revisedPropsObj['cal_evv_id'] = null;
      }

      console.log(revisedPropsObj);


      function webhookCaller(){
        return new Promise(function(res, rej) {
          let xhr = new XMLHttpRequest();
		  url = "https://webhook.site/8fc3650a-7c4b-413a-a6fd-6e3787bc3771"
		  //url = "https://webhooks.workato.com/webhooks/rest/0a1d61c1-421c-4160-a1ab-d29e79aee50e/secondary-registration-submitted";

          xhr.addEventListener("load", e => {
            localStorage.setItem('completed-second-registration', true);
            window.location.replace('/app/dashboard');
          });

          xhr.open("POST", url, true);
          xhr.send(JSON.stringify([{
            id: userID,
            email: email,
            type:'person_properties',
            attributes: {
                'properties': revisedPropsObj
            },
          }]))
        })
      }

      try {
        await webhookCaller();
      } catch(err) {
        console.log(err)
      }
    }
  }

</script>