<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kresta EntryPoint</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans antialiased">
    <div class="min-h-screen flex items-center justify-center px-4">
        <div class="max-w-md w-full bg-white rounded-lg shadow-xl p-8">
            
            <!-- Contenu dynamique qui remplace les boutons/formulaires -->
            <div id="dynamic-content">
                <!-- Le contenu sera injecté ici par JavaScript -->
            </div>

            <!-- Boutons de choix (cachés par défaut) -->
            <div id="choice-buttons" class="hidden">
                <h2 class="text-3xl font-bold text-center text-gray-800 mb-2">Bienvenue chez Kresta Outsourcing 👋</h2>
                <p class="text-center text-gray-600 mb-6">Veuillez choisir votre statut pour enregistrer votre entrée.</p>
                <div class="flex justify-center space-x-4">
                    <button id="employe-btn" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">
                        Je suis un employé
                    </button>
                    <button id="visiteur-btn" class="px-6 py-3 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">
                        Je suis un visiteur
                    </button>
                </div>
            </div>

            <!-- Formulaire dynamique (caché par défaut) -->
            <form id="formulaire" class="hidden space-y-4" onsubmit="return handleSubmit(event);">
                <input type="hidden" name="type" id="type">
                <input type="hidden" name="pos" id="pos">
                <input type="hidden" name="step" value="register">
                <div id="champs"></div>
                <button type="submit" id="submit-btn" class="w-full py-3 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg shadow-md transition duration-300 ease-in-out">
                    Valider mon entrée
                </button>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            handlePageLoad();
        });

        function handlePageLoad() {
            // On tente de vérifier si l'utilisateur est connu
            fetch('?action=check_user')
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.isKnownUser) {
                        // L'utilisateur est connu, on affiche le message de bienvenue/au revoir
                        displayUserStatus(data);
                    } else {
                        // L'utilisateur n'est pas connu, on affiche les boutons de choix
                        showChoiceButtons();
                    }
                })
                .catch(error => {
                    // Erreur réseau ou pas de cookie, on considère que c'est un nouvel utilisateur
                    console.error('Erreur:', error);
                    showChoiceButtons();
                });
        }

        function displayUserStatus(data) {
            const contentDiv = document.getElementById('dynamic-content');
            let messageHTML = '';

            if (data.action === 'Entrée') {
                messageHTML = `
                    <h2 class="text-3xl font-bold text-center text-green-600">Bonjour ${data.nom} !</h2>
                    <p class="text-center text-gray-700 mt-4">Bienvenue. Vous êtes arrivé à <strong>${data.time}</strong>.</p>
                `;
            } else { // Sortie
                messageHTML = `
                    <h2 class="text-3xl font-bold text-center text-red-600">Au revoir ${data.nom} !</h2>
                    <p class="text-center text-gray-700 mt-4">Vous êtes parti à <strong>${data.time}</strong>.</p>
                `;
            }
            contentDiv.innerHTML = messageHTML;
            contentDiv.classList.remove('hidden');
        }

        function showChoiceButtons() {
            document.getElementById('choice-buttons').classList.remove('hidden');
        }

        function choisir(type) {
            document.getElementById('type').value = type;
            let champsHTML = `
                <div>
                    <label for="nom" class="block text-sm font-medium text-gray-700">Nom complet</label>
                    <input type="text" name="nom" id="nom" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                </div>`;

            if (type === 'employe') {
                champsHTML += `
                    <div>
                        <label for="poste" class="block text-sm font-medium text-gray-700">Poste</label>
                        <select name="poste" id="poste" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                            <option value="">-- Sélectionnez votre poste --</option>
                            <option>Commercial</option>
                            <option>Assistante</option>
                            <option>Directrice</option>
                            <option>Informaticien</option>
                        </select>
                    </div>`;
            } else {
                champsHTML += `
                    <div>
                        <label for="entreprise" class="block text-sm font-medium text-gray-700">Entreprise</label>
                        <input type="text" name="entreprise" id="entreprise" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label for="motif" class="block text-sm font-medium text-gray-700">Motif de la visite</label>
                        <input type="text" name="motif" id="motif" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    </div>`;
            }
            document.getElementById('champs').innerHTML = champsHTML;
            document.getElementById('choice-buttons').classList.add('hidden');
            document.getElementById('formulaire').classList.remove('hidden');
        }

        function handleSubmit(event) {
            event.preventDefault();
            const form = event.target;
            const formData = new FormData(form);
            const submitBtn = document.getElementById('submit-btn');
            
            submitBtn.disabled = true;
            submitBtn.textContent = 'Géolocalisation en cours...';

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        formData.set('pos', `${position.coords.latitude},${position.coords.longitude}`);
                        submitBtn.textContent = 'Enregistrement...';
                        submitNewUser(formData);
                    },
                    () => {
                        formData.set('pos', 'Non détectée');
                        submitBtn.textContent = 'Enregistrement...';
                        submitNewUser(formData);
                    }
                );
            } else {
                formData.set('pos', 'Non détectée');
                submitBtn.textContent = 'Enregistrement...';
                submitNewUser(formData);
            }
        }

        function submitNewUser(formData) {
            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // L'utilisateur est maintenant enregistré, on affiche son statut
                    displayUserStatus(data);
                    document.getElementById('formulaire').classList.add('hidden');
                } else {
                    alert('Une erreur est survenue. Veuillez réessayer.');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                alert('Une erreur de communication est survenue.');
            })
            .finally(() => {
                // Réinitialiser le bouton pour une utilisation future si nécessaire
                const submitBtn = document.getElementById('submit-btn');
                submitBtn.disabled = false;
                submitBtn.textContent = 'Valider mon entrée';
            });
        }

        // Attache les écouteurs d'événements
        document.getElementById('employe-btn').addEventListener('click', () => choisir('employe'));
        document.getElementById('visiteur-btn').addEventListener('click', () => choisir('visiteur'));
    </script>
</body>
</html>