@extends('layouts.app')
@section('title','Entregadores')
@section('header','Admin • Entregadores')

@section('content')
<div class="bg-white rounded-xl shadow p-4">
  <div class="flex gap-2 mb-3">
    <input id="q" class="border rounded p-2 flex-1" placeholder="Buscar...">
    <button class="px-4 py-2 rounded bg-black text-white" onclick="load()">Buscar</button>
  </div>

  <div class="border rounded p-3 mb-4">
    <div class="font-semibold mb-2">Criar entregador</div>
    <div class="grid md:grid-cols-3 gap-2">
      <input id="r_name" class="border rounded p-2" placeholder="Nome">
      <input id="r_email" class="border rounded p-2" placeholder="Email">
      <input id="r_pass" class="border rounded p-2" placeholder="Senha">
      <input id="r_doc" class="border rounded p-2" placeholder="CPF">
      <input id="r_plate" class="border rounded p-2" placeholder="Placa">
      <button class="px-4 py-2 rounded bg-gray-900 text-white" onclick="create()">Criar</button>
    </div>
    <div id="msg" class="text-sm text-gray-600 mt-2"></div>
  </div>

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

<script>
  async function load() {
    const data = await api('/json/admin/riders?q=' + encodeURIComponent(q.value || ''));
    const items = data.data || [];
    list.innerHTML = items.map(r => `
      <div class="border rounded p-3 mb-2">
        <div class="flex justify-between">
          <div><b>${r.name}</b> <span class="text-gray-500">(${r.user?.email || ''})</span></div>
          <button class="px-3 py-1 rounded ${r.is_active ? 'bg-green-700' : 'bg-red-700'} text-white"
            onclick="toggle(${r.id})">${r.is_active ? 'Ativo' : 'Inativo'}</button>
        </div>
        <div class="text-gray-600">Placa: ${r.vehicle_plate || '-'} • Nota: ${r.rating_avg || 0} (${r.rating_count || 0})</div>
      </div>
    `).join('') || '<span class="text-gray-500">Sem resultados.</span>';
  }

  async function create() {
    msg.innerText = 'Criando...';
    try {
      await api('/json/admin/riders', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
          name: r_name.value, email: r_email.value, password: r_pass.value,
          document: r_doc.value, vehicle_plate: r_plate.value
        })
      });
      msg.innerText = '✅ Criado!';
      await load();
    } catch (e) {
      msg.innerText = '❌ Erro de validação.';
    }
  }

  async function toggle(id) {
    await api(`/json/admin/riders/${id}/toggle`, { method:'POST' });
    await load();
  }

  load();
</script>
@endsection