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

{% block title %}{{ 'display.stats'|trans }}{% 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"></div>
    <div class="card mt-4">
        <h1 class="card-title">Tableau des commerces</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Nom ({{ stats.getPlacesCount() }})</th>
                    <th>Adresse ({{ stats.getAvecAdresse() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Site web ({{ stats.getAvecSite() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Accessibilité ({{ stats.getAvecAccessibilite() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Note ({{ stats.getAvecNote() }} / {{ stats.getPlacesCount() }})</th>
                </tr>
            </thead>
            <tbody>
                {% for commerce in stats.places %}
                    <tr>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">
                        <a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}"> {% if commerce.name |length %} {{ commerce.name |slice(0, 20) }}... {% else %} (lieu sans nom) {% endif %}</a>
                        
                        </td>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">{{ commerce.address }}</td>
                        <td style="background-color: {{ commerce.hasWebsite() ? 'yellowgreen' : 'transparent' }};">{{ commerce.website }}</td>
                        <td style="background-color: {{ commerce.hasWheelchair() ? 'yellowgreen' : 'transparent' }};">{{ commerce.wheelchair }}</td>
                          <td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.note }}</td>      
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script> 
    <script>

    console.log('go faire une carte ');

            const request = `[out:json][timeout:25];
    area["postal_code"="{{ zip_code }}"]->.searchArea;
    (
        nw["amenity"]["cafe|bar|restaurant|library|cinema|fast_food"](area.searchArea);
        nw["shop"](area.searchArea);
        nw["tourism"="museum|hotel|chalet|apartment"](area.searchArea);
        nw["office"](area.searchArea);
    );
    out center;
    >;
    out skel qt;
    `; 


        document.addEventListener('DOMContentLoaded', function() {
            async function fetchland() {

                // Construire la requête Overpass 

                const encodedRequest = encodeURIComponent(request);
                console.log('encodedRequest', encodedRequest);
                const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
                const response = await fetch(overpassUrl);
                const data = await response.json();
                console.log('data', data);
                mapboxgl.accessToken = '{{ mapbox_token }}';
                const map = new mapboxgl.Map({
                        container: 'map',
                        style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
                    
                        zoom: 17
                    }); 
            
                // Ajouter les marqueurs pour chaque point
                
                if (data.elements && data.elements.length > 0) {
                    const firstPoint = data.elements[0];
                    if (firstPoint.lat && firstPoint.lon) {
                        // Centrer la carte sur le premier point
                        map.setCenter([firstPoint.lon, firstPoint.lat]);
                        
                        // Ajouter un marqueur pour le premier point
                        new mapboxgl.Marker()
                            .setLngLat([firstPoint.lon, firstPoint.lat])
                            .setPopup(new mapboxgl.Popup({ offset: 25 })
                                .setHTML(`<h3>${firstPoint.tags?.name || 'Sans nom'}</h3>`))
                            .addTo(map);
                    }
                }

            }


            function colorizeHeaders() {    
                const headers = document.querySelectorAll('th');
                if(headers.length > 0) {
                    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})`;
                        }
                    });
                }
            }

        console.log(request);
        colorizeHeaders();
        fetchland();
        })


    </script> 
{% endblock %}