//! jusers.js

let idUser;
let libUser;
let oldColorLn;
let oldIdLn;

window.addEventListener('DOMContentLoaded', (event) => {
  console.log('#');

  // Initialisation des éléments utilisés
  let elLigUsers = document.getElementsByClassName("ligUser");
  let elCelUsers = document.getElementsByClassName("celUser");

  let elBtnCreateUser = document.getElementById("btnCreateUser");
  let elBtnModUsers = document.getElementsByClassName("btnModUser");
  let elBtnCancelModUser = document.getElementById("btnCancelModUser");
  let elBtnSubmitModUser = document.getElementById("btnSubmitModUser");
  let elBtnSuppUsers = document.getElementsByClassName("btnSuppUser");
  let elBtnMaintenance = document.getElementById("btnMaintenance");

  let tabRoles; // tableau des rôles
  let tabRegions; // tableau des régions

  // on récupère la liste des rôles
  fetch('/jxpost/load_roles',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Accept': 'application/json;charset=utf-8',
      }
    }).then((response) => {
    if (!response.ok) {
      showNotification("Erreur", "Le chargement des rôles n'a pas pu s'effectuer", "error");
    } else {
      const ret = response.json();
      ret.then(function (ret) {
        tabRoles = ret;
      });
    }
  });
  // et la liste des régions
  fetch('/jxpost/load_regions',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Accept': 'application/json;charset=utf-8',
      }
    }).then((response) => {
    if (!response.ok) {
      showNotification("Erreur", "Le chargement des régions n'a pas pu s'effectuer", "error");
    } else {
      const ret = response.json();
      ret.then(function (ret) {
        tabRegions = ret;
      });
    }
  });

  let clickLigUser = function () {
    //! Event Click sur une cellule d'une ligne d'un marché qui a la classe celUsers
    idUser = this.getAttribute("data-rowid");
    libUser = this.getAttribute("data-libelle");

    showLoading();

    Array.from(elCelUsers).forEach(function (clickLigUser) {
      if (clickLigUser.getAttribute("data-rowid") == oldIdLn) {
        clickLigUser.style.backgroundColor = oldColorLn;
      } else if (clickLigUser.getAttribute("data-rowid") == idUser) {
        oldColorLn = clickLigUser.style.backgroundColor;
        clickLigUser.style.backgroundColor = "#9bbce7";
      }
    });
    oldIdLn = idUser;

    // effectue la requête ajax fetch pour charger les produits du marché
    fetch('/jxpost/load_user',
      {
        method: 'POST',
        body: JSON.stringify({cid: idUser}),
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
          'Accept': 'application/json;charset=utf-8',
        }
      })
      .then((response) => {
        if (!response.ok) {
          showNotification("Erreur", "Le chargement des informations de l'utilisateur n'a pas pu s'effectuer", "error");
        } else {
          const ret = response.json();

          ret.then(function (ret) {

          });
        }
      })
      .catch((error) => {
        console.error('Error:', error);
        showNotification("Erreur", "Le chargement des produits de ce marché n'a pas pu s'effectuer", "error");
      });
    hideLoading();
    return false;
  };

  let clickCreateUser = function () {
    //! Event Click sur le bouton de création d'un marché

    //! on reset les champs du formulaire
    form = document.getElementById("frmUser");
    form.reset();

    //! on met tous les input de type number à 0
    let inputs = document.querySelectorAll('input[type=number]');
    for (let i = 0; i < inputs.length; i++) {
      inputs[i].value = 0;
    }
    //! on reset le champ caché rowid
    document.getElementById("userRowid").value = "0";
    document.getElementById("userAct").value = "C";
    document.getElementById("userActive").checked = true;
    document.getElementById("modUserTitre").innerHTML = "Création d'un nouvel utilisateur";
    showModal(document.getElementById("modalEditUser"));
    document.getElementById("userLibelle").focus();
  }


  let clickModUser = function () {
    //! Event Click sur un bouton de modification d'une ligne d'un marché

    idUser = this.getAttribute("data-rowid");
    libUser = this.getAttribute("data-libelle");

    showLoading();
    // Va chercher la 1ère cellule de la ligne pour lancer la function click() => clickLigUser
    let firstCellOfRow = this.parentNode.parentNode.cells[0];
    firstCellOfRow.click();

    fetch('/jxpost/load_user',
      {
        method: 'POST',
        body: JSON.stringify({cid: idUser}),
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
          'Accept': 'application/json;charset=utf-8',
        }
      })
      .then((response) => {
        if (!response.ok) {
          showNotification("Erreur", "Le chargement des informations de cet utilisateur n'a pas pu s'effectuer", "error");
        } else {
          const ret = response.json();

          //! Boucle sur le résultat de la requête ajax
          ret.then(function (ret) {
            if (ret.length == 1) {
              let user = ret[0];
              document.getElementById("userAct").value = "M";
              document.getElementById("userRowid").value = user.rowid;
              document.getElementById("userLibelle").value = user.libelle;
              document.getElementById("userPrenom").value = user.prenom;
              document.getElementById("userEmail").value = user.email;
              document.getElementById("userMobile").value = user.mobile;
              document.getElementById("userName").value = user.username;
              if (user.chk_grands_comptes == '1') {
                document.getElementById("userChk_grands_comptes").checked = true;
              } else {
                document.getElementById("userChk_grands_comptes").checked = false;
              }
              document.getElementById("userRole").value = user.fk_role;
              document.getElementById("userParent").value = user.fk_parent;
              document.getElementById("userRegion").value = user.fk_region;
              document.getElementById("userLst_depts").value = user.lst_depts;
              if (user.active == '1') {
                document.getElementById("userActive").checked = true;
              } else {
                document.getElementById("userActive").checked = false;
              }

              document.getElementById("modUserTitre").innerHTML = "Modification de la fiche de l'utilisateur " + libUser;
              showModal(document.getElementById("modalEditUser"));
              document.getElementById("userLibelle").focus();
            }
          });
        }
      });
    hideLoading();
    return false;
  }

  let clickCancelModUser = function () {
    //! Event Click sur le bouton Annuler de la modale d'un marché
    hideModal(document.getElementById("modalEditUser"));
  }

  let clickSubmitModUser = function () {
    //! Event Click sur le bouton Enregistrer de la modale d'un utilisateur

    if (document.getElementById("userLibelle").value == "") {
      showNotification("Enregistrement impossible", "L'utilisateur doit obligatoirement avoir un nom", "warning");
      document.getElementById("userLibelle").focus();
      return false;
    }
    if (document.getElementById("userName").value == "") {
      showNotification("Enregistrement impossible", "L'utilisateur doit obligatoirement avoir un Login pour se connecter", "warning");
      document.getElementById("userName").focus();
      return false;
    }
    if (document.getElementById("userEmail").value == "") {
      showNotification("Enregistrement impossible", "L'utilisateur doit obligatoirement avoir un email", "warning");
      document.getElementById("userEmail").focus();
      return false;
    }
    if (document.getElementById("userRole").value == 0) {
      showNotification("Enregistrement impossible", "L'utilisateur doit obligatoirement avoir un rôle", "warning");
      document.getElementById("userRole").focus();
      return false;
    }

    showLoading();
    let frmData = new FormData(document.getElementById('frmUser'));
    let objData = {};
    frmData.forEach(function (value, key) {
      objData[key] = value;
    });

    fetch('/jxpost/save_user', {
      method: 'POST',
      body: JSON.stringify(objData),
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Accept': 'application/json;charset=utf-8',
      }
    }).then((response) => {
      if (!response.ok) {
        showNotification("Erreur", "L'enregistrement de cet utilisateur n'a pas pu s'effectuer", "error");
      } else {
        const ret = response.json();

        ret.then(function (ret) {
          if (ret.ret == "ok") {
            showNotification("Enregistrement", "L'enregistrement de cet utilisateur a été effectué avec succès", "success");
          } else {
            showNotification("Enregistrement", "Erreur lors de l'enregistrement de cet utilisateur", "error");
          }
        });
      }
    });
    hideLoading();

    if (document.getElementById("userRowid").value == "0") {
      //! si c'était une création, on ajoute le nouveau marché en bas de tableau
      // TODO: on ajoute la ligne créée dans le tableau

    } else {
      //! on recherche la ligne du tableau à mettre à jour
      let cell;
      Array.from(elLigUsers).forEach(function (clickLigUser) {
        cell = clickLigUser.cells[0];
        if (cell.getAttribute("data-rowid") == idUser) {
          clickLigUser.cells[0].innerHTML = document.getElementById("userLibelle").value;
          clickLigUser.cells[1].innerHTML = document.getElementById("userPrenom").value;
          // recherche dans tabRoles la valeur de document.getElementById("userRole").value
          let leRole = tabRoles.find(function (role) {
            return role.rowid == document.getElementById("userRole").value;
          });
          if (leRole == undefined) {
            clickLigUser.cells[2].innerHTML = "";
          } else {
            clickLigUser.cells[2].innerHTML = leRole.libelle
          }
          clickLigUser.cells[3].innerHTML = document.getElementById("userMobile").value;
          clickLigUser.cells[4].innerHTML = document.getElementById("userEmail").value;
          let laRegion = tabRegions.find(function (region) {
            return region.rowid == document.getElementById("userRegion").value;
          });
          if (laRegion == undefined) {
            clickLigUser.cells[5].innerHTML = "";
          } else {
            clickLigUser.cells[5].innerHTML = laRegion.libelle;
          }
        }
      })
    }
    hideModal(document.getElementById("modalEditUser"));
    return false;
  }

  let clickSuppUser = function () {
    //! Event Click sur le bouton Supprimer d'un marché
    idUser = this.getAttribute("data-rowid");
    libUser = this.getAttribute("data-libelle");

    if (confirm("Voulez-vous vraiment supprimer l'utilisateur " + libUser + " ?")) {
      if (confirm("ATTENTION ! Cette suppression est définitive et supprimera aussi tous ses devis et historique rattachés. Voulez-vous vraiment supprimer l'utilisateur " + libUser + " ?")) {

        showLoading();
        fetch('/jxpost/delete_user', {
          method: 'POST',
          body: JSON.stringify({cid: idUser}),
          headers: {
            'Content-Type': 'application/json;charset=utf-8',
            'Accept': 'application/json;charset=utf-8',
          }
        }).then((response) => {
          if (!response.ok) {
            showNotification("Erreur", "La suppression de cet utilisateur n'a pas pu s'effectuer", "error");
          } else {
            const ret = response.json();
            ret.then(function (ret) {
              if (ret.ret == "ok") {
                //! on recherche la ligne du tableau à supprimer
                let cell;
                Array.from(elLigUsers).forEach(function (clickLigUser) {
                  cell = clickLigUser.cells[0];
                  if (cell.getAttribute("data-rowid") == idUser) {
                    clickLigUser.remove();
                  }
                });
                showNotification("Suppression", "La suppression de cet utilisateur a été effectuée avec succès", "success");
              } else {
                showNotification("Suppression", "Erreur lors de la suppression de cet utilisateur", "error");
              }
            });
          }
        });
        hideLoading();
      }
    }
    return false;
  }

  let clickMaintenance = function () {
    fetch('/jxpost/maintenance', {
      method: 'POST',

    })
  }

  let clickImportProduitsUser = function () {
    //! Event Click sur le bouton d'importation des produits d'un marché

    document.getElementById("modImportTitre").innerHTML = "Importation des produits de marché";
    showModal(document.getElementById("modalImportUser"));

  }
  let clickCancelImportUser = function () {
    //! Event Click sur le bouton Annuler de la modale d'importation des produits d'un marché
    hideModal(document.getElementById("modalImportUser"));
  }

  let clickSubmitImportProduitsUser = function () {
    //! Click Importation du CSV des produits d'un marché

    // TODO: prévoir une progress bar 
    hideModal(document.getElementById("modalImportUser"));

    showLoading();
    let xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/jximport/upload_User_produits", true);
    xhttp.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        let retour = JSON.parse(this.responseText);
        let msg = "";
        hideLoading();
        if (retour.ret == "ok") {
          msg = (retour.message) ? retour.message : "L'importation des produits de ce marché a été effectuée avec succès";
          showNotification("Importation", msg, "success");
        } else {
          msg = (retour.message) ? retour.message : "Erreur lors de l'importation des produits de ce marché";
          showNotification("Importation", msg, "error");
        }
      }
    };

    let frmData = new FormData();
    frmData.append("file1", document.getElementById("importFileUser").files[0]);
    frmData.append("MAX_FILE_SIZE", document.getElementById("MAX_FILE_SIZE").value)
    frmData.append("importidUser", document.getElementById("importidUser").value);
    xhttp.send(frmData);

    return false;
  }

  let clickGestionListes = function () {
    //! Click sur le bouton de gestion des listes tarifaires par marché

    // TODO: On appelle la liste de tous les marchés, et pour chaque marché on récupère son éventuelle ligne dans Users_listes
    showLoading();

    let xhttp1 = new XMLHttpRequest();
    xhttp1.open("POST", "/jxpost/load_Users_listes", true);
    xhttp1.setRequestHeader("Content-Type", "application/json");
    xhttp1.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        let listes = JSON.parse(this.responseText);

        //! on alimente dynamiquement les lignes suivant les marchés actuels
        let xhttp2 = new XMLHttpRequest();
        xhttp2.open("POST", "/jxpost/load_Users", true);
        xhttp2.setRequestHeader("Content-Type", "application/json");
        xhttp2.onreadystatechange = function () {
          if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
            let tblBody = document.getElementById("tblListes").getElementsByTagName("tbody")[0];
            // on vide le body de cette table
            tblBody.innerHTML = "";

            let mar = JSON.parse(this.responseText);
            if (mar.length > 0) {
              // au moins un marché trouvé
              let nameInputMotCle;
              let valInputMotCle;
              let nameInputAchat;
              let valInputAchat;
              let nameInputVente;
              let valInputVente;
              let laListe;
              for (let key in mar) {
                if (mar.hasOwnProperty(key)) {
                  // Récupération des valeurs de la ligne
                  let val = mar[key];

                  // ## Comment chercher une valeur dans un tableau en javascript
                  laListe = listes.find(({fk_User}) => fk_User === val["rowid"]);

                  if (laListe) {
                    valInputMotCle = laListe["mot_cle"] ? laListe["mot_cle"] : "";
                    valInputAchat = laListe["terme_achat"] ? laListe["terme_achat"] : "";
                    valInputVente = laListe["terme_vente"] ? laListe["terme_vente"] : "";
                  } else {
                    valInputMotCle = "";
                    valInputAchat = "";
                    valInputVente = "";
                  }

                  // Insertion d'une nouvelle ligne et création de ses colonnes
                  let newRow = tblBody.insertRow(0);

                  let celId = newRow.insertCell(0);
                  celId.innerHTML = val['rowid'];
                  let celLibelle = newRow.insertCell(1);
                  celLibelle.innerHTML = val['libelle'];
                  let celMotCle = newRow.insertCell(2);
                  nameInputMotCle = "motcle_" + val["rowid"];
                  celMotCle.innerHTML = '<input type="text" class="form-control" name="' + nameInputMotCle + '" placeholder="Mot clé du marché" maxlength="30" value="' + valInputMotCle + '" />';
                  let celTermeAchat = newRow.insertCell(3);
                  nameInputAchat = "motcleachat_" + val["rowid"];
                  celTermeAchat.innerHTML = '<input type="text" class="form-control" name="' + nameInputAchat + '" placeholder="Mot clé pour achat" maxlength="30" value="' + valInputAchat + '" />';
                  let celTermeVente = newRow.insertCell(4);
                  nameInputVente = "motclevente_" + val["rowid"];
                  celTermeVente.innerHTML = '<input type="text" class="form-control" name="' + nameInputVente + '" placeholder="Mot clé pour vente" maxlength="30" value="' + valInputVente + '" />';
                }
              }
            }
            hideLoading();
          }
        }
        xhttp2.send();
      }
    }
    xhttp1.send();

    showModal(document.getElementById("modalEditListes"));
  }

  let clickCancelListes = function () {
    //! Click sur le bouton Annuler de la modale d'importation des produits d'un marché
    hideModal(document.getElementById("modalEditListes"));
  }

  let clickSubmitListes = function () {
    //! Click sur le bouton Enregistrer de la modale de la gestion des listes tarifaires par marché
    hideModal(document.getElementById("modalEditListes"));

    showLoading();
    let xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/jxpost/save_Users_listes", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        let retour = JSON.parse(this.responseText);
        if (retour.ret == "ok") {
          showNotification("Enregistrement", "L'enregistrement de la gestion des listes tarifaires par marché a été effectué avec succès", "success");
        } else {
          showNotification("Enregistrement", "Erreur lors de l'enregistrement", "error");
        }
        hideLoading();
      }
    };

    let frmData = new FormData(document.getElementById('frmListes'));
    let objData = {};
    frmData.forEach(function (value, key) {
      objData[key] = value;
    });
    xhttp.send(JSON.stringify(objData));
  }

  let clickModFamilles = function () {
    showLoading();

    //! on charge d'abord la liste des x_familles
    let familles;
    let xhttp1 = new XMLHttpRequest();
    xhttp1.open("POST", "/jxpost/load_familles", false);
    xhttp1.setRequestHeader("Content-Type", "application/json");
    xhttp1.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        familles = JSON.parse(this.responseText);
      }
    }
    let data1 = {};
    xhttp1.send(JSON.stringify(data1));

    //! Ensuite on charge les familles de groupes
    let xhttp2 = new XMLHttpRequest();
    xhttp2.open("POST", "/jxpost/load_familles_groupes", true);
    xhttp2.setRequestHeader("Content-Type", "application/json");
    xhttp2.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        let retour = JSON.parse(this.responseText);

        let tblBody = document.getElementById("tblFamilles").getElementsByTagName("tbody")[0];
        // on vide le body de cette table
        tblBody.innerHTML = "";

        if (retour.length > 0) {
          // au moins une famille trouvée dans cette recherche
          let nbFamilles = retour.length;

          for (let key in retour) {
            if (retour.hasOwnProperty(key)) {
              // Récupération des valeurs de la ligne
              let val = retour[key];

              // Insertion d'une nouvelle ligne et création de ses colonnes
              let newRow = tblBody.insertRow(-1);

              let celCode = newRow.insertCell(0);
              celCode.innerHTML = '<input type="text" class="form-control" name="id_' + val["rowid"] + '" maxlength="4" value="' + val["rowid"] + '" disabled />';
              let celGroupe = newRow.insertCell(1);
              celGroupe.innerHTML = '<input type="text" class="form-control" name="groupe_' + val["rowid"] + '" placeholder="Nom du groupe" maxlength="30" value="' + val["groupe"] + '" />';
              let celFamille = newRow.insertCell(2);
              //! on insère dans cette cellule le select des familles
              let selFamille = '<select class="form-control" name="famille_' + val["rowid"] + '">';
              for (let key2 in familles) {
                if (familles.hasOwnProperty(key2)) {
                  // Récupération des valeurs de la ligne familles
                  let val2 = familles[key2];
                  if (val2["rowid"] == val["fk_famille"]) {
                    selFamille += '<option value="' + val2["rowid"] + '" selected>' + val2["libelle"] + '</option>';
                  } else {
                    selFamille += '<option value="' + val2["rowid"] + '">' + val2["libelle"] + '</option>';
                  }
                }
              }
              selFamille += '</select>';
              celFamille.innerHTML = selFamille;
              let celActions = newRow.insertCell(3);
              celActions.className = "text-center";
              celActions.innerHTML = '<button type="button" class="btn btn-danger btn-xs btnSuppFamille" data-rowid="' + val["rowid"] + '"><i class="fa fa-trash"></i></button>';
            }
          }
          document.getElementById("modFamillesTitre").innerHTML = '<i class="fa fa-stack-exchange fa-lg"></i> Liste des ' + nbFamilles + ' familles de produits trouvées';
        } else {
          // Aucune famille trouvée dans cette recherche
          document.getElementById("modFamillesTitre").innerHTML = '<i class="fa fa-stack-exchange fa-lg"></i> Liste des familles de produits';
          let newRow = tblBody.insertRow(0);
          let celCode = newRow.insertCell(0);
          celCode.innerHTML = "Aucune famille trouvée";
          celCode.setAttribute("colspan", "4");
        }
        hideLoading();
        showModal(document.getElementById("modalFamilles"));
      }

    }
    let data2 = {};
    xhttp2.send(JSON.stringify(data2));
  }

  let clickCancelFamilles = function () {
    hideModal(document.getElementById("modalFamilles"));
  }

  let clickSubmitFamilles = function () {
    hideModal(document.getElementById("modalFamilles"));
    showLoading();
    let xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/jxpost/save_familles", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        let retour = JSON.parse(this.responseText);
        hideLoading();
        if (retour["ret"] == "ok") {
          showNotification("Familles", retour["msg"], "success");
        } else {
          showNotification("Familles", retour["msg"], "error");
        }
      }
    }
    let data = {};
    let elTblFamilles = document.getElementById("tblFamilles").getElementsByTagName("tbody")[0];
    // on récupère les lignes du tableau
    let elLignes = elTblFamilles.getElementsByTagName("tr");
    let nbLignes = elLignes.length;
    let elLigne = null;
    let dataLigne = {};
    // on parcourt les lignes du tableau
    for (let i = 0; i < nbLignes; i++) {
      elLigne = elLignes[i];
      // on récupère les cellules de la ligne
      let elCellules = elLigne.getElementsByTagName("td");
      let nbCellules = elCellules.length;
      let elCellule = null;
      dataLigne = {};
      // on parcourt les cellules de la ligne
      for (let j = 0; j < nbCellules; j++) {
        elCellule = elCellules[j];
        // on récupère les inputs de la cellule
        let elInputs = elCellule.getElementsByTagName("input");
        let nbInputs = elInputs.length;
        if (nbInputs == 1) {
          let elInput = elInputs[0];
          // on récupère le début du nom de l'input jusqu'au _
          let nameInput = elInput.getAttribute("name").split("_")[0];
          // on récupère la valeur de l'input
          let valueInput = elInput.value;
          // on ajoute le couple nom/valeur dans le tableau data
          dataLigne[nameInput] = valueInput;
        }
        let elSel = elCellule.getElementsByTagName("select");
        let nbSel = elSel.length;
        if (nbSel == 1) {
          let elS = elSel[0];
          // on récupère le début du nom de l'input jusqu'au _
          let nameInput = elS.getAttribute("name").split("_")[0];
          // on récupère la valeur de l'input
          let valueInput = elS.value;
          // on ajoute le couple nom/valeur dans le tableau data
          dataLigne[nameInput] = valueInput;
        }
      }
      // on ajoute le tableau dataLigne dans le tableau data
      data[i] = dataLigne;
    }
    xhttp.send(JSON.stringify(data));
  }

  let clickSuppFamille = function () {

  }

  let clickAddFamille = function () {
    // On incrémente l'id des nouvelles familles
    idNewFamille++;

    //! on charge d'abord la liste des x_familles
    let familles;
    let xhttp1 = new XMLHttpRequest();
    xhttp1.open("POST", "/jxpost/load_familles", false);
    xhttp1.setRequestHeader("Content-Type", "application/json");
    xhttp1.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        familles = JSON.parse(this.responseText);
      }
    }
    let data1 = {};
    xhttp1.send(JSON.stringify(data1));

    let tblBody = document.getElementById("tblFamilles").getElementsByTagName("tbody")[0];
    let newRow = tblBody.insertRow(0);

    let celCode = newRow.insertCell(0);
    celCode.innerHTML = '<input type="text" class="form-control" name="id_' + idNewFamille + '" maxlength="4" value="' + idNewFamille + '" disabled />';
    let celGroupe = newRow.insertCell(1);
    celGroupe.innerHTML = '<input type="text" class="form-control" name="groupe_' + idNewFamille + '" placeholder="Nom du groupe" maxlength="30" value="" />';
    let celFamille = newRow.insertCell(2);
    celFamille.innerHTML = '<input type="text" class="form-control" name="famille_' + idNewFamille + '" placeholder="Nom de la famille" maxlength="30" value="" />';
    //! on insère dans cette cellule le select des familles
    let selFamille = '<select class="form-control" name="famille_' + idNewFamille + '">';
    selFamille += '<option value="0" selected>Sélectionner une famille</option>';
    for (let key in familles) {
      if (familles.hasOwnProperty(key)) {
        // Récupération des valeurs de la ligne
        let val = familles[key];
        selFamille += '<option value="' + val["rowid"] + '">' + val["libelle"] + '</option>';
      }
    }
    selFamille += '</select>';
    celFamille.innerHTML = selFamille;
    let celActions = newRow.insertCell(3);
    celActions.className = "text-center";
    celActions.innerHTML = '<button type="button" class="btn btn-danger btn-xs btnSuppFamille" data-rowid="' + idNewFamille + '"><i class="fa fa-trash"></i></button>';

    //! on met le focus sur le nouveau champ groupe
    celGroupe.getElementsByTagName("input")[0].focus();
  }

  //! Configuration des événements
  //! Sur chaque cellule du tableau des marchés ayant la classe celUsers, on affecte un événement click qui appelle la fonction clickLnUser()
  Array.from(elCelUsers).forEach(function (lnUser) {
    lnUser.addEventListener('click', clickLigUser);
  });

  //! Sur chaque bouton de modification du tableau des marchés ayant la classe btnModUser, on affecte un événement click qui appelle la fonction clickModUser()
  Array.from(elBtnModUsers).forEach(function (modUser) {
    modUser.addEventListener('click', clickModUser);
  });
  //! Sur chaque bouton de suppression du tableau des marchés ayant la classe btnSuppUser, on affecte un événement click qui appelle la fonction clickSuppUser()
  Array.from(elBtnSuppUsers).forEach(function (suppUser) {
    suppUser.addEventListener('click', clickSuppUser);
  });

  elBtnCancelModUser.addEventListener('click', clickCancelModUser);
  elBtnSubmitModUser.addEventListener('click', clickSubmitModUser);
  elBtnCreateUser.addEventListener('click', clickCreateUser);
  elBtnMaintenance.addEventListener('click', clickMaintenance);
});