@extends('layouts.app')
@section('title', $campaign->name)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $campaign->name }}</h1>
            <p>{{ title_case_words($campaign->channel) }} ·
                {{ $campaign->starts_on?->format('d M Y') ?: 'no start' }} —
                {{ $campaign->ends_on?->format('d M Y') ?: 'ongoing' }}</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('campaigns.edit', $campaign) }}" class="btn secondary">Edit</a>
            <form method="POST" action="{{ route('campaigns.resync', $campaign) }}">
                @csrf
                <button class="btn secondary" type="submit"
                        title="Recount leads and conversions from the leads table">Recount</button>
            </form>
            <form method="POST" action="{{ route('campaigns.destroy', $campaign) }}"
                  data-confirm="Delete the {{ $campaign->name }} campaign? Leads are not affected.">
                @csrf @method('DELETE')
                <button class="btn danger" type="submit">Delete</button>
            </form>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Leads', 'value' => number_format($stats['leads']), 'variant' => 'info'])
        @include('components.kpi', ['label' => 'Conversions', 'value' => number_format($stats['conversions']), 'variant' => 'good'])
        @include('components.kpi', ['label' => 'Conversion rate', 'value' => $stats['convRate'].'%'])
        @include('components.kpi', ['label' => 'Revenue won', 'value' => money($stats['revenue']), 'variant' => 'good'])
        @include('components.kpi', ['label' => 'Cost per acquisition', 'value' => money($stats['cpa'])])
        @include('components.kpi', ['label' => 'Return', 'value' => $stats['roi'].'%',
            'variant' => $stats['roi'] > 0 ? 'good' : 'bad'])
    </div>

    <div class="grid grid-3 mb-2">
        <div class="card">
            <div class="card-head"><h3>Spend</h3></div>
            <div class="card-body">
                <dl>
                    <dt>Budget</dt><dd>{{ money($campaign->budget) }}</dd>
                    <dt>Spent</dt><dd class="strong">{{ money($campaign->spent) }}</dd>
                    <dt>Remaining</dt><dd>{{ money(max(0, $campaign->budget - $campaign->spent)) }}</dd>
                </dl>
            </div>
        </div>
        <div class="card">
            <div class="card-head"><h3>Outcome</h3></div>
            <div class="card-body">
                <dl>
                    <dt>Revenue from converted customers</dt><dd class="strong">{{ money($stats['revenue']) }}</dd>
                    <dt>Net</dt><dd>{{ money($stats['revenue'] - $campaign->spent) }}</dd>
                    <dt>Status</dt>
                    <dd><span class="badge {{ status_color($campaign->status === 'running' ? 'active' : $campaign->status) }}">
                        <span class="dot"></span>{{ title_case_words($campaign->status) }}</span></dd>
                </dl>
            </div>
        </div>
        <div class="card">
            <div class="card-head"><h3>Attribution</h3></div>
            <div class="card-body">
                <p class="small">Leads are matched on the free-text
                    <span class="mono">campaign</span> field equal to
                    <strong>{{ $campaign->name }}</strong>.</p>
                <p class="small muted mb-0">Revenue is the sum of invoices raised for the customers those leads
                    converted into — not an assumed value per conversion.</p>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-head">
            <h3>Leads from this campaign</h3>
            <span class="badge muted">{{ $leads->total() }}</span>
        </div>
        <div class="card-body" style="padding:0;">
            @if ($leads->isEmpty())
                @include('components.empty-state', [
                    'icon' => '&#9733;',
                    'title' => 'No leads attributed yet',
                    'message' => 'Capture a lead and set its campaign to "'.$campaign->name.'" to see it here.',
                ])
            @else
                <table class="data">
                    <thead>
                    <tr>
                        <th>Lead</th><th>Name</th><th>Phone</th><th>Source</th>
                        <th>Priority</th><th>Score</th><th>Status</th><th>Converted</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($leads as $lead)
                        <tr>
                            <td class="mono"><a href="{{ route('leads.show', $lead) }}">{{ $lead->lead_number }}</a></td>
                            <td class="small">{{ $lead->first_name }} {{ $lead->last_name }}</td>
                            <td class="small mono">{{ $lead->phone }}</td>
                            <td><span class="badge muted">{{ title_case_words($lead->source) }}</span></td>
                            <td><span class="badge {{ $lead->priority === 'urgent' ? 'danger'
                                : ($lead->priority === 'high' ? 'warning' : 'muted') }}">{{ title_case_words($lead->priority) }}</span></td>
                            <td class="num">{{ $lead->score }}</td>
                            <td><span class="badge {{ status_color($lead->status === 'converted' ? 'active' : $lead->status) }}">
                                <span class="dot"></span>{{ title_case_words($lead->status) }}</span></td>
                            <td class="small nowrap">{{ $lead->converted_at?->format('d M Y') ?: '—' }}</td>
                            <td class="right nowrap">
                                <a href="{{ route('leads.show', $lead) }}" class="btn xs secondary">Open</a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($leads->hasPages())<div class="card-foot">{{ $leads->links('partials.pagination') }}</div>@endif
    </div>
@endsection