{% 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 id="stats_bubble"></div>
            <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>
            {% set sorted_stats = stats|sort((a, b) => a.zone <=> b.zone) %}
            {% for stat in sorted_stats %}


                {% if stat.zone != 'undefined' and stat.zone matches '/^\\d+$/' %}
                    <a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}"
                       class="list-group-item list-group-item-action d-flex p-4 rounded-3 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 flex-column">
                            <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>
                {% endif %}
            {% endfor %}
            {% include 'public/labourage-form.html.twig' %}
        </div>
    </div>
{% endblock %}

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

    <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);
            });

            function displayStatsBubble() {
                const statsBubble = document.querySelector('#stats_bubble');

            }

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