@extends('layouts.app')
@section('title','Mapa Ao Vivo')
@section('header','Admin • Entregas ativas')

@section('content')
<div class="bg-white rounded-xl shadow p-4">
  <div class="text-sm text-gray-600 mb-2">Atualiza a cada 5s.</div>
  <div id="map" style="height: 520px" class="rounded-xl"></div>
</div>

<script>
  const map = L.map('map').setView([-3.7319, -38.5267], 12);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);

  const markers = new Map();

  async function refresh() {
    const data = await api('/json/admin/deliveries/active/map');

    const seen = new Set();
    (data.items || []).forEach(item => {
      const id = item.delivery_id;
      seen.add(id);
      if (!item.last_location) return;

      const ll = [item.last_location.lat, item.last_location.lng];
      const label = `${item.code} • ${item.status}` + (item.rider ? ` • ${item.rider.name}` : '');

      if (!markers.has(id)) {
        markers.set(id, L.marker(ll).addTo(map).bindPopup(label));
      } else {
        markers.get(id).setLatLng(ll).setPopupContent(label);
      }
    });

    for (const [id, m] of markers.entries()) {
      if (!seen.has(id)) { map.removeLayer(m); markers.delete(id); }
    }
  }

  refresh();
  setInterval(refresh, 5000);
</script>
@endsection