assure/Vue/Factures/index.php
2025-12-05 09:34:39 +00:00

148 lines
4.4 KiB
PHP
Executable File

<?php
$this->titre = "Intersanté - Factures assuré";
?>
<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-file-invoice me-2"></i>
<?= _("Factures") ?>
</h4>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header bg-secondary py-2">
<h5 class="mb-0 text-center text-light">
<?= substr($this->nettoyer($_SESSION['beneficiaire_C']), 0, 25). " ( " .$_SESSION['numeroBeneficiaire_C']. " )" ?>
</h5>
</div>
<div class="card-body">
<form id="filterForm" class="row g-3 align-items-end">
<div class="col-md-4 col-sm-6">
<label for="d1" class="form-label"><?= _("Période du") ?></label>
<input type="text" class="form-control datepicker" id="d1" name="d1"
value="<?= $_SESSION['dUneSemaineAvantFr_C'] ?>" required>
</div>
<div class="col-md-4 col-sm-6">
<label for="d2" class="form-label"><?= _("au") ?></label>
<input type="text" class="form-control datepicker" id="d2" name="d2"
value="<?= dateCouranteLang($_SESSION['lang']) ?>" required>
</div>
<div class="col-md-4 col-sm-6">
<button type="button" class="btn btn-primary w-100 btn_autre" onclick="javascript:listerfacture();">
<i class="fas fa-sync-alt me-2"></i><?= _("Actualiser") ?>
</button>
</div>
</form>
</div>
</div>
<button id="btn_pop_consulter_facture" name="btn_pop_consulter_facture" type="button" class="sr-only" data-bs-toggle="modal" data-bs-target="#pop_consulter_facture"></button>
<div id="div_dossiers">
</div>
</div>
<style>
/* Amélioration de la lisibilité sur desktop */
@media (min-width: 768px) {
.table {
font-size: 0.9rem;
}
}
/* Style pour les icônes */
.bi {
font-size: 1.1rem;
}
/* Amélioration de l'affichage mobile */
@media (max-width: 767.98px) {
.card.mb-3 {
margin-bottom: 1rem !important;
}
.card-header {
padding: 0.5rem 1rem;
}
.card-body {
padding: 0.75rem;
}
.accordion-button {
font-size: 0.8rem;
padding: 0.5rem;
}
.accordion-body {
padding: 0.5rem;
font-size: 0.85rem;
}
.btn-sm {
padding: 0.2rem 0.4rem;
font-size: 0.75rem;
}
/* Style pour la modal en mode mobile */
.modal-dialog {
margin: 0.5rem;
}
/* Amélioration de l'affichage des badges */
.badge {
font-size: 0.7rem;
}
}
/* Style pour les types de facture */
.badge.bg-primary {
font-size: 0.75rem;
}
/* Style pour les lignes du tableau desktop */
.table-hover tbody tr:hover {
background-color: rgba(0, 0, 0, 0.075);
}
</style>
<script>
// Fonction pour améliorer l'expérience mobile
document.addEventListener('DOMContentLoaded', function() {
// Adaptation responsive pour la modal
function adjustModalForMobile() {
const modalDialog = document.querySelector('#pop_consulter_facture .modal-dialog');
if (modalDialog) {
if (window.innerWidth < 768) {
modalDialog.classList.add('modal-fullscreen-sm-down');
} else {
modalDialog.classList.remove('modal-fullscreen-sm-down');
}
}
}
// Ajuster au chargement et au redimensionnement
adjustModalForMobile();
window.addEventListener('resize', adjustModalForMobile);
// Animation pour les accordéons
const accordions = document.querySelectorAll('.accordion-button');
accordions.forEach(button => {
button.addEventListener('click', function() {
const icon = this.querySelector('.bi-chevron-down');
if (icon) {
icon.classList.toggle('bi-chevron-down');
icon.classList.toggle('bi-chevron-up');
}
});
});
});
</script>