$(document).ready(function () {
  let panier = {};

  function afficherPanier() {
    const $tbody = $('#panier-items');
    $tbody.empty();
    let totalGlobal = 0;

    $.each(panier, function (id, item) {
      const total = item.prix * item.quantite;
      totalGlobal += total;

      $tbody.append(`
        <tr>
          <td>${item.nom}</td>
          <td>${item.prix}€</td>
          <td>${item.quantite}</td>
          <td>${total}€</td>
          <td><button class="retirer" data-id="${id}">Retirer</button></td>
        </tr>
      `);
    });

    $('#panier-count').text(`Panier (${Object.keys(panier).length})`);

    if (totalGlobal === 0) {
      $tbody.append('<tr><td colspan="5">Panier vide</td></tr>');
    }
  }

  $('.ajouter-panier').click(function () {
    const produit = $(this).closest('.produit');
    const id = produit.data('id');
    const nom = produit.data('nom');
    const prix = produit.data('prix');

    if (panier[id]) {
      panier[id].quantite += 1;
    } else {
      panier[id] = { nom, prix, quantite: 1 };
    }

    afficherPanier();
  });

  $('#panier-items').on('click', '.retirer', function () {
    const id = $(this).data('id');
    delete panier[id];
    afficherPanier();
  });
});