From c56192343ab1504d040b03082d52e1f0a664f585 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Thu, 26 Mar 2026 13:26:32 +0000
Subject: [PATCH] fer

---
 Vue/Fichebeneficiaire/index.php | 286 ++++++++++++++------------------
 1 file changed, 122 insertions(+), 164 deletions(-)

diff --git a/Vue/Fichebeneficiaire/index.php b/Vue/Fichebeneficiaire/index.php
index 329498f..4b0a436 100755
--- a/Vue/Fichebeneficiaire/index.php
+++ b/Vue/Fichebeneficiaire/index.php
@@ -155,177 +155,135 @@
             </div>
         </div>
         
-        <div class="card-body">
-            <!-- Photo et informations principales -->
-            <div class="row">
-                <!-- Photo -->
-                <div class="col-12 col-md-3 text-center mb-4">
-                    <?php if ($beneficiaire['faceRegistered']=="1"): ?>
-                        <img 
-							 src="<?=$photoAssureCrypte?>"
-                             class="img-fluid rounded-circle shadow" 
-                             style="width: 120px; height: 120px; object-fit: cover; cursor:pointer;" 
-                             data-bs-toggle="modal" 
-                             data-bs-target="#pop_photo"
-                             alt="Photo du bénéficiaire">
-                    <?php else: ?>
-                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" 
-                             style="width: 120px; height: 120px; border:1px solid #000 !important;">
-                            <i class="fas fa-user fa-3x text-secondary photo-vide"></i>
-                        </div>
-						<?php if ($faceRegistered!="1" && $_SESSION['assureAjoutPhoto']=="1"):
-						?>
-							<!-- Boutons radios - Version mobile first avec largeur réduite -->
-							<div class="mb-3">
-								<div class="d-grid gap-2 mx-auto" style="max-width: 400px;">
-									<div class="form-check form-check-card py-2 px-3 rounded border">
-										<input class="form-check-input" type="radio" name="photo_choice" id="prendre_photo_radio" value="" checked>
-										<label class="form-check-label w-100 d-block fw-medium" for="prendre_photo_radio">
-											<i class="fas fa-camera me-2 text-primary"></i><?= _("Prendre une photo") ?>
-										</label>
-									</div>
-									<div class="form-check form-check-card py-2 px-3 rounded border">
-										<input class="form-check-input" type="radio" name="photo_choice" id="choisir_photo_radio" value="choisir">
-										<label class="form-check-label w-100 d-block fw-medium" for="choisir_photo_radio">
-											<i class="fas fa-folder-open me-2 text-primary"></i><?= _("Choisir une photo") ?>
-										</label>
-									</div>
-								</div>
+        <div class="card-body p-4">
+			<div class="row g-4">
+				
+				<div class="col-12 col-lg-4 text-center border-end-lg">
+					<div class="position-relative d-inline-block mb-3">
+						<?php if ($beneficiaire['faceRegistered'] == "1"): ?>
+							<img src="<?= $photoAssureCrypte ?>" 
+								class="rounded-circle shadow-lg border border-3 border-white" 
+								style="width: 160px; height: 160px; object-fit: cover; cursor:pointer;" 
+								data-bs-toggle="modal" data-bs-target="#pop_photo">
+						<?php else: ?>
+							<div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto shadow-sm border" 
+								style="width: 160px; height: 160px;">
+								<i class="fas fa-user fa-4x text-secondary opacity-25"></i>
+							</div>
+						<?php endif; ?>
+						
+						<div class="position-absolute bottom-0 end-0 mb-2 me-2">
+							<?php if ($estcouvert) : ?>
+								<span class="badge rounded-pill bg-success shadow-sm px-3 py-2 border border-2 border-white">
+									<i class="fas fa-check-circle me-1"></i><?= $etatbeneficiaire ?>
+								</span>
+							<?php else: ?>
+								<span class="badge rounded-pill bg-danger shadow-sm px-3 py-2 border border-2 border-white">
+									<i class="fas fa-times-circle me-1"></i><?= _("Hors Couverture") ?>
+								</span>
+							<?php endif; ?>
+						</div>
+					</div>
+
+					<?php if ($beneficiaire['faceRegistered'] != "1" && $_SESSION['assureAjoutPhoto'] == "1"): ?>
+						<div class="bg-light p-3 rounded-3 mt-2 mx-auto" style="max-width: 320px;">
+							<div class="btn-group btn-group-sm w-100 mb-3" role="group">
+								<input type="radio" class="btn-check" name="photo_choice" id="prendre_photo_radio" checked>
+								<label class="btn btn-outline-primary" for="prendre_photo_radio"><i class="fas fa-camera me-1"></i><?= _("Capturer") ?></label>
+								
+								<input type="radio" class="btn-check" name="photo_choice" id="choisir_photo_radio">
+								<label class="btn btn-outline-primary" for="choisir_photo_radio"><i class="fas fa-upload me-1"></i><?= _("Importer") ?></label>
 							</div>
 
-							<!-- Div pour "Prendre une photo" -->
-							<div id="div_prendre_photo" class="mt-2 mb-2">
-								<div class="mx-auto" style="max-width: 400px;">
-									<button class="sr-only" id="btn_pop_save_face" name="btn_pop_save_face" type="button" data-bs-toggle="modal" data-bs-target="#pop_rec_faciale"></button>
-									<button class="btn btn-primary w-100 py-3 fw-bold btn_autre" type="button" onClick="javascript:ebene_init_photo_face();">
-										<i class="fas fa-camera me-2 fs-5"></i><?= _("Lancer l'appareil photo") ?>
+							<div id="div_prendre_photo">
+								<button class="btn btn-primary btn-sm w-100 fw-bold" onClick="ebene_init_photo_face();">
+									<i class="fas fa-video me-2"></i><?= _("Démarrer Webcam") ?>
+								</button>
+							</div>
+
+							<div id="div_choisir_photo" class="d-none text-start">
+								<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/*">
+									<button type="submit" name="submit" class="btn btn-success btn-sm w-100 fw-bold">
+										<?= _("Valider l'import") ?>
 									</button>
-								</div>
+								</form>
 							</div>
+						</div>
+					<?php endif; ?>
+				</div>
 
-							<!-- Div pour "Choisir une photo" -->
-							<div id="div_choisir_photo" class="d-none">
-								<div class="mx-auto" style="max-width: 400px;">
-									<div class="d-grid gap-2 mt-2 mb-2">
-										<form enctype="multipart/form-data" action="Fichebeneficiaire/<?= $_SESSION['idBeneficiaire_C'] ?>/" method="post">
-											<input class="form-control form-control-lg" name="fichier_upload" type="file" 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>
-										</form>
-									</div>
-									<h4 style="text-align: center">
-										<?php if ($message>" "): ?>
-											<div class="col-12 alert alert-danger">
-											  <?= $message ?>
-											</div>	
-										<?php endif; ?>  
-									</h4>
+				<div class="col-12 col-lg-8">
+					<div class="d-flex justify-content-between align-items-start mb-3 border-bottom pb-2">
+						<div>
+							<h2 class="text-primary fw-bold mb-0 text-uppercase"><?= $beneficiaire['nomBeneficiaire'] . ' ' . $beneficiaire['prenomsBeneficiaire'] ?></h2>
+							<p class="text-muted small fw-medium mb-0">
+								<i class="fas fa-birthday-cake me-2 text-danger"></i><?= _("Né(e) le") ?>: <?= dateLang($beneficiaire['dateNaissance']) ?> 
+								<span class="badge bg-secondary-subtle text-secondary ms-2 small"><?= $beneficiaire['age'] ?> <?= _("ans") ?></span>
+							</p>
+						</div>
+						<div class="text-end d-none d-md-block">
+							<small class="text-muted d-block"><?= _("N° Adhérent") ?></small>
+							<span class="badge bg-dark fs-6 px-3"><?= $beneficiaire['numeroAdherent'] ?></span>
+						</div>
+					</div>
+
+					<div class="row g-3">
+						<div class="col-12 col-md-6">
+							<div class="p-3 border rounded-3 bg-light h-100">
+								<div class="mb-3">
+									<label class="small text-muted text-uppercase fw-bold d-block mb-1"><?= _("Lien de Parenté") ?></label>
+									<span class="text-dark fw-bold h6"><i class="fas fa-users me-2 text-primary"></i><?= $lienparente ?></span>
+								</div>
+								<div class="mb-0">
+									<label class="small text-muted text-uppercase fw-bold d-block mb-1"><?= _("Sexe") ?></label>
+									<span class="text-dark fw-bold h6">
+										<i class="fas <?= ($beneficiaire['sexe'] == 'M' || $beneficiaire['sexe'] == 'Masculin') ? 'fa-mars text-info' : 'fa-venus text-danger' ?> me-2"></i>
+										<?= $sexe ?>
+									</span>
 								</div>
 							</div>
-						<?php endif;?>
-                    <?php endif; ?>
-                    
-                </div>
-                
-                <!-- Informations personnelles -->
-                <div class="col-12 col-md-9">
-                    <div class="row">
-                        <div class="col-12 mb-2">
-                            <h3 class="text-primary mb-1"><?= $beneficiaire['nomBeneficiaire'] . ' ' . $beneficiaire['prenomsBeneficiaire'] ?></h3>
-                            <p class="text-muted mb-0"><?= _("Né(e) le").": ".dateLang($this->nettoyer($beneficiaire['dateNaissance']))." => ".$this->nettoyer($beneficiaire['age'])." "._("an(s)") ?></p>
-                        </div>
-                        
-                        <div class="col-12 col-md-6">
-                            <div class="mb-2">
-                                <small class="text-muted"><?= _("N° Adhérent") ?></small>
-                                <p class="fw-bold mb-0"><?= $beneficiaire['numeroAdherent'] ?></p>
-                            </div>
-                            
-                            <div class="mb-2">
-                                <small class="text-muted"><?= _("Lien Parenté") ?></small>
-                                <p class="fw-bold mb-0"><?= $lienparente ?></p>
-                            </div>
-							
-							<div class="mb-2">
-                                <small class="text-muted"><?= _("Genre") ?></small>
-                                <p class="fw-bold mb-0"><?= $sexe ?></p>
-                            </div>
-                        </div>
-                        
-                        <div class="col-12 col-md-6">
-							<?php if($codeLienParente != "A"): ?>
-                            <div class="mb-4">
-                                <small class="text-muted"><?= _("Mobile") ?></small>
-                                <p class="fw-bold mb-0"><?= $beneficiaire['telephonePortable'] ?></p>
-                            </div>
-							<?php else : ?>
-							<div class="mb-4">
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <label class="form-label text-muted small">
-                                        <?= _("Mobile") ?>
-                                    </label>
-                                    <div class="form-check mb-1">
-                                        <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">
-                                    <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 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>
-                            </div>
-                            <?php endif; ?>
-							
-                            <div class="mb-2">
-                                <small class="text-muted"><?= _("État") ?></small>
-                                <?php if ($estcouvert) : ?>
-                                    <span class="badge bg-success"><?= $etatbeneficiaire ?></span>
-                                <?php else: ?>
-                                    <span class="badge bg-danger"><?= _("Non couvert") ?></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <hr>
-            
-            <!-- Informations de police -->
-            <div class="row">
-                <div class="col-12 col-md-6">
-                    <div class="mb-2">
-                        <small class="text-muted"><?= _("Souscripteur") ?></small>
-                        <p class="fw-bold mb-0"><?= $beneficiaire['nomClient'] ?></p>
-                    </div>
-                </div>
-                
-                <div class="col-12 col-md-6">
-                    <div class="mb-2">
-                        <small class="text-muted"><?= _("Collège / N° Police") ?></small>
-                        <p class="fw-bold mb-0"><?= $beneficiaire['libelleCollege'] ?> / <?= $beneficiaire['numeroPolice'] ?></p>
-                    </div>
-                </div>
-            </div>
-        </div>
+						</div>
+
+						<div class="col-12 col-md-6">
+							<div class="p-3 border rounded-3 bg-light h-100">
+								<?php if($codeLienParente != "A"): ?>
+									<label class="small text-muted text-uppercase fw-bold d-block mb-1"><?= _("Contact Mobile") ?></label>
+									<span class="text-dark fw-bold h6"><i class="fas fa-phone-alt me-2 text-success"></i><?= $beneficiaire['telephonePortable'] ?></span>
+								<?php else : ?>
+									<div class="d-flex justify-content-between align-items-center mb-1">
+										<label class="small text-muted text-uppercase fw-bold"><?= _("Contact Mobile") ?></label>
+										<div class="form-check form-switch p-0 ms-2">
+											<input class="form-check-input ms-0" type="checkbox" id="ignorerFormat">
+											<label class="small text-muted ms-1" for="ignorerFormat">Libre</label>
+										</div>
+									</div>
+									<div class="input-group input-group-sm">
+										<span class="input-group-text bg-white"><i class="fas fa-mobile-alt text-success"></i></span>
+										<input type="tel" class="form-control" id="telephonePortable" name="telephonePortable" 
+											onchange="maj_mobile_beneficiaire();" value="<?= $beneficiaire['telephonePortable'] ?>">
+									</div>
+								<?php endif; ?>
+							</div>
+						</div>
+
+						<div class="col-12 mt-4">
+							<div class="row bg-primary-subtle rounded-3 p-3 g-2 mx-0">
+								<div class="col-12 col-md-6 border-end-md">
+									<small class="text-muted d-block"><?= _("Souscripteur / Client") ?></small>
+									<span class="fw-bold text-primary text-uppercase"><?= $beneficiaire['nomClient'] ?></span>
+								</div>
+								<div class="col-12 col-md-6 ps-md-4">
+									<small class="text-muted d-block"><?= _("Collège & Police") ?></small>
+									<span class="fw-bold"><?= $beneficiaire['libelleCollege'] ?></span> 
+									<span class="badge bg-white text-dark border ms-2">N° <?= $beneficiaire['numeroPolice'] ?></span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
     </div>
 
     <!-- Section des plafonds et consommations -->