document.addEventListener("DOMContentLoaded", function () {
    // Sélection des éléments HTML nécessaires
    const tableBody = document.querySelector("tbody");
    const sortIcon = document.getElementById("sort");
    const searchInput = document.getElementById("myInput");
  
    // Fonction pour créer une ligne HTML pour chaque équipe dans les données
    function createTableRow(team) {
      const row = document.createElement("tr");
      row.innerHTML = `
        <td>${team.intRank}</td>
        <td><img src="${team.strTeamBadge}" alt="${team.strTeam}" class="team-badge"></td>
        <td>${team.strTeam}</td>
        <td>${team.intPlayed}</td>
        <td>${team.intWin}</td>
        <td>${team.intDraw}</td>
        <td>${team.intLoss}</td>
        <td>${team.intGoalsFor}</td>
        <td>${team.intGoalsAgainst}</td>
        <td>${team.intGoalDifference}</td>
        <td>${team.intPoints}</td>
      `;
      return row;
    }
  
    // Fonction pour afficher les équipes dans le tableau
    function displayTeams(teams) {
      tableBody.innerHTML = "";
      teams.forEach((team) => {
        const row = createTableRow(team);
        tableBody.appendChild(row);
      });
    }
  
    // Affichage initial des équipes
    displayTeams(data);
  
    // Fonction de tri sur la colonne du rang
    let ascendingOrder = true;
    sortIcon.addEventListener("click", function () {
      data.sort((a, b) => {
        const order = ascendingOrder ? 1 : -1;
        return order * (a.intRank - b.intRank);
      });
      ascendingOrder = !ascendingOrder;
      displayTeams(data);
    });
  
    // Fonction de recherche par nom d'équipe
    searchInput.addEventListener("input", function () {
      const searchTerm = searchInput.value.toLowerCase();
      const filteredTeams = data.filter((team) =>
        team.strTeam.toLowerCase().includes(searchTerm)
      );
      displayTeams(filteredTeams);
    });
  });