@extends('layouts.app')
@section('title', 'Rastreio da Entrega')
@section('header', 'Rastreio em tempo real')

@section('content')
<div class="grid gap-4">
  <div class="bg-white rounded-xl shadow p-4">
    <div class="text-sm text-gray-600">Entrega: <b>{{ $delivery->code }}</b> | Status: <span id="status">{{ $delivery->status }}</span></div>
    <div id="map" style="height: 420px;" class="rounded-xl mt-3"></div>
  </div>
</div>

<script>
  const token = @json($token);

  const map = L.map('map').setView([{{ $delivery->pickup_lat }}, {{ $delivery->pickup_lng }}], 14);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);

  L.marker([{{ $delivery->pickup_lat }}, {{ $delivery->pickup_lng }}]).addTo(map).bindPopup('Coleta');
  L.marker([{{ $delivery->dropoff_lat }}, {{ $delivery->dropoff_lng }}]).addTo(map).bindPopup('Entrega');

  let riderMarker = null;

  async function refresh() {
    const res = await fetch(`/t/${token}/latest`, { headers: { 'Accept':'application/json' }});
    if (!res.ok) return;
    const data = await res.json().catch(()=>null);
    if (!data) return;

    document.getElementById('status').innerText = data.status;

    if (data.last_location) {
      const latlng = [data.last_location.lat, data.last_location.lng];
      if (!riderMarker) {
        riderMarker = L.marker(latlng).addTo(map).bindPopup('Entregador');
        map.panTo(latlng);
      } else {
        riderMarker.setLatLng(latlng);
      }
    }
  }

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