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

@section('content')
<div class="bg-white rounded-xl shadow p-4">
  <div class="flex gap-2 mb-3">
    <select id="status" class="border rounded p-2">
      <option value="">Todas</option>
      <option value="offered">Disponíveis</option>
      <option value="accepted">Aceitas</option>
      <option value="picking_up">Indo coletar</option>
      <option value="delivering">Em entrega</option>
      <option value="delivered">Concluídas</option>
      <option value="canceled">Canceladas</option>
    </select>
    <button class="px-4 py-2 rounded bg-black text-white" onclick="load()">Filtrar</button>
    <a class="ml-auto px-4 py-2 rounded bg-gray-900 text-white" href="{{ route('company.deliveries.create') }}">Nova entrega</a>
  </div>

  <div id="list" class="text-sm"></div>
</div>

<script>
  async function load() {
    const qs = status.value ? ('?status=' + encodeURIComponent(status.value)) : '';
    const data = await api('/json/company/deliveries' + qs);
    const items = data.data || [];
    list.innerHTML = items.map(d => `
      <a class="block border rounded p-3 mb-2 hover:bg-gray-50" href="/empresa/entregas/${d.id}">
        <div class="flex justify-between">
          <div><b>${d.code}</b></div>
          <div class="text-gray-600">${d.status}</div>
        </div>
        <div class="text-gray-600">Coleta: ${d.pickup_address}</div>
        <div class="text-gray-600">Entrega: ${d.dropoff_address}</div>
      </a>
    `).join('') || '<span class="text-gray-500">Nenhuma entrega.</span>';
  }
  load();
</script>
@endsection