@extends('layouts.app')
@section('title','Agent App')
@section('content')
<div class="card">
<h1>Agent App</h1>
<p class="muted">Offline-first election-day reporting interface.</p>
<div id="status" class="alert">Checking connection...</div>
<p><b>Pending submissions:</b> <span id="count">0</span></p>
</div>
<div class="card">
<h2>My Polling Station</h2>
<div class="actions">
<button class="btn" onclick="queue('checkin')">Check In</button>
<button class="btn" onclick="queue('opening')">Opening Report</button>
<button class="btn" onclick="queue('update')">Station Update</button>
<button class="btn" onclick="queue('incident')">Report Incident</button>
<button class="btn" onclick="queue('closing')">Closing Report</button>
<button class="btn" onclick="queue('result')">Save Result</button>
<button class="btn gray" onclick="sync()">Sync Now</button>
</div>
<p id="last" class="muted"></p>
</div>
<script>
const DB='mca-agent', STORE='queue';
let db;
const req=indexedDB.open(DB,1);
req.onupgradeneeded=e=>{db=e.target.result;if(!db.objectStoreNames.contains(STORE))db.createObjectStore(STORE,{keyPath:'id'});}
req.onsuccess=e=>{db=e.target.result;refresh();status();};
function status(){document.getElementById('status').textContent=navigator.onLine?'Online — submissions can sync':'Offline — submissions are saved locally and queued for sync';}
window.addEventListener('online',()=>{status();sync()});
window.addEventListener('offline',status);
function queue(type){
 const id=crypto.randomUUID();
 const item={id,type,created_at:new Date().toISOString(),payload:{device_id:localStorage.device_id||(localStorage.device_id=crypto.randomUUID()),mode:'live'}};
 db.transaction(STORE,'readwrite').objectStore(STORE).put(item);refresh();
 document.getElementById('last').textContent='✓ Saved on device — '+new Date().toLocaleTimeString();
}
function refresh(){if(!db)return;const r=db.transaction(STORE).objectStore(STORE).count();r.onsuccess=()=>document.getElementById('count').textContent=r.result;}
async function sync(){
 if(!navigator.onLine||!db)return;
 const req=db.transaction(STORE).objectStore(STORE).getAll();
 req.onsuccess=async()=>{
  const items=req.result.map(x=>({type:x.type==='incident'?'incident':'result',client_submission_id:x.id,payload:x.payload}));
  if(!items.length)return;
  try{
   const res=await fetch('{{ route('sync') }}',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},credentials:'same-origin',body:JSON.stringify({items})});
   if(!res.ok)throw new Error('Sync failed');
   const out=await res.json();
   const tx=db.transaction(STORE,'readwrite');
   out.items.filter(x=>x.status==='synced'||x.status==='duplicate').forEach(x=>tx.objectStore(STORE).delete(x.id));
   tx.oncomplete=()=>{refresh();document.getElementById('last').textContent='✓ Sync completed — '+new Date().toLocaleTimeString();}
  }catch(e){document.getElementById('last').textContent='⟳ Waiting to sync';}
 };
}
</script>
@endsection