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

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

{% block stylesheets %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
{% endblock %}

{% block body %}
    <section class="section">
        <div class="container">
            <h2 class="section-title">{{ 'geolocation.heading'|trans|raw }}</h2>
            <div class="title-bar"></div>
            <p class="section-sub">{{ 'geolocation.sub'|trans }}</p>

            <div id="map"></div>

            {% if cases is empty %}
                <p style="color: var(--grey); margin-top: 24px;">{{ 'geolocation.empty'|trans }}</p>
            {% endif %}
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        (function () {
            const ageSuffix = {{ 'geolocation.age_suffix'|trans|json_encode|raw }};
            const map = L.map('map').setView([28.0339, 1.6596], 5);

            L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
                attribution: '&copy; OpenStreetMap &copy; CARTO',
                maxZoom: 18
            }).addTo(map);

            const redIcon = L.divIcon({
                className: '',
                html: '<div style="width:18px;height:18px;background:#e63946;border:3px solid #fff;border-radius:50%;box-shadow:0 0 10px rgba(230,57,70,.9);"></div>',
                iconSize: [18, 18],
                iconAnchor: [9, 9]
            });

            fetch('{{ path('app_geolocation_data') }}')
                .then(function (r) { return r.json(); })
                .then(function (points) {
                    const markers = [];
                    points.forEach(function (p) {
                        const marker = L.marker([p.lat, p.lng], { icon: redIcon }).addTo(map);
                        marker.bindPopup(
                            '<div class="map-popup">' +
                            '<h4>' + p.name + (p.age ? ', ' + p.age + ' ' + ageSuffix : '') + '</h4>' +
                            '<p>📍 ' + p.location + (p.date ? '<br>🗓️ ' + p.date : '') + '</p>' +
                            '</div>'
                        );
                        markers.push(marker);
                    });

                    if (markers.length > 0) {
                        map.fitBounds(L.featureGroup(markers).getBounds().pad(0.3));
                    }
                });
        })();
    </script>
{% endblock %}