document.addEventListener('DOMContentLoaded', function () {
    const villeSelect = document.getElementById('sortie_ville');
    const lieuSelect = document.getElementById('sortie_lieu');

    const rueLabel = document.getElementById('rue-value');
    const codePostalLabel = document.getElementById('codePostal-value');
    const latitudeLabel = document.getElementById('latitude-value');
    const longitudeLabel = document.getElementById('longitude-value');

    if (villeSelect && lieuSelect) {
        // Désactiver le menu déroulant des lieux au départ
        lieuSelect.disabled = true;

        // Listener pour le changement de ville
        villeSelect.addEventListener('change', function () {
            const villeId = villeSelect.value;

            // Réinitialisation des options de lieu
            lieuSelect.innerHTML = '<option value="">Sélectionnez un lieu</option>';
            lieuSelect.disabled = true; // Toujours désactiver avant de récupérer les données

            if (villeId) {
                fetch(`/get-lieux/${villeId}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Erreur lors de la récupération des lieux');
                        }
                        return response.json();
                    })
                    .then(data => {
                        // Ajouter les options si des lieux sont disponibles
                        if (data.length > 0) {
                            data.forEach(lieu => {
                                const option = document.createElement('option');
                                option.value = lieu.id; // Utiliser l'ID pour la soumission
                                option.textContent = lieu.nom; // Texte visible dans le menu
                                lieuSelect.appendChild(option);
                            });
                            lieuSelect.disabled = false; // Activer le menu des lieux
                        } else {
                            lieuSelect.innerHTML = '<option value="">Aucun lieu disponible</option>';
                            lieuSelect.disabled = true; // Toujours désactivé si aucun lieu n'est trouvé
                        }
                    })
                    .catch(error => {
                        console.error('Erreur lors de la récupération des lieux :', error);
                    });
            }
        });

        // Listener pour le changement de lieu
        lieuSelect.addEventListener('change', function () {
            const selectedOption = lieuSelect.options[lieuSelect.selectedIndex];
            if (selectedOption) {
                const lieuDetails = selectedOption.dataset.details
                    ? JSON.parse(selectedOption.dataset.details)
                    : null;

                // Mise à jour des labels avec les détails du lieu sélectionné
                rueLabel.textContent = lieuDetails?.rue || 'Non renseignée';
                codePostalLabel.textContent = lieuDetails?.codePostal || 'Non renseigné';
                latitudeLabel.textContent = lieuDetails?.latitude || 'Non renseignée';
                longitudeLabel.textContent = lieuDetails?.longitude || 'Non renseignée';

                console.log('Lieu sélectionné:', lieuDetails);
            } else {
                // Réinitialiser les labels si aucun lieu n'est sélectionné
                rueLabel.textContent = 'Renseigner avec le lieu';
                codePostalLabel.textContent = 'Renseigner avec le lieu';
                latitudeLabel.textContent = 'Renseigner avec le lieu';
                longitudeLabel.textContent = 'Renseigner avec le lieu';

                console.log('Aucun lieu sélectionné.');
            }
        });
    } else {
        console.error('Les champs ville-select ou lieu-select sont introuvables.');
    }
});