@extends('layouts.app')
@section('title','Entrega')
@section('header','Empresa • Detalhe da entrega')

@section('content')
<div class="grid gap-4">
  <div class="bg-white rounded-xl shadow p-4">
    <div class="text-sm text-gray-600">Entrega ID: <b>{{ $delivery->id }}</b></div>
    <pre id="info" class="bg-gray-100 p-3 rounded text-sm mt-2 overflow-auto">Carregando...</pre>
    <div id="tracking" class="text-sm mt-2"></div>
  </div>

  <div class="bg-white rounded-xl shadow p-4">
    <div class="font-semibold mb-2">Mapa (posição do entregador)</div>
    <div id="map" style="height: 420px" class="rounded-xl"></div>
  </div>

  <div class="bg-white rounded-xl shadow p-4">
    <div class="font-semibold mb-2">Prova de entrega</div>
    <div id="proofArea" class="text-sm text-gray-600">—</div>
  </div>

  <div class="bg-white rounded-xl shadow p-4">
    <div class="font-semibold mb-2">Avaliar entregador</div>
    <div class="flex gap-2 items-center">
      <select id="stars" class="border rounded p-2">
        <option value="5">5</option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option>
      </select>
      <input id="comment" class="border rounded p-2 flex-1" placeholder="Comentário (opcional)">
      <button class="px-4 py-2 rounded bg-black text-white" onclick="review()">Enviar</button>
    </div>
    <div id="msg" class="text-sm text-gray-600 mt-2"></div>
  </div>
</div>

<script>
  const deliveryId = {{ (int)$delivery->id }};

  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);
  let riderMarker = null;

  async function load() {
    const data = await api(`/json/company/deliveries/${deliveryId}`);
    info.textContent = JSON.stringify(data, null, 2);

    if (data.delivery?.tracking_token) {
      const trackingUrl = `/t/${data.delivery.tracking_token}`;
      tracking.innerHTML = `Link de rastreio: <a class="underline" target="_blank" href="${trackingUrl}">${trackingUrl}</a>`;
    }

    if (data.proof?.photo_path) {
      proofArea.innerHTML = `<a class="underline" target="_blank" href="/storage/${data.proof.photo_path}">Ver foto</a>`;
    } else {
      proofArea.textContent = 'Sem prova enviada.';
    }

    const rider = data.rider;
    if (rider && rider.last_lat && rider.last_lng) {
      const ll = [parseFloat(rider.last_lat), parseFloat(rider.last_lng)];
      if (!riderMarker) riderMarker = L.marker(ll).addTo(map).bindPopup('Entregador');
      riderMarker.setLatLng(ll);
      map.panTo(ll);
    }
  }

  async function review() {
    msg.innerText = 'Enviando...';
    try {
      await api(`/json/company/deliveries/${deliveryId}/review`, {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ stars: parseInt(stars.value), comment: comment.value })
      });
      msg.innerText = '✅ Avaliação enviada!';
      await load();
    } catch (e) {
      msg.innerText = '❌ Não foi possível avaliar.';
    }
  }

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