<div class="info-form" id="dialog_Q6szN">
	<section class="info-form-container">
		<div class="info-form-content">
      <div class="modal-intro">
      	<div class="header">Tell Us More!</div>
			  <p>Providing more information about yourself can unlock more relevent content</p>
      </div>

      {%- comment -%} <div class="input-wrapper">
        <label for="learner-name">Name</label>
        <input type="text" name="learner-name" value="" />
      </div>

      <div class="input-wrapper">
        <label for="learner-email">Email Address</label>
        <input type="text" name="learner-email" value="" />
      </div> {%- endcomment -%}

      <div class="input-wrapper">
        <label for="learner-title">Title</label>
        <input type="text" name="learner-title" value="" />
      </div>

      <div class="input-wrapper">
        <label for="role"><span class="required">*</span>What brought you to Anthology Academy?</label>
        <select name="primary-role">
          <option value="" selected>Select</option>
          <option value="Product Expert">I’d like to become an expert user of my Anthology product(s).</option>
          <option value="Product Implementation">I am implementing a new Anthology product.</option>
          {%- comment -%} <option value="Parent">Parent</option> {%- endcomment -%}
          <option value="Professional Development">I’m seeking professional development for higher ed faculty and staff.</option>
          <option value="Reference">I was directed to this site by someone on my campus.</option>
          <option value="Blackboard Learner">I am a Blackboard Academy user and am here to explore.</option>
          <option value="Anthology Academy User">I am an Anthology Academy user, ready to check out the new site.</option>
          <option value="Other">Other</option>
        </select>

        <div class="input-wrapper" style="display:none;" id="primaryRoleOther">
          <label for="primary-role-other">If other, please specify</label>
          <input type="text" name="primary-role-other" value="" />
        </div>
      </div>

      <div class="input-wrapper">
        <input type="checkbox" id="privacy" name="privacy" value="yes">
        <label class="checkbox" for="privacy">Please confirm that you have read and agree to Anthology's <a href="{{current_school.terms_of_service_url}}" target="_blank">Terms of Service.</a></label>
      </div>

      <div class="input-wrapper">
        <input type="checkbox" id="consent" name="consent" value="yes">
        <label class="checkbox" for="consent">Please confirm that you have read and agree to Anthology's <a href="https://www.anthology.com/trust-center/privacy-statement" target="_blank">Privacy Policy.</a></label>
      </div>


      <button class="np-button disabled" id="updateInfoBtn">Update</button>
		</div>
  </section>
</div>

<script>

  let unlockButton = () => {
    let privacyCheckboxField = $("input[name='privacy']");
    let consentCheckboxField = $("input[name='consent']");

    if(privacyCheckboxField[0].checked && consentCheckboxField[0].checked){
      $("#updateInfoBtn").removeClass('disabled');
    } else {
      $("#updateInfoBtn").addClass('disabled');
    }
  }

  $("input[name='privacy']").change(function(){
    unlockButton();
  })

  $("input[name='consent']").change(function(){
    unlockButton();
  })

  $("#updateInfoBtn").click(function(e) {
    e.preventDefault()
    validateForm()
  })

  $("select[name='primary-role']").change(function() {
    if ($(this).val() == "Other") {
      $("#primaryRoleOther").show()
    } else {
      $("#primaryRoleOther").hide()
      $("#primaryRoleOther").find("input").val('')
    }
  })

  function validateForm() {
    let allDataValidated = false;

    //Final user data
    let userData = {
      learner_uuid: '{{current_person.id}}',
      learner_name: '{{current_person.first_name}} {{current_person.last_name}}',
      learner_email: '{{current_person.email}}',
      learner_title: '',
      primaryRole: '',
      primaryRoleOther: '',
    }
    
    // get all form values
    //let learnerName = $("input[name='learner-name']").val();
    //let learnerEmail = $("input[name='learner-email']").val();
    let learnerTitle = $("input[name='learner-title']").val();
    let primaryRoleField = $("select[name='primary-role']").val();
    let primaryRoleOtherField = $("input[name='primary-role-other']").val();
    let privacyCheckboxField = $("input[name='privacy']");
    let consentCheckboxField = $("input[name='consent']");


    //learnerName == "" ? "" : userData.learner_name = learnerName;
    //learnerEmail == "" ? "" : userData.learner_email = learnerEmail;
    learnerTitle == "" ? "" : userData.learner_title = learnerTitle;
    primaryRoleField == "" ? "" : userData.primaryRole = primaryRoleField;
    if (primaryRoleField == "Other") {
      primaryRoleOtherField == "" ? "" : userData.primaryRoleOther = primaryRoleOtherField
    };
    privacyCheckboxField[0].checked ? userData.privacyCheckbox = true : userData.privacyCheckbox = false;
    consentCheckboxField[0].checked ? userData.consentCheckbox = true : userData.consentCheckbox = false;

    console.log(userData)

    let formHasErrors = false

    //if(!learnerName){
    //  $("input[name='learner-name']").addClass('err')
    //  formHasErrors = true
    //}
    //if(!learnerEmail){
    //  $("input[name='learner-email']").addClass('err')
    //  formHasErrors = true
    //}
    if(!learnerTitle){
      $("input[name='learner-title']").addClass('err')
      formHasErrors = true
    }
    if (!primaryRoleField) {
      $("select[name='primary-role']").addClass('err')
      formHasErrors = true
    } else {
      $("select[name='primary-role']").removeClass('err')

      if (primaryRoleField == "Other") {
        if (!primaryRoleOtherField) {
          $("input[name='primary-role-other']").addClass('err')
          formHasErrors = true
        } else {
          $("input[name='primary-role-other']").removeClass('err')
        }
      }
    }

    if (formHasErrors) {
      console.log("has errors")
    } else {

      console.log("submit form info")
      formHasErrors = false
      submitValidatedDataToLocalStorage(userData)
      submitValidatedDataToWorkato(userData)
    }
  }

  function submitValidatedDataToLocalStorage(data) {
    console.log("submitting user data to local storage")

    // Save entered data as individual variables in local storage for later use 
    //localStorage.setItem("learnerDiocese", data.diocese);
    //localStorage.setItem("learnerGuardianEmail", data.guardianEmail);
    //localStorage.setItem("learnerGroups", data.northpassGroups);
    //localStorage.setItem("learnerAge", data.overEighteen);
    //localStorage.setItem("learnerName", data.learner_name);
    //localStorage.setItem("learnerEmail", data.learner_email);
    localStorage.setItem("learnerTitle", data.learner_title);
    localStorage.setItem("learnerPrimaryRole", data.primaryRole);
    localStorage.setItem("learnerPrimaryRoleOther", data.primaryRoleOther);
    //localStorage.setItem("learnerSecondaryRoles", data.secondaryRoles);
    //localStorage.setItem("learnerStudentsTaughtCount", data.studentsTaughtCount);
    //localStorage.setItem("learnerWorkplace", data.workplace);

    // Set isValidated value in local storage to true
    localStorage.setItem("learnerCompletedAdditionalInfo", "true");
  }

  function submitValidatedDataToWorkato(data) {
    console.log("submitting user data to Workato")
    console.log(data);

    //const secondaryInfoStored = localStorage.getItem("learnerCompletedAdditionalInfo")

    $('#updateInfoBtn').prop("disabled",true);
    $('#updateInfoBtn').addClass('submitting')
    $('.loader').show()
    $('#updateInfoBtn span').text('Completing Registration')

    $.ajax({
      url: "https://webhooks.workato.com/webhooks/rest/604b4fc0-fcd9-4f3b-b715-b42d7f740ba6/additional-info-form-submitted",
      data: JSON.stringify(data),
      method: 'POST',
      success: function(res){
        console.log(res)
        window.location.replace('/app/dashboard');
      },
      error: function (xhr, status, error) {
        //console.error("Error posting to workato!");

        //if (secondaryInfoStored == "true") {
          //console.log("secondary information completed and stored in local storage")

          //setTimeout(function() {
          //  document.querySelector(".info-form-trigger").click()
          //}, 1000) 
        //}
      }
    });
  }
</script>

<style>
  .info-form {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    padding: 1em;
    /*background-color: rgba(0,0,0,.75);
    pointer-events: none; */
    transition: .25s ease-out;
    overflow: scroll;
    max-width: 900px;
    margin: auto;
  }

  .disabled{
    background: #808080;
    pointer-events: none;
  }

  .disabled:hover{
    background: #808080;
  }

  .err {
    border: 2px solid red!important;
  }

  .radio-err {
    outline: 2px solid red;
  }

  .info-form-trigger {
    color: #015893; 
    opacity:0;
  }

  .info-form-trigger:hover,
  .info-form-trigger:focus {
    text-decoration: none;
  }

  .info-form.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .info-form-container {
    width: 100%;
    margin: auto;
    transform: translateY(-1em) scale(.95);
    background-color: white;
    transition: transform .25s ease-out;
  }
  .info-form.is-active .info-form-container {
    transform: translateY(0) scale(1);
  }
  .info-form-header,
  .info-form-content,
  .info-form-footer {
    padding: 16px;
  }
  .info-form-footer {
    background-color: whitesmoke;
    text-align: right;
  }
  .info-form-footer button {
    display: inline-block;
    padding: .25em .5em;
    border: none;
    background-color: #015893;
    color: white;
  }
  .info-form-footer button:hover,
  .info-form-footer button:focus {
    background-color: white ;
    color: #fff;
  }

  .modal-intro {
    text-align:center;
    margin:12px 32px 32px;
  }

  .modal-intro .header {
    font-size:26px;
    font-weight:700;
  }

  .info-form-content {
    max-height: 90vh;
    overflow: scroll;
  }

  .info-form-content .input-wrapper {
    margin-bottom: 16px;
  }

  .info-form-content .input-wrapper label,
  .info-form-content .input-wrapper p {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color:#264c6f;
    font-weight: 500;
  }

  .info-form-content .input-wrapper label.checkbox {
    display: inline;
  }

  .info-form-content .input-wrapper input[type='text'],
  .info-form-content .input-wrapper input[type='number'],
  .info-form-content .input-wrapper select {
    width:100%;
    background-color: hsla(0,0%,40%,.05);
    border: 1px solid #264c6f;
    border-radius: 6px;
    padding: 14px 18px;
  }

  .info-form-content .input-wrapper select {
    cursor:pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 330 330' xml:space='preserve'%3E%3Cpath id='XMLID_225_' d='M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z'/%3E%3C/svg%3E");
    background-position: 98% 50%;
    background-size: 15px;
    background-repeat: no-repeat;
  }

  .info-form-content .input-wrapper select:after {
    content: "";
    position: absolute;
    right: 14px;
    top: calc(50% - 6px);
    display: inline-block;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    width: 8px;
    height: 8px;
    transform: rotate(45deg) translateY(calc(-50% + 5px));
  }

  .info-form-content .input-wrapper select:focus {
    -webkit-box-shadow: inset 0 0 0 2px #264c6f;
    box-shadow: inset 0 0 0 1px #264c6f;
    border-color: #264c6f;
  }

  #addAdditionalRole {
      margin-bottom: 18px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
  }

  fieldset {
    padding:16px;
    display: flex;
    flex-wrap: wrap;
  }

  legend {
    font-size: 14px;
    padding: 0 8px;
  }

  .checkbox-wrapper {
    display:flex;
    align-items:center;
    margin-bottom:8px;
    width:50%;
  }

  .checkbox-wrapper label {
    margin:0 0 0 8px!important;
  }

  .diocese-dropdown-btn {
    cursor: pointer;
    width: 100%;
    text-align: left;
    position:relative;
    background-color: hsla(0,0%,40%,.05);
    border: 1px solid #264c6f;
    border-radius: 6px;
    padding: 16px 18px;
  }

  .diocese-dropdown-btn:after {
    content: "";
    position: absolute;
    right: 14px;
    top: calc(50% - 6px);
    display: inline-block;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    width: 8px;
    height: 8px;
    transform: rotate(45deg) translateY(calc(-50% + 5px));
  }

  .diocese-dropdown.dropdown-open .diocese-dropdown-btn:after {
    transform: rotate(-135deg) translateY(-50%);
  }

  /* The search field */
  #dioceseInput {
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 490.4 490.4' style='enable-background:new 0 0 490.4 490.4;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M484.1,454.796l-110.5-110.6c29.8-36.3,47.6-82.8,47.6-133.4c0-116.3-94.3-210.6-210.6-210.6S0,94.496,0,210.796 s94.3,210.6,210.6,210.6c50.8,0,97.4-18,133.8-48l110.5,110.5c12.9,11.8,25,4.2,29.2,0C492.5,475.596,492.5,463.096,484.1,454.796z M41.1,210.796c0-93.6,75.9-169.5,169.5-169.5s169.6,75.9,169.6,169.5s-75.9,169.5-169.5,169.5S41.1,304.396,41.1,210.796z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
    background-position: 12px 50%;
    background-repeat: no-repeat;
    background-size: 16px auto;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
    width:100%;
  }

  #dioceseInput:focus {outline: 3px solid #c9c2bc;}

  .diocese-dropdown {
    position: relative;
    display: inline-block;
    width:100%;
  }

  /* Dropdown Content (Hidden by Default) */
  .diocese-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    border: 1px solid #ddd;
    z-index: 1;
    width:100%;
    max-height: 250px;
    overflow: scroll;
  }

  .diocese-dropdown-content .diocese-item {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .diocese-dropdown-content .diocese-item:hover {background-color: #f1f1f1}

  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .dropdown-show {display:block;}

  #updateInfoBtn.submitting {
    background-color:#63666a;
    cursor:text;
  }


  @media (min-width:768px) {
    .info-form-header, 
    .info-form-content, 
    .info-form-footer {
      padding: 32px 64px;
    }

    .info-form-content .input-wrapper {
      margin-bottom: 22px;
    }
  }

</style>