radiantassure/Vue/Historiqueremboursement/index.php
2025-12-07 09:35:13 +00:00

144 lines
4.5 KiB
PHP
Executable File

<?php
$this->titre = "Intersanté - Historique Remboursement";
?>
<input class="sr-only" id="nomForm" name="nomForm" value="historembdirect">
<div class="card shadow-lg border-0 mb-4" style="border-radius: 15px;">
<div class="card-header bg-primary text-white py-3" style="border-radius: 15px 15px 0 0;">
<div class="row align-items-center">
<div class="col-8">
<h4 id="h4_titre" class="mb-2 text-center">
<i class="fas fa-exchange-alt me-2"></i>
<?= _("Demandes de remboursement") ?>
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<!-- Filtres de recherche -->
<div class="card shadow-sm mb-8">
<div class="card-body">
<div class="row g-3">
<!-- Période du -->
<div class="col-12 col-md-6 col-lg-3">
<label class="form-label fw-bold"><?= _("Période du") ?></label>
<input class="form-control form-control-sm datepicker" type="text" id="d1" name="d1"
value="<?= dateLang($_SESSION['debutExercice_C'], $_SESSION['lang']) ?>" required>
</div>
<!-- Période au -->
<div class="col-12 col-md-6 col-lg-3">
<label class="form-label fw-bold"><?= _("au") ?></label>
<input class="form-control form-control-sm datepicker" type="text" id="d2" name="d2"
value="<?= dateCouranteLang($_SESSION['lang'], $_SESSION['lang']) ?>" required>
</div>
<!-- État -->
<div class="col-12 col-md-6 col-lg-3">
<label class="form-label fw-bold"><?= _("Etat") ?></label>
<select class="form-select form-select-sm" id="codeEtatDemandeRemboursement" name="codeEtatDemandeRemboursement">
<?php liste_options_consultation($reponsedemande, ""); ?>
</select>
</div>
<!-- Bouton Actualiser -->
<div class="col-12 col-md-6 col-lg-3 d-flex align-items-end">
<button id="btn_filtre" type="button" class="btn btn-primary w-100 mt-md-0" onclick="javascript:listerremboursement();">
<i class="fas fa-sync-alt me-2"></i><?= _("Actualiser") ?>
</button>
</div>
</div>
</div>
</div>
<!-- Résultats -->
<div id="div_dossiers" class="table-responsive">
</div>
</div>
</div>
</div>
<style>
.legend-title {
color: #2c3e50;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 2px solid #3498db;
}
.card {
border: none;
border-radius: 10px;
}
.form-label {
font-size: 0.9rem;
}
.table th {
font-size: 0.85rem;
font-weight: 600;
}
.table td {
font-size: 0.85rem;
vertical-align: middle;
}
/* Styles spécifiques pour mobile */
@media (max-width: 768px) {
.card-body {
padding: 1rem;
}
.btn {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
}
.table-responsive {
font-size: 0.8rem;
}
.badge {
font-size: 0.75rem;
}
}
/* Version ultra-mobile (petits écrans) */
@media (max-width: 576px) {
.table th, .table td {
padding: 0.5rem;
}
.btn {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>
<script>
// Script pour améliorer l'expérience mobile
document.addEventListener('DOMContentLoaded', function() {
// Adapter la table sur mobile
function adaptTableForMobile() {
if (window.innerWidth < 768) {
document.querySelectorAll('#div_dossiers td, #div_dossiers th').forEach(cell => {
cell.style.padding = '0.4rem';
});
}
}
// Initial adaptation
adaptTableForMobile();
// Re-adapt on window resize
window.addEventListener('resize', adaptTableForMobile);
});
</script>