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

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

{% block stylesheets %}
    {{ parent() }}
    <link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>
    <style>
        #citiesMap {
            height: 400px;
            width: 100%;
            margin-bottom: 1rem;
        }
    </style>
{% endblock %}

{% block body %}
{% if citiesForMap is not empty %}
    <div id="cities" class="container">

        <div class="alert-info alert">
            Les contributrices et contributeurs aguerris d'OSM peuvent ajouter ici de quoi suivre les évolutions thématiques de complétion dans une ville donnée.
        </div>
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h3><i class="bi bi-geo-alt"></i> Carte des villes disponibles</h3>
                            <p class="mb-0">Cliquez sur un marqueur pour voir les statistiques de la ville</p>
                        </div>
                        <a href="{{ path('app_public_add_city') }}" class="btn btn-success">
                            <i class="bi bi-plus-circle"></i> Ajouter ma ville
                        </a>
                    </div>
                    <div class="card-body p-0">
                        <div class="map-container">
                            <div id="citiesMap"></div>
                            <div class="map-legend">
                                <div class="legend-item">
                                    <div class="legend-color" style="background-color: #28a745;"></div>
                                    <span>Complétion > 80%</span>
                                </div>
                                <div class="legend-item">
                                    <div class="legend-color" style="background-color: #17a2b8;"></div>
                                    <span>Complétion 50-80%</span>
                                </div>
                                <div class="legend-item">
                                    <div class="legend-color" style="background-color: #ffc107;"></div>
                                    <span>Complétion < 50%</span>
                                </div>
                            </div>
                        </div>
                    </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>
    </div>
{% endif %}



{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize the map
            const map = new maplibregl.Map({
                container: 'citiesMap',
                style: 'https://api.maptiler.com/maps/streets/style.json?key={{ maptiler_token }}',
                center: [2.213749, 46.227638], // Center of France
                zoom: 5
            });

            // Add navigation controls
            map.addControl(new maplibregl.NavigationControl());
            let color = '#ffc107'; // Yellow by default
            // Add markers for each city
            {% if citiesForMap is not empty %}
                {% for city in citiesForMap %}
                    {% if city.lat and city.lon %}
                        // Determine marker color based on completion percentage

                        {% if city.completionPercent > 80 %}
                            color = '#28a745'; // Green for high completion
                        {% elseif city.completionPercent > 50 %}
                            color = '#17a2b8'; // Blue for medium completion
                        {% endif %}

                        // Create marker and popup
                        new maplibregl.Marker({color: color})
                            .setLngLat([{{ city.lon }}, {{ city.lat }}])
                            .setPopup(new maplibregl.Popup().setHTML(`
                                <strong>{{ city.name }}</strong><br>
                                Code INSEE: {{ city.zone }}<br>
                                Nombre de lieux: {{ city.placesCount }}<br>
                                Complétion: {{ city.completionPercent }}%<br>
                                <a href="{{ path('app_admin_stats', {'insee_code': city.zone}) }}" class="btn btn-sm btn-primary mt-2">
                                    Voir les statistiques
                                </a>
                            `))
                            .addTo(map);
                    {% endif %}
                {% endfor %}
            {% endif %}

            // Enable the labourage form
            if (typeof enableLabourageForm === 'function') {
                enableLabourageForm();
            } else {
                console.error('enableLabourageForm function not found');
            }
        });
    </script>
{% endblock %}