@extends('layouts.app')
@section('title','Nova Entrega')
@section('header','Empresa • Nova Entrega')

@section('content')
<div class="bg-white rounded-xl shadow p-4">
  <div class="grid gap-3">
    <div class="grid md:grid-cols-2 gap-3">
      <div>
        <label class="text-sm text-gray-600">Endereço de Coleta</label>
        <input id="pickup_address" class="w-full border rounded p-2" placeholder="Rua, número, bairro...">
      </div>
      <div>
        <label class="text-sm text-gray-600">Endereço de Entrega</label>
        <input id="dropoff_address" class="w-full border rounded p-2" placeholder="Rua, número, bairro...">
      </div>
    </div>

    <div class="grid md:grid-cols-4 gap-3">
      <div><label class="text-sm text-gray-600">Pickup Lat</label><input id="pickup_lat" class="w-full border rounded p-2" placeholder="-3.7"></div>
      <div><label class="text-sm text-gray-600">Pickup Lng</label><input id="pickup_lng" class="w-full border rounded p-2" placeholder="-38.5"></div>
      <div><label class="text-sm text-gray-600">Dropoff Lat</label><input id="dropoff_lat" class="w-full border rounded p-2"></div>
      <div><label class="text-sm text-gray-600">Dropoff Lng</label><input id="dropoff_lng" class="w-full border rounded p-2"></div>
    </div>

    <div class="grid md:grid-cols-2 gap-3">
      <div>
        <label class="text-sm text-gray-600">Valor total (R$)</label>
        <input id="price_total" class="w-full border rounded p-2" placeholder="15.00">
      </div>
      <div>
        <label class="text-sm text-gray-600">Observações</label>
        <input id="notes" class="w-full border rounded p-2" placeholder="Ex: Retirar no balcão...">
      </div>
    </div>

    <div class="flex gap-2">
      <button id="btnCreate" class="px-4 py-2 rounded bg-black text-white">Criar solicitação</button>
      <div id="msg" class="text-sm text-gray-600"></div>
    </div>

    <div id="map" style="height: 380px" class="rounded-xl"></div>
  </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);

  let pickupMarker = null, dropoffMarker = null;

  function setMarker(which, lat, lng, label) {
    const ll = [parseFloat(lat), parseFloat(lng)];
    if (which === 'pickup') {
      if (!pickupMarker) pickupMarker = L.marker(ll).addTo(map).bindPopup(label);
      pickupMarker.setLatLng(ll);
    } else {
      if (!dropoffMarker) dropoffMarker = L.marker(ll).addTo(map).bindPopup(label);
      dropoffMarker.setLatLng(ll);
    }
    map.panTo(ll);
  }

  ['pickup_lat','pickup_lng'].forEach(id => document.getElementById(id).addEventListener('change', () => {
    const lat = pickup_lat.value, lng = pickup_lng.value;
    if (lat && lng) setMarker('pickup', lat, lng, 'Coleta');
  }));

  ['dropoff_lat','dropoff_lng'].forEach(id => document.getElementById(id).addEventListener('change', () => {
    const lat = dropoff_lat.value, lng = dropoff_lng.value;
    if (lat && lng) setMarker('dropoff', lat, lng, 'Entrega');
  }));

  btnCreate.onclick = async () => {
    msg.innerText = 'Criando...';
    try {
      const payload = {
        pickup_address: pickup_address.value,
        pickup_lat: pickup_lat.value,
        pickup_lng: pickup_lng.value,
        dropoff_address: dropoff_address.value,
        dropoff_lat: dropoff_lat.value,
        dropoff_lng: dropoff_lng.value,
        notes: notes.value,
        price_total: price_total.value
      };

      const data = await api('/json/company/deliveries', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify(payload),
      });

      msg.innerHTML = `✅ Entrega criada. Link de rastreio: <a class="underline" target="_blank" href="${data.tracking_url}">abrir</a>`;
    } catch (e) {
      msg.innerText = '❌ Erro ao criar (validação).';
    }
  };
</script>
@endsection