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

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

{% block stylesheets %}
    {{ parent() }}
    <link href='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.css' rel='stylesheet' />
{% endblock %}

{% block body %}
<div class="container">
    <div class="mt-4 p-4">
        <h1 class="title">{{ 'display.stats'|trans }}</h1>
        <p>
            {{ stats.zone }}
        </p>
         {{ stats.getCompletionPercent() }} % complété sur les critères donnés.
         <br>
         <i class="bi bi-building"></i> {{ stats.getPlacesCount() }} commerces dans la zone.
         <br>
         <i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} commerces avec horaires.
         <br>
         <i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} commerces avec adresse.
         <br>
         <i class="bi bi-globe"></i> {{ stats.getAvecSite() }} commerces avec site web renseigné.
         <br>
         <i class="bi bi-wheelchair"></i> {{ stats.getAvecAccessibilite() }} commerces avec accessibilité renseignée.
         <br>
         <i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
         <br>
    </div>
    <div id="map" style="height: 400px;"></div>
    <div class="card mt-4">
        <h1 class="card-title">Tableau des lieux</h1>
        <table class="table table-bordered">
            {% include 'admin/stats/table-head.html.twig' %}
            <tbody>
                {% for commerce in stats.places %}
                    {% include 'admin/stats/row.html.twig' %}
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
<script>
    const request = `[out:json][timeout:25];
    area["postal_code"="{{ zip_code }}"]->.searchArea;
    (
        nw["amenity"]["cafe|bar|restaurant|library|cinema|fast_food"]["name"~"."](area.searchArea);
        nw["shop"]["name"~"."](area.searchArea);
        nw["tourism"="museum|hotel|chalet|apartment"]["name"~"."](area.searchArea);
        nw["office"]["name"~"."](area.searchArea);
    );
    out center;
    >;
    out skel qt;
    `; 

    async function fetchland() {
        const encodedRequest = encodeURIComponent(request);
        const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
        const response = await fetch(overpassUrl);
        const data = await response.json();

        const map = new maplibregl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
            center: [2.3488, 48.8534],
            zoom: 12
        });

        map.on('load', () => {
            console.log('map chargé',data.elements);
            data.elements.forEach(element => {
                if(element.tags){

                console.log('element', element.tags['name'] , element);
                }

                if (element.lat && element.lon && element.tags && element.tags['name']) {
                    
                    const el = document.createElement('div');
                    el.className = 'marker';
                    el.style.width = '20px';
                    el.style.height = '20px';
                    el.style.borderRadius = '50%';
                    el.style.backgroundColor = '#ff0000';
                    let tagstable = '<table class="table table-bordered"><tr><th>Clé</th><th>Valeur</th></tr>';
                    if (element.tags) {
                        for (const tag in element.tags) {
                            tagstable += `<tr><td>${tag}</td><td>${element.tags[tag]}</td></tr>`;
                        }
                    }
                    tagstable += '</table>';

                    // Créer un élément div pour le texte du nom
                    const nameDiv = document.createElement('div');
                    nameDiv.className = 'marker-name';
                    nameDiv.style.position = 'absolute';
                    nameDiv.style.backgroundColor = 'white';
                    nameDiv.style.padding = '2px 5px';
                    nameDiv.style.borderRadius = '3px';
                    nameDiv.style.fontSize = '12px';
                    nameDiv.style.whiteSpace = 'nowrap';
                    nameDiv.style.transform = 'translate(-50%, -150%)';
                    nameDiv.textContent = element.tags?.name || 'Sans nom';
                    el.appendChild(nameDiv);

                    new maplibregl.Marker(el)
                        .setLngLat([element.lon, element.lat])
                        .setPopup(new maplibregl.Popup({ offset: 25 })
                            .setHTML(
                                `<a href="/admin/placeType/${element.type}/${element.id}" ><h3>${element.tags?.name || 'Sans nom'}</h3></a> <br><a href="https://openstreetmap.org/${element.type}/${element.id}" target="_blank">OSM</a> ${tagstable}`
                                )
                                )
                        .addTo(map);
                }
            });
        });

        // Calculer les limites (bounds) à partir des marqueurs
        const bounds = new maplibregl.LngLatBounds();
        data.elements.forEach(element => {
            if (element.lat && element.lon) {
                bounds.extend([element.lon, element.lat]);
            }
        });

        // Centrer et zoomer la carte pour inclure tous les marqueurs
        if (!bounds.isEmpty()) {
            map.fitBounds(bounds, {
                padding: 50 // Ajoute une marge autour des marqueurs
            });
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const headers = document.querySelectorAll('th');
        headers.forEach(header => {
            const text = header.textContent;
            const match = text.match(/\((\d+)\s*\/\s*(\d+)\)/);
            if (match) {
                const [_, completed, total] = match;
                const ratio = completed / total;
                const alpha = ratio.toFixed(2);
                header.style.backgroundColor = `rgba(154, 205, 50, ${alpha})`;
            }
        });

        fetchland();
 
        sortTable();
    });
</script>
{% endblock %}