{% extends 'base.html' %}
{% load static_v %}
{% block title %}{{ t.fleet_track_driver_title }}{{ driver_name }} — PickkerMarket{% 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: 900px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">{{ company.company_name }}</span>
                <h1>{{ t.fleet_track_driver_title }}{{ driver_name }}</h1>
            </div>
            <a href="{% url 'market:fleet_dashboard' %}" class="btn-small">&larr; {{ t.fleet_track_back }}</a>
        </div>
        <p style="color: var(--muted); margin-bottom: 16px;">
            {{ t.order_hash_prefix }}{{ order.id }} &middot; {{ t.fleet_track_deliver_to }} {{ order.delivery_address }}
            &middot; <span class="status-badge status-{{ order.status }}" id="order-status-badge">{{ order.status|title }}</span>
        </p>

        <div id="track-map" class="map-container" style="height: 420px;"></div>

        <div class="cart-summary" style="margin-left: 0; max-width: 100%;">
            <div class="cart-summary-row">
                <span>{{ t.fleet_track_distance_remaining }}</span>
                <span id="live-distance">{{ route_distance_km|default:'—' }} km</span>
            </div>
            <div class="cart-summary-row">
                <span>{{ t.fleet_track_eta }}</span>
                <span id="live-eta">{% if route_duration_min %}~{{ route_duration_min|floatformat:0 }} min{% else %}—{% endif %}</span>
            </div>
            <div class="cart-summary-row">
                <span>{{ t.fleet_track_picking_time }}</span>
                <span>{% if picking_duration_min %}{{ picking_duration_min }} min{% else %}—{% endif %}</span>
            </div>
        </div>

        <p id="track-status" style="color: var(--muted); font-size: 0.85rem; margin-top: 10px;">{{ t.fleet_track_waiting }}</p>
        <div id="delivered-banner" class="order-card" style="display: none; text-align: center; margin-top: 16px;">
            <span class="status-badge status-delivered">{{ t.tracker_delivered }}</span>
            <p style="margin-top: 8px;">{{ t.fleet_track_delivered_note }}</p>
        </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/vehicle-icons.js' %}"></script>
<script src="{% static_v 'js/map-intelligence.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var map = L.map('track-map');
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap contributors',
        }).addTo(map);
        addTrafficLayer(map);
        addWeatherBadge(map, {{ order.delivery_lat }}, {{ order.delivery_lng }});

        var destLatLng = [{{ order.delivery_lat }}, {{ order.delivery_lng }}];
        L.marker(destLatLng, { icon: circlePointIcon({}) }).addTo(map)
            .bindTooltip('{{ t.order_hash_prefix|escapejs }}{{ order.id }}', { permanent: true, direction: 'top', offset: [0, -14], className: 'picker-tag' })
            .bindPopup('{{ t.fleet_track_destination_popup|escapejs }}');

        var vehicleType = '{{ picker_vehicle_type|default:"car"|escapejs }}';
        var truckEmoji = {% if picker_truck_icon %}'{{ picker_truck_icon|escapejs }}'{% else %}null{% endif %};
        var truckIconUrl = {% if picker_truck_icon_url %}'{{ picker_truck_icon_url|escapejs }}'{% else %}null{% endif %};
        function carIcon(bearingDeg) {
            return vehicleMarkerIcon(vehicleType, { bearingDeg: bearingDeg || 0, truckEmoji: truckEmoji, iconUrl: truckIconUrl });
        }
        function bearingBetween(lat1, lng1, lat2, lng2) {
            var toRad = function (d) { return d * Math.PI / 180; };
            var toDeg = function (r) { return r * 180 / Math.PI; };
            var y = Math.sin(toRad(lng2 - lng1)) * Math.cos(toRad(lat2));
            var x = Math.cos(toRad(lat1)) * Math.sin(toRad(lat2)) -
                Math.sin(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.cos(toRad(lng2 - lng1));
            return (toDeg(Math.atan2(y, x)) + 360) % 360;
        }

        {% if start_lat %}
        var pickerMarker = L.marker([{{ start_lat }}, {{ start_lng }}], { icon: carIcon(0) }).addTo(map).bindPopup('{{ driver_name|default:t.fleet_track_driver_popup|escapejs }}');
        {% else %}
        var pickerMarker = null;
        {% endif %}

        var routeLine = null;
        function drawRoute(geometry, pickerLatLng) {
            if (routeLine) {
                map.removeLayer(routeLine);
                routeLine = null;
            }
            if (geometry) {
                routeLine = L.geoJSON(geometry, { style: { color: '#1c3fd6', weight: 5, opacity: 0.8 } }).addTo(map);
                map.fitBounds(routeLine.getBounds(), { padding: [30, 30] });
            } else if (pickerLatLng) {
                routeLine = L.polyline([pickerLatLng, destLatLng], { color: '#1c3fd6', weight: 3, dashArray: '6 8' }).addTo(map);
                map.fitBounds(L.latLngBounds([pickerLatLng, destLatLng]), { padding: [30, 30] });
            }
        }

        {% if start_lat %}
        drawRoute({% if route_geometry_json %}{{ route_geometry_json|safe }}{% else %}null{% endif %}, [{{ start_lat }}, {{ start_lng }}]);
        {% else %}
        map.setView(destLatLng, 13);
        {% endif %}

        var statusEl = document.getElementById('track-status');
        var statusBadge = document.getElementById('order-status-badge');
        var deliveredBanner = document.getElementById('delivered-banner');
        var distanceEl = document.getElementById('live-distance');
        var etaEl = document.getElementById('live-eta');
        var dataUrl = '{% url "market:fleet_track_driver_data" driver_id %}';
        var stopped = false;

        function poll() {
            if (stopped) return;
            fetch(dataUrl)
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (data.status_label) {
                        statusBadge.textContent = data.status_label;
                        statusBadge.className = 'status-badge status-' + data.status;
                    }

                    if (data.location) {
                        var pos = [data.location.lat, data.location.lng];
                        var bearing = pickerMarker ? bearingBetween(pickerMarker.getLatLng().lat, pickerMarker.getLatLng().lng, pos[0], pos[1]) : 0;
                        if (pickerMarker) {
                            pickerMarker.setIcon(carIcon(bearing));
                            pickerMarker.setLatLng(pos);
                        } else {
                            pickerMarker = L.marker(pos, { icon: carIcon(0) }).addTo(map).bindPopup('{{ driver_name|default:t.fleet_track_driver_popup|escapejs }}');
                        }
                        drawRoute(data.route ? data.route.geometry : null, pos);
                        if (data.route) {
                            distanceEl.textContent = data.route.distance_km + ' km';
                            etaEl.textContent = data.route.duration_min ? ('~' + Math.round(data.route.duration_min) + ' min') : '—';
                        }
                        statusEl.textContent = '{{ t.fleet_track_live|escapejs }}';
                    }

                    if (data.delivered) {
                        deliveredBanner.style.display = 'block';
                        statusEl.textContent = '{{ t.fleet_track_stopped|escapejs }}';
                        stopped = true;
                        return;
                    }
                })
                .catch(function () {});
        }

        poll();
        var pollTimer = setInterval(poll, 8000);
        window.addEventListener('beforeunload', function () { clearInterval(pollTimer); });
    });
</script>
{% endblock %}