@extends('layouts.client')
@section('title', 'Dashboard')
@section('content')
<div class="row g-3 mb-3">
  <div class="col-6 col-lg-3"><x-stat label="Total calls" :value="$s['total']"/></div>
  <div class="col-6 col-lg-3"><x-stat label="Successful" :value="$s['successful']" sub="answered / responded"/></div>
  <div class="col-6 col-lg-3"><x-stat label="Confirmed orders" :value="$s['confirmed']"/></div>
  <div class="col-6 col-lg-3"><x-stat label="Cancelled orders" :value="$s['cancelled']"/></div>
  <div class="col-6 col-lg-3"><x-stat label="Unanswered" :value="$s['unanswered']" sub="no answer / busy"/></div>
  <div class="col-6 col-lg-3"><x-stat label="Failed" :value="$s['failed']" sub="failed / rejected"/></div>
  <div class="col-6 col-lg-3"><x-stat label="Free credits" :value="$s['free_credits']"/></div>
  <div class="col-6 col-lg-3"><x-stat label="Wallet balance" :value="number_format($s['balance'], 2)" :sub="'Total spent ' . number_format($s['spent'], 2)"/></div>
</div>
<div class="row g-3">
  <div class="col-lg-8"><div class="card p-3"><h2 class="h6">Calls – last 14 days</h2><canvas id="ch" height="110"></canvas></div></div>
  <div class="col-lg-4"><div class="card p-3 h-100"><h2 class="h6">Connected website</h2>
    @if($s['website'])<div class="fw-semibold">{{ $s['website']->normalized_domain }}</div><x-badge :v="$s['website']->status"/>
      <div class="small text-muted mt-2">Last sync: {{ $s['website']->last_sync_at?->diffForHumans() ?? 'never' }}</div>
    @else <x-empty text="No website connected yet." action="Connect website" :url="route('client.websites')"/> @endif</div></div>
</div>
<div class="card mt-3"><div class="p-3 pb-0"><h2 class="h6">Recent call activity</h2></div>
  @if($s['recent']->isEmpty())<x-empty text="No calls yet. They appear here as soon as customers place orders."/>
  @else<div class="table-responsive"><table class="table table-hover align-middle mb-0"><thead><tr><th>Call</th><th>Order</th><th>Phone</th><th>Status</th><th>Response</th><th>When</th></tr></thead><tbody>
  @foreach($s['recent'] as $c)<tr><td><a href="{{ route('client.calls.show', $c) }}" class="mono">{{ substr($c->public_id, -8) }}</a></td><td>#{{ $c->wc_order_id }}</td><td class="mono">{{ $c->phone_masked }}</td><td><x-badge :v="$c->status"/></td><td><x-badge :v="$c->customer_response"/></td><td>{{ $c->created_at->diffForHumans() }}</td></tr>@endforeach
  </tbody></table></div>@endif</div>
@endsection
@push('scripts')<script src="{{ asset('assets/vendor/chart.umd.js') }}"></script>
<script>new Chart(document.getElementById('ch'),{type:'bar',data:{labels:@json(array_keys($s['series'])),datasets:[{label:'Calls',data:@json(array_values($s['series'])),backgroundColor:'#4f46e5'}]},options:{plugins:{legend:{display:false}},scales:{y:{beginAtZero:true,ticks:{precision:0}}}}});</script>@endpush