{% extends 'base.html.twig' %}

{% block title %}{{ 'display.title'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>

    <style>
        #citiesMap {
            height: 400px;
            width: 100%;
            margin-bottom: 2rem;
            border-radius: 8px;
            overflow: hidden;
        }

        .map-container {
            position: relative;
        }

        .map-legend {
            position: absolute;
            top: 10px;
            right: 10px;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 12px;
            z-index: 1000;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .city-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }

        .city-item {
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }

        .city-item a {
            text-decoration: none;
            color: inherit;
        }

        .suggestion-list {
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
            width: 100%;
            z-index: 1000;
            display: none;
        }

        .suggestion-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
        }

        .suggestion-item:hover {
            background-color: #f5f5f5;
        }

        .suggestion-name {
            font-weight: bold;
        }

        .suggestion-details {
            font-size: 0.9em;
            color: #666;
        }

        .suggestion-type {
            margin-right: 8px;
        }

        .search-container {
            position: relative;
            margin-bottom: 1rem;
        }

        .list-group-item {
            cursor: pointer;

        }

        .list-group-item:hover {
            background-color: #f5f5f5;
            color: #000;
        }

        #resultsMap {
            height: 400px;
            width: 100%;
            margin-top: 1rem;
            margin-bottom: 1rem;
            border-radius: 8px;
            display: none;
        }
    </style>
{% endblock %}

{% block body %}
    <!-- Hero Section -->
    <div class="container-fluid bg-primary text-black py-5 mb-5">
        <div class="container">
            <div class="row align-items-center">

                <div class="col-lg-8 d-none d-lg-block">
                    <h1 class="display-4 fw-bold mb-4">
                        <img src="{{ asset('logo-osm.png') }}" alt="OpenStreetMap Logo" class="img-fluid"
                             style="max-height: 250px;">
                        <i class="bi bi-shop"></i> Mon Commerce OSM
                    </h1>
                    <p class="lead mb-4">
                        Améliorez la visibilité de votre commerce sur des milliers de sites web et applications en
                        quelques minutes.
                    </p>
                </div>
                <div class="col-lg-4">

                    <div class="d-flex gap-3">
                        <a href="#search-section" class="btn btn-light btn-lg">
                            <i class="bi bi-search"></i> Trouver mon commerce
                        </a>
                        <a href="{{ path('faq') }}" class="btn btn-outline-light btn-lg">
                            <i class="bi bi-info-circle"></i> En savoir plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-5">
        <!-- Benefits Section -->
        <div class="row mb-5">
            <div class="col-12 text-center mb-4">
                <h2 class="fw-bold">Pourquoi mettre à jour vos informations sur OpenStreetMap ?</h2>
                <p class="lead text-muted">Un seul ajout, une visibilité sur des milliers de plateformes</p>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="bi bi-globe text-primary" style="font-size: 3rem;"></i>
                        </div>
                        <h3 class="card-title h5 fw-bold">Visibilité Maximale</h3>
                        <p class="card-text">Vos informations apparaîtront sur TomTom, Apple Plans, Facebook, CoMaps et
                            des
                            centaines d'autres applications.</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="bi bi-clock text-primary" style="font-size: 3rem;"></i>
                        </div>
                        <h3 class="card-title h5 fw-bold">Rapide et Simple</h3>
                        <p class="card-text">Mettez à jour vos horaires, contacts et services en quelques secondes
                            seulement, sans avoir à créer de compte.</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="bi bi-cash-coin text-primary" style="font-size: 3rem;"></i>
                        </div>
                        <h3 class="card-title h5 fw-bold">100% Gratuit</h3>
                        <p class="card-text">Service entièrement gratuit et sans engagement, fourni par une association
                            à but non lucratif.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Search Section -->
        <div id="search-section" class="row mb-5">
            <div class="col-lg-8 mx-auto">
                <div class="card shadow border-0">
                    <div class="card-header bg-white py-3">
                        <h3 class="mb-0 fw-bold">
                            <i class="bi bi-search"></i> Rechercher votre commerce
                        </h3>
                    </div>
                    <div class="card-body p-4">
                        <p class="mb-4">
                            Entrez le nom de votre commerce et sa ville pour commencer à mettre à jour vos informations.
                        </p>
                        <div class="mb-4">
                            <label class="form-label fw-bold" for="researchShop">
                                Nom du commerce et ville
                            </label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text bg-white">
                                    <i class="bi bi-building"></i>
                                </span>
                                <input class="form-control" type="text" id="researchShop"
                                       placeholder="Ex: Boulangerie Dupont, Paris">
                            </div>
                            <div class="form-text">
                                <i class="bi bi-info-circle"></i> Exemple: Café de la Place, Lyon
                            </div>
                            <div class="mt-2 d-none">
                                <label class="form-label">Moteur de recherche :</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="searchEngine" id="nominatim"
                                           value="nominatim" checked>
                                    <label class="form-check-label" for="nominatim">Nominatim</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="searchEngine" id="addok"
                                           value="addok">
                                    <label class="form-check-label" for="addok">Addok</label>
                                </div>
                            </div>
                        </div>

                        <div id="resultsList" class="mt-4"></div>
                        <div id="resultsMap"></div>
                        <div id="proposeLink" class="d-none"></div>
                        <div id="proposeMail" class="d-none">
                            <div class="mb-3">
                                <label for="emailInput" class="form-label fw-bold">Votre email professionnel</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white">
                                        <i class="bi bi-envelope"></i>
                                    </span>
                                    <input type="email" id="emailInput" class="form-control"
                                           placeholder="contact@moncommerce.fr">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-send"></i> Recevoir mon lien de modification
                            </button>
                        </div>
                        <div id="emailForm"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- How It Works Section -->
        <div class="row mb-5">
            <div class="col-12 text-center mb-4">
                <h2 class="fw-bold">Comment ça marche ?</h2>
                <p class="lead text-muted">Un processus simple en 3 étapes</p>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 bg-light">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-primary text-white rounded-circle p-3 me-3"
                                 style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                                <span class="fw-bold">1</span>
                            </div>
                            <h3 class="card-title h5 fw-bold mb-0">Recherchez votre commerce</h3>
                        </div>
                        <p class="card-text">Entrez le nom de votre établissement et sa localité pour le retrouver dans
                            notre base de données.</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 bg-light">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-primary text-white rounded-circle p-3 me-3"
                                 style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                                <span class="fw-bold">2</span>
                            </div>
                            <h3 class="card-title h5 fw-bold mb-0">Recevez votre lien unique</h3>
                        </div>
                        <p class="card-text">Nous vous envoyons par email un lien sécurisé pour accéder à votre fiche
                            commerce.</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 bg-light">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-primary text-white rounded-circle p-3 me-3"
                                 style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                                <span class="fw-bold">3</span>
                            </div>
                            <h3 class="card-title h5 fw-bold mb-0">Mettez à jour vos informations</h3>
                        </div>
                        <p class="card-text">Modifiez facilement vos horaires, contacts, services et autres informations
                            importantes.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Help Section -->
        <div class="row mb-5">
            <div class="col-lg-10 mx-auto">
                <div class="card bg-light border-0">
                    <div class="card-body p-4 text-center">
                        <h3 class="fw-bold mb-3">
                            <i class="bi bi-question-circle"></i> Besoin d'aide ?
                        </h3>
                        <p class="mb-4">
                            Notre équipe de bénévoles est là pour vous accompagner dans la mise à jour de vos
                            informations.
                        </p>
                        <a href="{{ path('app_public_ask_for_help') }}" class="btn btn-primary btn-lg">
                            <i class="bi bi-envelope"></i> Contactez-nous
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
			// Données des villes pour la carte
			const citiesData = {{ citiesForMap|json_encode|raw }};


			document.addEventListener('DOMContentLoaded', function () {

				console.log('content loaded')
				// Créer le formulaire email
				const emailFormHtml = `
        <form id="emailForm" class="mt-3">
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="emailInput" required>
            </div>
            <button type="submit" class="btn btn-primary">Envoyer</button>
        </form>
    `;

				// Créer les divs pour les messages
				const proposeLinkHtml = `
        <div id="proposeLink" class="alert alert-success ">
            Un email a déjà été enregistré pour ce commerce. Nous vous enverrons le lien de modification.
        </div>
    `;

				const proposeMailHtml = `
        <div id="proposeMail" class="alert alert-info "  >
            Aucun email n'est enregistré pour ce commerce. Veuillez saisir votre email pour recevoir le lien de modification.
            ${emailFormHtml}
        </div>
    `;

				// Ajouter les éléments au DOM
				// Initialize the elements only if they exist
				const proposeLinkElement = document.querySelector('#proposeLink');
				const proposeMailElement = document.querySelector('#proposeMail');

				if (proposeLinkElement) {
					proposeLinkElement.innerHTML = proposeLinkHtml;
				}

				if (proposeMailElement) {
					proposeMailElement.innerHTML = proposeMailHtml;
				}

				const searchInput = document.querySelector('#researchShop');
				const resultsList = document.querySelector('#resultsList');
				const resultsMap = document.querySelector('#resultsMap');
				resultsList.classList.add('list-group', 'mt-2');

				// Initialize map
				let map = null;
				let markers = [];

				function initMap() {
					if (!map) {
						map = new maplibregl.Map({
							container: 'resultsMap',
							style: 'https://api.maptiler.com/maps/streets/style.json?key={{ maptiler_token }}',
							center: [2.213749, 46.227638], // Center of France
							zoom: 5
						});

						// Add navigation controls
						map.addControl(new maplibregl.NavigationControl());
					}
				}

				function clearMarkers() {
					// Remove all existing markers
					markers.forEach(marker => marker.remove());
					markers = [];
				}

				function performSearch() {
					clearTimeout(timeoutId);
					resultsList.innerHTML = '';
					resultsMap.style.display = 'none';
					clearMarkers();

					const query_input_user = searchInput.value;

					if (query_input_user.length < 2) return;

					// Get the selected search engine
					const searchEngine = document.querySelector('input[name="searchEngine"]:checked').value;

					let searchUrl;
					if (searchEngine === 'nominatim') {
						// Use Nominatim API
						searchUrl = `https://nominatim.openstreetmap.org/search?q=${query_input_user}&format=json&limit=5&countrycodes=fr`;
					} else {
						// Use Addok API
						searchUrl = `https://demo.addok.xyz/search?q=${query_input_user}&limit=5`;
					}

					fetch(searchUrl)
				}

				// Add event listeners to search engine radio buttons
				document.querySelectorAll('input[name="searchEngine"]').forEach(radio => {
					radio.addEventListener('change', performSearch);
				});

				let timeoutId;
				searchInput.addEventListener('input', function (e) {
					clearTimeout(timeoutId);
					resultsList.innerHTML = '';
					resultsMap.style.display = 'none';
					clearMarkers();

					if (e.target.value.length < 2) return;

					const query_input_user = e.target.value;

					timeoutId = setTimeout(() => {
						// Get the selected search engine
						const searchEngine = document.querySelector('input[name="searchEngine"]:checked').value;

						let searchUrl;
						if (searchEngine === 'nominatim') {
							// Use Nominatim API
							searchUrl = `https://nominatim.openstreetmap.org/search?q=${query_input_user}&format=json&limit=5&countrycodes=fr`;
						} else {
							// Use Addok API
							searchUrl = `https://demo.addok.xyz/search?q=${query_input_user}&limit=5`;
						}

						fetch(searchUrl)
							.then(response => response.json())
							.then(data => {
								console.log(data);

								resultsList.innerHTML = '';
								const ul = document.createElement('ul');
								ul.classList.add('list-group');
								resultsList.appendChild(ul);

								// This section will be handled in the code below

								// Add "Not found" button
								if (true) {
									const notFoundButton = document.createElement('div');
									notFoundButton.classList.add('mt-3', 'text-center');
									notFoundButton.innerHTML = `
                                    <button id="notFoundButton" class="btn btn-outline-secondary">
                                        <i class="bi bi-search"></i> Je ne trouve pas mon commerce dans ces propositions
                                    </button>
                                `;
									resultsList.appendChild(notFoundButton);

									// Add event listener to the "Not found" button
									document.getElementById('notFoundButton').addEventListener('click', () => {
										// Clear results list
										resultsList.innerHTML = '';
										// Hide map and clear markers
										resultsMap.style.display = 'none';
										clearMarkers();

										// Show form to enter email
										const notFoundForm = document.createElement('div');
										notFoundForm.classList.add('card', 'mt-3');
										notFoundForm.innerHTML = `
                                        <div class="card-header">
                                            <h5>Vous ne trouvez pas votre commerce ?</h5>
                                        </div>
                                        <div class="card-body">
                                            <p>Laissez-nous votre email et nous vous aiderons à ajouter votre commerce.</p>
                                            <form id="notFoundForm">
                                                <div class="mb-3">
                                                    <label for="notFoundEmail" class="form-label">Email</label>
                                                    <input type="email" class="form-control" id="notFoundEmail" required>
                                                </div>
                                                <button type="submit" class="btn btn-primary">Envoyer</button>
                                            </form>
                                        </div>
                                    `;
										resultsList.appendChild(notFoundForm);

										// Add event listener to the form
										document.getElementById('notFoundForm').addEventListener('submit', (e) => {
											e.preventDefault();
											const email = document.getElementById('notFoundEmail').value;
											const query = document.querySelector('#researchShop').value;

											// Try to get the INSEE code from the first search result
											let insee = null;
											if (searchEngine === 'nominatim') {
												if (data.length > 0 && data[0].address && data[0].address.postcode) {
													insee = data[0].address.postcode;
												}
											} else {
												if (data.features && data.features.length > 0) {
													insee = data.features[0].properties.citycode;
												}
											}

											// Create a Demande with the business name and email
											fetch('/api/demande/create', {
												method: 'POST',
												headers: {
													'Content-Type': 'application/json',
												},
												body: JSON.stringify({
													businessName: query,
													insee: insee
												}),
											})
												.then(response => response.json())
												.then(data => {
													if (data.success) {
														const demandeId = data.id;

														// Update the Demande with the email
														fetch(`/api/demande/${demandeId}/email`, {
															method: 'POST',
															headers: {
																'Content-Type': 'application/json',
															},
															body: JSON.stringify({
																email: email
															}),
														})
															.then(response => response.json())
															.then(data => {
																if (data.success) {
																	// Show success message
																	resultsList.innerHTML = `
                                                            <div class="alert alert-success mt-3">
                                                                <i class="bi bi-check-circle"></i> Votre demande a été enregistrée. Nous vous contacterons bientôt.
                                                            </div>
                                                        `;
																} else {
																	alert('Erreur: ' + data.message);
																}
															})
															.catch(error => {
																console.error('Error:', error);
																alert('Une erreur est survenue lors de la mise à jour de la demande.');
															});
													} else {
														alert('Erreur: ' + data.message);
													}
												})
												.catch(error => {
													console.error('Error:', error);
													alert('Une erreur est survenue lors de la création de la demande.');
												});
										});
									});
								}

								// Process the results based on the search engine
								if (searchEngine === 'nominatim') {
									// Show a message if there are no results
									if (data.length === 0) {
										const noResultsMessage = document.createElement('div');
										noResultsMessage.classList.add('alert', 'alert-info', 'mt-3');
										noResultsMessage.innerHTML = `
                                        <i class="bi bi-info-circle"></i> Aucun résultat trouvé pour votre recherche.
                                    `;
										resultsList.appendChild(noResultsMessage);
									} else {
										// Initialize map if we have results
										initMap();
										resultsMap.style.display = 'block';

										// Calculate bounds for the map
										const bounds = new maplibregl.LngLatBounds();

										// Add markers for each result
										data.forEach((result, index) => {
											const lat = parseFloat(result.lat);
											const lon = parseFloat(result.lon);

											// Extend bounds
											bounds.extend([lon, lat]);

											// Create marker with result number
											const marker = new maplibregl.Marker({color: '#007bff'})
												.setLngLat([lon, lat])
												.setPopup(new maplibregl.Popup().setHTML(`
                                                <strong>${result.name || result.display_name}</strong><br>
                                                ${result.address ? result.address.city || '' : ''}
                                            `));

											// Add label with result number
											const el = marker.getElement();
											el.innerHTML = `<div style="position: absolute; top: -30px; left: 7px; background: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; font-weight: bold; border: 2px solid #007bff;">${index + 1}</div>` + el.innerHTML;

											marker.addTo(map);
											markers.push(marker);
										});

										// Fit map to bounds with padding
										if (!bounds.isEmpty()) {
											map.fitBounds(bounds, {padding: 50});
										}
									}

									data.forEach((result, index) => {
										const li = document.createElement('li');
										li.classList.add('list-group-item', 'cursor-pointer');

										// Format the display text based on available properties
										let displayText = result.display_name;
										if (result.name) {
											displayText = result.name;
											if (result.address && result.address.city) {
												displayText += `, ${result.address.city}`;
											}
										}

										// Add result number
										li.innerHTML = `<span class="badge bg-primary me-2">${index + 1}</span> ${displayText}`;

										li.addEventListener('click', () => {
											resultsList.innerHTML = ''; // Cacher la liste
											resultsMap.style.display = 'none'; // Cacher la carte
											clearMarkers(); // Supprimer les marqueurs
											const lat = parseFloat(result.lat);
											const lon = parseFloat(result.lon);
											const query = `[out:json];
                                        (
                                            node["shop"](around:10,${lat},${lon});
                                            node["amenity"](around:10,${lat},${lon});
                                        );
                                        out body;`;

											console.log('result li clicked', result);

											fetch('https://overpass-api.de/api/interpreter', {
												method: 'POST',
												body: query
											})
												.then(response => response.json())
												.then(osmData => {
													console.log('osmData', osmData);
													if (osmData.elements.length > 0) {
														console.log('osmData.elements', osmData.elements);

														const place = osmData.elements[0];
														console.log('place ', place);
														console.log(`https://www.openstreetmap.org/${place.type}/${place.id}`, place.tags);

														// Get INSEE code from result if available
														let insee = null;
														if (result.address && result.address.postcode) {
															insee = result.address.postcode;
														}

														// Create a Demande with the business name
														fetch('/api/demande/create', {
															method: 'POST',
															headers: {
																'Content-Type': 'application/json',
															},
															body: JSON.stringify({
																businessName: `${query_input_user} __ ${place.tags.name}` || displayText,
																insee: insee,
																osmObjectType: place.type,
																osmId: place.id
															}),
														})
															.then(response => response.json())
															.then(data => {
																if (data.success) {
																	const demandeId = data.id;

																	if (place.tags && (place.tags['contact:email'] || place.tags['email'])) {
																		document.querySelector('#proposeLink').classList.remove('d-none');
																		document.querySelector('#proposeMail').classList.add('d-none');
																	} else {
																		document.querySelector('#proposeMail').classList.remove('d-none');
																		document.querySelector('#proposeLink').classList.add('d-none');

																		const emailForm = document.querySelector('#proposeMail form');
																		emailForm.addEventListener('submit', (e) => {
																			e.preventDefault();
																			const email = emailForm.querySelector('#emailInput').value;

																			// Update the Demande with the email
																			fetch(`/api/demande/${demandeId}/email`, {
																				method: 'POST',
																				headers: {
																					'Content-Type': 'application/json',
																				},
																				body: JSON.stringify({
																					email: email
																				}),
																			})
																				.then(response => response.json())
																				.then(data => {
																					if (data.success) {
																						// Redirect to the original route for backward compatibility
																						window.location.href = `/propose-email/${email}/${place.type}/${place.id}`;
																					} else {
																						alert('Erreur: ' + data.message);
																					}
																				})
																				.catch(error => {
																					console.error('Error:', error);
																					alert('Une erreur est survenue lors de la mise à jour de la demande.');
																				});
																		});
																	}
																} else {
																	alert('Erreur: ' + data.message);
																}
															})
															.catch(error => {
																console.error('Error:', error);
																alert('Une erreur est survenue lors de la création de la demande.');
															});
													}
												});
										});

										ul.appendChild(li);
									});
								} else {
									// Process Addok results
									// Show a message if there are no results
									if (data.features.length === 0) {
										const noResultsMessage = document.createElement('div');
										noResultsMessage.classList.add('alert', 'alert-info', 'mt-3');
										noResultsMessage.innerHTML = `
                                        <i class="bi bi-info-circle"></i> Aucun résultat trouvé pour votre recherche.
                                    `;
										resultsList.appendChild(noResultsMessage);
									} else {
										// Initialize map if we have results
										initMap();
										resultsMap.style.display = 'block';

										// Calculate bounds for the map
										const bounds = new maplibregl.LngLatBounds();

										// Add markers for each result
										data.features.forEach((feature, index) => {
											const [lon, lat] = feature.geometry.coordinates;

											// Extend bounds
											bounds.extend([lon, lat]);

											// Create marker with result number
											const marker = new maplibregl.Marker({color: '#007bff'})
												.setLngLat([lon, lat])
												.setPopup(new maplibregl.Popup().setHTML(`
                                                <strong>${feature.properties.name}</strong><br>
                                                ${feature.properties.city || ''}
                                            `));

											// Add label with result number
											const el = marker.getElement();
											el.innerHTML = `<div style="position: absolute; top: -30px; left: 7px; background: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; font-weight: bold; border: 2px solid #007bff;">${index + 1}</div>` + el.innerHTML;

											marker.addTo(map);
											markers.push(marker);
										});

										// Fit map to bounds with padding
										if (!bounds.isEmpty()) {
											map.fitBounds(bounds, {padding: 50});
										}
									}

									data.features.forEach((feature, index) => {
										const li = document.createElement('li');
										li.classList.add('list-group-item', 'cursor-pointer');
										li.innerHTML = `<span class="badge bg-primary me-2">${index + 1}</span> ${feature.properties.name}, ${feature.properties.city}`;

										li.addEventListener('click', () => {
											resultsList.innerHTML = ''; // Cacher la liste
											resultsMap.style.display = 'none'; // Cacher la carte
											clearMarkers(); // Supprimer les marqueurs
											const [lon, lat] = feature.geometry.coordinates;
											const query = `[out:json];
                                        (
                                            node["shop"](around:100,${lat},${lon});
                                            node["amenity"](around:100,${lat},${lon});
                                        );
                                        out body;`;

											console.log('li clicked', li)

											fetch('https://overpass-api.de/api/interpreter', {
												method: 'POST',
												body: query
											})
												.then(response => response.json())
												.then(osmData => {
													console.log('osmData', osmData)
													if (osmData.elements.length > 0) {
														console.log('osmData.elements', osmData.elements)

														const place = osmData.elements[1];
														console.log('place', place)
														console.log(`https://www.openstreetmap.org/${place.type}/${place.id}`, place.tags);


														// Create a Demande with the business name
														fetch('/api/demande/create', {
															method: 'POST',
															headers: {
																'Content-Type': 'application/json',
															},
															body: JSON.stringify({
																businessName: `${query_input_user} __ ${place.tags.name}` || `${feature.properties.name}, ${feature.properties.city}`,
																insee: feature.properties.citycode,
																osmObjectType: place.type,
																osmId: place.id
															}),
														})
															.then(response => response.json())
															.then(data => {
																if (data.success) {
																	const demandeId = data.id;

																	if (place.tags && (place.tags['contact:email'] || place.tags['email'])) {
																		document.querySelector('#proposeLink').classList.remove('d-none');
																		document.querySelector('#proposeMail').classList.add('d-none');
																	} else {
																		document.querySelector('#proposeMail').classList.remove('d-none');
																		document.querySelector('#proposeLink').classList.add('d-none');

																		const emailForm = document.querySelector('#proposeMail form');
																		emailForm.addEventListener('submit', (e) => {
																			e.preventDefault();
																			const email = emailForm.querySelector('#emailInput').value;

																			// Update the Demande with the email
																			fetch(`/api/demande/${demandeId}/email`, {
																				method: 'POST',
																				headers: {
																					'Content-Type': 'application/json',
																				},
																				body: JSON.stringify({
																					email: email
																				}),
																			})
																				.then(response => response.json())
																				.then(data => {
																					if (data.success) {
																						// Redirect to the original route for backward compatibility
																						window.location.href = `/propose-email/${email}/${place.type}/${place.id}`;
																					} else {
																						alert('Erreur: ' + data.message);
																					}
																				})
																				.catch(error => {
																					console.error('Error:', error);
																					alert('Une erreur est survenue lors de la mise à jour de la demande.');
																				});
																		});
																	}
																} else {
																	alert('Erreur: ' + data.message);
																}
															})
															.catch(error => {
																console.error('Error:', error);
																alert('Une erreur est survenue lors de la création de la demande.');
															});
													}
												});
										});

										ul.appendChild(li);
									});
								}
							});
					}, 500);
				});


			});
    </script>
{% endblock %}