text: eventListeners();
  //lista de proyectos
  var listaProyectos = document.querySelector('ul#proyectos');
  
  function eventListeners() {
  
      //document ready
      document.addEventListener('DOMContentLoaded', function () {
          actualizarProgreso();
      })
  
  
      document.querySelector('.crear-proyecto a').addEventListener('click', nuevoProyecto);
  
      if (document.querySelector('.nueva-tarea')) {
  
          document.querySelector('.nueva-tarea').addEventListener('click', agregarTarea);
      }
  
      if (document.querySelector('.listado-pendientes')) {
          document.querySelector('.listado-pendientes').addEventListener('click', accionesTareas);
      }
  
      document.querySelector('.eliminar-proyecto a').addEventListener('click', eliminarProyecto);
  }
  
  function nuevoProyecto(e) {
      e.preventDefault();
  
      //crea un input para el nombre del nuevo proyecto
      var nuevoProyecto = document.createElement('li');
      nuevoProyecto.innerHTML = '<input type = "text" id="nuevo-proyecto" >';
      listaProyectos.appendChild(nuevoProyecto);
  
  
      //seleccionar el id con el nuevo proyecto
      var inputNuevoProyecto = document.querySelector('#nuevo-proyecto');
      // al presionar enter se crea el proyecto
  
      inputNuevoProyecto.addEventListener('keypress', function (e) {
          var tecla = e.which || e.keyCode;
          if (tecla === 13) {
              guardarProyectoDB(inputNuevoProyecto.value);
              listaProyectos.removeChild(nuevoProyecto);
          }
      });
  
  
  }
  
  
  function guardarProyectoDB(nombreProyecto) {
      var xhr = new XMLHttpRequest();
  
      var datos = new FormData();
  
      var idUsuario = document.querySelector('a.us').getAttribute('data-id');
  
      datos.append('proyecto', nombreProyecto);
      datos.append('accion', 'crear');
      datos.append('id_usuario', idUsuario);
  
      xhr.open('POST', 'includes/modelos/modelo-proyecto.php', true);
  
      xhr.onload = function () {
          if (this.status === 200) {
              var respuesta = JSON.parse(xhr.responseText);
              var proyecto = respuesta.nombre_proyecto,
                  id_proyecto = respuesta.id_insertado,
                  tipo = respuesta.tipo,
                  resultado = respuesta.respuesta;
  
              if (resultado == 'correcto') {
                  if (tipo == 'crear') {
                      //inyectar en el html
                      var nuevoProyecto = document.createElement('li');
                      nuevoProyecto.innerHTML = `
                      <a href="index.php?id_proyecto=${id_proyecto}" id="proyecto:${id_proyecto}">${proyecto}</a>
                      `;
                      listaProyectos.appendChild(nuevoProyecto);
  
                      Swal.fire({
                          icon: 'success',
                          title: 'Proyecto Creado',
                          text: 'El proyecto: ' + proyecto + ' se creo correctamente'
                      }).then(result => {
                          if (result.value) {
                              window.location.href = 'index.php?id_proyecto=' + id_proyecto;
                          }
                      });
  
                  } else {
                      //se actulizo o se elimino
                  }
  
              } else {
                  //hubo un error
                  Swal.fire({
                      icon: 'error',
                      title: 'Error!',
                      text: 'Hubo un error'
                  });
              }
  
          }
      }
  
      xhr.send(datos);
  }
  
  
  function eliminarProyecto(e) {
      e.preventDefault();
      Swal.fire({
              title: 'Estas seguro(a)?',
              text: "Esta accion no se puede deshacer!",
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Si',
              cancelButtonText: 'Cancelar'
          }).then((result) => {
              if (result.value) {
                  eliminarProyectoBD();
                  Swal.fire(
                      'Eliminado!',
                      'El proyecto ha sido eliminado.',
                      'success'
                  ).then((result)=> {
                      window.location.href = 'index.php';
                  });
              }
          });
  
  }
  
  
  function eliminarProyectoBD(){
  
      var idProyecto = document.querySelector('.eliminar-proyecto a').getAttribute('id_proyecto');
  
      var xhr = new XMLHttpRequest();
  
      var datos = new FormData();
      datos.append('accion', 'eliminar');
      datos.append('id_proyecto', idProyecto);
  
      xhr.open('POST', 'includes/modelos/modelo-proyecto.php', true);
  
      xhr.onload = function () {
          if (this.status === 200) {
              var respuesta = JSON.parse(xhr.responseText);
          }
      }
  
      xhr.send(datos);
  }
  
  
  function agregarTarea(e) {
      e.preventDefault();
      var nombreTarea = document.querySelector('.nombre-tarea').value;
  
      if (nombreTarea == "") {
          Swal.fire({
              icon: 'error',
              title: 'Error!',
              text: 'Una tarea no puede ir vacia'
          })
      } else {
  
          var xhr = new XMLHttpRequest();
  
          var datos = new FormData();
          datos.append('tarea', nombreTarea);
          datos.append('accion', 'crear');
          datos.append('id_proyecto', document.querySelector('#id_proyecto').value);
  
          xhr.open('POST', 'includes/modelos/modelo-tareas.php', true);
  
          xhr.onload = function () {
              if (this.status === 200) {
                  var respuesta = JSON.parse(xhr.responseText);
                  if (respuesta.respuesta == 'correcto') {
                      if (respuesta.tipo == 'crear') {
                          Swal.fire({
                              icon: 'success',
                              title: 'Tarea Creada',
                              text: 'La Tarea: ' + respuesta.nombre_tarea + ' se creo correctamente'
                          });
  
                          //seleccionar el parrafo con la lista vacia
  
                          var parrafoListaVacia = document.querySelectorAll('.lista-vacia');
  
                          if (parrafoListaVacia.length > 0) {
                              document.querySelector('.lista-vacia').remove();
                          }
  
                          var nuevaTarea = document.createElement('li');
                          nuevaTarea.id = 'tarea:' + respuesta.id_insertado;
  
                          nuevaTarea.classList.add('tarea');
                          nuevaTarea.innerHTML = `<p>${respuesta.nombre_tarea}</p>
                          <div class="acciones">
                          <i class="far fa-check-circle"></i>
                          <i class="fas fa-trash"></i>
                          </div>`;
  
                          var listado = document.querySelector('.listado-pendientes ul');
                          listado.appendChild(nuevaTarea);
  
                          document.querySelector('.agregar-tarea').reset();
  
                          actualizarProgreso();
                      }
  
                  } else {
                      Swal.fire({
                          icon: 'error',
                          title: 'Error!',
                          text: 'Hubo un error'
                      });
                  }
              }
          }
  
          xhr.send(datos);
  
  
      }
  }
  
  function accionesTareas(e) {
      e.preventDefault();
  
      if (e.target.classList.contains('fa-check-circle')) {
          if (e.target.classList.contains('completo')) {
              e.target.classList.remove('completo');
              cambiarEstadoTarea(e.target, 0);
          } else {
              e.target.classList.add('completo');
              cambiarEstadoTarea(e.target, 1);
          }
      }
  
      if (e.target.classList.contains('fa-trash')) {
          Swal.fire({
              title: 'Estas seguro(a)?',
              text: "Esta accion no se puede deshacer!",
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Si',
              cancelButtonText: 'Cancelar'
          }).then((result) => {
              if (result.value) {
                  var tareaEliminar = e.target.parentElement.parentElement;
  
                  //borrar de la base de datos
                  eliminarTareaBd(tareaEliminar);
  
  
                  //borrar del html
                  tareaEliminar.remove();
  
  
                  Swal.fire(
                      'Eliminado!',
                      'La tarea ha sido eliminada.',
                      'success'
                  )
              }
          });
      }
  }
  
  
  function cambiarEstadoTarea(tarea, estado) {
      var idTarea = tarea.parentElement.parentElement.id.split(':')[1];
  
      var xhr = new XMLHttpRequest();
  
      var datos = new FormData();
      datos.append('id', idTarea);
      datos.append('accion', 'actualizar');
      datos.append('estado', estado);
  
      xhr.open('POST', 'includes/modelos/modelo-tareas.php', true);
  
      xhr.onload = function () {
          if (this.status === 200) {
              var respuesta = JSON.parse(xhr.responseText);
              actualizarProgreso();
          }
      }
  
      xhr.send(datos);
  }
  
  function eliminarTareaBd(tarea) {
      var idTarea = tarea.id.split(':')[1];
  
      var xhr = new XMLHttpRequest();
  
      var datos = new FormData();
      datos.append('id', idTarea);
      datos.append('accion', 'eliminar');
  
      xhr.open('POST', 'includes/modelos/modelo-tareas.php', true);
  
      xhr.onload = function () {
          if (this.status === 200) {
              var respuesta = JSON.parse(xhr.responseText);
              actualizarProgreso();
              //comprobar que haya tareas restantes
              var listaTareasRestantes = document.querySelectorAll('li.tarea');
              if (listaTareasRestantes.length === 0) {
                  document.querySelector('.listado-pendientes ul').innerHTML = '<p class="lista-vacia">No hay tareas en este proyecto</p>';
              }
          }
      }
  
      xhr.send(datos);
  }
  
  function actualizarProgreso() {
      var tareas = document.querySelectorAll('li.tarea');
      var tareasCompletadas = document.querySelectorAll('i.completo');
  
      var avance = Math.round((tareasCompletadas.length / tareas.length) * 100);
  
  
      var porcentaje = document.querySelector('#porcentaje');
  
      porcentaje.style.width = avance + '%';
  
      if (avance == 100) {
          Swal.fire({
              icon: 'success',
              title: 'Proyecto Terminado',
              text: 'Ya no tienes tareas pendientes'
          });
      }
  
  }
  