assure/Vue/Messagerie/index.php

<?php 
	$this->titre = "Intersanté - Gestion Notifications"; 
?>

<input class="sr-only" type="text" id="nbligne" name="nbligne" value="Lignes : 0"> </td>

<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="fa fa-comments me-2" aria-hidden="true"></i>
					<?= _("Gestion des notifications") ?>
				</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="date1" name="date1" 
                                   value="<?= dateLang($_SESSION['d1_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="date2" name="date2" 
                                   value="<?= dateLang($_SESSION['d2_C'], $_SESSION['lang']) ?>" required>
                        </div>
                        
                        <!-- État -->
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label fw-bold">Lu/Read?</label>
                            <select class="form-select form-select-sm" id="messageLu" name="messageLu">
                                <?php liste_options_consultation($ouinonlu, ""); ?>
                            </select>
                        </div>
						
						<!-- État -->
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label fw-bold">Message</label>
                            <INPUT style='font-size:10pt;' class="form-control" type="text" id="textMessage" name="textMessage" >
                        </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:afficher_lite_messagerie();">
                                <i class="fas fa-sync-alt me-2"></i><?= _("Actualiser") ?>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Résultats -->
			<div id="div_messagerie_gestion">	
			</div>
        </div>
    </div>
</div>

<button id="btn_pop_messagerie_reponse" NAME="btn_pop_messagerie_reponse" type="button" class="sr-only" data-bs-toggle="modal" data-bs-target="#popmessagerie_reponse">Répondre / Answer...</button>

<div class="modal fade" id="popmessagerie_reponse" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
		
			<div class="modal-header">
				<button type="button" class="close" data-bs-dismiss="modal">Fermer/Close</button>
				<h4 class="modal-title">Répondre / Answer...</h4>
			</div>

			<div class="modal-body">
				<div id="div_messagerie_reponse">	
				</div>	
				
			</div>
			
			  <div class="modal-footer">
				<button id="btn_pop_messagerie_reponse_quit" NAME="btn_pop_messagerie_reponse_quit" type="button" class="btn btn-default" data-bs-dismiss="modal">Fermer</button>
			  </div>
			
		</div>
	</div>
</div>

<button id="btn_pop_messagerie_historique" NAME="btn_pop_messagerie_historique" type="button" class="sr-only" data-bs-toggle="modal" data-bs-target="#popmessagerie_historique"> Historique du message / Message history...</button>

<div class="modal fade" id="popmessagerie_historique" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
		
			<div class="modal-header">
				<button type="button" class="close" data-bs-dismiss="modal">Fermer/Close</button>
				<h4 class="modal-title">Historique du message / Message history...</h4>
			</div>

			<div class="modal-body">
				<div id="div_messagerie_historique">	
				</div>	
				
			</div>
			
			  <div class="modal-footer">
				<button id="btn_pop_messagerie_historique_quit" NAME="btn_pop_messagerie_historique_quit" type="button" class="btn btn-default" data-bs-dismiss="modal">Fermer</button>
			  </div>
			
		</div>
	</div>
</div>

<button id="btn_pop_messagerie_new" NAME="btn_pop_messagerie_new" type="button" class="sr-only" data-bs-toggle="modal" data-bs-target="#popmessagerie_new">New Message...</button>

<div class="modal fade" id="popmessagerie_new" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
		
			<div class="modal-header">
				<button type="button" class="close" data-bs-dismiss="modal">Fermer/Close</button>
				<h4 class="modal-title">New Message...</h4>
			</div>

			<div class="modal-body">
				<div id="div_messagerie_new">	
				</div>	
				
			</div>
			
			  <div class="modal-footer">
				<button id="btn_pop_messagerie_new_quit" NAME="btn_pop_messagerie_new_quit" type="button" class="btn btn-default" data-bs-dismiss="modal">Fermer</button>
			  </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_messagerie_gestion td, #div_messagerie_gestion th').forEach(cell => {
                cell.style.padding = '0.4rem';
            });
        }
    }
    
    // Initial adaptation
    adaptTableForMobile();
    
    // Re-adapt on window resize
    window.addEventListener('resize', adaptTableForMobile);
});
</script>