@extends('layouts.app')
@section('title', 'Campaigns')

@section('content')
<div class="space-y-4">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <form method="GET" class="flex gap-2">
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search campaigns…" class="input w-56">
            <select name="status" class="input w-40">
                <option value="">All statuses</option>
                @foreach (['draft', 'ready', 'scheduled', 'queued', 'sending', 'paused', 'completed', 'cancelled', 'failed'] as $status)
                    <option value="{{ $status }}" @selected(request('status') === $status)>{{ ucfirst($status) }}</option>
                @endforeach
            </select>
            <button class="btn-secondary">Filter</button>
        </form>
        @can('manage campaigns')
            <a href="{{ route('campaigns.create') }}" class="btn-primary">New campaign</a>
        @endcan
    </div>

    @if ($campaigns->isEmpty())
        <x-empty-state title="No campaigns yet" description="Create a campaign to send personalised emails to a list or segment.">
            @can('manage campaigns')<a href="{{ route('campaigns.create') }}" class="btn-primary">Create campaign</a>@endcan
        </x-empty-state>
    @else
        <div class="table-wrap">
            <table class="table">
                <thead><tr><th>Campaign</th><th>Audience</th><th>Status</th><th>Progress</th><th>Sent</th><th>Opens*</th><th>Clicks</th><th>Created</th></tr></thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                @foreach ($campaigns as $campaign)
                    <tr>
                        <td>
                            <a href="{{ route('campaigns.show', $campaign) }}" class="font-medium text-brand-600 hover:underline dark:text-brand-400">{{ $campaign->name }}</a>
                            <p class="max-w-56 truncate text-xs text-slate-500">{{ $campaign->subject }}</p>
                        </td>
                        <td>{{ $campaign->segment?->name ?? $campaign->contactList?->name ?? '—' }}</td>
                        <td><x-status-badge :status="$campaign->status"/></td>
                        <td class="w-36">
                            <div class="progress-track"><div class="progress-bar" style="width: {{ $campaign->progressPercent() }}%"></div></div>
                        </td>
                        <td class="tabular-nums">{{ number_format($campaign->sent_count) }}</td>
                        <td class="tabular-nums">{{ number_format($campaign->unique_open_count) }}</td>
                        <td class="tabular-nums">{{ number_format($campaign->unique_click_count) }}</td>
                        <td class="text-slate-500">{{ $campaign->created_at->format('d M Y') }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        <p class="help">* Opens are approximate due to email privacy protections.</p>
        {{ $campaigns->links() }}
    @endif
</div>
@endsection