{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}Order Locations Map — Admin{% endblock %}
{% block content %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<section class="content-section">
    <div class="content-inner" style="max-width: 1100px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Order Locations Map</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>
        <p style="color: var(--muted); margin-bottom: 16px;">
            {{ point_count }} order location{{ point_count|pluralize }} plotted below — delivery location is captured
            automatically at checkout. Green = delivered, blue = not yet delivered. Use the layers control (top-right
            of the map) to toggle each group.
        </p>

        <div class="admin-stats" style="margin-bottom: 18px;">
            {% for opt in status_options %}
            <div class="admin-stat-card">
                <div class="stat-value">{{ opt.count }}</div>
                <div class="stat-label">{{ opt.label }}</div>
            </div>
            {% endfor %}
        </div>

        <form method="get" class="contact-form-wrap" style="max-width: 100%; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 16px;">
            <div>
                <label style="display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 4px;">From date</label>
                <input type="date" name="date_from" value="{{ date_from }}">
            </div>
            <div>
                <label style="display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 4px;">To date</label>
                <input type="date" name="date_to" value="{{ date_to }}">
            </div>
            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                {% for opt in status_options %}
                <label style="display: flex; align-items: center; gap: 5px; font-weight: normal; font-size: 0.88rem;">
                    <input type="checkbox" name="status" value="{{ opt.key }}" {% if opt.checked %}checked{% endif %}>
                    {{ opt.label }}
                </label>
                {% endfor %}
            </div>
            <button type="submit" class="btn-cta" style="padding: 8px 18px;">Apply filters</button>
            <a href="{% url 'accounts:admin_delivered_map' %}" class="btn-small">Clear</a>
        </form>

        <div id="delivered-map" class="map-container" style="height: 560px;"></div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/map-intelligence.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var points = {{ points_json|safe }};
        var DELIVERED_COLOR = '#2e7d32';
        var ACTIVE_COLOR = '#243D91';

        var map = L.map('delivered-map');
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap contributors',
        }).addTo(map);
        addTrafficLayer(map);
        addWeatherBadge(map, -6.7924, 39.2083);

        var deliveredLayer = L.layerGroup();
        var activeLayer = L.layerGroup();

        points.forEach(function (p) {
            var color = p.is_delivered ? DELIVERED_COLOR : ACTIVE_COLOR;
            var marker = L.circleMarker([p.lat, p.lng], {
                radius: 9,
                color: '#fff',
                weight: 2,
                fillColor: color,
                fillOpacity: 0.9,
            });
            marker.bindTooltip('#' + p.order_id, {
                permanent: true, direction: 'top', offset: [0, -8], className: 'order-dot-badge',
            });
            marker.bindPopup(
                '<strong>Order #' + p.order_id + '</strong><br>' +
                p.customer_label + '<br>' +
                p.status_label + '<br>' +
                (p.address ? p.address + '<br>' : '') +
                (p.date ? p.date + '<br>' : '') +
                '<a href="' + p.track_url + '" target="_blank" rel="noopener">View live route &rarr;</a>'
            );
            (p.is_delivered ? deliveredLayer : activeLayer).addLayer(marker);
        });

        deliveredLayer.addTo(map);
        activeLayer.addTo(map);

        L.control.layers(null, {
            'Delivered': deliveredLayer,
            'Not yet delivered': activeLayer,
        }, { collapsed: false }).addTo(map);

        var allMarkers = [];
        deliveredLayer.eachLayer(function (l) { allMarkers.push(l); });
        activeLayer.eachLayer(function (l) { allMarkers.push(l); });

        if (allMarkers.length) {
            map.fitBounds(L.featureGroup(allMarkers).getBounds(), { padding: [30, 30] });
        } else {
            map.setView([-6.7924, 39.2083], 12);
        }
    });
</script>
{% endblock %}