@extends('crm.layouts.master')
@section('title','CallExchange PBX')
@section('main-content')
<div class="page-title-head d-flex align-items-center justify-content-between mb-3">
    <h4 class="fs-xl fw-bold mb-0">CallExchange PBX</h4>
    <button class="btn btn-sm btn-outline-primary" onclick="loadOnline()">Refresh</button>
</div>
@if(!empty($error))<div class="alert alert-warning">{{ $error }}</div>@endif
<div class="card mb-3"><div class="card-header"><strong>Online extensions</strong></div><div class="table-responsive"><table class="table mb-0" id="online-table"><thead><tr><th>Extension</th><th>Name</th><th>Status</th><th>Destination</th><th>Direction</th><th>Duration</th></tr></thead><tbody>@foreach($online as $row)<tr><td>{{ $row['extension'] ?? '—' }}</td><td>{{ $row['name'] ?? '—' }}</td><td>{{ ucfirst(str_replace('_',' ', $row['status'] ?? '—')) }}</td><td>{{ $row['call_destination'] ?? '—' }}</td><td>{{ $row['call_direction'] ?? '—' }}</td><td>{{ $row['call_duration'] ?? '—' }}</td></tr>@endforeach</tbody></table></div></div>
<div class="card"><div class="card-header"><strong>Call history</strong></div><div class="card-body">
<form id="history-form" class="row g-2 mb-3"><div class="col-md-2"><input class="form-control" name="from" type="date" aria-label="From"></div><div class="col-md-2"><input class="form-control" name="to" type="date" aria-label="To"></div><div class="col-md-2"><input class="form-control" name="extension" placeholder="Extension"></div><div class="col-md-2"><input class="form-control" name="phone" placeholder="Phone"></div><div class="col-md-2"><select class="form-select" name="direction"><option value="">All directions</option><option value="outbound">Outbound</option><option value="inbound">Inbound</option></select></div><div class="col-md-2"><select class="form-select" name="disposition"><option value="">All outcomes</option><option>ANSWERED</option><option>NO ANSWER</option><option>BUSY</option><option>FAILED</option></select></div><div class="col-12 d-flex gap-2"><input class="form-control" name="call_ref" placeholder="Call reference (optional)"><button class="btn btn-primary" type="submit">Search</button></div></form>
<div id="history-message" class="text-muted mb-2"></div><div class="table-responsive"><table class="table table-sm" id="history-table"><thead><tr><th>Date</th><th>Extension</th><th>Phone</th><th>Direction</th><th>Outcome</th><th>Duration</th><th>Recording</th></tr></thead><tbody></tbody></table></div></div></div>
@endsection
@section('page-js')
<script>
async function loadHistory(){const form=document.getElementById('history-form');const q=new URLSearchParams(new FormData(form));q.set('per_page','100');const msg=document.getElementById('history-message');try{const r=await fetch(@json(route('callexchange.history'))+'?'+q.toString(),{headers:{Accept:'application/json'}});const j=await r.json();if(!r.ok)throw new Error(j.message||'Unable to load call history');document.querySelector('#history-table tbody').innerHTML=(j.data||[]).map(x=>`<tr><td>${x.calldate||'—'}</td><td>${x.extension||'—'}</td><td>${x.phone||'—'}</td><td>${x.direction||'—'}</td><td>${x.disposition||'—'}</td><td>${x.duration??'—'}</td><td>${x.recording_url?`<a target="_blank" rel="noopener" href="${x.recording_url}">Play</a>`:'—'}</td></tr>`).join('');msg.textContent=`${j.meta?.total??(j.data||[]).length} call(s)`}catch(e){msg.textContent=e.message}}
document.getElementById('history-form').addEventListener('submit',e=>{e.preventDefault();loadHistory()});
loadHistory();
async function loadOnline(){
  try { const r=await fetch(@json(route('callexchange.online')),{headers:{Accept:'application/json'}}); if(!r.ok) throw new Error('Unable to load PBX status'); const j=await r.json(); const body=document.querySelector('#online-table tbody'); body.innerHTML=(j.data||[]).map(x=>`<tr><td>${x.extension||'—'}</td><td>${x.name||'—'}</td><td>${(x.status||'—').replace('_',' ')}</td><td>${x.call_destination||'—'}</td><td>${x.call_direction||'—'}</td><td>${x.call_duration??'—'}</td></tr>`).join(''); } catch(e){ document.getElementById('history-message').textContent=e.message; }
}
</script>
@endsection