// Fonction pour ajouter une tâche
function ajoutTache() {
  // Récupérer la valeur de la tâche entrée
  var tache = document.getElementById("tacheInput").value;

  // Vérifier si la tâche n'est pas vide
  if (tache === "") {
    alert("Veuillez saisir une tâche.");
    return;
  }

  // Créer un élément <div> pour la nouvelle tâche
  var tacheDiv = document.createElement("div");
  tacheDiv.className = "task"; //mise en forme css

  // Créer un élément <span> pour afficher la tâche
  var tacheSpan = document.createElement("span");
  tacheSpan.textContent = tache; //récupère texte saisi dans la zone de texte tacheInput
  tacheDiv.appendChild(tacheSpan); //pour afficher à la suite

  // Créer une checkbox pour marquer la tâche comme terminée
  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.onchange = function () {
    toggleTaskCompletion(tacheDiv, checkbox);
  };
  tacheDiv.appendChild(checkbox);

  // Ajouter un bouton "Supprimer"
  var suppButton = document.createElement("button");
  suppButton.textContent = "Supprimer";
  suppButton.className = "supp";
  suppButton.onclick = suppTache; // Associer la fonction de suppression
  tacheDiv.appendChild(suppButton);

  // Ajouter un bouton "Modifier"
  var modifButton = document.createElement("button");
  modifButton.textContent = "Modifier";
  modifButton.className = "modif";
  modifButton.onclick = function () {
    modifTache(tacheDiv, tacheSpan);
  };
  tacheDiv.appendChild(modifButton);

  // Ajouter la tâche au conteneur
  document.getElementById("listeTache").appendChild(tacheDiv);

  // Réinitialiser le champ de saisie
  document.getElementById("tacheInput").value = "";
}

// Fonction pour supprimer une tâche
function suppTache() {
  var tacheDiv = this.parentElement;
  tacheDiv.remove();
}

// Fonction pour marquer une tâche comme terminée (avec la checkbox)
function toggleTaskCompletion(tacheDiv, checkbox) {
  if (checkbox.checked) {
    tacheDiv.classList.add("completed");
  } else {
    tacheDiv.classList.remove("completed");
  }
}

// Fonction pour modifier une tâche
function modifTache(tacheDiv, tacheSpan) {
  // Créer un champ de texte pour modifier la tâche
  var modifInput = document.createElement("input");
  modifInput.type = "text";
  modifInput.value = tacheSpan.textContent;

  // Créer un bouton "Enregistrer"
  var saveButton = document.createElement("button");
  saveButton.textContent = "Enregistrer";
  saveButton.className = "save";

  // Remplacer le texte et les boutons actuels par le champ de texte et le bouton "Enregistrer"
  tacheDiv.innerHTML = ""; // Supprime tout le contenu de la tâche
  tacheDiv.appendChild(modifInput);
  tacheDiv.appendChild(saveButton);

  // Fonction pour enregistrer la modification
  saveButton.onclick = function () {
    if (modifInput.value === "") {
      alert("Veuillez saisir une tâche valide.");
      return;
    }
    tacheSpan.textContent = modifInput.value; // Mettre à jour le texte de la tâche
    tacheDiv.innerHTML = ""; // Vider l'élément <div> à nouveau
    tacheDiv.appendChild(checkbox); // Restaurer la checkbox
    tacheDiv.appendChild(tacheSpan); // Restaurer la tâche modifiée
    tacheDiv.appendChild(suppButton); // Restaurer le bouton "Supprimer"
    tacheDiv.appendChild(modifButton); // Restaurer le bouton "Modifier"
  };

  // Re-créer les boutons de suppression et de modification après la sauvegarde
  var suppButton = document.createElement("button");
  suppButton.textContent = "Supprimer";
  suppButton.className = "supp";
  suppButton.onclick = suppTache;

  var modifButton = document.createElement("button");
  modifButton.textContent = "Modifier";
  modifButton.className = "modif";
  modifButton.onclick = function () {
    modifTache(tacheDiv, tacheSpan);
  };

  // Restaurer la checkbox après modification
  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.onchange = function () {
    toggleTaskCompletion(tacheDiv, checkbox);
  };
}