@extends('layouts.portal')
@section('title', 'WhatsApp campaigns')
@section('subtitle', 'Send an approved template to leads who agreed to receive WhatsApp updates. People who replied STOP are always excluded, and replies land in the shared inbox.')
@section('actions')
  <a class="btn btn-ghost btn-sm" href="{{ route('admin.whatsapp.index') }}"><x-icon name="inbox" :size="16"/> Inbox</a>
  <a class="btn btn-ghost btn-sm" href="{{ route('admin.whatsapp.templates') }}"><x-icon name="file-text" :size="16"/> Templates</a>
@endsection
@section('content')
<div class="op-kpis">
  <div class="op-kpi green"><span>Opted-in leads</span><b>{{ number_format($optedIn) }}</b><small>can receive campaigns</small></div>
  <div class="op-kpi"><span>Approved templates</span><b>{{ $templates->count() }}</b><small>available to send</small></div>
  <div class="op-kpi dark"><span>Connection</span><b style="font-size:1.05rem">{{ $ready ? 'Connected' : 'Not connected' }}</b><small>{{ $ready ? 'Cloud API ready' : 'set it up in Integrations' }}</small></div>
</div>

<div class="panel mb-3">
  <div class="panel-head"><div><h2>New campaign</h2><div class="xs muted">Use {first_name}, {name} or {course} in values to personalise each message.</div></div></div>
  <div class="panel-body">
    <form method="post" action="{{ route('admin.whatsapp.campaigns.store') }}" data-wa-compose>
      @csrf
      <div class="form-grid">
        <x-field name="name" label="Campaign name" required full placeholder="e.g. AWS October batch: interested leads"/>
      </div>
      @include('admin.whatsapp._template-picker', ['pickerId' => 'camp', 'personalise' => true])
      @error('params')<div class="field-error mb-1">{{ $message }}</div>@enderror
      <div class="op-sec">Who receives it</div>
      <div class="form-grid">
        <div class="field full"><span class="label">Lead stages</span>
          <div class="row" style="gap:12px;flex-wrap:wrap">@foreach($stages as $k => $label)<label class="check"><input type="checkbox" name="status[]" value="{{ $k }}" @checked(in_array($k, old('status', []), true))> <span>{{ $label }}</span></label>@endforeach</div>
          <div class="help">Leave all unticked for every stage.</div>
        </div>
        <x-field name="course_id" label="Interested in course" type="select" :options="$courses->pluck('title', 'id')->all()" blank="Any course"/>
        <x-field name="source" label="Lead source" type="select" :options="$sources->combine($sources)->all()" blank="Any source"/>
        <x-field name="since_days" label="Created in the last … days" type="number" min="1" max="730" placeholder="e.g. 90"/>
      </div>
      <div class="row" style="gap:10px">
        <button class="btn btn-secondary" type="submit" name="action" value="preview">Count recipients &amp; preview</button>
        <button class="btn btn-primary" type="submit" name="action" value="send" data-confirm="Send this template to every matching opted-in lead now?" @disabled(! $ready || $templates->isEmpty())><x-icon name="send" :size="16"/> Send campaign</button>
      </div>
    </form>
  </div>
</div>

<div class="table-wrap"><table class="table">
  <thead><tr><th>Campaign</th><th>Template</th><th class="num">Recipients</th><th class="num">Sent</th><th class="num">Delivered</th><th class="num">Read</th><th class="num">Replied</th><th class="num">Failed</th><th>Status</th></tr></thead>
  <tbody>
  @forelse($campaigns as $c)
    @php $pct = fn ($n) => $c->sent ? round($n / $c->sent * 100).'%' : '—'; @endphp
    <tr>
      <td><b>{{ $c->name }}</b><div class="xs muted">{{ $c->created_at->format('d M Y H:i') }} · {{ $c->creator?->name }}</div></td>
      <td class="op-mono xs">{{ $c->template }}</td>
      <td class="num">{{ $c->total }}</td>
      <td class="num">{{ $c->sent }}</td>
      <td class="num">{{ $c->delivered }} <span class="xs muted">{{ $pct($c->delivered) }}</span></td>
      <td class="num">{{ $c->read }} <span class="xs muted">{{ $pct($c->read) }}</span></td>
      <td class="num">{{ $c->replied }} <span class="xs muted">{{ $pct($c->replied) }}</span></td>
      <td class="num">{{ $c->failed }}</td>
      <td><span class="op-chip {{ $c->status === 'done' ? 'green' : '' }}">{{ ucfirst($c->status) }}</span></td>
    </tr>
  @empty
    <tr><td colspan="9"><div class="empty sm"><x-icon name="send" :size="28"/><p>No campaigns yet.</p></div></td></tr>
  @endforelse
  </tbody>
</table></div>
@endsection
@push('scripts')<script src="{{ asset_v('assets/js/ops.js') }}" nonce="{{ csp_nonce() }}" defer></script>@endpush