assure/Vue/Envoisms/index.php

<?php 
   
    $this->titre = "Intersanté - Envoi de 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="fab fa-whatsapp me-2"></i>
					<?= _("Messagerie WhatApp") ?>
				</h4>
			</div>
		</div>
	</div>
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
				
					<!-- Section Message -->
                    <div class="row g-3 mb-4">
                        <div class="col-12 col-md-3 col-lg-2">
                            <label class="form-label fw-bold"><?= _("Message") ?> :</label>
                        </div>
                        <div class="col-12 col-md-9 col-lg-10">
                            <textarea id="textMessageCommun" name="textMessageCommun" 
                                      class="form-control" rows="6" 
                                      placeholder="<?= _('Saisissez votre message ici...') ?>" 
                                      required autocomplete="off"></textarea>
                        </div>
                    </div>
					
                    <!-- Section Assureur -->
                    <div class="row g-3 align-items-center mb-4">
                        <div class="col-12 col-md-3 col-lg-2">
                            <label class="form-label fw-bold mb-0"><?= _("A l'assureur") ?> :</label>
                        </div>
                        <div class="col-12 col-md-6 col-lg-7">
                            <div class="form-control bg-light py-2" style="font-weight: bold;">
                                <?= $this->nettoyer($_SESSION['nomSociete']) ?>
                            </div>
                        </div>
                        <div class="col-12 col-md-3 col-lg-3">
                            <button type="button" class="btn btn-primary w-100 btn_autre" 
                                    onClick="javascript:mettre_sms_commun_attente_assureur();">
                                <i class="fas fa-paper-plane me-2"></i>
                                <span class="d-none d-md-inline"><?= _("Envoyer à l'assureur") ?></span>
                                <span class="d-inline d-md-none"><?= _("Assureur") ?></span>
                            </button>
                        </div>
                    </div>

                    <!-- Section Prestataire -->
                    <div class="row g-3 align-items-center mb-4">
                        <div class="col-12 col-md-3 col-lg-2">
                            <label class="form-label fw-bold mb-0"><?= _("Prestataire") ?> :</label>
                        </div>
                        <div class="col-12 col-md-6 col-lg-7">
							<div class="d-none d-md-block">
								<input id="searchInputPrestataire" name="searchInputPrestataire" 
									   class="form-control" type="text" required
									   onkeyup="javascript:affichelisteprestataires(this.value);" 
									   value=""
									   placeholder="<?= _('Rechercher un prestataire') ?>">
								<input class="sr-only" type="text" id="codePrestataire" name="codePrestataire" 
								value="">
								<div id="div_selection_prestataire" class="mt-2"></div>
							</div>
							<!-- Affichage mobile (cartes) -->
							<div class="d-md-none">
								<select class="form-select mobile-select" id="codePrestataire" name="codePrestataire" 
									<?= ($codeEtatRdv != "0") ? 'disabled' : 'required' ?>>
									<?php liste_options($prestataires, $codePrestataire); ?>
								</select>
							</div>
                        </div>
                        <div class="col-12 col-md-3 col-lg-3">
                            <button type="button" class="btn btn-primary w-100 btn_autre" 
                                    onClick="javascript:mettre_sms_commun_attente_prestataire();">
                                <i class="fas fa-paper-plane me-2"></i>
                                <span class="d-none d-md-inline"><?= _("Envoyer au prestataire") ?></span>
                                <span class="d-inline d-md-none"><?= _("Au prestataire") ?></span>
                            </button>
                        </div>
                    </div>

                    <!-- Bouton Envoyer aux deux -->
                    <div class="row g-3">
                        <div class="col-12 offset-md-3 col-md-9 offset-lg-2 col-lg-10">
                            <button type="button" class="btn btn-success w-100 py-2 btn_autre" 
                                    onClick="javascript:mettre_sms_commun_attente_tous();">
                                <i class="fas fa-paper-plane me-2"></i>
                                <?= _("Envoyer aux deux") ?>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

.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;
    }
}

/* 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;
    }
}

/* Amélioration de l'apparence du select */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Style pour le textarea */
#textMessageCommun {
    resize: vertical;
    min-height: 120px;
    font-size: 0.95rem;
}

/* Style pour le champ assureur (lecture seule) */
.bg-light {
    background-color: #f8f9fa !important;
}
</style>

<script>
// Initialiser le selectpicker si Bootstrap Select est utilisé
document.addEventListener('DOMContentLoaded', function() {
    // Si vous utilisez bootstrap-select
    if (typeof $.fn.selectpicker !== 'undefined') {
        $('#codePrestataire').selectpicker();
    }
    
    // Adapter l'interface pour mobile
    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);
});
</script>