{% comment %} Page for SSO school to setup first name {% endcomment %}

{% if current_person.signed_in? == false %}
  <script>
    window.location.replace('/app')
  </script>
{% else %}
  {% if current_person.first_name %}
    {% include 'profile_settings_regular' %}
  {% else %}
    {% include 'profile_settings_initial' %}
  {% endif %}
  
  <style>
    .np-account {
      background: #F7F7FE;
      padding-top: 40px;
      padding-bottom: 40px;
      height: 100%;
    }
    .np-account .np-card {
      max-width: unset;
      width: 100%;
    }
    .np-account-form {
      margin-bottom: 80px;
    }
    .account-form-title {
      color: var(--green);
      margin-bottom: 40px;
    }
    .np-account .np-card-container {
      box-shadow: none;
      background: none;
    }
    .np-input {
      background: #FFF;
      border-radius: 0;
      border: 1px solid #E1E1FF;
      margin-top: 5px;
    }
    .np-form-field {
      margin-bottom: 20px !important;
    }
    .np-account .np-form-action {
      margin: 20px 0 0;
    }
    .avatar-text > h4 {
      margin-bottom: 20px;
    }
    button:disabled, button:hover:disabled {
      background: #FFE7E6;
      color: gray;
      cursor: default;
    }
    @media only screen and (min-width: 768px) {
      .np-account {
        padding-top: 80px;
        padding-bottom: 80px;
      }
      .np-account-form {
        margin-bottom: 0;
      }
    }
  </style>
  
  <script>
    const form = document.getElementById('name-form');
    
    form.addEventListener('input', () => {
      const firstName = document.querySelector('#first-name').value;
      const lastName = document.querySelector('#last-name').value;
      const button = document.querySelector('button.np-form-action');
      button.disabled = !(firstName.length > 0 && lastName.length > 0);
    });
    
    addEventListener('DOMContentLoaded', () => {
      {% if current_person.first_name %}
      document.querySelector('#first-name').setAttribute('value', '{{ current_person.first_name }}');
      document.querySelector('#last-name').setAttribute('value', '{{ current_person.last_name }}');
      {% else %}
      let defaultLastName = "{{ current_person.last_name }}";
      let splitName = defaultLastName.split(' ');
      if (splitName.length >= 2) {
        document.querySelector('#last-name').setAttribute('value', splitName.pop());
        document.querySelector('#first-name').setAttribute('value', splitName.join(' '));
      }
      else {
        document.querySelector('#first-name').setAttribute('value', splitName[0]);
        document.querySelector('button').disabled = true;
      }
      {% endif %}
    })
    {% if current_school.properties.sandbox == false %}
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const firstName = document.getElementById('first-name').value;
        const lastName = document.getElementById('last-name').value;
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-sso-setup-first-and-last-name');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({
          "first-name": firstName,
          "last-name": lastName,
          "user-uuid": "{{ current_person.id }}"
        }));
        xhr.addEventListener('load', () => {
          window.sessionStorage.setItem('nameSetup', firstName);
          window.location.replace('/app');
        });
      });
    {% endif %}
  </script>
{% endif %}