From 151bc4832296dbf66d90492d540b76ec39e42694 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Tue, 31 Mar 2026 19:43:07 +0000
Subject: [PATCH] ser

---
 Vue/Fichebeneficiaire/index.php | 152 ++++++++++++++++++--------------
 1 file changed, 87 insertions(+), 65 deletions(-)

diff --git a/Vue/Fichebeneficiaire/index.php b/Vue/Fichebeneficiaire/index.php
index 6e941e2..f4b8973 100755
--- a/Vue/Fichebeneficiaire/index.php
+++ b/Vue/Fichebeneficiaire/index.php
@@ -293,29 +293,40 @@
 						<div class="col-md-6">
 							<?php if($codeLienParente == "A"): ?>
 								<div class="mb-3">
-									<div class="d-flex justify-content-between align-items-center mb-1">
-										<label class="text-muted small"><i class="fas fa-mobile-alt me-1 text-primary"></i> <?= _("Mobile") ?></label>
+									<div class="d-flex justify-content-between align-items-center mb-2">
+										<label class="form-label text-muted small mb-0">
+											<i class="fas fa-mobile-alt me-1 text-primary"></i> <?= _("Téléphone Mobile") ?>
+										</label>
 										<div class="form-check form-switch small">
 											<input class="form-check-input" 
 												type="checkbox" 
 												id="ignorerFormat" 
-												name="ignorerFormat"
-												<?= ($format == "1") ? "checked" : "" ?>> 
-											<label class="form-check-label text-muted" for="ignorerFormat"><?= _("Format libre") ?></label>
+												name="ignorerFormat" 
+												<?= ($format === "1") ? 'checked' : '' ?>>
+											<label class="form-check-label text-muted" for="ignorerFormat">
+												<?= est_anglophone() ? "Free format" : "Format libre"; ?>
+											</label>
 										</div>
 									</div>
-									<div class="input-group input-group-sm">
-										<span class="input-group-text"><i class="fas fa-phone-alt"></i></span>
-										<input type="tel" class="form-control" id="telephonePortable" 
-											pattern="^250[0-9]{9,}$" value="<?= $beneficiaire['telephonePortable'] ?>"
-											onchange="maj_mobile_beneficiaire();">
-										<?php if ($format == "0"): ?>
-										<div id="aideTelephone" class="form-text text-muted small">
-											<i class="fas fa-info-circle"></i> <?= est_anglophone() ? 'Required format: 250XXXXXXXXX (min. 12 digits)' : 'Format requis : 250XXXXXXXXX (min. 12 chiffres)'; ?>
-										</div>
-										<?php endif; ?>
+									
+									<div class="input-group">
+										<span class="input-group-text bg-white text-muted"><i class="fas fa-phone"></i></span>
+										<input type="tel" 
+											class="form-control" 
+											id="telephonePortable" 
+											name="telephonePortable" 
+											value="<?= $this->nettoyer($telephone) ?>"
+											onchange="javascript:maj_mobile_beneficiaire();"
+											oninvalid="validerMessageTelephone(this)"
+											oninput="this.setCustomValidity('')">
+									</div>
+
+									<div id="aideTelephone" class="form-text small mt-1 <?= ($format === "1") ? 'd-none' : '' ?>">
+										<i class="fas fa-info-circle text-info"></i> 
+										<?= est_anglophone() ? 'Required format: 250XXXXXXXXX' : 'Format requis : 250XXXXXXXXX'; ?>
 									</div>
 								</div>
+
 								<div class="mb-3">
 									<label class="text-muted small mb-1"><i class="fas fa-envelope me-1 text-primary"></i> <?= _("E-mail") ?></label>
 									<div class="input-group input-group-sm">
@@ -957,62 +968,73 @@ document.addEventListener('DOMContentLoaded', function() {
 </script>
 
 <script>
-    const inputTel = document.getElementById('telephonePortable');
-    const checkIgnorer = document.getElementById('ignorerFormat');
-    const aideTel = document.getElementById('aideTelephone');
+    document.addEventListener('DOMContentLoaded', function() {
+		const inputTel = document.getElementById('telephonePortable');
+		const checkIgnorer = document.getElementById('ignorerFormat');
+		const aideTel = document.getElementById('aideTelephone');
 
-    // Messages traduits pour le JS
-    const msgErreur = "<?= est_anglophone() ? 'The number must start with 250 and contain at least 12 digits.' : 'Le numéro doit commencer par 250 et comporter au moins 12 chiffres.'; ?>";
+		const msgErreur = "<?= est_anglophone() ? 'The number must start with 250 and contain at least 12 digits.' : 'Le numéro doit commencer par 250 et comporter au moins 12 chiffres.'; ?>";
 
-    // Fonction pour gérer les messages d'erreur personnalisés
-    window.validerMessageTelephone = function(input) {
-        if (!checkIgnorer.checked) {
-            input.setCustomValidity(msgErreur);
-        } else {
-            input.setCustomValidity('');
-        }
-    };
+		/**
+		 * Validation native
+		 */
+		window.validerMessageTelephone = function(input) {
+			if (!checkIgnorer.checked) {
+				input.setCustomValidity(msgErreur);
+			} else {
+				input.setCustomValidity('');
+			}
+		};
 
-    // Écouteur sur la checkbox pour activer/désactiver les règles
-    checkIgnorer.addEventListener('change', function() {
-        if (this.checked) {
-            // On retire les contraintes
-            inputTel.removeAttribute('pattern');
-            inputTel.removeAttribute('title');
-            inputTel.setCustomValidity('');
-            inputTel.classList.remove('is-invalid');
-            aideTel.style.display = 'none'; // On cache l'aide du format requis
-            inputTel.placeholder = "<?= _('Entrez le numéro'); ?>";
-        } else {
-            // On remet les contraintes par défaut
-            inputTel.setAttribute('pattern', '^250[0-9]{9,}$');
-            inputTel.setAttribute('title', msgErreur);
-            aideTel.style.display = 'block';
-            inputTel.placeholder = "Ex:250700000001";
-            
-            // On redéclenche la validation visuelle
-            inputTel.dispatchEvent(new Event('input'));
-        }
-    });
+		/**
+		 * Mise à jour de l'interface (Appelé par le switch)
+		 */
+		function rafraichirEtatTelephone() {
+			if (checkIgnorer.checked) {
+				inputTel.removeAttribute('pattern');
+				inputTel.removeAttribute('title');
+				aideTel.classList.add('d-none');
+				inputTel.classList.remove('is-invalid');
+				inputTel.placeholder = "<?= _('Entrez le numéro'); ?>";
+			} else {
+				inputTel.setAttribute('pattern', '^250[0-9]{9,}$');
+				inputTel.setAttribute('title', msgErreur);
+				aideTel.classList.remove('d-none');
+				inputTel.placeholder = "Ex: 250700000001";
+				validerVisuellement();
+			}
+		}
 
-    // Validation visuelle en temps réel (is-valid / is-invalid)
-    inputTel.addEventListener('input', function() {
-        if (checkIgnorer.checked) {
-            this.classList.remove('is-invalid');
-            this.classList.add('is-valid');
-            return;
-        }
+		/**
+		 * Validation visuelle Bootstrap
+		 */
+		function validerVisuellement() {
+			// En mode libre, on ne met pas d'erreur visuelle
+			if (checkIgnorer.checked) {
+				inputTel.classList.remove('is-invalid');
+				if (inputTel.value !== "") inputTel.classList.add('is-valid');
+				return;
+			}
 
-        const pattern = /^250[0-9]{9,}$/;
-        if (pattern.test(this.value)) {
-            this.classList.remove('is-invalid');
-            this.classList.add('is-valid');
-        } else {
-            this.classList.remove('is-valid');
-            this.classList.add('is-invalid');
-        }
-    });
+			// En mode strict, on vérifie le pattern 250...
+			const pattern = /^250[0-9]{9,}$/;
+			if (inputTel.value === "") {
+				inputTel.classList.remove('is-valid', 'is-invalid');
+			} else if (pattern.test(inputTel.value)) {
+				inputTel.classList.replace('is-invalid', 'is-valid');
+			} else {
+				inputTel.classList.replace('is-valid', 'is-invalid');
+			}
+		}
 
+		// Écouteurs
+		checkIgnorer.addEventListener('change', rafraichirEtatTelephone);
+		inputTel.addEventListener('input', validerVisuellement);
+
+		// Lancement initial
+		rafraichirEtatTelephone();
+	});
+	
 	function togglePhotoSource(source) {
 		const areaCam = document.getElementById('area_prendre_photo');
 		const areaFile = document.getElementById('area_choisir_photo');