@extends('panel.layout')
@section('content')
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
  <div class="bg-white border rounded-xl p-5">
    <h2 class="font-bold mb-3">Criar Campo</h2>
    <form id="field-form" class="space-y-2">
      <input name="label" placeholder="Label" class="w-full border rounded p-2" required>
      <input name="name" placeholder="name_interno" class="w-full border rounded p-2" required>
      <input name="product_id" placeholder="product_id" class="w-full border rounded p-2" required>
      <input name="variant_id" placeholder="variant_id (opcional)" class="w-full border rounded p-2">
      <select name="type" class="w-full border rounded p-2"><option>text</option><option>number</option><option>select</option><option>checkbox</option><option>date</option><option>file</option><option>image</option></select>
      <button class="px-3 py-2 bg-blue-600 text-white rounded" type="submit">Salvar</button>
    </form>
    <p id="field-msg" class="text-sm mt-2"></p>
  </div>
  <div class="bg-white border rounded-xl p-5">
    <h2 class="font-bold mb-3">Campos</h2>
    <div id="fields-list" class="text-sm space-y-2">Carregando...</div>
  </div>
</div>
<script>

async function loadFields(){ const box=document.getElementById('fields-list'); box.textContent='Carregando...'; const res=await window.pproApi('/api/fields'); const arr=Array.isArray(res.data)?res.data:(Array.isArray(res.data.data)?res.data.data:[]); if(!arr.length){box.textContent='Sem campos';return;} box.innerHTML=arr.map(f=>`<div class='border rounded p-2 flex justify-between'><span>${f.label} (${f.type})</span><button data-id='${f.id}' class='del text-red-600'>Excluir</button></div>`).join(''); box.querySelectorAll('.del').forEach(b=>b.onclick=async()=>{ if(!confirm('Excluir?')) return; await window.pproApi('/api/fields/'+b.dataset.id,{method:'DELETE'}); loadFields(); }); }
document.getElementById('field-form').addEventListener('submit', async(e)=>{ e.preventDefault(); const fd=new FormData(e.target); const payload=Object.fromEntries(fd.entries()); payload.is_required=false; payload.applies_to_all_variants=!payload.variant_id; const msg=document.getElementById('field-msg'); msg.textContent='Salvando...'; const res=await window.pproApi('/api/fields',{method:'POST',body:JSON.stringify(payload)}); msg.textContent=res.ok?'Campo salvo com sucesso':'Erro ao salvar'; if(res.ok){ e.target.reset(); loadFields(); }});
loadFields();
</script>
@endsection