<div class="account-deletion">
  <h4 class="strong">
    <span class="lang-en">Delete your account</span>
    <span class="lang-de">Ihr Konto löschen</span>
    <span class="lang-es">Eliminar tu cuenta</span>
    <span class="lang-fr">Supprimer votre compte</span>
    <span class="lang-br">Exclua sua conta</span>
  </h4>
  <div class="account-deletion-description">
    <span class="lang-en">Your account will be permanently deleted and you will no longer be able to access any data or information associated with this account. This action cannot be undone.</span>
    <span class="lang-de">Ihr Account wird dauerhaft gelöscht und Sie haben keinen Zugriff mehr auf die mit diesem Konto verbundenen Daten und Informationen. Diese Aktion kann nicht rückgängig gemacht werden.</span>
    <span class="lang-es">Tu cuenta será eliminada permanentemente y ya no podrás acceder a ningún dato o información asociada a esta cuenta. Esta acción no se puede deshacer.</span>
    <span class="lang-fr">Votre compte sera définitivement supprimé et vous ne pourrez plus accéder aux données ou informations associées à ce compte. Cette action ne peut être annulée.</span>
    <span class="lang-br">Sua conta será excluída permanentemente e você não poderá mais acessar quaisquer dados ou informações associados a ela. Esta ação não pode ser desfeita.</span>
  </div>
  <div class="button-1 button-large button-deletion" onclick="
    document.querySelector('.account-deletion-popup-wrapper').classList.remove('np-hidden');
    document.querySelector('.account-deletion-popup').classList.remove('np-hidden');"
  >
    <span class="lang-en">Delete my account</span>
    <span class="lang-de">Meinen Account löschen</span>
    <span class="lang-es">Eliminar mi cuenta</span>
    <span class="lang-fr">Supprimer mon compte</span>
    <span class="lang-br">Excluir minha conta</span>
  </div>
</div>

<div class="account-deletion-popup-wrapper np-hidden" onclick="
    document.querySelector('.account-deletion-popup-wrapper').classList.add('np-hidden');
    document.querySelector('.account-deletion-popup').classList.add('np-hidden');"
>
</div>
<div class="account-deletion-popup np-hidden">
  <div class="account-deletion-popup-confirmation">
    <label class="account-deletion-confirmation-label" for="account-deletion-confirmation-input">
      <span class="lang-en">To confirm account deletion, type <em>delete</em> in the field below.</span>
      <span class="lang-de">Um die Löschung des Accounts zu bestätigen, geben Sie <em>löschen</em> in das Feld unten ein.</span>
      <span class="lang-es">Para confirmar la eliminación de la cuenta, escribe <em>eliminar</em> en el siguiente campo.</span>
      <span class="lang-fr">Pour confirmer la suppression de votre compte, tapez <em>supprimer</em> dans le champ ci-dessous.</span>
      <span class="lang-br">Para confirmar a exclusão da conta, digite <em>excluir</em> no campo abaixo.</span>
    </label>
    <input id="account-deletion-confirmation-input" class="np-input" placeholder="delete" autocomplete="off">
    <div id="confirm-deletion" class="button-1 button-medium button-deletion button-deletion-disabled" onclick="sendDeleteRequest();">
      <span class="lang-en">Delete</span>
      <span class="lang-de">löschen</span>
      <span class="lang-es">Eliminar</span>
      <span class="lang-fr">Supprimer</span>
      <span class="lang-br">Excluir</span>
    </div>
  </div>
  <h5 class="account-deletion-popup-goodbye np-hidden">
    <span class="lang-en">Your account will be deleted shortly</span>
    <span class="lang-de">Ihr Account wird in Kürze gelöscht</span>
    <span class="lang-es">Tu cuenta será eliminada en breve</span>
    <span class="lang-fr">Votre compte sera supprimé dans les plus brefs délais</span>
    <span class="lang-br">Sua conta será excluída em breve</span>
  </h5>
</div>
<style>
  .account-deletion h4 {
    margin-top: 80px;
    margin-bottom: 20px;
  }
  .button-deletion {
    width: fit-content;
    background: #FFE7E6;
    color: #C7201B;
    margin-top: 20px;
  }
  .button-deletion:hover {
    background: #FF5550;
    color: #FFF;
  }
  .button-deletion-disabled, .button-deletion-disabled:hover {
    background: #FFE7E6;
    color: gray;
    cursor: default;
  }
  .account-deletion-popup-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(60, 60, 60, 0.5);
    top: 0;
    left: 0;
  }
  .account-deletion-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #FFF;
    border-radius: 4px;
    transform: translate(-50%, -50%);
  }
  .account-deletion-popup-confirmation {
    display: flex;
    flex-direction: column;
    padding: 40px;
    gap: 20px;
  }
  .account-deletion-popup-goodbye {
    padding: 60px;
  }
  #account-deletion-confirmation-input::placeholder {
    font-style: italic;
    color: #999FA7;
    opacity: 1;
  }
  @media only screen and (min-width: 500px) {
    .account-deletion-popup-confirmation {
      min-width: 450px;
    }
  }
  @media only screen and (min-width: 1024px) {
    .account-deletion h4 {
      margin-top: 40px;
    }
  }
</style>
<script>
  {% if current_school.properties.sandbox == false %}
    const deletionInput = document.getElementById('account-deletion-confirmation-input');
  
    deletionInput.addEventListener('input', () => {
      const button = document.querySelector('#confirm-deletion');
      if (deletionInput.value.toLowerCase() !== 'delete') {
        button.classList.add('button-deletion-disabled');
      } else {
        button.classList.remove('button-deletion-disabled');
      }
    });
  
    function sendDeleteRequest() {
      document.querySelector('.account-deletion-popup-confirmation').classList.add('np-hidden');
      document.querySelector('.account-deletion-popup-goodbye').classList.remove('np-hidden');
      const personUUID = '{{ current_person.id }}';
      const personEmail = '{{ current_person.email }}'
      const personTime = '{{ current_person.created_at | replace_first: " ", "T" | replace_first: " +0000", ".000000+00:00" }}';
      const xhr = new XMLHttpRequest();
      
      {% if current_school.sso_active? %}
        var url = 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-sso-delete-myself'
      {% else %}
        var url = 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-open-delete-myself'
      {% endif %}
      xhr.open('POST', url);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify({
        "personUUID": personUUID,
        "personEmail": personEmail,
        "personTime": personTime
      }));
      xhr.addEventListener('load', () => {
        setTimeout(() => {
          window.location.replace('/learners/sign_out');
        }, 3000);
      });
    }
  {% endif %}
</script>
