<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEN RDV SANTÉ+ — Connexion</title>
    <link rel="icon" type="image/x-icon" href="LOGO SENRDVSANTE.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066CC',
                        dark:    '#003F8A',
                    }
                }
            }
        }
    </script>
</head>
<body class="min-h-screen bg-gradient-to-br from-[#000000] via-[#0066CC] to-[#0088FF] flex items-center justify-center p-4">

    <!-- cercles décoratifs -->
    <div class="absolute top-0 right-0 w-96 h-96 rounded-full bg-white/5 -translate-y-1/2 translate-x-1/2"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 rounded-full bg-white/5 translate-y-1/2 -translate-x-1/2"></div>

    <div class="w-full max-w-md relative z-10">

        <!-- logo -->
        <div class="text-center mb-8">
           
            
            <div class="max-w-4xl mx-auto px-4 text-center">
        <img src="LOGO SENRDVSANTE.png" alt="SENRDVSANTE+" class="responsive-img">
<style>
 .responsive-img {
   width: 40%; /* 50% of parent width */
   height: auto; /* Adjust height automatically */
   display: block;
margin-left: auto;
margin-right: auto;
 }
</style>
        
     
    </div>
            <h1 class="text-white text-2xl font-black tracking-widest">SEN RDV SANTÉ+</h1>
            <p class="text-white/60 text-sm mt-1 tracking-widest uppercase">Espace Personnel</p>
        </div>

        <!-- carte connexion -->
        <div class="bg-white rounded-3xl p-8 shadow-2xl">
            <h2 class="text-gray-900 text-xl font-bold mb-1">Connexion</h2>
            <p class="text-gray-400 text-sm mb-6">Accédez à votre tableau de bord</p>

            <!-- message d'erreur -->
            <div id="erreur" class="hidden bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 text-sm mb-4"></div>

            <!-- formulaire -->
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-600 mb-1.5">Numéro de téléphone</label>
                    <input
                        type="tel"
                        id="telephone"
                        placeholder="+221 77 123 45 67"
                        class="w-full px-4 py-3 rounded-xl border-2 border-gray-100 bg-gray-50 text-gray-900 focus:outline-none focus:border-blue-500 focus:bg-white transition-all"
                    />
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-600 mb-1.5">Mot de passe</label>
                    <div class="relative">
                        <input
                            type="password"
                            id="motdepasse"
                            placeholder="••••••••"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-100 bg-gray-50 text-gray-900 focus:outline-none focus:border-blue-500 focus:bg-white transition-all"
                        />
                        <button
                            onclick="toggleMdp()"
                            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                            type="button"
                        >
                            👁️
                        </button>
                    </div>
                </div>

                <button
                    onclick="connecter()"
                    id="btn-connexion"
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3.5 rounded-xl transition-all duration-200 shadow-lg shadow-blue-600/30 flex items-center justify-center gap-2"
                >
                    <span id="btn-txt">Se connecter →</span>
                    <span id="btn-spinner" class="hidden w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
                </button>
            </div>

            <!-- infos de connexion test 
            <div class="mt-6 p-4 bg-gray-50 rounded-xl border border-gray-100">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Comptes de test</p>
                <div class="space-y-1 text-xs text-gray-500">
                    <p>🔵 <strong>Super Admin</strong> : +221700000000 / admin1234</p>
                    <p>🟢 <strong>Admin Hôpital</strong> : +221701234567 / hopital1234</p>
                    <p>🟡 <strong>Gérant</strong> : +221702345678 / gerant1234</p>
                    <p>🌍 <strong>Directeur Régional</strong> : 772000000 / P@sser123456789</p>
                </div>
            </div>

            <p class="text-center text-xs text-gray-300 mt-4">
                🔒 Accès réservé au personnel hospitalier
            </p>
        </div>
    </div>  -->

    <script src="/web/assets/app.js"></script>
    <script>
        // je redirige si déjà connecté
        window.addEventListener('DOMContentLoaded', () => {
            const user = getUser();
            if (user && getToken()) {
                redirigerSelonRole(user.role);
            }
        });

        function toggleMdp() {
            const input = document.getElementById('motdepasse');
            input.type = input.type === 'password' ? 'text' : 'password';
        }

        // je permets la connexion avec la touche Entrée
        document.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') connecter();
        });

        async function connecter() {
            const telephone = document.getElementById('telephone').value.trim();
            const motdepasse = document.getElementById('motdepasse').value;
            const erreurEl  = document.getElementById('erreur');
            const btnTxt    = document.getElementById('btn-txt');
            const btnSpinner = document.getElementById('btn-spinner');

            if (!telephone || !motdepasse) {
                erreurEl.textContent = 'Veuillez remplir tous les champs';
                erreurEl.classList.remove('hidden');
                return;
            }

            // j'affiche le spinner pendant la connexion
            btnTxt.classList.add('hidden');
            btnSpinner.classList.remove('hidden');
            erreurEl.classList.add('hidden');

            const data = await api('/auth/login.php', {
                method: 'POST',
                body: JSON.stringify({ telephone, mot_de_passe: motdepasse })
            });

            btnTxt.classList.remove('hidden');
            btnSpinner.classList.add('hidden');

            if (data.succes) {
                // je sauvegarde le token et les infos utilisateur
                localStorage.setItem('token', data.token);
                localStorage.setItem('user', JSON.stringify(data.user));
                redirigerSelonRole(data.user.role);
            } else {
                erreurEl.textContent = data.erreur || 'Identifiants incorrects';
                erreurEl.classList.remove('hidden');
            }
        }

        function redirigerSelonRole(role) {
            const routes = {
                'gerant':             '/web/gerant.php',
                'admin_hopital':      '/web/admin.php',
                'super_admin':        '/web/super-admin.php',
                'directeur_regional': '/web/directeur-regional.php',
            };
            window.location.href = routes[role] || '/web/index.php';
        }
    </script>
</body>
</html>