{% extends 'base.html.twig' %}
{% block title %}Carte des représentants{% endblock %}

{% block body %}
<link rel="stylesheet" href="/leaflet/leaflet.css" />

<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
        <h1>Carte des représentants</h1>
        <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end">
            <div>
                <label for="filter-site" style="display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px">Site</label>
                <select id="filter-site">
                    <option value="">Tous les sites</option>
                    {% for s in sites %}<option value="{{ s.id }}">{{ s.name }}{{ s.city ? ' — ' ~ s.city : '' }}</option>{% endfor %}
                </select>
            </div>
            <div>
                <label for="filter-expertise" style="display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px">Expertise</label>
                <select id="filter-expertise">
                    <option value="">Toutes les expertises</option>
                    {% for e in expertises %}<option value="{{ e.label }}">{{ e.label }}</option>{% endfor %}
                </select>
            </div>
        </div>
    </div>
    {% if missing > 0 %}
    <p style="color:var(--muted);font-size:.85rem;margin-top:8px">{{ missing }} représentant non affiché(s) (site sans ville géolocalisable).</p>
    {% endif %}
</div>

<div class="card" style="padding:0;overflow:hidden">
    <div id="map" style="height:70vh;width:100%"></div>
</div>

<script src="/leaflet/leaflet.js"></script>
<script>
(function () {
    const porteurs = {{ porteurs|json_encode|raw }};

    const map = L.map('map').setView([46.6, 2.5], 6); // centre France
    // Tuiles servies via le NAS (proxy + cache) → fonctionne même sans Internet côté navigateur
    L.tileLayer('/tiles/{z}/{x}/{y}', {
        attribution: '&copy; OpenStreetMap',
        maxZoom: 19,
    }).addTo(map);

    function esc(v) {
        return String(v == null ? '' : v).replace(/[&<>"]/g, function (c) {
            return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];
        });
    }

    // Décalage en spirale pour les porteurs partageant les mêmes coordonnées (même site)
    const seen = {};
    function spread(lat, lng) {
        const key = lat.toFixed(5) + ',' + lng.toFixed(5);
        const n = seen[key] || 0;
        seen[key] = n + 1;
        if (n === 0) return [lat, lng];
        const angle = n * 1.0;            // radians
        const radius = 0.004 * Math.ceil(n / 6); // ~400 m par couronne
        return [lat + radius * Math.cos(angle), lng + radius * Math.sin(angle)];
    }

    const markers = [];
    porteurs.forEach(function (p) {
        const pos = spread(p.lat, p.lng);
        const marker = L.marker(pos);

        const expertises = (p.expertises && p.expertises.length)
            ? p.expertises.map(function (e) { return esc(e.label) + ' <em>(' + esc(e.level) + ')</em>'; }).join(', ')
            : '<span style="color:#888">aucune</span>';
        const perimetres = (p.perimetres && p.perimetres.length)
            ? p.perimetres.map(esc).join(', ')
            : '<span style="color:#888">aucun</span>';
        const loc = esc(p.siteName) + (p.city ? ' — ' + esc(p.city) : '') + (p.department ? ' (' + esc(p.department) + ')' : '');

        const fiche =
            '<div style="min-width:200px">'
            + '<div style="font-weight:600;color:#304899;margin-bottom:4px">' + esc(p.name) + '</div>'
            + '<div style="margin-bottom:2px">📍 ' + loc + '</div>'
            + '<div style="margin-bottom:2px">✉ <a href="mailto:' + esc(p.email) + '">' + esc(p.email) + '</a></div>'
            + '<div style="margin-bottom:2px"><strong>Etablissement :</strong> ' + perimetres + '</div>'
            + '<div><strong>Expertises :</strong> ' + expertises + '</div>'
            + '</div>';

        // Fiche au survol (tooltip) + au clic (popup, pratique sur mobile)
        marker.bindTooltip(fiche, {direction: 'top', sticky: true, opacity: 1, className: 'rp-tooltip'});
        marker.bindPopup(fiche);

        marker._rp = p;
        markers.push(marker);
        marker.addTo(map);
    });

    function applyFilters() {
        const site = document.getElementById('filter-site').value;
        const exp = document.getElementById('filter-expertise').value;

        markers.forEach(function (marker) {
            const p = marker._rp;
            const okSite = !site || String(p.siteId) === site;
            const okExp = !exp || (p.expertises || []).some(function (e) { return e.label === exp; });
            if (okSite && okExp) {
                if (!map.hasLayer(marker)) marker.addTo(map);
            } else {
                if (map.hasLayer(marker)) map.removeLayer(marker);
            }
        });
    }

    document.getElementById('filter-site').addEventListener('change', applyFilters);
    document.getElementById('filter-expertise').addEventListener('change', applyFilters);
})();
</script>

<style>
.rp-tooltip { font-size: .85rem; line-height: 1.35; }
</style>
{% endblock %}