125 lines
6.0 KiB
PHP
Executable File
125 lines
6.0 KiB
PHP
Executable File
|
|
<title><?= _("Bénéficiaires");?></title>
|
|
<style>
|
|
.card {
|
|
height: 100%;
|
|
}
|
|
|
|
.card img {
|
|
width: 80px;
|
|
height: 80px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.card-header {
|
|
text-align: center;
|
|
}
|
|
|
|
.search-bar {
|
|
max-width: 400px;
|
|
margin: 0 auto 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container my-5">
|
|
<h1 class="text-center mb-4"><?= _("Liste des Bénéficiaires");?></h1>
|
|
<!-- Search Bar -->
|
|
<div class="search-bar">
|
|
<input type="text" id="searchInput" class="form-control" placeholder="Rechercher un bénéficiaire par nom, numéro ou autre...">
|
|
</div>
|
|
|
|
<!-- Beneficiaries Cards -->
|
|
<div class="row g-4 align-items-stretch" id="beneficiariesList">
|
|
<!-- Card Template -->
|
|
<?php foreach ($beneficiaires as $beneficiaire):
|
|
$statut = $beneficiaire['statut'];
|
|
$lienparente = $beneficiaire['lienparente'];
|
|
|
|
if (est_anglophone()){
|
|
$statut = $beneficiaire['statutEng'];
|
|
$lienparente = $beneficiaire['lienparenteEng'];
|
|
}
|
|
|
|
?>
|
|
<div class="col-md-6 col-lg-4 beneficiary-card" data-name="<?= $beneficiaire['beneficiaire'] ?>" data-number="<?= $beneficiaire['numeroBeneficiaire'] ?>" data-age="<?= $beneficiaire['age'] ?>" data-status="<?= $beneficiaire['statut'] ?>">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-success text-white">
|
|
<img src="<?= $beneficiaire['lienPhoto'] ?>" alt="Profile Picture" class="rounded-circle mb-3">
|
|
<h5><?= $beneficiaire['beneficiaire'] ?></h5>
|
|
<p><?= $beneficiaire['numeroBeneficiaire'] ?></p>
|
|
<span class="badge bg-info"><?= $lienparente ?></span>
|
|
<span class="badge bg-light text-dark mt-2"><?= $statut ?></span>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h6 class="text-primary"><?= _("Informations Bénéficiaire") ?></h6>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item"><strong><?= _("Numéro") ?> :</strong><?= $beneficiaire['numeroBeneficiaire'] ?></li>
|
|
<li class="list-group-item"><strong><?= _("Nom") ?> :</strong> <?= $beneficiaire['beneficiaire'] ?></li>
|
|
<li class="list-group-item"><strong><?= _("Âge") ?> :</strong> <?= $beneficiaire['age'] ?></li>
|
|
<li class="list-group-item"><strong><?= _("Genre") ?> :</strong> <?= $beneficiaire['sexe'] ?></li>
|
|
<li class="list-group-item"><strong><?= _("Groupe sanguin") ?> :</strong> <?= $beneficiaire['codeGroupeSanguin'] ?></li>
|
|
<li class="list-group-item"><strong><?= _("Téléphone") ?> :</strong> <?= $beneficiaire['telephonePortable'] ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<!-- Repeat for other beneficiaries -->
|
|
|
|
|
|
<!--
|
|
<div class="col-md-6 col-lg-4 beneficiary-card" data-name="NGUESSAN AXEL KONAN EPIPHANE" data-number="0084005302" data-age="18" data-status="En vigueur">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<img src="https://garant.vitalis-ci.com/plugins/thumbs/vitalis/0084005302.jpg" alt="Profile Picture" class="rounded-circle mb-3">
|
|
<h5>NGUESSAN AXEL KONAN EPIPHANE</h5>
|
|
<p>0084005302</p>
|
|
<span class="badge bg-secondary">Enfant</span>
|
|
<span class="badge bg-light text-dark mt-2">En vigueur</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="text-primary"><?= _("Informations Bénéficiaire");?></h6>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item"><strong>Numéro :</strong> 0084005302</li>
|
|
<li class="list-group-item"><strong>Nom :</strong> NGUESSAN AXEL KONAN EPIPHANE</li>
|
|
<li class="list-group-item"><strong>Âge :</strong> 18</li>
|
|
<li class="list-group-item"><strong>Sexe :</strong> M</li>
|
|
<li class="list-group-item"><strong>Groupe sanguin :</strong> Inconnu</li>
|
|
<li class="list-group-item"><strong>Téléphone :</strong> 2250103794006</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<a href="#" class="btn btn-outline-primary w-100">
|
|
<i class="bi bi-eye"></i><?= _("Mon réseau de soins");?>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Search Functionality
|
|
document.getElementById('searchInput').addEventListener('input', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
const cards = document.querySelectorAll('.beneficiary-card');
|
|
|
|
cards.forEach(card => {
|
|
const name = card.getAttribute('data-name').toLowerCase();
|
|
const number = card.getAttribute('data-number').toLowerCase();
|
|
const age = card.getAttribute('data-age').toLowerCase();
|
|
const status = card.getAttribute('data-status').toLowerCase();
|
|
|
|
if (name.includes(searchTerm) || number.includes(searchTerm) || age.includes(searchTerm) || status.includes(searchTerm)) {
|
|
card.style.display = '';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|