162 lines
6.3 KiB
PHP
Executable File
162 lines
6.3 KiB
PHP
Executable File
|
|
<style>
|
|
.card-custom {
|
|
margin-bottom: 20px;
|
|
border-color: #34D399;
|
|
}
|
|
.card-header-custom {
|
|
background-color: #34D399;
|
|
color: white;
|
|
}
|
|
.badge-custom {
|
|
font-size: 1rem;
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
.btn-custom {
|
|
background-color: #34D399;
|
|
color: white;
|
|
}
|
|
.card-actions a {
|
|
margin-right: 10px;
|
|
}
|
|
.no-results {
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
color: red;
|
|
}
|
|
.pagination {
|
|
justify-content: center;
|
|
}
|
|
.search-box {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container my-4">
|
|
<div class="row">
|
|
<?php
|
|
if (isset($gcs) && is_array($gcs)) {
|
|
$nbreTotal = count($gcs);
|
|
$nbreTotalFormatted = $nbreTotal < 10 ? '0'.$nbreTotal : $nbreTotal;
|
|
} else {
|
|
// Gestion de l'absence de données
|
|
$nbreTotal = 0;
|
|
$nbreTotalFormatted = '00';
|
|
}
|
|
?>
|
|
<div class="col-12">
|
|
<h4>Total souscripteurs <span class="badge bg-success badge-custom"><?= htmlspecialchars($nbreTotal); ?></span> enregistrés</h4>
|
|
<input type="hidden" id="total" value="<?= htmlspecialchars($nbreTotalFormatted); ?>">
|
|
|
|
<!-- Search Form -->
|
|
<div class="search-box mb-4">
|
|
<form class="d-flex">
|
|
<input id="searchInput" class="form-control me-2" type="search" placeholder="Rechercher par le nom du souscripteur" aria-label="Search" onkeyup="filterAndPaginate()" value="">
|
|
<button class="btn btn-success" type="button">Valider</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Cards for each subscriber -->
|
|
<div id="cardsContainer" class="row row-cols-1 row-cols-md-3 g-4"></div>
|
|
|
|
<!-- No Results Message -->
|
|
<div id="noResults" class="no-results d-none">
|
|
Aucun souscripteur trouvé.
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav>
|
|
<ul id="pagination" class="pagination justify-content-center"></ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
const subscribers = <?php echo json_encode($gcs); ?>; // Vos données PHP sous forme de JSON
|
|
const itemsPerPage = 6;
|
|
let currentPage = 1;
|
|
let filteredSubscribers = subscribers;
|
|
|
|
// Function to display the cards
|
|
function displayCards(page = 1) {
|
|
const cardsContainer = document.getElementById('cardsContainer');
|
|
cardsContainer.innerHTML = '';
|
|
|
|
const start = (page - 1) * itemsPerPage;
|
|
const end = start + itemsPerPage;
|
|
const subscribersToShow = filteredSubscribers.slice(start, end);
|
|
|
|
// Handle no results
|
|
if (subscribersToShow.length === 0) {
|
|
document.getElementById('noResults').classList.remove('d-none');
|
|
} else {
|
|
document.getElementById('noResults').classList.add('d-none');
|
|
}
|
|
|
|
// Create cards for each subscriber
|
|
subscribersToShow.forEach((gc, index) => {
|
|
const card = `
|
|
<div class="col">
|
|
<div class="card h-100 card-custom">
|
|
<div class="card-header card-header-custom">
|
|
<h5 class="card-title">Souscripteur ${start + index + 1}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p><strong>Nom :</strong> <span class="souscripteur-nom">${gc.souscripteur}</span></p>
|
|
<p><strong>Police en cours :</strong> ${gc.numeroPolice}</p>
|
|
<p><strong>Date d'effet :</strong> ${gc.dateEffetPolice}</p>
|
|
<p><strong>Date d'échéance :</strong> ${gc.dateFinPolice}</p>
|
|
</div>
|
|
<div class="card-footer text-end card-actions">
|
|
<button class="btn btn-success btn-sm" onclick="voir_polices(${gc.idPolice}, ${gc.idGcpolice});">Voir polices</button>
|
|
<button class="btn btn-success btn-sm" onclick="detail_souscripteur(${gc.idGcpolice});">Détails</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
cardsContainer.innerHTML += card;
|
|
});
|
|
}
|
|
|
|
// Function to handle pagination
|
|
function setupPagination() {
|
|
const pagination = document.getElementById('pagination');
|
|
pagination.innerHTML = '';
|
|
const pageCount = Math.ceil(filteredSubscribers.length / itemsPerPage);
|
|
|
|
for (let i = 1; i <= pageCount; i++) {
|
|
const li = document.createElement('li');
|
|
li.className = `page-item ${i === currentPage ? 'active' : ''}`;
|
|
li.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${i})">${i}</a>`;
|
|
pagination.appendChild(li);
|
|
}
|
|
}
|
|
|
|
// Go to specific page
|
|
function goToPage(page) {
|
|
currentPage = page;
|
|
displayCards(currentPage);
|
|
setupPagination();
|
|
}
|
|
|
|
// Filter function
|
|
function filterAndPaginate() {
|
|
const input = document.getElementById('searchInput').value.toLowerCase();
|
|
filteredSubscribers = subscribers.filter(sub => sub.souscripteur.toLowerCase().includes(input));
|
|
currentPage = 1; // Reset to first page after filtering
|
|
displayCards(currentPage);
|
|
setupPagination();
|
|
}
|
|
|
|
// Initial load
|
|
window.onload = function() {
|
|
displayCards(currentPage);
|
|
setupPagination();
|
|
}
|
|
</script>
|
|
|