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

---
 Vue/Fichebeneficiaire/index.php | 379 ++++++++++----------------------
 1 file changed, 114 insertions(+), 265 deletions(-)

diff --git a/Vue/Fichebeneficiaire/index.php b/Vue/Fichebeneficiaire/index.php
index 194a783..97ed6eb 100755
--- a/Vue/Fichebeneficiaire/index.php
+++ b/Vue/Fichebeneficiaire/index.php
@@ -158,280 +158,129 @@
         </div>
         
         <div class="card-body p-4">
-			<!-- ===== SECTION PRINCIPALE : Photo + Infos personnelles ===== -->
-			<div class="row g-4 align-items-start">
+    <div class="row g-4">
+        <div class="col-12 col-lg-3 border-end-lg text-center">
+            <div class="position-relative mb-3">
+                <?php if ($beneficiaire['faceRegistered'] == "1"): ?>
+                    <img src="<?= $photoAssureCrypte ?>" 
+                         class="img-thumbnail rounded-circle shadow-sm hover-zoom" 
+                         style="width: 150px; height: 150px; object-fit: cover; cursor:pointer;" 
+                         data-bs-toggle="modal" data-bs-target="#pop_photo"
+                         alt="Photo">
+                <?php else: ?>
+                    <div class="avatar-placeholder rounded-circle bg-light border d-flex align-items-center justify-content-center mx-auto mb-3">
+                        <i class="fas fa-user fa-4x text-secondary"></i>
+                    </div>
 
-				<!-- ── Photo / Avatar ── -->
-				<div class="col-12 col-md-3 text-center">
+                    <?php if ($faceRegistered != "1" && $_SESSION['assureAjoutPhoto'] == "1"): ?>
+                        <div class="btn-group btn-group-sm w-100 mb-3" role="group">
+                            <input type="radio" class="btn-check" name="photo_choice" id="radio_cam" checked onchange="togglePhotoSource('cam')">
+                            <label class="btn btn-outline-primary" for="radio_cam"><i class="fas fa-camera"></i></label>
 
-					<?php if ($beneficiaire['faceRegistered'] == "1"): ?>
-						<!-- Photo enregistrée → cliquable pour agrandissement -->
-						<img
-							src="<?= $photoAssureCrypte ?>"
-							class="rounded-circle shadow-sm object-fit-cover border border-2 border-primary-subtle"
-							style="width:120px; height:120px; cursor:pointer;"
-							data-bs-toggle="modal"
-							data-bs-target="#pop_photo"
-							alt="<?= _('Photo du bénéficiaire') ?>">
+                            <input type="radio" class="btn-check" name="photo_choice" id="radio_file" onchange="togglePhotoSource('file')">
+                            <label class="btn btn-outline-primary" for="radio_file"><i class="fas fa-folder-open"></i></label>
+                        </div>
 
-					<?php else: ?>
-						<!-- Avatar vide -->
-						<div class="rounded-circle border d-flex align-items-center justify-content-center bg-light mx-auto mb-3"
-							style="width:120px; height:120px;">
-							<i class="fas fa-user fa-3x text-secondary photo-vide"></i>
-						</div>
+                        <div id="area_prendre_photo" class="photo-zone">
+                            <button class="btn btn-primary w-100 py-2 fw-bold shadow-sm" type="button" onClick="ebene_init_photo_face();">
+                                <i class="fas fa-video me-2"></i><?= _("Capturer") ?>
+                            </button>
+                            <button class="d-none" id="btn_pop_save_face" data-bs-toggle="modal" data-bs-target="#pop_rec_faciale"></button>
+                        </div>
 
-						<?php if ($faceRegistered != "1" && $_SESSION['assureAjoutPhoto'] == "1"): ?>
-							<!-- ── Choix du mode d'ajout de photo ── -->
-							<div class="mb-3">
+                        <div id="area_choisir_photo" class="photo-zone d-none">
+                            <form enctype="multipart/form-data" action="Fichebeneficiaire/<?= $_SESSION['idBeneficiaire_C'] ?>/" method="post">
+                                <input class="form-control form-control-sm mb-2" name="fichier_upload" type="file" accept="image/*" id="input_file_hidden" onchange="this.form.submit()">
+                                <button type="submit" name="submit" class="btn btn-success w-100"><i class="fas fa-upload me-2"></i><?= _("Envoyer") ?></button>
+                            </form>
+                        </div>
+                    <?php endif; ?>
+                <?php endif; ?>
+            </div>
+            
+            <div class="mt-2">
+                <span class="badge rounded-pill <?= $estcouvert ? 'bg-success' : 'bg-danger' ?> px-3 py-2">
+                    <i class="fas <?= $estcouvert ? 'fa-check-circle' : 'fa-times-circle' ?> me-1"></i>
+                    <?= $estcouvert ? $etatbeneficiaire : _("Non couvert") ?>
+                </span>
+            </div>
+        </div>
 
-								<!-- Boutons radio : Prendre / Choisir -->
-								<div class="d-grid gap-2 mx-auto" style="max-width:360px;">
+        <div class="col-12 col-lg-9">
+            <div class="d-flex justify-content-between align-items-start mb-3 border-bottom pb-2">
+                <div>
+                    <h2 class="h4 text-dark mb-0 fw-bold"><?= $beneficiaire['nomBeneficiaire'] . ' ' . $beneficiaire['prenomsBeneficiaire'] ?></h2>
+                    <small class="text-muted text-uppercase fw-semibold"><?= _("N° Adhérent") ?> : <?= $beneficiaire['numeroAdherent'] ?></small>
+                </div>
+                <div class="text-end">
+                    <span class="d-block text-muted small"><?= _("Âge actuel") ?></span>
+                    <span class="fw-bold"><?= $this->nettoyer($beneficiaire['age']) ?> <?= _("an(s)") ?></span>
+                </div>
+            </div>
 
-									<div class="form-check form-check-card border rounded px-3 py-2 text-start">
-										<input class="form-check-input"
-											type="radio"
-											name="photo_choice"
-											id="prendre_photo_radio"
-											value=""
-											checked>
-										<label class="form-check-label fw-medium w-100" for="prendre_photo_radio">
-											<i class="fas fa-camera me-2 text-primary"></i>
-											<?= _("Prendre une photo") ?>
-										</label>
-									</div>
+            <div class="row g-3">
+                <div class="col-md-6">
+                    <div class="info-group mb-3">
+                        <label class="text-muted small mb-1"><i class="fas fa-calendar-alt me-1"></i> <?= _("Date de Naissance") ?></label>
+                        <p class="mb-0 fw-medium"><?= dateLang($this->nettoyer($beneficiaire['dateNaissance'])) ?></p>
+                    </div>
+                    <div class="info-group mb-3">
+                        <label class="text-muted small mb-1"><i class="fas fa-users me-1"></i> <?= _("Lien Parenté") ?></label>
+                        <p class="mb-0 fw-medium"><?= $lienparente ?></p>
+                    </div>
+                    <div class="info-group">
+                        <label class="text-muted small mb-1"><i class="fas fa-venus-mars me-1"></i> <?= _("Genre") ?></label>
+                        <p class="mb-0 fw-medium"><?= $sexe ?></p>
+                    </div>
+                </div>
 
-									<div class="form-check form-check-card border rounded px-3 py-2 text-start">
-										<input class="form-check-input"
-											type="radio"
-											name="photo_choice"
-											id="choisir_photo_radio"
-											value="choisir">
-										<label class="form-check-label fw-medium w-100" for="choisir_photo_radio">
-											<i class="fas fa-folder-open me-2 text-primary"></i>
-											<?= _("Choisir une photo") ?>
-										</label>
-									</div>
-
-								</div><!-- /d-grid -->
-							</div><!-- /mb-3 -->
-
-							<!-- ── Panneau : Prendre une photo (visible par défaut) ── -->
-							<div id="div_prendre_photo" class="mx-auto" style="max-width:360px;">
-								<!-- Bouton caché déclenché par JS pour ouvrir la modal de reconnaissance faciale -->
-								<button id="btn_pop_save_face"
-										name="btn_pop_save_face"
-										type="button"
-										class="sr-only visually-hidden"
-										data-bs-toggle="modal"
-										data-bs-target="#pop_rec_faciale">
-								</button>
-								<button type="button"
-										class="btn btn-primary w-100 py-3 fw-bold btn_autre"
-										onclick="javascript:ebene_init_photo_face();">
-									<i class="fas fa-camera me-2 fs-5"></i>
-									<?= _("Lancer l'appareil photo") ?>
-								</button>
-							</div>
-
-							<!-- ── Panneau : Choisir une photo (masqué par défaut) ── -->
-							<div id="div_choisir_photo" class="d-none mx-auto" style="max-width:360px;">
-								<form enctype="multipart/form-data"
-									action="Fichebeneficiaire/<?= $_SESSION['idBeneficiaire_C'] ?>/"
-									method="post">
-									<div class="d-grid gap-2 mt-2">
-										<input class="form-control form-control-lg"
-											type="file"
-											name="fichier_upload"
-											id="fichier_upload"
-											accept="image/*">
-										<button type="submit"
-												name="submit"
-												class="btn btn-success btn-lg w-100 py-3 btn_autre">
-											<i class="fas fa-upload me-2 fs-5"></i>
-											<?= _("Envoyer la photo") ?>
-										</button>
-									</div>
-								</form>
-
-								<?php if ($message > " "): ?>
-									<div class="alert alert-danger mt-2 small" role="alert">
-										<?= $message ?>
-									</div>
-								<?php endif; ?>
-							</div><!-- /div_choisir_photo -->
-
-						<?php endif; ?>
-					<?php endif; ?>
-
-				</div><!-- /col Photo -->
-
-
-				<!-- ── Informations personnelles ── -->
-				<div class="col-12 col-md-9">
-					<div class="row g-3">
-
-						<!-- Nom complet + Date de naissance -->
-						<div class="col-12">
-							<h3 class="text-primary mb-1 fw-bold">
-								<?= $beneficiaire['nomBeneficiaire'] . ' ' . $beneficiaire['prenomsBeneficiaire'] ?>
-							</h3>
-							<p class="text-muted mb-0 small">
-								<i class="fas fa-birthday-cake me-1"></i>
-								<?= _("Né(e) le") . " : " . dateLang($this->nettoyer($beneficiaire['dateNaissance']))
-									. " — " . $this->nettoyer($beneficiaire['age']) . " " . _("an(s)") ?>
-							</p>
-						</div>
-
-						<!-- Colonne gauche : N° Adhérent / Lien Parenté / Genre -->
-						<div class="col-12 col-sm-6">
-
-							<div class="mb-2">
-								<small class="text-muted d-block"><?= _("N° Adhérent") ?></small>
-								<span class="fw-bold"><?= $beneficiaire['numeroAdherent'] ?></span>
-							</div>
-
-							<div class="mb-2">
-								<small class="text-muted d-block"><?= _("Lien Parenté") ?></small>
-								<span class="fw-bold"><?= $lienparente ?></span>
-							</div>
-
-							<div class="mb-2">
-								<small class="text-muted d-block"><?= _("Genre") ?></small>
-								<span class="fw-bold"><?= $sexe ?></span>
-							</div>
-
-						</div><!-- /col gauche -->
-
-
-						<!-- Colonne droite : Mobile / Email / État -->
-						<div class="col-12 col-sm-6">
-
-							<!-- Mobile -->
-							<div class="mb-2">
-								<?php if ($codeLienParente != "A"): ?>
-									<!-- Lecture seule pour les non-adhérents principaux -->
-									<small class="text-muted d-block"><?= _("Mobile") ?></small>
-									<span class="fw-bold"><?= $beneficiaire['telephonePortable'] ?></span>
-
-								<?php else: ?>
-									<!-- Champ éditable pour l'adhérent principal -->
-									<div class="d-flex justify-content-between align-items-center mb-1">
-										<label class="form-label small text-muted mb-0" for="telephonePortable">
-											<?= _("Mobile") ?>
-										</label>
-										<div class="form-check mb-0">
-											<input class="form-check-input"
-												type="checkbox"
-												id="ignorerFormat"
-												name="ignorerFormat">
-											<label class="form-check-label small 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 bg-white text-muted">
-											<i class="fas fa-mobile-alt"></i>
-										</span>
-										<input type="tel"
-											class="form-control"
-											id="telephonePortable"
-											name="telephonePortable"
-											placeholder="Ex : 250700000001"
-											required
-											pattern="^250[0-9]{9,}$"
-											title="<?= 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." ?>"
-											oninput="this.setCustomValidity('')"
-											oninvalid="validerMessageTelephone(this)"
-											onchange="javascript:maj_mobile_beneficiaire();"
-											value="<?= $beneficiaire['telephonePortable'] ?>">
-									</div>
-									<div class="form-text text-muted small mt-1">
-										<i class="fas fa-info-circle me-1"></i>
-										<?= est_anglophone()
-											? "Required format: 250XXXXXXXXX (min. 12 digits)"
-											: "Format requis : 250XXXXXXXXX (min. 12 chiffres)" ?>
-									</div>
-								<?php endif; ?>
-							</div><!-- /Mobile -->
-
-
-							<!-- Email -->
-							<div class="mb-2">
-								<?php if ($codeLienParente != "A"): ?>
-									<!-- Lecture seule -->
-									<small class="text-muted d-block"><?= _("Email") ?></small>
-									<span class="fw-bold"><?= $beneficiaire['emailBeneficiaire'] ?></span>
-
-								<?php else: ?>
-									<!-- Champ éditable -->
-									<label class="form-label small text-muted mb-1" for="emailBeneficiaire">
-										<?= _("E-mail") ?>
-									</label>
-									<div class="input-group input-group-sm">
-										<span class="input-group-text bg-white text-muted">
-											<i class="fas fa-envelope"></i>
-										</span>
-										<input type="email"
-											class="form-control"
-											id="emailBeneficiaire"
-											name="emailBeneficiaire"
-											placeholder="exemple@mail.com"
-											onchange="javascript:maj_email_beneficiaire();"
-											value="<?= $beneficiaire['emailBeneficiaire'] ?>">
-									</div>
-								<?php endif; ?>
-							</div><!-- /Email -->
-
-
-							<!-- État / Couverture -->
-							<div class="mb-2">
-								<small class="text-muted d-block"><?= _("État") ?></small>
-								<?php if ($estcouvert): ?>
-									<span class="badge bg-success fs-6 px-3 py-1">
-										<i class="fas fa-check-circle me-1"></i><?= $etatbeneficiaire ?>
-									</span>
-								<?php else: ?>
-									<span class="badge bg-danger fs-6 px-3 py-1">
-										<i class="fas fa-times-circle me-1"></i><?= _("Non couvert") ?>
-									</span>
-								<?php endif; ?>
-							</div><!-- /État -->
-
-						</div><!-- /col droite -->
-
-					</div><!-- /row infos -->
-				</div><!-- /col Infos personnelles -->
-
-			</div><!-- /row principale -->
-
-
-			<hr class="my-4">
-
-
-			<!-- ===== SECTION : Informations de police ===== -->
-			<div class="row g-3">
-
-				<div class="col-12 col-sm-6">
-					<small class="text-muted d-block"><?= _("Souscripteur") ?></small>
-					<span class="fw-bold"><?= $beneficiaire['nomClient'] ?></span>
-				</div>
-
-				<div class="col-12 col-sm-6">
-					<small class="text-muted d-block"><?= _("Collège / N° Police") ?></small>
-					<span class="fw-bold">
-						<?= $beneficiaire['libelleCollege'] ?> / <?= $beneficiaire['numeroPolice'] ?>
-					</span>
-				</div>
-
-			</div><!-- /row police -->
-
-		</div><!-- /card-body -->
+                <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"></i> <?= _("Mobile") ?></label>
+                                <div class="form-check form-switch small">
+                                    <input class="form-check-input" type="checkbox" id="ignorerFormat">
+                                    <label class="form-check-label text-muted" for="ignorerFormat"><?= _("Format libre") ?></label>
+                                </div>
+                            </div>
+                            <input type="tel" class="form-control" id="telephonePortable" 
+                                   pattern="^250[0-9]{9,}$" value="<?= $beneficiaire['telephonePortable'] ?>"
+                                   onchange="maj_mobile_beneficiaire();">
+                        </div>
+                        <div class="mb-3">
+                            <label class="text-muted small mb-1"><i class="fas fa-envelope me-1"></i> <?= _("Email") ?></label>
+                            <input type="email" class="form-control" id="emailBeneficiaire" 
+                                   value="<?= $beneficiaire['emailBeneficiaire'] ?>"
+                                   onchange="maj_email_beneficiaire();">
+                        </div>
+                    <?php else: ?>
+                        <div class="info-group mb-3">
+                            <label class="text-muted small mb-1"><i class="fas fa-mobile-alt me-1"></i> <?= _("Mobile") ?></label>
+                            <p class="mb-0 fw-medium"><?= $beneficiaire['telephonePortable'] ?: '-' ?></p>
+                        </div>
+                        <div class="info-group">
+                            <label class="text-muted small mb-1"><i class="fas fa-envelope me-1"></i> <?= _("Email") ?></label>
+                            <p class="mb-0 fw-medium text-break"><?= $beneficiaire['emailBeneficiaire'] ?: '-' ?></p>
+                        </div>
+                    <?php endif; ?>
+                </div>
+            </div>
+        </div>
     </div>
 
+    <div class="row mt-4 pt-3 border-top bg-light rounded-3 p-2 g-2">
+        <div class="col-sm-6">
+            <small class="text-muted d-block"><?= _("Souscripteur") ?></small>
+            <span class="fw-bold text-secondary"><?= $beneficiaire['nomClient'] ?></span>
+        </div>
+        <div class="col-sm-6 text-sm-end">
+            <small class="text-muted d-block"><?= _("Collège / N° Police") ?></small>
+            <span class="fw-bold text-secondary"><?= $beneficiaire['libelleCollege'] ?> / <?= $beneficiaire['numeroPolice'] ?></span>
+        </div>
+    </div>
+</div>
+
     <!-- Section des plafonds et consommations -->
     <div class="row">
         <!-- Plafond Famille -->