@extends('panel.layout')
@section('content')
<div class="bg-white border rounded-xl p-5">
  <h1 class="font-bold mb-3">Pedidos</h1>
  <div class="flex gap-2 mb-3">
    <button id="sync" class="px-3 py-2 bg-blue-600 text-white rounded">Sincronizar pedidos</button>
    <a href="/api/orders/export/csv" class="px-3 py-2 bg-slate-700 text-white rounded">Exportar CSV</a>
  </div>
  <div id="orders-msg" class="text-sm mb-3"></div>
  <div id="orders-list" class="space-y-2 text-sm">Carregando...</div>
</div>
<script>
async function api(url,opts={}){const r=await fetch(url,{headers:{'Accept':'application/json'},...opts});const j=await r.json().catch(()=>({}));return{ok:r.ok,data:j,status:r.status}}
async function loadOrders(){ const box=document.getElementById('orders-list'); box.textContent='Carregando...'; const res=await window.pproApi('/api/orders'); const arr=Array.isArray(res.data.data)?res.data.data:[]; if(!arr.length){box.textContent='Sem pedidos';return;} box.innerHTML=arr.map(o=>`<div class='border rounded p-2'>#${o.nuvemshop_order_id} - ${o.customer_name||'sem cliente'} - ${o.status||'-'}</div>`).join(''); }
document.getElementById('sync').addEventListener('click', async()=>{ const m=document.getElementById('orders-msg'); m.textContent='Sincronizando...'; const res=await window.pproApi('/api/orders/sync',{method:'POST'}); if(res.ok){window.pproToast('Sincronização iniciada'); m.textContent='Sincronização iniciada';}else{window.pproToast('Erro na sincronização','error'); m.textContent='Erro na sincronização';} loadOrders(); });
loadOrders();
</script>
@endsection