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

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

{% block stylesheets %}
    {{ parent() }}
     
    <style>
        .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;
        }
    </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>

            <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 class="row city-list ">
    
    <div class="mt-5">
        <h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
        <p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre ville grâce à OpenStreetMap</p>
                
    </div>
            
    {% for stat in stats %}
        <a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            <div class="d-flex flex-column">
                <span class="zone">{{ stat.zone }}</span>
                <span class="name">{{ stat.name }}</span>
            </div>
            <div class="d-flex">
                <span class="badge bg-primary rounded-pill">{{ stat.placesCount }} lieux</span>
                <span class="badge  rounded-pill completion {%  if stat.completionPercent > 80 %}bg-success{% else %}bg-info{% endif %}"  >{{ stat.completionPercent }}%</span>
            </div>
        </a>
    {% endfor %}
                            
              
              
    </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 %}

{% block javascripts %}
    {{ parent() }}
    <script type="module">
        import { adjustListGroupFontSize } from '{{ asset('js/utils.js') }}';
        document.addEventListener('DOMContentLoaded', function() {
            adjustListGroupFontSize('.list-group-item');
        });
    </script>
{% endblock %}