From dd31d73fed544d4d3b275ce33420fe3d82afdafb Mon Sep 17 00:00:00 2001
From: Youssef <youssef.kaouachi@gmail.com>
Date: Wed, 20 May 2026 21:44:34 +0200
Subject: [PATCH] feat: show dynamic labels for all equipments based on gender
 and playing style

---
 .../resources/templates/adherents/form.html   | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/as-talange-web/src/main/resources/templates/adherents/form.html b/as-talange-web/src/main/resources/templates/adherents/form.html
index f339477..dcd9487 100644
--- a/as-talange-web/src/main/resources/templates/adherents/form.html
+++ b/as-talange-web/src/main/resources/templates/adherents/form.html
@@ -255,13 +255,21 @@
                                                               th:text="${dot.equipement.obligatoire ? 'Obligatoire' : 'Facultatif'}">Obligatoire</span>
                                                     </div>
                                                     <div class="text-[10px] text-gray-400 mb-2 truncate" th:title="${dot.equipement.description}" th:text="${dot.equipement.description != null and !dot.equipement.description.isEmpty() ? dot.equipement.description : 'Pas de description'}">Description</div>
-                                                    <!-- Special dynamic label for Jersey type -->
-                                                    <div class="mb-2" th:if="${dot.equipement.nom == 'Maillot'}">
-                                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-50 text-blue-700 border border-blue-100"
+                                                    <!-- Special dynamic label for equipment style -->
+                                                    <div class="mb-2" th:if="${dot.equipement.nom == 'Maillot' or dot.equipement.nom == 'Short' or dot.equipement.nom == 'Chaussettes'}">
+                                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-50 text-blue-700 border border-blue-100 dotation-style-label"
+                                                              th:data-equipement="${dot.equipement.nom}"
                                                               th:text="${adherent.sexe == 'FEMININ' ? 'Modèle Femme' : 'Modèle Homme'} + ' - ' + ${adherent.typeMaillot == 'GARDIEN' ? 'Gardien' : 'Joueur'}">
                                                             Modèle Homme - Joueur
                                                         </span>
                                                     </div>
+                                                    <div class="mb-2" th:if="${dot.equipement.nom == 'Survêtement'}">
+                                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-indigo-50 text-indigo-700 border border-indigo-100 dotation-style-label"
+                                                              th:data-equipement="${dot.equipement.nom}"
+                                                              th:text="${adherent.sexe == 'FEMININ' ? 'Modèle Femme' : 'Modèle Homme'}">
+                                                            Modèle Homme
+                                                        </span>
+                                                    </div>
                                                 </div>
                                                 
                                                 <!-- Form inputs for bulk updating -->
@@ -487,6 +495,35 @@
                     });
                 });
             }
+
+            // Update equipment style labels dynamically when Sexe or Type de Maillot (Poste) changes
+            const sexeSelect = document.getElementById('sexe');
+            const typeMaillotSelect = document.getElementById('typeMaillot');
+            
+            function updateEquipmentStyleLabels() {
+                if (!sexeSelect || !typeMaillotSelect) return;
+                const sexe = sexeSelect.value;
+                const typeMaillot = typeMaillotSelect.value;
+                
+                const sexeText = (sexe === 'FEMININ') ? 'Modèle Femme' : 'Modèle Homme';
+                const typeText = (typeMaillot === 'GARDIEN') ? 'Gardien' : 'Joueur';
+                
+                document.querySelectorAll('.dotation-style-label').forEach(label => {
+                    const equip = label.getAttribute('data-equipement');
+                    if (equip === 'Maillot' || equip === 'Short' || equip === 'Chaussettes') {
+                        label.textContent = `${sexeText} - ${typeText}`;
+                    } else if (equip === 'Survêtement') {
+                        label.textContent = sexeText;
+                    }
+                });
+            }
+
+            if (sexeSelect) {
+                sexeSelect.addEventListener('change', updateEquipmentStyleLabels);
+            }
+            if (typeMaillotSelect) {
+                typeMaillotSelect.addEventListener('change', updateEquipmentStyleLabels);
+            }
         });
     </script>
 </body>