@php
    $r = $this->getReport();
    $cell = 'padding:.5rem .75rem;border-top:1px solid rgba(128,128,128,.25);';
    $pct = fn ($a, $b) => $b > 0 ? round($a / $b * 100) . '%' : 'none yet';
@endphp
<x-filament-panels::page>
    <div style="display:flex;gap:.5rem;flex-wrap:wrap;align-items:center">
        @foreach ([7, 30, 90] as $d)
            <x-filament::button wire:click="setDays({{ $d }})" :color="$days === $d ? 'primary' : 'gray'" size="sm">Last {{ $d }} days</x-filament::button>
        @endforeach
        <span style="opacity:.7;font-size:.875rem">Mode: {{ str_replace('_', ' ', $this->mode()) }}. Change it in Global settings.</span>
    </div>

    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem">
        @foreach ([['Page views', $r['views'], 'Everyone, no identifiers'], ['Visitors who said yes', $r['visitors'], 'Counted by a random number'], ['Enquiries received', $r['enquiries'], 'From the leads table'], ['Started the form', $r['funnel']['started'], 'Visitors who said yes'], ['Sent the form', $r['funnel']['submitted'], $pct($r['funnel']['submitted'], $r['visitors']) . ' of visitors']] as [$label, $value, $note])
            <x-filament::section>
                <div style="font-size:.8rem;opacity:.7">{{ $label }}</div>
                <div style="font-size:1.9rem;font-weight:600;line-height:1.2">{{ number_format($value) }}</div>
                <div style="font-size:.75rem;opacity:.6">{{ $note }}</div>
            </x-filament::section>
        @endforeach
    </div>

    <x-filament::section heading="Page views per day">
        @if (array_sum($r['daily']) === 0)
            <p style="opacity:.7">No page views recorded in this period yet.</p>
        @else
            <svg viewBox="0 0 600 80" preserveAspectRatio="none" style="width:100%;height:6rem" role="img" aria-label="Page views per day">
                <path d="{{ $this->spark($r['daily']) }}" fill="none" stroke="currentColor" stroke-width="2" style="color:rgb(124 58 237)"/>
            </svg>
        @endif
    </x-filament::section>

    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));gap:1rem">
        <x-filament::section heading="Top pages">
            <table style="width:100%;border-collapse:collapse">
                @forelse ($r['top_pages'] as $p)<tr><td style="{{ $cell }}">{{ $p['path'] }}</td><td style="{{ $cell }}text-align:right">{{ number_format($p['views']) }}</td></tr>@empty<tr><td style="opacity:.7">Nothing yet.</td></tr>@endforelse
            </table>
        </x-filament::section>

        <x-filament::section heading="Where visitors come from">
            <table style="width:100%;border-collapse:collapse">
                <tr style="opacity:.6;font-size:.8rem"><td style="padding:.25rem .75rem">Source</td><td style="text-align:right">Visitors</td><td style="text-align:right;padding-right:.75rem">Enquiries</td></tr>
                @forelse ($r['sources'] as $s)<tr><td style="{{ $cell }}">{{ $s['name'] }}</td><td style="{{ $cell }}text-align:right">{{ $s['visitors'] }}</td><td style="{{ $cell }}text-align:right">{{ $s['enquiries'] }}</td></tr>@empty<tr><td style="opacity:.7">Nothing yet. This fills as visitors accept analytics.</td></tr>@endforelse
            </table>
        </x-filament::section>

        <x-filament::section heading="Campaigns">
            <table style="width:100%;border-collapse:collapse">
                @forelse ($r['campaigns'] as $s)<tr><td style="{{ $cell }}">{{ $s['name'] }}</td><td style="{{ $cell }}text-align:right">{{ $s['visitors'] }} visitors</td><td style="{{ $cell }}text-align:right">{{ $s['enquiries'] }} enquiries</td></tr>@empty<tr><td style="opacity:.7">Add utm_campaign to your links to see campaigns here.</td></tr>@endforelse
            </table>
        </x-filament::section>

        <x-filament::section heading="Buttons clicked">
            <table style="width:100%;border-collapse:collapse">
                @forelse ($r['ctas'] as $label => $n)<tr><td style="{{ $cell }}">{{ $label }}</td><td style="{{ $cell }}text-align:right">{{ $n }}</td></tr>@empty<tr><td style="opacity:.7">Nothing yet.</td></tr>@endforelse
            </table>
        </x-filament::section>

        <x-filament::section heading="What people search for">
            <table style="width:100%;border-collapse:collapse">
                @forelse ($r['searches']['top'] as $s)<tr><td style="{{ $cell }}">{{ $s['query'] }}</td><td style="{{ $cell }}text-align:right">{{ $s['count'] }}x, {{ $s['results'] }} results</td></tr>@empty<tr><td style="opacity:.7">No searches yet.</td></tr>@endforelse
            </table>
        </x-filament::section>

        <x-filament::section heading="Searches that found nothing" description="Content you could write.">
            <table style="width:100%;border-collapse:collapse">
                @forelse ($r['searches']['zero'] as $s)<tr><td style="{{ $cell }}">{{ $s['query'] }}</td><td style="{{ $cell }}text-align:right">{{ $s['count'] }}x</td></tr>@empty<tr><td style="opacity:.7">None. Every search found something.</td></tr>@endforelse
            </table>
        </x-filament::section>
    </div>

    <p style="opacity:.6;font-size:.8rem">Visitor figures only include people who accepted analytics. Page views count everyone but carry no identifier. Team members and bots are excluded. Visitor events are deleted after {{ \App\Support\Settings::get('analytics.retention_days', 400) }} days.</p>
</x-filament-panels::page>