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

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

{% block stylesheets %}
    {{ parent() }}
     
    <style>
        
    </style>
{% endblock %}

{% block body %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">



        <h1>
        <i class="bi bi-shop"></i> Mon Commerce OSM
        </h1>
        <p class="mt-4 p-4">
            Bonjour, ce site permet de modifier les informations de votre commerce sur OpenStreetMap afin de gagner en visibilité sur des milliers de sites web à la fois en une minute, c'est gratuit et sans engagement.
            <br>Nous sommes bénévoles dans une association à but non lucratif.
            <br>Nous vous enverrons un lien unique pour cela par email, et si vous en avez besoin, nous pouvons vous aider.
        </p>
        <p>
        
        
        <div class="row">
          <div class="col-12">
          <label class="label" for="researchShop"><i class="bi bi-search bi-2x"></i> Rechercher un commerce, écrivez son nom et la ville
              </label>
               <input class="form-control" type="text" id="researchShop" placeholder="Mon commerce, Paris">
          
          </div>
        </div>  
        
        <div id="resultsList"></div>
        <div id="proposeLink" class="d-none"></div>
        <div id="proposeMail" class="d-none">
        
        <input type="email" id="emailInput" class="form-control" placeholder="mon_email_de_commerce@exemple.com">
        <button type="submit" class="btn btn-primary p-4 d-block"> <i class="bi bi-envelope"></i> Envoyer</button>
        </div>
        <div id="emailForm"></div>

        </div>
    </div>
</div>
<script>
    // 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
    document.querySelector('#proposeLink').innerHTML = proposeLinkHtml;
    document.querySelector('#proposeMail').innerHTML = proposeMailHtml;

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

        let timeoutId;
        searchInput.addEventListener('input', function(e) {
            clearTimeout(timeoutId);
            resultsList.innerHTML = '';
            
            if (e.target.value.length < 3) return;

            timeoutId = setTimeout(() => {
                fetch(`https://demo.addok.xyz/search?q=${e.target.value}&limit=5`)
                    .then(response => response.json())
                    .then(data => {
                        resultsList.innerHTML = '';
                        const ul = document.createElement('ul');
                        ul.classList.add('list-group');
                        resultsList.appendChild(ul);
                        
                        data.features.forEach(feature => {
                            const li = document.createElement('li');
                            li.classList.add('list-group-item', 'cursor-pointer');
                            li.textContent = `${feature.properties.name}, ${feature.properties.city}`;
                            
                            li.addEventListener('click', () => {
                                resultsList.innerHTML = ''; // Cacher la liste
                                const [lon, lat] = feature.geometry.coordinates;
                                const query = `[out:json];
                                    (
                                        node["shop"](around:100,${lat},${lon});
                                        node["amenity"](around:100,${lat},${lon});
                                    );
                                    out body;`;
                                
                                fetch('https://overpass-api.de/api/interpreter', {
                                    method: 'POST',
                                    body: query
                                })
                                .then(response => response.json())
                                .then(osmData => {
                                    if (osmData.elements.length > 0) {
                                        const place = osmData.elements[0];
                                        console.log(`https://www.openstreetmap.org/${place.type}/${place.id}` , place.tags);


                                        
                                        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;
                                                window.location.href = `/propose-email/${email}/${place.type}/${place.id}`;
                                            });
                                        }
                                    }
                                });
                            });
                            
                            ul.appendChild(li);
                        });
                    });
            }, 500);
        });
    });
</script>
{% endblock %}