117 lines
6.1 KiB
PHP
117 lines
6.1 KiB
PHP
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css"></script>
|
|
<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 -->
|
|
<div class="col-md-6 col-lg-4 beneficiary-card" data-name="ACHI CLAUDE JACQUELINE" data-number="0084005301" data-age="57" data-status="En vigueur">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-success text-white">
|
|
<img src="https://garant.vitalis-ci.com/plugins/thumbs/vitalis/0084005301.jpg" alt="Profile Picture" class="rounded-circle mb-3">
|
|
<h5>ACHI CLAUDE JACQUELINE</h5>
|
|
<p>0084005301</p>
|
|
<span class="badge bg-info">Assuré Principal</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> 0084005301</li>
|
|
<li class="list-group-item"><strong>Nom :</strong> ACHI CLAUDE JACQUELINE</li>
|
|
<li class="list-group-item"><strong>Âge :</strong> 57</li>
|
|
<li class="list-group-item"><strong>Sexe :</strong> F</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="https://garant.vitalis-ci.com/admin/reseau?idAdherent=564&idCollege=127" class="btn btn-outline-success w-100">
|
|
<i class="bi bi-eye"></i> Mon réseau de soins
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 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="https://garant.vitalis-ci.com/admin/reseau?idAdherent=565&idCollege=128" 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>
|
|
|