assure/Vue/Envoiwhatsappcon/index.php

<?php 
    // Titre de la page (optionnel)
    // $this->titre = "Intersanté - Historique des Messages"; 
?>

<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 text-center">
				<h4 id="h4_titre" class="mb-2 text-center">
					<i class="fas fa-comments me-2"></i>
					<?= _("Voir messages WhatsApp") ?>
				</h4>
			</div>
		</div>
	</div>
    <div class="row">
        <div class="col-12">
            <div class="alert alert-info mb-4">
				<small>
					<i class="fas fa-info-circle me-2"></i>
					<?= _("Limité aux 100 derniers messages de la période concernée => Filtrer sur période pour obtenir le résultat souhaité") ?>
				</small>
			</div>
            
            <!-- Carte des filtres -->
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <div class="row g-3 align-items-end">
                        <!-- Période du -->
                        <div class="col-12 col-sm-6 col-md-4 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']) ?>" 
                                   required autocomplete="off">
                        </div>
                        
                        <!-- Période au -->
                        <div class="col-12 col-sm-6 col-md-4 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']) ?>" 
                                   required autocomplete="off">
                        </div>
                        
                        <!-- Nombre de lignes -->
                        <div class="col-12 col-sm-6 col-md-4 col-lg-2">
                            <label class="form-label fw-bold"><?= _("Résultats") ?></label>
                            <input class="form-control form-control-sm text-center bg-light" 
                                   type="text" id="nbligne" name="nbligne" 
                                   value="0" readonly>
                        </div>
                        
                        <!-- Boutons d'action -->
                        <div class="col-12 col-sm-6 col-md-6 col-lg-2">
                            <button type="button" class="btn btn-primary w-100 btn_autre" 
                                    onclick="javascript:consulter_envois_whatsapp();">
                                <i class="fas fa-check-circle me-2"></i>
                                <span class="d-none d-md-inline"><?= _("Déjà envoyés") ?></span>
                                <span class="d-inline d-md-none"><?= _("Envoyés") ?></span>
                            </button>
                        </div>
                        
                        <div class="col-12 col-sm-6 col-md-6 col-lg-2">
                            <button type="button" class="btn btn-warning w-100 btn_autre" 
                                    onclick="javascript:consulter_envois_whatsapp_en_cours();">
                                <i class="fas fa-clock me-2"></i>
                                <span class="d-none d-md-inline"><?= _("Envoi en cours") ?></span>
                                <span class="d-inline d-md-none"><?= _("En cours") ?></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Résultats -->
			<div id="div_sms" class="p-3">
				<div class="card shadow-sm">
					<div class="card-header bg-light py-3">
						<h5 class="mb-0 text-dark">
							<i class="fas fa-list me-2"></i>
							<?= _("Résultats des messages") ?>
						</h5>
					</div>
					<div class="card-body p-0">
						<div class="alert alert-info mt-3" style="margin-bottom:15px;">
							<small> 
								<i class="fas fa-info-circle me-2"></i>
								<?= _("Utilisez les filtres ci-dessus pour afficher les résultats") ?>
							</small> 
						</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    border: none;
    border-radius: 10px;
}

.form-label {
    font-size: 0.9rem;
}

.btn {
    padding: 0.5rem 1rem;
}

/* Styles pour mobile */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .btn {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .form-control, .form-select {
        font-size: 0.9rem;
    }
    
    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* Version ultra-mobile */
@media (max-width: 576px) {
    .card-body {
        padding: 0.75rem;
    }
    
    .btn {
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .form-control, .form-select {
        font-size: 0.85rem;
    }
    
    .alert {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Style pour le compteur de résultats */
.bg-light {
    background-color: #f8f9fa !important;
}

/* Style pour l'état vide */
.text-muted {
    color: #6c757d !important;
}

/* Animation de chargement */
.loading-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}
</style>

<script>
// Fonction pour afficher un indicateur de chargement
function showLoading() {
    document.getElementById('div_sms').innerHTML = `
        <div class="text-center py-5">
            <div class="loading-spinner text-primary mb-3"></div>
            <p>Chargement des données...</p>
        </div>
    `;
}

// Adapter l'interface pour mobile
document.addEventListener('DOMContentLoaded', function() {
    function adaptForMobile() {
        if (window.innerWidth < 768) {
            // Ajustements spécifiques pour mobile
            document.querySelectorAll('.btn').forEach(btn => {
                btn.classList.add('btn-sm');
            });
        } else {
            document.querySelectorAll('.btn').forEach(btn => {
                btn.classList.remove('btn-sm');
            });
        }
    }
    
    adaptForMobile();
    window.addEventListener('resize', adaptForMobile);
    
    // Initialiser les datepickers si nécessaire
    if (typeof $('.datepicker').datepicker === 'function') {
        $('.datepicker').datepicker({
            format: 'dd/mm/yyyy',
            language: 'fr',
            autoclose: true
        });
    }
});
</script>