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) {
        // Listener pour la 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;

            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 => {
                        // Mise à jour des options dans le menu déroulant
                        lieuSelect.innerHTML = '<option value="">Sélectionnez un lieu</option>';
                        data.forEach(lieu => {
                            const option = document.createElement('option');
                            option.value = lieu.id; // ID pour soumettre au backend
                            option.textContent = lieu.nom; // Nom affiché
                            option.dataset.details = JSON.stringify(lieu); // Stocker les détails pour affichage
                            lieuSelect.appendChild(option);
                        });

                        lieuSelect.disabled = false;
                    })
                    .catch(error => {
                        console.error('Erreur lors de la récupération des lieux :', error);
                    });
            }
        });

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

                // 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éinitialisation des 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.');
    }
});