@extends('layout')
@section('content')
<h1>Empresas</h1>
<div id="app"></div>
<script>
axios.get('/api/empresas').then(r => {
  const empresas = r.data;
  document.getElementById('app').innerHTML = empresas.map(e =>
    `<div class="card p-3 mb-2">
      <h5>${e.razao} (${e.cnpj})</h5>
      <button class="btn btn-sm btn-success" onclick="addTerm(${e.id})">Adicionar Terminal</button>
      <div>${e.terminais.map(t=>\`<div>${t.mac} - ${t.nome_computador}
         <button onclick="removeT(${t.id})" class="btn btn-xs btn-danger">X</button></div>\`).join('')}
      </div>
    </div>`
  ).join('');
});

function addTerm(id){
  const mac = prompt('MAC:'); const nome = prompt('Nome comp.');
  axios.post('/api/terminais',{empresa_id: id, mac, nome_computador: nome})
    .then(()=>location.reload());
}
function removeT(id){
  axios.delete('/api/terminais/'+id).then(()=>location.reload());
}
</script>
@endsection