ajustement tableau gift

christmas-list.php

@@ -153,13 +153,16 @@ foreach ($gifts as $gift) {
                       <td>
                         <?php if ($gift): ?>
                           <?php
+                            $giftId = (int)$gift['id'];
                             $desc   = htmlspecialchars($gift['gift_description']);
                             $amt    = (float)$gift['amount'];
                             $plink  = trim($gift['product_link'] ?? '');
-                            $payer  = $gift['payer_name'] ?? $gift['adult_name']; // sécurité si colonne manquante
+                            $payer  = $gift['payer_name'] ?? $gift['adult_name'];
                           ?>
 
+                          <div class="cl-gift-item">
                             <div class="cl-gift-line">
+                              <!-- Nom du cadeau (lien ou texte) -->
                               <?php if ($plink !== ''): ?>
                                 <a href="<?= htmlspecialchars($plink) ?>"
                                   target="_blank"
@@ -169,9 +172,42 @@ foreach ($gifts as $gift) {
                                 <span class="cl-gift-desc"><?= $desc ?></span>
                               <?php endif; ?>
 
-                            <?php if ($amt > 0): ?>
+                              <!-- Zone de droite: prix ou icônes (selon hover/clic) -->
+                              <div class="cl-gift-right">
                                 <span class="cl-gift-amount">(<?= number_format($amt, 0, ',', ' ') ?> €)</span>
-                            <?php endif; ?>
+
+                                <span class="cl-gift-actions">
+                                  <!-- Edit -->
+                                  <button type="button"
+                                          class="cl-gift-action-btn cl-gift-edit"
+                                          title="Edita"
+                                          aria-label="Edita"
+                                          data-id="<?= $giftId ?>"
+                                          data-year="<?= $year ?>"
+                                          data-child="<?= htmlspecialchars($childName) ?>"
+                                          data-occasion="<?= htmlspecialchars($occCode) ?>"
+                                          data-adult="<?= htmlspecialchars($gift['adult_name']) ?>"
+                                          data-payer="<?= htmlspecialchars($payer) ?>"
+                                          data-desc="<?= htmlspecialchars($gift['gift_description']) ?>"
+                                          data-amount="<?= htmlspecialchars($gift['amount']) ?>"
+                                          data-link="<?= htmlspecialchars($gift['product_link'] ?? '') ?>">
+                                    <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true">
+                                      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/>
+                                    </svg>
+                                  </button>
+
+                                  <!-- Delete -->
+                                  <button type="button"
+                                          class="cl-gift-action-btn cl-gift-delete"
+                                          title="Eliminar"
+                                          aria-label="Eliminar"
+                                          data-id="<?= $giftId ?>">
+                                    <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true">
+                                      <path d="M9 3h6a1 1 0 0 1 1 1v2h3a1 1 0 1 1 0 2h-1l-1 12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 8H4a1 1 0 1 1 0-2h3V4a1 1 0 0 1 1-1zm-1 5h2v10H8V8zm4 0h2v10h-2V8z"/>
+                                    </svg>
+                                  </button>
+                                </span>
+                              </div>
                             </div>
 
                             <?php if (!empty($payer) && $payer !== $gift['adult_name']): ?>
@@ -179,11 +215,14 @@ foreach ($gifts as $gift) {
                                 (pagat per <?= htmlspecialchars($payer) ?>)
                               </small>
                             <?php endif; ?>
+                          </div>
 
                         <?php else: ?>
                           <span class="cl-empty">—</span>
                         <?php endif; ?>
                       </td>
+
+
                     <?php endforeach; ?>
                   </tr>
                 <?php endfor; ?>
@@ -375,40 +414,119 @@ foreach ($gifts as $gift) {
 <!-- JS inline : modale d'ajout de cadeau -->
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-  // Modale d'ajout de cadeau (bouton + à côté du nom de l'enfant)
   const modal = document.getElementById('cl-gift-modal');
   const backdrop = modal.querySelector('.cl-modal-backdrop');
   const cancelBtn = modal.querySelector('.clm-cancel');
 
+  // Ouverture modale en mode création (bouton + enfant)
   document.querySelectorAll('.cl-child-add-btn').forEach(function (btn) {
     btn.addEventListener('click', function () {
       const year     = btn.getAttribute('data-year');
       const child    = btn.getAttribute('data-child');
       const occasion = btn.getAttribute('data-occasion');
+
       modal.classList.add('cl-open');
+
+      // Mode création
+      document.getElementById('clm-action').value = 'create';
+      document.getElementById('clm-id').value = '';
+
       // Contexte
       document.getElementById('clm-year').value     = year;
       document.getElementById('clm-child').value    = child;
       document.getElementById('clm-occasion').value = occasion;
+
       // Reset
-    document.getElementById('clm-adult').selectedIndex = 0;
+      const adultSelect = document.getElementById('clm-adult');
+      const payerSelect = document.getElementById('clm-payer');
+      adultSelect.selectedIndex = 0;
+      payerSelect.value = adultSelect.value;
       document.getElementById('clm-gift').value   = '';
       document.getElementById('clm-amount').value = '';
       document.getElementById('clm-link').value   = '';
-    // Titre dynamique
+
+      // Titre
       const titleEl = document.getElementById('cl-modal-title');
       titleEl.textContent = `Afegeix un regal per ${child}`;
     });
   });
 
-  function closeModal() {
+  // Ouverture modale en mode édition (icône crayon)
-    modal.classList.remove('cl-open');
+  document.querySelectorAll('.cl-gift-edit').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      const dataset = btn.dataset;
+
+      modal.classList.add('cl-open');
+
+      // Mode édition
+      document.getElementById('clm-action').value = 'update';
+      document.getElementById('clm-id').value = dataset.id;
+
+      // Contexte
+      document.getElementById('clm-year').value     = dataset.year;
+      document.getElementById('clm-child').value    = dataset.child;
+      document.getElementById('clm-occasion').value = dataset.occasion;
+
+      // Champs visibles
+      document.getElementById('clm-adult').value = dataset.adult;
+      document.getElementById('clm-payer').value = dataset.payer;
+      document.getElementById('clm-gift').value  = dataset.desc;
+      document.getElementById('clm-amount').value = dataset.amount || '';
+      document.getElementById('clm-link').value   = dataset.link || '';
+
+      // Titre
+      const titleEl = document.getElementById('cl-modal-title');
+      titleEl.textContent = `Edita un regal per ${dataset.child}`;
+    });
+  });
+
+  // Suppression (icône poubelle)
+  const deleteForm = document.getElementById('cl-delete-form');
+  const deleteIdInput = document.getElementById('cld-id');
+
+  document.querySelectorAll('.cl-gift-delete').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      const giftId = btn.getAttribute('data-id');
+      if (!giftId) return;
+
+      if (confirm('Vols eliminar aquest regal?')) {
+        deleteIdInput.value = giftId;
+        deleteForm.submit();
       }
+    });
+  });
+
+  function closeModal() { modal.classList.remove('cl-open'); }
   cancelBtn.addEventListener('click', closeModal);
   backdrop.addEventListener('click', closeModal);
 });
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Toggle mobile: tap sur la zone droite bascule les icônes
+  document.querySelectorAll('.cl-gift-right').forEach(function (zone) {
+    zone.addEventListener('click', function (e) {
+      // Si on clique une icône (bouton), ne pas toggler la zone
+      if (e.target.closest('.cl-gift-action-btn')) return;
+      // Fermer les autres
+      document.querySelectorAll('.cl-gift-right.is-active').forEach(function (z) {
+        if (z !== zone) z.classList.remove('is-active');
+      });
+      // Bascule sur la zone courante
+      zone.classList.toggle('is-active');
+    });
+  });
+  // Option: clic en dehors -> referme
+  document.addEventListener('click', function (e) {
+    if (!e.target.closest('.cl-gift-right')) {
+      document.querySelectorAll('.cl-gift-right.is-active').forEach(function (z) {
+        z.classList.remove('is-active');
+      });
+    }
+  }, true);
+});
 </script>
 
+
 <!-- Modal d'ajout de cadeau -->
 <div id="cl-gift-modal" class="cl-modal" aria-hidden="true">
   <div class="cl-modal-backdrop"></div>
@@ -419,6 +537,9 @@ document.addEventListener('DOMContentLoaded', function () {
   <input type="hidden" name="year" id="clm-year" value="<?= $year ?>">
   <input type="hidden" name="child_name" id="clm-child" value="">
   <input type="hidden" name="occasion" id="clm-occasion" value="">
+  <input type="hidden" name="action" id="clm-action" value="create">
+  <input type="hidden" name="gift_id" id="clm-id" value="">
+
 
   <label class="clm-label">
     Adult
@@ -462,5 +583,12 @@ document.addEventListener('DOMContentLoaded', function () {
   </div>
 </div>
 
+<form id="cl-delete-form" method="post" action="/modules/christmas-list/save-gift.php" style="display:none">
+  <input type="hidden" name="year" value="<?= $year ?>">
+  <input type="hidden" name="action" value="delete">
+  <input type="hidden" name="gift_id" id="cld-id" value="">
+</form>
+
+
 <?php
 require __DIR__ . '/footer.php';

modules/christmas-list/christmas-list.css

@@ -37,7 +37,7 @@
 .cl-occasion-children-tables {
   display: grid;
   grid-template-columns: repeat(3, minmax(280px, 1fr));
-  gap: 12px; /* espacement léger entre mini-tableaux */
+  gap: 7px;
   align-items: start;
   margin-top: 8px;
 }
@@ -156,13 +156,11 @@
 /* Corps: séparateurs + gestion des noms longs */
 .cl-child-table tbody td {
   vertical-align: top;
-  padding: 6px 8px;
+  padding: 6px 4px;
   border-top: 1px solid #edf2f7;
   border-right: 1px solid #e5e7eb;
   font-size: 12px;
   line-height: 1.35;
-  word-break: break-word;
-  overflow-wrap: anywhere;
 }
 .cl-child-table tbody td:last-child {
   border-right: none;
@@ -176,19 +174,6 @@
   color: #9ca3af;
 }
 
-/* Ligne cadeau: description à gauche, montant complètement à droite */
-.cl-gift-line {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  width: 100%;
-}
-.cl-gift-desc,
-.cl-gift-link {
-  flex: 1 1 auto;
-  min-width: 0; /* autorise le wrapping du texte si très long */
-}
-
 .cl-gift-amount {
   margin-left: auto; /* pousse le montant à droite */
   text-align: right;
@@ -344,6 +329,43 @@
   margin: 0;
 }
 
+/* Icônes d’action (éditer / supprimer) à côté du nom du cadeau */
+/* Conteneur de la ligne cadeau: réserve un espace à gauche pour les icônes overlay */
+.cl-gift-item {
+  position: relative;
+  padding-left: 2px;
+}
+/* Icônes en overlay coin haut-gauche */
+.cl-gift-actions--overlay {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  display: flex;
+  gap: 4px;
+  opacity: 0.65; /* discrètes */
+  transition: opacity 120ms ease;
+}
+.cl-gift-item:hover .cl-gift-actions--overlay {
+  opacity: 1; /* plus visibles au survol */
+}
+
+.cl-gift-action-btn {
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: #374151;
+  line-height: 1;
+}
+.cl-gift-action-btn svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+.cl-gift-delete {
+  color: #b91c1c;
+} /* poubelle rouge */
+
 /* ========================================================= */
 /*  Résumé du budget et Liste détaillée                      */
 /* ========================================================= */
@@ -409,3 +431,76 @@
 .cl-debt-matrix td.cl-mtx-empty {
   color: #9ca3af;
 }
+
+/* Ligne cadeau: gauche (nom) / droite (prix ou icônes) */
+.cl-gift-line {
+  display: flex;
+  align-items: baseline;
+  width: 100%;
+}
+.cl-gift-desc,
+.cl-gift-link {
+  flex: 1 1 auto;
+  min-width: 40px;
+}
+
+/* Zone droite: prix visible par défaut; icônes masquées */
+.cl-gift-right {
+  position: relative;
+  min-width: 35px; /* réserve un petit espace */
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Prix */
+.cl-gift-amount {
+  margin-left: auto;
+  text-align: right;
+  color: #627d98;
+  white-space: nowrap;
+  transition: opacity 120ms ease;
+}
+
+/* Icônes (même zone, positionnées à droite) */
+.cl-gift-actions {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  gap: 6px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+/* Survol (desktop) ou état actif (mobile): cacher prix, montrer icônes */
+.cl-gift-right:hover .cl-gift-amount,
+.cl-gift-right.is-active .cl-gift-amount {
+  opacity: 0;
+}
+.cl-gift-right:hover .cl-gift-actions,
+.cl-gift-right.is-active .cl-gift-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Boutons icônes compacts et couleurs */
+.cl-gift-action-btn {
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: #374151; /* crayon par défaut */
+  line-height: 1;
+}
+.cl-gift-action-btn svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+  color: inherit;
+  fill: currentColor;
+}
+.cl-gift-delete {
+  color: #b91c1c !important;
+} /* poubelle rouge forcé */

modules/christmas-list/save-gift.php

@@ -5,9 +5,23 @@ require_login('/christmas-list.php');
 require __DIR__ . '/../../includes/db.php';
 
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $action = trim($_POST['action'] ?? 'create');
+
+    if ($action === 'delete') {
+        $gift_id = (int)($_POST['gift_id'] ?? 0);
+        if ($gift_id > 0) {
+            $stmt = $pdo->prepare("DELETE FROM pf_christmas_gifts WHERE id = :id");
+            $stmt->execute(['id' => $gift_id]);
+        }
+
+        header('Location: /christmas-list.php');
+        exit;
+    }
+
+    // Champs communs
     $year         = (int)($_POST['year'] ?? date('Y'));
     $adult_name   = trim($_POST['adult_name'] ?? '');
-    $payer_name   = trim($_POST['payer_name'] ?? ''); 
+    $payer_name   = trim($_POST['payer_name'] ?? ''); // nouveau champ
     $child_name   = trim($_POST['child_name'] ?? '');
     $occasion     = trim($_POST['occasion'] ?? '');
     $gift_desc    = trim($_POST['gift_description'] ?? '');
@@ -18,6 +32,39 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         $payer_name = $adult_name;
     }
 
+    if ($action === 'update') {
+        $gift_id = (int)($_POST['gift_id'] ?? 0);
+        if ($gift_id > 0 && $adult_name && $payer_name && $child_name && $occasion && $gift_desc) {
+            $stmt = $pdo->prepare("
+                UPDATE pf_christmas_gifts
+                   SET year = :year,
+                       adult_name = :adult_name,
+                       payer_name = :payer_name,
+                       child_name = :child_name,
+                       occasion = :occasion,
+                       gift_description = :gift_description,
+                       product_link = :product_link,
+                       amount = :amount
+                 WHERE id = :id
+            ");
+            $stmt->execute([
+                'id'               => $gift_id,
+                'year'             => $year,
+                'adult_name'       => $adult_name,
+                'payer_name'       => $payer_name,
+                'child_name'       => $child_name,
+                'occasion'         => $occasion,
+                'gift_description' => $gift_desc,
+                'product_link'     => $product_link ?: null,
+                'amount'           => $amount,
+            ]);
+        }
+
+        header('Location: /christmas-list.php');
+        exit;
+    }
+
+    // create (par défaut)
     if ($adult_name && $payer_name && $child_name && $occasion && $gift_desc) {
         $stmt = $pdo->prepare("
             INSERT INTO pf_christmas_gifts
@@ -25,7 +72,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             VALUES
               (:year, :adult_name, :payer_name, :child_name, :occasion, :gift_description, :product_link, :amount)
         ");
-
         $stmt->execute([
             'year'             => $year,
             'adult_name'       => $adult_name,
@@ -37,7 +83,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             'amount'           => $amount,
         ]);
     }
-}
 
     header('Location: /christmas-list.php');
     exit;
+}