@extends('layouts/layoutMaster')

@section('title','Vehículos Glovo')

@section('vendor-style')
@vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss'])
@endsection

@section('vendor-script')
@vite(['resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'])
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="mb-0"><span class="text-muted fw-light">Admin /</span> Vehículos</h4>
  <div></div>
  </div>

<div class="card p-4">
  <form id="vehicleForm" class="row g-3" onsubmit="return false;">
    <div class="col-md-3"><input type="text" id="v_name" class="form-control" placeholder="Nombre (p.ej. Bicicleta)" required></div>
    <div class="col-md-3"><input type="text" id="v_code" class="form-control" placeholder="Código (p.ej. BICYCLE)" required></div>
    <div class="col-md-3"><select id="v_company_id" class="form-select"><option value="">Global</option></select></div>
    <div class="col-md-1"><select id="v_active" class="form-select"><option value="1">Activo</option><option value="0">Inactivo</option></select></div>
    <div class="col-md-2"><button type="submit" class="btn btn-primary w-100" id="btnAdd">Agregar</button></div>
  </form>
  <hr/>
  <div class="table-responsive">
    <table class="table" id="tblVehicles"><thead><tr><th>ID</th><th>Nombre</th><th>Código</th><th>Empresa</th><th>Estado</th><th></th></tr></thead><tbody></tbody></table>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', async function(){
  const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  const tableBody = document.querySelector('#tblVehicles tbody');
  async function load(){
    const res = await fetch(`{{ url('/admin/api/glovo-vehicles') }}`);
    const j = await res.json();
    tableBody.innerHTML = '';
    (j.data||[]).forEach(v=>{
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>${v.id}</td><td>${v.name}</td><td>${v.code}</td><td>${v.company_id || ''}</td><td><span class="badge ${v.active?'bg-label-success':'bg-label-secondary'}">${v.active?'Activo':'Inactivo'}</span></td><td><button class="btn btn-sm btn-label-secondary btn-toggle" data-id="${v.id}">${v.active?'Desactivar':'Activar'}</button></td>`;
      tableBody.appendChild(tr);
    });
  }
  await load();
  document.getElementById('vehicleForm').addEventListener('submit', async (ev)=>{
    ev.preventDefault();
    const payload = { name: document.getElementById('v_name').value.trim(), code: document.getElementById('v_code').value.trim(), company_id: document.getElementById('v_company_id').value || null, active: document.getElementById('v_active').value === '1' };
    if (!payload.name || !payload.code) return;
    try {
      const res = await fetch(`{{ url('/admin/api/glovo-vehicles') }}`, { method:'POST', headers:{ 'Content-Type':'application/json','X-CSRF-TOKEN': csrf,'Accept':'application/json' }, body: JSON.stringify(payload) });
      if (!res.ok) { const t = await res.text(); console.error('Create failed', t); alert('No se pudo crear'); return; }
      document.getElementById('vehicleForm').reset();
      await load();
    } catch (e) { console.error(e); alert('Error de red'); }
  });
  tableBody.addEventListener('click', async (ev)=>{
    const btn = ev.target.closest('.btn-toggle'); if (!btn) return;
    const id = btn.getAttribute('data-id');
    const res = await fetch(`{{ url('/admin/api/glovo-vehicles') }}/${id}/toggle`, { method:'PATCH', headers:{ 'X-CSRF-TOKEN': csrf,'Accept':'application/json' } });
    if (res.ok) await load();
  });
  // Load companies for selector
  (async function(){
    const r = await fetch(`{{ url('/admin/api/companies') }}`);
    const j = await r.json();
    const sel = document.getElementById('v_company_id');
    (j.data||[]).forEach(c=>{ const o=document.createElement('option'); o.value=c.id; o.textContent=c.name; sel.appendChild(o); });
  })();
});
</script>
@endsection