{% include "header" %}

<div class="page-container account-profile">
  <div class="np-hidden-mobile">
    {% include "sub_navigation" %}
  </div>

  <main class="np-main np-subpage-container np-account account-margin">
    <div class="np-hidden-desktop">
      {% include "account_mobile_view", form: form %}
    </div>

    <div class="np-hidden-mobile np-flex np-flex-center">
      {% include "account_desktop_view", form: form %}
    </div>
  </main>
</div>

{% include "footer" %}

<style>
  .np-card-container {
    box-shadow: none;
  }


  @media (max-width: 768px) {
    .account-profile {
      justify-content: center;
    }

    .account-margin {
      margin-right: 0;
    }

    .np-card.np-account-form {
      min-width: 100% !important;
    }

    .np-account-form {
      padding-right: 0;
    }

    .np-account-avatar {
      padding-left: 0;
    }
  }

  @media (min-width: 769px) and (max-width: 2499px) {
    .account-profile {
      justify-content: space-between;
    }

    .account-margin {
      margin-right: 12%;
    }


    .np-account-form {
      padding-right: 0;
    }
  }

  @media (min-width: 2500px) {
    .np-card-container.np-card-padding > div {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
    }

    .account-profile {
      justify-content: space-between;
    }

    .account-margin {
      margin-right: 23%;
    }

    .np-account-form {
      margin-right: 9%;
    }
  }

</style>
<script>
  let checkboxFlag = false;

  let checkCheckbox = (element) => {
    if(element.checked){
      checkboxFlag = true;
    } else {
      checkboxFlag = false;
    }
  }

  let hubspotOptOutSubmit = (e) => {
    let learner_email;
    let learner_name;

    if(window.innerWidth > 768){
      learner_email = $('#desktop_learner_email')[0].value;
      learner_name = `${$('#desktop_learner_first_name')[0].value} ${$('#desktop_learner_last_name')[0].value}`;
    } else {
      learner_email = $('#mobile_learner_email').value;
      learner_name = `${$('#mobile_learner_first_name')} ${$('#mobile_learner_last_name')}`;
    }
    
    if(checkboxFlag){
      alert('sending http req')

      let xhr = new XMLHttpRequest();
      let url = 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/hubspot_opt_out';

      xhr.open("POST", url, true);
      xhr.send(JSON.stringify({
        learner_email,
        learner_name,
        checkboxFlag: checkboxFlag
      }));
    }
    return;
  }
</script>