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

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

{% block stylesheets %}
    {{ parent() }}
    <link href='{{ asset('js/maplibre/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 }}
            {{ stats.name }}
        </p>
        <a href="{{ path('app_admin_labourer', {'zip_code': stats.zone}) }}" class="btn btn-primary" id="labourer">Labourer les mises à jour</a>
        <div class="row">
            <div class="col-md-3 col-12">
                {{ stats.getCompletionPercent() }} % complété sur les critères donnés.
                </div>
                <div class="col-md-3 col-12">
                <i class="bi bi-building"></i> {{ stats.getPlacesCount() }} commerces dans la zone.
                </div>
                <div class="col-md-3 col-12">
                <i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} commerces avec horaires.
                </div>
                <div class="col-md-3 col-12">
                    <i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} commerces avec adresse.
                </div>
                <div class="col-md-3 col-12">
                    <i class="bi bi-globe"></i> {{ stats.getAvecSite() }} commerces avec site web renseigné.
                </div>
                <div class="col-md-3 col-12">
                    <i class="bi bi-arrow-up-right"></i>
                    {{ stats.getAvecAccessibilite() }} commerces avec accessibilité PMR renseignée.
                </div>
                <div class="col-md-3 col-12">
                    <i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
                </div>
            </div> 
   
    <div id="map" style="height: 400px;"></div>

    {# <div id="query" style="height: 400px;"> #}
    {# <pre>
    {{query_places|raw}}
    </pre> #}
    </div>
    <div class="card mt-4">
        <h1 class="card-title">Tableau des {{ stats.getPlacesCount() }} lieux</h1>
        <a href="{{ path('app_admin_export_csv', {'zip_code': stats.zone}) }}" class="btn btn-primary">Exporter en CSV</a>
        <table class="table table-bordered table-striped table-hover table-responsive">
            {% include 'admin/stats/table-head.html.twig' %}
            <tbody>
                {% for commerce in stats.places %}
                    {% include 'admin/stats/row.html.twig' %}
                {% endfor %}
            </tbody>
        </table>
    </div>

    <h2>requête overpass</h2>
    <pre>
    {{query_places|raw}}
    </pre>
     </div>
</div>

<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
<script>
    const request = `{{query_places|raw}}`; 
    const zip_code = `{{stats.zone}}`;

    async function fetchland() {
        // Requête pour obtenir le contour administratif
        const boundaryQuery = `[out:json][timeout:25];
area["postal_code"="${zip_code}"]->.searchArea;
(
    relation["boundary"="postal_code"]["postal_code"="${zip_code}"](area.searchArea);
);
out body;
>;
out skel qt;`;

        const encodedBoundaryRequest = encodeURIComponent(boundaryQuery);
        const boundaryResponse = await fetch(`https://overpass-api.de/api/interpreter?data=${encodedBoundaryRequest}`);
        const boundaryData = await boundaryResponse.json();

        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', () => {
            // Ajouter le contour administratif
            if (boundaryData.elements && boundaryData.elements.length > 0) {
                const boundary = boundaryData.elements[0];
                if (boundary.members) {
                    const coordinates = boundary.members.map(member => {
                        if (member.type === 'node') {
                            return [member.lon, member.lat];
                        }
                    }).filter(coord => coord);

                    map.addSource('boundary', {
                        'type': 'geojson',
                        'data': {
                            'type': 'Feature',
                            'geometry': {
                                'type': 'Polygon',
                                'coordinates': [coordinates]
                            }
                        }
                    });

                    map.addLayer({
                        'id': 'boundary-layer',
                        'type': 'fill',
                        'source': 'boundary',
                        'paint': {
                            'fill-color': '#088',
                            'fill-opacity': 0.1,
                            'fill-outline-color': '#000'
                        }
                    });
                }
            }

            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';
                    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.textContent = element.tags?.name || '(Sans nom)';
                    el.appendChild(nameDiv);
                     

                    new maplibregl.Marker(el)
                        .setLngLat([element.lon, element.lat])
                        .setPopup(new maplibregl.Popup({ 
                            offset: 25,
                            anchor: 'bottom'
                        })
                            .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 %}