{% extends "admin/master.html" %}
{% block body %}
    <h2 class="page-header">Map <div class="pull-right"><a href="/admin/map/?mode=new" class="btn btn-danger btn-sm">New</a> <a href="/admin/map/" class="btn btn-success btn-sm">All</a></div></h2>
    <div id="map" style="width: 100%; height: 800px"></div>
{% endblock %}

{% block head_css %}{{ super() }}
<link href="{{ url_for('static', filename='css/leaflet.css') }}" rel="stylesheet">
{% endblock %}

{% block tail_js %}{{ super() }}
<script src="{{ url_for('static', filename='js/leaflet.js') }}"></script>
<script>
function e(unsafe) {
    return String(unsafe)
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

const mapdata = {{ mapdata|tojson }};
const focusitem = {{ focus|tojson }};
const map = L.map('map');

let locationSet = false;

L.Icon.Default.imagePath = '/static/images/';

const status_colors = {
    'fulfilled': '#00ff00',
    'delegated': '#0000ff',
    'new': '#ff0000',
    'intransit': '#ff5500',
};

for (const loc of mapdata) {
    const r1 = (Math.random() - 0.5) * 0.001;
    const r2 = (Math.random() - 0.5) * 0.001;

    const marker = L.circleMarker([loc.shipping_latitude + r1, loc.shipping_longitude + r2], {
        color: status_colors[loc.status] || '#555555',
        stroke: loc.id == focusitem,
        fillOpacity: 0.4,
    }).addTo(map);
    marker.bindPopup(`<b>[${e(loc.id)}]</b> <a href="/admin/faceshieldrequest/edit/?id=${e(loc.id)}">${e(loc.entity_info)}</a><br /><b>Handling orga:</b> ${e(loc.handling_orga)}<br /><b>Status:</b> ${e(loc.status)}<br/><b>Extra:</b> ${e(loc.extra||'')}<br/><b>Remarks:</b> ${e(loc.remarks||'')}<br/><b>Full required:</b> ${e(loc.faceshield_full_required)}`);
    if (loc.id == focusitem) {
        map.setView([loc.shipping_latitude, loc.shipping_longitude], 10);
        marker.openPopup();
        locationSet = true;
    }
}

if (!locationSet) {
    map.setView([51.759445, 19.457216], 7);
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
{% endblock %}