feat: recalculate license and remaining prices dynamically on residency checkbox change

as-talange-web/src/main/resources/templates/adherents/form.html

@@ -186,11 +186,15 @@
                             <td colspan="7" class="py-4 px-4 text-center text-gray-500">Aucune licence enregistrée.</td>
                         </tr>
                         <th:block th:each="lic : ${licences}">
-                            <tr class="hover:bg-gray-50 border-b border-gray-100">
+                            <tr class="hover:bg-gray-50 border-b border-gray-100 licence-row"
+                                th:data-tarif-base="${lic.categorie.tarifBase}"
+                                th:data-tarif-exterieur="${lic.categorie.tarifExterieur}"
+                                th:data-equipements-contrib="${lic.getPrixTotal().subtract(adherent.residentTalange ? lic.categorie.tarifBase : lic.categorie.tarifExterieur)}"
+                                th:data-total-paye="${lic.getPrixTotal().subtract(lic.getResteAPayer())}">
                                 <td class="py-4 px-4 font-medium text-gray-900" th:text="${lic.saison}">2024-2025</td>
                                 <td class="py-4 px-4 text-gray-600">
                                     <span th:text="${lic.categorie.nom}">U15</span>
-                                    <span class="text-[10px] text-gray-400 block" th:text="${(lic.adherent != null && lic.adherent.residentTalange ? lic.categorie.tarifBase : lic.categorie.tarifExterieur) + ' € (Catégorie)'}">100.00 € (Catégorie)</span>
+                                    <span class="text-[10px] text-gray-400 block cell-tarif-categorie" th:text="${(lic.adherent != null && lic.adherent.residentTalange ? lic.categorie.tarifBase : lic.categorie.tarifExterieur) + ' € (Catégorie)'}">100.00 € (Catégorie)</span>
                                 </td>
                                 <td class="py-4 px-4 text-gray-600 font-mono text-xs" th:text="${lic.numeroLicence != null and !lic.numeroLicence.isEmpty() ? lic.numeroLicence : '-'}">-</td>
                                 <td class="py-4 px-4">
@@ -198,13 +202,13 @@
                                           th:classappend="${lic.etat == 'Validée' ? 'bg-blue-100 text-blue-800' : (lic.etat == 'Payée' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800')}"
                                           th:text="${lic.etat}">Brouillon</span>
                                 </td>
-                                <td class="py-4 px-4 text-gray-900 font-medium" th:text="${lic.getPrixTotal() + ' €'}">130.00 €</td>
+                                <td class="py-4 px-4 text-gray-900 font-medium cell-tarif-global" th:text="${lic.getPrixTotal() + ' €'}">130.00 €</td>
-                                <td class="py-4 px-4 font-semibold" 
+                                <td class="py-4 px-4 font-semibold cell-reste-payer" 
                                     th:classappend="${lic.getResteAPayer() == 0 ? 'text-green-600' : 'text-red-600'}" 
                                     th:text="${lic.getResteAPayer() + ' €'}">30.00 €</td>
                                 <td class="py-4 px-4 text-right">
                                     <button th:if="${lic.getResteAPayer() > 0}" th:onclick="'openPaiementModal(' + ${lic.id} + ', ' + ${lic.getResteAPayer()} + ')'" 
-                                        class="text-green-600 hover:text-green-800 font-medium bg-green-50 px-3 py-1 rounded-lg">Payer</button>
+                                        th:data-licence-id="${lic.id}" class="text-green-600 hover:text-green-800 font-medium bg-green-50 px-3 py-1 rounded-lg btn-payer">Payer</button>
                                 </td>
                             </tr>
                             <tr th:if="${!#lists.isEmpty(lic.paiements)}" class="bg-gray-50/50">
@@ -428,6 +432,61 @@
             if (hasRepError || document.getElementById('representantLegal').classList.contains('border-red-500')) {
                 repBlock.classList.remove('hidden-block');
             }
+
+            // Recalculate price dynamically when residentTalange checkbox changes
+            const residentCheckbox = document.getElementById('residentTalange');
+            if (residentCheckbox) {
+                residentCheckbox.addEventListener('change', function() {
+                    const isResident = this.checked;
+                    document.querySelectorAll('.licence-row').forEach(row => {
+                        const tarifBase = parseFloat(row.getAttribute('data-tarif-base') || '0');
+                        const tarifExterieur = parseFloat(row.getAttribute('data-tarif-exterieur') || '0');
+                        const equipContrib = parseFloat(row.getAttribute('data-equipements-contrib') || '0');
+                        const totalPaye = parseFloat(row.getAttribute('data-total-paye') || '0');
+
+                        const baseTarif = isResident ? tarifBase : tarifExterieur;
+                        const newTotal = baseTarif + equipContrib;
+                        const newReste = Math.max(0, newTotal - totalPaye);
+
+                        // Update Category price cell
+                        const catCell = row.querySelector('.cell-tarif-categorie');
+                        if (catCell) {
+                            catCell.textContent = baseTarif.toFixed(2) + ' € (Catégorie)';
+                        }
+
+                        // Update Tarif Global cell
+                        const globalCell = row.querySelector('.cell-tarif-global');
+                        if (globalCell) {
+                            globalCell.textContent = newTotal.toFixed(2) + ' €';
+                        }
+
+                        // Update Reste à Payer cell
+                        const resteCell = row.querySelector('.cell-reste-payer');
+                        if (resteCell) {
+                            resteCell.textContent = newReste.toFixed(2) + ' €';
+                            if (newReste === 0) {
+                                resteCell.classList.remove('text-red-600');
+                                resteCell.classList.add('text-green-600');
+                            } else {
+                                resteCell.classList.remove('text-green-600');
+                                resteCell.classList.add('text-red-600');
+                            }
+                        }
+
+                        // Update Payer button
+                        const payerBtn = row.querySelector('.btn-payer');
+                        if (payerBtn) {
+                            if (newReste > 0) {
+                                payerBtn.classList.remove('hidden');
+                                const licId = payerBtn.getAttribute('data-licence-id');
+                                payerBtn.setAttribute('onclick', `openPaiementModal(${licId}, ${newReste})`);
+                            } else {
+                                payerBtn.classList.add('hidden');
+                            }
+                        }
+                    });
+                });
+            }
         });
     </script>
 </body>