@extends('layouts.admin')
@section('title', 'Website analytics')
@section('crumbs', 'First-party tracking · no third-party cookies · IPs stored only as hashes')
@section('actions')@foreach([7 => '7 days', 30 => '30 days', 90 => '90 days', 365 => '12 months'] as $d => $l)<a href="{{ route('admin.analytics', ['days' => $d]) }}" @class(['tag', 'tag-on' => $days === $d])>{{ $l }}</a>@endforeach @endsection
@section('content')
@php($fmt = fn ($s) => intdiv($s, 60).'m '.str_pad($s % 60, 2, '0', STR_PAD_LEFT).'s')
<div class="grid g4">
    <x-kpi label="Unique visitors" :value="number_format($kpi['visitors'])" :sub="$kpi['change'] === null ? 'No earlier data' : ($kpi['change'] >= 0 ? '▲ ' : '▼ ').abs($kpi['change']).'% vs previous period'" />
    <x-kpi label="Page views" :value="number_format($kpi['views'])" :sub="number_format($kpi['sessions']).' sessions'" />
    <x-kpi label="Enquiries" :value="$kpi['leads']" :sub="$kpi['conversion'].'% of visitors'" />
    <x-kpi label="Avg. time on page" :value="$fmt($kpi['avgTime'])" :sub="$kpi['bounce'].'% single-page sessions · '.$kpi['newShare'].'% new'" />
</div>

<section class="panel">
    <div class="panel-h"><h2 class="ht">Visitors per day</h2></div>
    @php($max = max(1, $series->max('v')))
    <div class="panel-b">
        <div class="chartbox" style="gap:2px">@foreach($series as $p)<div class="colbar" style="height:{{ max(1, round($p['v'] / $max * 100)) }}%;min-width:2px" title="{{ \Carbon\Carbon::parse($p['d'])->format('j M') }}: {{ $p['v'] }} visitors"></div>@endforeach</div>
        <div class="row between xs muted" style="margin-top:6px"><span>{{ \Carbon\Carbon::parse($series->first()['d'])->format('j M') }}</span><span>{{ \Carbon\Carbon::parse($series->last()['d'])->format('j M') }}</span></div>
    </div>
</section>

<div class="cols">
    <section class="panel">
        <div class="panel-h"><h2 class="ht">Where visitors come from</h2></div>
        <div class="panel-b stack" style="gap:10px">@php($cm = max(1, $channels->max('v')))@foreach($channels as $c)<div class="hbar"><span class="b small">{{ $c->ch }}</span><div class="bar"><span style="width:{{ round($c->v / $cm * 100) }}%"></span></div><span class="tnum small">{{ $c->v }}</span></div>@endforeach</div>
    </section>
    <section class="panel">
        <div class="panel-h"><h2 class="ht">Enquiries by source</h2></div>
        <div class="tbl-wrap"><table class="tbl"><thead><tr><th>Source</th><th class="num">Leads</th><th class="num">Won</th></tr></thead><tbody>@forelse($leadSources as $s)<tr><td>{{ $s->s }}</td><td class="num">{{ $s->n }}</td><td class="num">{{ $s->won }}</td></tr>@empty<tr><td colspan="3"><x-empty>No enquiries in this period.</x-empty></td></tr>@endforelse</tbody></table></div>
    </section>
</div>

<section class="panel">
    <div class="panel-h"><h2 class="ht">Top pages</h2></div>
    <div class="tbl-wrap"><table class="tbl"><thead><tr><th>Page</th><th class="num">Views</th><th class="num">Visitors</th><th class="num">Avg. time</th><th class="num">Avg. scroll</th></tr></thead>
        <tbody>@foreach($pages as $p)<tr><td><a href="{{ url($p->path) }}" target="_blank">{{ $p->path }}</a></td><td class="num">{{ $p->views }}</td><td class="num">{{ $p->visitors }}</td><td class="num">{{ $fmt((int) $p->t) }}</td><td class="num">{{ round($p->sd) }}%</td></tr>@endforeach</tbody></table></div>
</section>

<div class="cols">
    <section class="panel"><div class="panel-h"><h2 class="ht">Campaigns (UTM)</h2></div>
        <div class="tbl-wrap"><table class="tbl"><thead><tr><th>Source / medium</th><th>Campaign</th><th class="num">Visitors</th></tr></thead><tbody>@forelse($campaigns as $c)<tr><td>{{ $c->utm_source }} / {{ $c->utm_medium }}</td><td class="small">{{ $c->utm_campaign ?: '—' }}</td><td class="num">{{ $c->v }}</td></tr>@empty<tr><td colspan="3"><x-empty>Tag your ad links with utm_source, utm_medium and utm_campaign to see them here.</x-empty></td></tr>@endforelse</tbody></table></div>
    </section>
    <section class="panel"><div class="panel-h"><h2 class="ht">Actions on the site</h2></div>
        <div class="list small">@php($labels = ['cta_header' => 'Header “Start a project”', 'cta_hero' => 'Hero “Start a project”', 'cta_footer' => 'Footer call to action', 'cta_service' => 'Service “Get a quote”', 'cta_band' => 'Bottom band “Start a project”', 'whatsapp_click' => 'WhatsApp clicks', 'call_click' => 'Phone clicks', 'email_click' => 'Email clicks', 'form_start' => 'Started the contact form', 'form_submit' => 'Sent the contact form'])
            @forelse($events as $name => $n)<div class="li"><span style="flex:1">{{ $labels[$name] ?? $name }}</span><span class="b tnum">{{ $n }}</span></div>@empty<x-empty>No tracked clicks yet.</x-empty>@endforelse</div>
    </section>
</div>

<div class="cols">
    <section class="panel"><div class="panel-h"><h2 class="ht">Devices</h2></div><div class="panel-b stack" style="gap:8px">@php($dm = max(1, $devices->sum()))@foreach($devices as $d => $v)<div class="hbar"><span class="small">{{ ucfirst($d) }}</span><div class="bar"><span style="width:{{ round($v / $dm * 100) }}%"></span></div><span class="xs tnum">{{ round($v / $dm * 100) }}%</span></div>@endforeach</div></section>
    <section class="panel"><div class="panel-h"><h2 class="ht">Cities</h2><span class="xs muted">Needs Cloudflare geo headers</span></div><div class="list small">@forelse($cities as $c => $v)<div class="li"><span style="flex:1">{{ $c }}</span><span class="tnum">{{ $v }}</span></div>@empty<x-empty>No city data yet.</x-empty>@endforelse</div></section>
    <section class="panel"><div class="panel-h"><h2 class="ht">Referring sites</h2></div><div class="list small">@forelse($referrers as $r)<div class="li"><span style="flex:1">{{ $r->referrer_host }}</span><span class="tnum">{{ $r->v }}</span></div>@empty<x-empty>No referrers yet.</x-empty>@endforelse</div></section>
</div>

<section class="panel">
    <div class="panel-h"><h2 class="ht">Latest visits</h2></div>
    <div class="tbl-wrap"><table class="tbl"><thead><tr><th>When</th><th>Page</th><th>From</th><th>Device</th><th>City</th><th class="num">Time</th><th>Visitor</th></tr></thead>
        <tbody>@foreach($recent as $v)<tr><td class="small muted">{{ $v->created_at->diffForHumans() }}</td><td class="small">{{ $v->path }}</td><td class="small">{{ $v->utm_source ?: ($v->referrer_host ?: 'Direct') }}</td><td class="small">{{ ucfirst($v->device) }} · {{ $v->browser }}</td><td class="small">{{ $v->city ?: '—' }}</td><td class="num">{{ $fmt($v->duration_seconds) }}</td><td class="xs muted">{{ $v->is_new_visitor ? 'New' : 'Returning' }}</td></tr>@endforeach</tbody></table></div>
</section>
@endsection