assure/Vue/Ajaxconnexioncookie/french.php

<?php 
	$maintenance = $societeusersaas['maintenance'];
	if($maintenance=='1')
	{
		$msgErreur = 'Site en maintenance, veuillez vous reconnecter plus tard!';
	}
?>

<!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
<div class="d-none d-md-block">
<span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px;">
	Portail Assuré
</span>

<?php if (isset($msgErreur) and $msgErreur>" "): ?>
	<div class="text-center p-t-10">
		<h4 class="txt3">
			<div class="col-12 alert alert-danger">
			  <?= $msgErreur ?>
			</div>	
		</h4>
	</div>
<?php else: ?>
	<div class="text-center p-t-10" id="div_msgErreur">

	</div>
<?php endif; ?>  

<?php if($maintenance!='1'): ?>
	<div class="wrap-input100">
		<label for="langue">Langue</label>
		<select class="form-select" id="langue" name="langue"
				
				required autocomplete="off" onchange="javascript:changer_langue_connexion();">
			<?php liste_options($langues, $_SESSION['lang'], true); ?>
		</select> 
	</div>
	

	<div class="wrap-input100">
		<div class="wrap-input100 validate-input" data-validate="Enter Entity">
			<label for="codeSociete">Entité</label>
			<input class="input100" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>"	
			placeholder="Entité" style="text-align:center;" required AUTOCOMPLETE="off" 
			onChange="javascript:changer_entite_portail();" >
		</div>
	</div>

	<div id="div_login_portail" class="wrap-input100">
		<div class="wrap-input100 validate-input" data-validate="Enter username">
			<label for="login">Identifiant</label>
			<input class="input100" type="text" name="login" id="login" value="<?= $codeUtilisateur ?>"	placeholder="Identifiant" style="text-align:center;" required AUTOCOMPLETE="off">
		</div>
	</div>

	<div class="wrap-input100 validate-input" data-validate="Enter password">
		<label for="mdp">Mot de passe</label>
		<input class="input100" type="password" name="mdp" id="mdp" placeholder="Mot de passe" style="text-align:center;" required	AUTOCOMPLETE="off">
	</div>

	<div class="container-login100-form-btn">
		<button name="btn_connexion" id="btn_connexion" class="btn login-btn">
			Connexion
		</button>
	</div>

	<div class="footer">
		Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
	</div>
<?php endif; ?> 
</div>

<!-- Affichage mobile (cartes) -->
<div class="d-md-none">
    <!-- VERSION MOBILE AVEC IDs UNIQUES -->
    
    <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:15px; display: block; text-align: center; font-size: 20px;">
        Portail Assuré
    </span>

    <?php if (isset($msgErreur) and $msgErreur>" "): ?>
        <div class="text-center p-t-10" style="margin-bottom: 15px;">
            <h4 class="txt3">
                <div class="col-12 alert alert-danger" style="padding: 10px; font-size: 13px; border-radius: 8px;">
                    <?= $msgErreur ?>
                </div>	
            </h4>
        </div>
    <?php else: ?>
        <div class="text-center p-t-10" id="div_msgErreur_mobile" style="margin-bottom: 15px;"></div>
    <?php endif; ?>  

    <?php if($maintenance!='1'): ?>
    
    <!-- CONTENEUR MOBILE - IDs AVEC SUFFIXE _mobile -->
    <div style="width: 100%; max-width: 300px; margin: 0 auto;">
        
        <!-- Langue -->
        <div class="wrap-input100" style="margin-bottom: 15px; text-align: center;">
            <label for="langue_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Langue</label>
            <select class="form-select" id="langue_mobile" name="langue_mobile"
                    style="width: 100%; height: 40px; border: 2px solid #7D4FFE; border-radius: 9px; background: transparent; font-size: 14px; color: #7D4FFE; text-align: center; padding: 0 10px; box-sizing: border-box;"
                    required autocomplete="off" onchange="changerLangueMobile(this.value);">
                <?php liste_options($langues, $_SESSION['lang'], true); ?>
            </select> 
        </div>

        <!-- Entité -->
        <div class="wrap-input100" style="margin-bottom: 15px; text-align: center;">
            <div class="wrap-input100 validate-input">
                <label for="codeSociete_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Entité</label>
                <input class="input100" type="text" name="codeSociete_mobile" id="codeSociete_mobile" value="<?= $codeSociete ?>"	
                       placeholder="Entité" 
                       style="width: 100%; height: 40px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; padding: 0 10px; box-sizing: border-box;"
                       required AUTOCOMPLETE="off" onChange="changerEntiteMobile(this.value);">
            </div>
        </div>

        <!-- Identifiant -->
        <div id="div_login_portail_mobile" class="wrap-input100" style="margin-bottom: 15px; text-align: center;">
            <div class="wrap-input100 validate-input">
                <label for="login_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Identifiant</label>
                <input class="input100" type="text" name="login_mobile" id="login_mobile" value="<?= $codeUtilisateur ?>"	
                       placeholder="Identifiant" 
                       style="width: 100%; height: 40px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; padding: 0 10px; box-sizing: border-box;"
                       required AUTOCOMPLETE="off">
            </div>
        </div>

        <!-- Mot de passe -->
        <div class="wrap-input100 validate-input" style="margin-bottom: 20px; text-align: center;">
            <label for="mdp_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Mot de passe</label>
            <input class="input100" type="password" name="mdp_mobile" id="mdp_mobile" placeholder="Mot de passe" 
                   style="width: 100%; height: 40px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; padding: 0 10px; box-sizing: border-box;"
                   required AUTOCOMPLETE="off">
        </div>

        <!-- Bouton Connexion -->
        <div class="container-login100-form-btn" style="margin-bottom: 20px; text-align: center;">
            <button type="button" name="btn_connexion_mobile" id="btn_connexion_mobile" class="btn login-btn"
                    style="width: 100%; height: 45px; background: #7D4FFE; color: white; font-size: 16px; font-weight: 700; border-radius: 9px; border: none;">
                Connexion
            </button>
        </div>

    </div>

    <!-- Footer mobile -->
    <div class="footer" style="position: relative; bottom: auto; left: auto; font-size: 11px; text-align: center; padding: 10px; width: 100%; margin-top: 10px;">
        Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
    </div>

    <?php endif; ?> 
</div>

<!-- STYLES POUR GÉRER L'AFFICHAGE DESKTOP/MOBILE -->
<style>
    /* PAR DÉFAUT SUR DESKTOP - MOBILE CACHÉ */
    .d-md-none {
        display: none;
    }
    
    /* SUR MOBILE - AFFICHER MOBILE, CACHER DESKTOP */
    @media screen and (max-width: 767px) {
        .d-md-none {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden !important;
        }
        
        .d-none.d-md-block {
            display: none !important;
        }
        
        /* Styles mobiles harmonisés */
        .d-md-none input,
        .d-md-none select,
        .d-md-none .login-btn {
            width: 100% !important;
            max-width: 300px !important;
            margin-left: auto !important;
            margin-right: auto !important;
            display: block !important;
        }
        
        /* Harmonisation des champs */
        .d-md-none input,
        .d-md-none select {
            height: 40px !important;
            border: 2px solid #7D4FFE !important;
            border-radius: 9px !important;
            padding: 0 15px !important;
            box-sizing: border-box !important;
            font-size: 14px !important;
        }
        
        /* Bouton */
        .d-md-none .login-btn {
            height: 45px !important;
        }
        
        /* Centrage des labels */
        .d-md-none label {
            text-align: center !important;
            display: block !important;
            width: 100% !important;
            margin-bottom: 5px !important;
        }
        
        /* Conteneur principal */
        .d-md-none > div:last-child {
            width: 100% !important;
            max-width: 300px !important;
            margin: 0 auto !important;
        }
        
        /* Pour très petits écrans */
        @media screen and (max-width: 320px) {
            .d-md-none input,
            .d-md-none select,
            .d-md-none .login-btn {
                max-width: 280px !important;
            }
        }
    }
</style>

<script>
// LOGIQUE POUR LA VERSION MOBILE

// 1. Synchronisation avec le desktop
function synchroniserAvecDesktop() {
    // Liste des champs à synchroniser
    const champs = [
        {mobile: 'langue_mobile', desktop: 'langue'},
        {mobile: 'codeSociete_mobile', desktop: 'codeSociete'},
        {mobile: 'login_mobile', desktop: 'login'},
        {mobile: 'mdp_mobile', desktop: 'mdp'}
    ];
    
    champs.forEach(champ => {
        const champMobile = document.getElementById(champ.mobile);
        const champDesktop = document.getElementById(champ.desktop);
        
        if (champMobile && champDesktop) {
            // Sync mobile → desktop
            champMobile.addEventListener('change', function() {
                champDesktop.value = this.value;
            });
        }
    });
}

// 2. Fonctions de changement pour mobile
function changerLangueMobile(valeur) {
    // Mettre à jour le champ desktop
    const desktopLangue = document.getElementById('langue');
    if (desktopLangue) {
        desktopLangue.value = valeur;
        // Appeler la fonction desktop
        if (typeof changer_langue_connexion === 'function') {
            changer_langue_connexion();
        }
    }
}

function changerEntiteMobile(valeur) {
    // Mettre à jour le champ desktop
    const desktopEntite = document.getElementById('codeSociete');
    if (desktopEntite) {
        desktopEntite.value = valeur;
        // Appeler la fonction desktop
        if (typeof changer_entite_portail === 'function') {
            changer_entite_portail();
        }
    }
}

// 3. Gestion de la connexion mobile
function gererConnexionMobile() {
    // Récupérer les valeurs mobiles
    const codeSociete = document.getElementById('codeSociete_mobile')?.value.trim();
    const login = document.getElementById('login_mobile')?.value.trim();
    const mdp = document.getElementById('mdp_mobile')?.value.trim();
    
    // Validation
    if (!codeSociete || !login || !mdp) {
        alert('Veuillez remplir tous les champs');
        return false;
    }
    
    console.log('Connexion mobile:', {codeSociete, login, mdp});
    
    // OPTION A: Utiliser le formulaire desktop
    const formulaireDesktop = document.querySelector('form');
    if (formulaireDesktop) {
        // Mettre à jour les champs desktop
        document.getElementById('codeSociete').value = codeSociete;
        document.getElementById('login').value = login;
        document.getElementById('mdp').value = mdp;
        document.getElementById('langue').value = document.getElementById('langue_mobile').value;
        
        // Soumettre
        formulaireDesktop.submit();
        return true;
    }
    
    // OPTION B: Si pas de formulaire, utiliser AJAX
    // (Adaptez à votre backend)
    const formData = new FormData();
    formData.append('codeSociete', codeSociete);
    formData.append('login', login);
    formData.append('mdp', mdp);
    formData.append('langue', document.getElementById('langue_mobile').value);
    
    fetch(window.location.href, {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(html => {
        document.open();
        document.write(html);
        document.close();
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur de connexion');
    });
    
    return false;
}

// 4. Initialisation
document.addEventListener('DOMContentLoaded', function() {
    // Synchroniser les champs
    synchroniserAvecDesktop();
    
    // Gérer le bouton de connexion mobile
    const btnMobile = document.getElementById('btn_connexion_mobile');
    if (btnMobile) {
        btnMobile.addEventListener('click', gererConnexionMobile);
    }
    
    // Gérer la touche Entrée
    document.querySelectorAll('.d-md-none input').forEach(input => {
        input.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                gererConnexionMobile();
            }
        });
    });
    
    // Gestion responsive
    function verifierAffichage() {
        const isMobile = window.innerWidth <= 767;
        
        if (isMobile) {
            // Mode mobile
            document.querySelectorAll('.d-md-none').forEach(el => el.style.display = 'block');
            document.querySelectorAll('.d-none.d-md-block').forEach(el => el.style.display = 'none');
        } else {
            // Mode desktop
            document.querySelectorAll('.d-md-none').forEach(el => el.style.display = 'none');
            document.querySelectorAll('.d-none.d-md-block').forEach(el => el.style.display = 'block');
        }
    }
    
    // Appliquer
    verifierAffichage();
    window.addEventListener('resize', verifierAffichage);
});

// 5. Fallback: Si l'utilisateur clique sur le bouton desktop en mode mobile
// (cela ne devrait pas arriver car il est caché, mais au cas où)
document.getElementById('btn_connexion')?.addEventListener('click', function(e) {
    if (window.innerWidth <= 767) {
        e.preventDefault();
        gererConnexionMobile();
    }
});
</script>