@extends('backend.layouts.app')

@section('title', \App\Http\Helpers\MenuHelper::getPageTitle())

@section('content')
    @include('backend.module._index-reset-button')

    @php
        $pageTitle = \App\Http\Helpers\MenuHelper::getPageTitle();
        $isVisitors = $activeTab === 'visitors';
        $isPageViews = $activeTab === 'pageviews';
        $isReport = $activeTab === 'report';
        $today = now()->startOfDay();
        $periodDateCarbon = \Illuminate\Support\Carbon::parse($periodDate);
        $rangeSummary = \Illuminate\Support\Carbon::parse($dateFrom)->format('d M Y').' – '.\Illuminate\Support\Carbon::parse($dateTo)->format('d M Y');
        $siteSummary = $site !== '' ? ($siteLabels[$site] ?? $site) : 'All sites';
        $reportQuery = array_filter([
            'site' => $site,
            'report_year' => $report['year'],
            'report_month' => $report['month'],
        ], fn ($value) => $value !== '' && $value !== null);

        $activeQuickRange = match (true) {
            $period === 'day' && $periodDateCarbon->isToday() => 'day',
            $period === 'week' && $periodDateCarbon->betweenIncluded(
                $today->copy()->startOfWeek(\Illuminate\Support\Carbon::MONDAY),
                $today->copy()->endOfWeek(\Illuminate\Support\Carbon::SUNDAY)
            ) => 'week',
            $period === 'month' && $periodDateCarbon->isSameMonth($today) => 'month',
            $period === 'year' && $periodDateCarbon->isSameYear($today) => 'year',
            $period === '' && $dateFrom === $today->copy()->startOfMonth()->toDateString() && $dateTo === $today->toDateString() => 'month',
            $period === '' && $dateFrom === $today->copy()->subDays(6)->toDateString() => '7',
            $period === '' && $dateFrom === $today->copy()->subDays(29)->toDateString() => '30',
            default => '',
        };

        $quickRanges = [
            ['key' => 'day', 'label' => 'Today'],
            ['key' => 'week', 'label' => 'This week'],
            ['key' => 'month', 'label' => 'This month'],
            ['key' => 'year', 'label' => 'This year'],
            ['key' => '7', 'label' => 'Last 7 days'],
            ['key' => '30', 'label' => 'Last 30 days'],
        ];

        $visitorMetrics = [
            ['label' => 'Daily visits', 'value' => $dailyVisitors, 'note' => $setting->is_active ? 'One count per visitor and site each day' : 'Daily visitor counter is paused', 'icon' => 'M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2m16 0v-2a4 4 0 0 0-3-3.87M14 3.13a4 4 0 0 1 0 7.75M14 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z', 'color_classes' => 'bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-300'],
            ['label' => 'Unique visitors', 'value' => $uniqueVisitors, 'note' => $setting->is_active ? 'Distinct visitors in range' : ($setting->is_page_view_active ? 'Based on page-view data' : 'Both counters are paused'), 'icon' => 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm7 9a7 7 0 0 0-14 0', 'color_classes' => 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-300'],
        ];
        $pageViewMetrics = [
            ['label' => 'Page views', 'value' => $pageViews, 'note' => $setting->is_page_view_active ? 'Deduplicated over 30 minutes' : 'Page-view tracking is paused', 'icon' => 'M3 3v18h18M7 14l4-4 4 4 6-7', 'color_classes' => 'bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-300'],
            ['label' => 'Pages visited', 'value' => $pageCount, 'note' => $setting->is_page_view_active ? 'Distinct site pages' : 'Page-view tracking is paused', 'icon' => 'M4 4h16v16H4zM8 8h8m-8 4h8m-8 4h5', 'color_classes' => 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-300'],
        ];

        $fieldLabelClasses = 'mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400';
        $selectClasses = 'shadow-theme-xs h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent py-2.5 pr-10 pl-4 text-sm text-gray-800 transition focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90';
        // Date fields follow the Content Article date input styling (custom calendar icon + showPicker).
        $dateClasses = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 transition focus:ring-3 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30';
        $quickActiveClasses = 'border-violet-300 bg-violet-50 text-violet-700 shadow-theme-xs dark:border-violet-500/40 dark:bg-violet-500/10 dark:text-violet-300';
        $quickInactiveClasses = 'border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-white/[0.04]';
    @endphp

    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div>
            <p class="text-sm font-medium text-brand-500 dark:text-brand-400">Traffic overview</p>
            <h2 class="mt-1 text-xl font-semibold text-gray-800 dark:text-white/90">{{ $pageTitle }}</h2>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Understand who visits, what they read, and how traffic changes over time.</p>
        </div>
        <nav aria-label="Breadcrumb">
            <ol class="flex items-center gap-1.5">
                <li>
                    <a class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300" href="{{ route('admin.home') }}">Home</a>
                </li>
                <li class="flex items-center gap-1.5 text-sm text-gray-800 dark:text-white/90">
                    <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
                    <span>{{ $pageTitle }}</span>
                </li>
            </ol>
        </nav>
    </div>

    <div class="space-y-5 sm:space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="grid grid-cols-1 gap-2 sm:grid-cols-3" role="tablist" aria-label="Visitor analytics sections">
                <button type="button" id="visitor-tab-visitors" role="tab" aria-controls="visitor-panel-visitors" aria-selected="{{ $isVisitors ? 'true' : 'false' }}" data-visitor-tab="visitors"
                    class="flex w-full items-center gap-3 rounded-xl border px-4 py-3.5 text-left transition {{ $isVisitors ? 'border-violet-300 bg-violet-50 text-violet-700 dark:border-violet-500/40 dark:bg-violet-500/10 dark:text-violet-300' : 'border-transparent text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/[0.04]' }}">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-violet-100 text-violet-600 dark:bg-violet-500/15 dark:text-violet-300">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2m16 0v-2a4 4 0 0 0-3-3.87M14 3.13a4 4 0 0 1 0 7.75M14 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/></svg>
                    </span>
                    <span class="min-w-0">
                        <span class="block text-sm font-semibold">Daily visitors</span>
                        <span data-visitor-tab-subtitle class="mt-0.5 block text-xs {{ $isVisitors ? 'text-violet-600 dark:text-violet-300' : 'text-gray-400 dark:text-gray-500' }}">Today, week, month and year</span>
                    </span>
                </button>
                <button type="button" id="visitor-tab-pageviews" role="tab" aria-controls="visitor-panel-pageviews" aria-selected="{{ $isPageViews ? 'true' : 'false' }}" data-visitor-tab="pageviews"
                    class="flex w-full items-center gap-3 rounded-xl border px-4 py-3.5 text-left transition {{ $isVisitors ? 'border-transparent text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/[0.04]' : 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-500/40 dark:bg-sky-500/10 dark:text-sky-300' }}">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-sky-100 text-sky-600 dark:bg-sky-500/15 dark:text-sky-300">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3v18h18M7 14l4-4 4 4 6-7"/></svg>
                    </span>
                    <span class="min-w-0">
                        <span class="block text-sm font-semibold">Page-view analytics</span>
                        <span data-visitor-tab-subtitle class="mt-0.5 block text-xs {{ $isPageViews ? 'text-sky-600 dark:text-sky-300' : 'text-gray-400 dark:text-gray-500' }}">Traffic and popular pages</span>
                    </span>
                </button>
                <button type="button" id="visitor-tab-report" role="tab" aria-controls="visitor-panel-report" aria-selected="{{ $isReport ? 'true' : 'false' }}" data-visitor-tab="report"
                    class="flex w-full items-center gap-3 rounded-xl border px-4 py-3.5 text-left transition {{ $isReport ? 'border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-300' : 'border-transparent text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/[0.04]' }}">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8 3h6l5 5v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm6 1v4h4M9 12h6m-6 4h6"/></svg>
                    </span>
                    <span class="min-w-0">
                        <span class="block text-sm font-semibold">Monthly report</span>
                        <span data-visitor-tab-subtitle class="mt-0.5 block text-xs {{ $isReport ? 'text-emerald-600 dark:text-emerald-300' : 'text-gray-400 dark:text-gray-500' }}">Official statistics by month</span>
                    </span>
                </button>
            </div>
        </div>

        <section class="space-y-4">
            <article data-visitor-panel="visitors" @if (! $isVisitors) hidden @endif class="flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-4 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03] sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div class="flex items-start gap-3.5">
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-300">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2m16 0v-2a4 4 0 0 0-3-3.87M14 3.13a4 4 0 0 1 0 7.75M14 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/></svg>
                    </span>
                    <div>
                        <div class="flex flex-wrap items-center gap-2">
                            <h2 class="font-semibold text-gray-900 dark:text-white">Daily visitor counter</h2>
                            <span class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-semibold {{ $setting->is_active ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400' }}">
                                <span class="h-1.5 w-1.5 rounded-full {{ $setting->is_active ? 'bg-emerald-500' : 'bg-gray-400' }}"></span>
                                {{ $setting->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <p class="mt-1 max-w-xl text-sm text-gray-500 dark:text-gray-400">Count each pseudonymous visitor once per day, independently from page-view analytics.</p>
                    </div>
                </div>
                <form action="{{ route('visitor.toggle') }}" method="POST" class="shrink-0">
                    @csrf
                    <button type="submit" role="switch" aria-checked="{{ $setting->is_active ? 'true' : 'false' }}"
                        aria-label="{{ $setting->is_active ? 'Deactivate daily visitor counter' : 'Activate daily visitor counter' }}"
                        class="inline-flex w-full items-center justify-between gap-3 rounded-full border py-1.5 pr-1.5 pl-4 transition sm:w-auto {{ $setting->is_active ? 'border-emerald-200 bg-emerald-50 hover:bg-emerald-100 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:hover:bg-emerald-500/15' : 'border-gray-200 bg-gray-50 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700' }}">
                        <span class="text-xs font-semibold uppercase tracking-wide {{ $setting->is_active ? 'text-emerald-700 dark:text-emerald-300' : 'text-gray-500 dark:text-gray-400' }}">{{ $setting->is_active ? 'Active' : 'Inactive' }}</span>
                        <span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {{ $setting->is_active ? 'bg-emerald-500' : 'bg-gray-300 dark:bg-gray-600' }}">
                            <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition {{ $setting->is_active ? 'translate-x-5' : '' }}"></span>
                        </span>
                    </button>
                </form>
            </article>

            <article data-visitor-panel="pageviews" @if (! $isPageViews) hidden @endif class="flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-4 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03] sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div class="flex items-start gap-3.5">
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-300">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3v18h18M7 14l4-4 4 4 6-7"/></svg>
                    </span>
                    <div>
                        <div class="flex flex-wrap items-center gap-2">
                            <h2 class="font-semibold text-gray-900 dark:text-white">Page-view analytics</h2>
                            <span class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-semibold {{ $setting->is_page_view_active ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400' }}">
                                <span class="h-1.5 w-1.5 rounded-full {{ $setting->is_page_view_active ? 'bg-emerald-500' : 'bg-gray-400' }}"></span>
                                {{ $setting->is_page_view_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <p class="mt-1 max-w-xl text-sm text-gray-500 dark:text-gray-400">Count each visitor-page pair once per 30 minutes and show the most-viewed pages.</p>
                    </div>
                </div>
                <form action="{{ route('visitor.toggle-page-views') }}" method="POST" class="shrink-0">
                    @csrf
                    <button type="submit" role="switch" aria-checked="{{ $setting->is_page_view_active ? 'true' : 'false' }}"
                        aria-label="{{ $setting->is_page_view_active ? 'Deactivate page-view analytics' : 'Activate page-view analytics' }}"
                        class="inline-flex w-full items-center justify-between gap-3 rounded-full border py-1.5 pr-1.5 pl-4 transition sm:w-auto {{ $setting->is_page_view_active ? 'border-emerald-200 bg-emerald-50 hover:bg-emerald-100 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:hover:bg-emerald-500/15' : 'border-gray-200 bg-gray-50 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700' }}">
                        <span class="text-xs font-semibold uppercase tracking-wide {{ $setting->is_page_view_active ? 'text-emerald-700 dark:text-emerald-300' : 'text-gray-500 dark:text-gray-400' }}">{{ $setting->is_page_view_active ? 'Active' : 'Inactive' }}</span>
                        <span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {{ $setting->is_page_view_active ? 'bg-emerald-500' : 'bg-gray-300 dark:bg-gray-600' }}">
                            <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition {{ $setting->is_page_view_active ? 'translate-x-5' : '' }}"></span>
                        </span>
                    </button>
                </form>
            </article>
        </section>

        <section @if ($isReport) hidden @endif data-visitor-filter-card class="rounded-2xl border border-gray-200 bg-white shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex flex-wrap items-start justify-between gap-3 border-b border-gray-100 px-5 py-4 dark:border-gray-800 sm:px-6">
                <div>
                    <h2 class="text-base font-semibold text-gray-800 dark:text-white/90">Report filters</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Choose a reporting period, then optionally narrow by site or page.</p>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <span class="inline-flex items-center gap-1.5 rounded-lg bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-600 dark:bg-white/[0.04] dark:text-gray-300">
                        <svg class="h-3.5 w-3.5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.5 1.75a.75.75 0 0 1 .75.75v1.5h5.5V2.5a.75.75 0 0 1 1.5 0v1.5h.5A2.75 2.75 0 0 1 17 6.75v8.5a2.75 2.75 0 0 1-2.75 2.75H5.75A2.75 2.75 0 0 1 3 15.25v-8.5A2.75 2.75 0 0 1 5.75 4h.5V2.5a.75.75 0 0 1 .75-.75ZM4.5 7.5v7.75c0 .69.56 1.25 1.25 1.25h8.5c.69 0 1.25-.56 1.25-1.25V7.5h-11Z"/></svg>
                        {{ $rangeSummary }}
                    </span>
                    <span class="inline-flex items-center gap-1.5 rounded-lg bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-600 dark:bg-white/[0.04] dark:text-gray-300">
                        <span class="h-1.5 w-1.5 rounded-full bg-brand-500"></span>
                        {{ $siteSummary }}
                    </span>
                </div>
            </div>

            <form id="visitor-filter-form" method="GET" action="{{ route('visitor.index') }}" class="space-y-5 px-5 py-5 sm:px-6">
                <input id="visitor-active-tab" type="hidden" name="tab" value="{{ $activeTab }}">
                <input type="hidden" name="report_year" value="{{ $report['year'] }}">
                <input type="hidden" name="report_month" value="{{ $report['month'] }}">

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
                    <div>
                        <label for="visitor-period" class="{{ $fieldLabelClasses }}">Reporting period</label>
                        <div class="relative">
                            <select id="visitor-period" name="period" class="{{ $selectClasses }}">
                                <option value="day" @selected($period === 'day')>Day</option>
                                <option value="week" @selected($period === 'week')>Week (Mon–Sun)</option>
                                <option value="month" @selected($period === 'month')>Month</option>
                                <option value="year" @selected($period === 'year')>Year</option>
                                <option value="" @selected($period === '')>Custom date range</option>
                            </select>
                            <span class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 dark:text-gray-500" aria-hidden="true">
                                <svg class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M5 8l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                        </div>
                    </div>

                    <div id="visitor-period-date-wrap" @if ($period === '') hidden @endif>
                        <label for="visitor-period-date" class="{{ $fieldLabelClasses }}">Reference date</label>
                        <div class="relative">
                            <input id="visitor-period-date" type="date" name="period_date" value="{{ $periodDate }}" onclick="this.showPicker()" @disabled($period === '') class="{{ $dateClasses }}">
                            <span class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66659 1.5415C7.0808 1.5415 7.41658 1.87729 7.41658 2.2915V2.99984H12.5833V2.2915C12.5833 1.87729 12.919 1.5415 13.3333 1.5415C13.7475 1.5415 14.0833 1.87729 14.0833 2.2915V2.99984L15.4166 2.99984C16.5212 2.99984 17.4166 3.89527 17.4166 4.99984V7.49984V15.8332C17.4166 16.9377 16.5212 17.8332 15.4166 17.8332H4.58325C3.47868 17.8332 2.58325 16.9377 2.58325 15.8332V7.49984V4.99984C2.58325 3.89527 3.47868 2.99984 4.58325 2.99984L5.91659 2.99984V2.2915C5.91659 1.87729 6.25237 1.5415 6.66659 1.5415ZM6.66659 4.49984H4.58325C4.30711 4.49984 4.08325 4.7237 4.08325 4.99984V6.74984H15.9166V4.99984C15.9166 4.7237 15.6927 4.49984 15.4166 4.49984H13.3333H6.66659ZM15.9166 8.24984H4.08325V15.8332C4.08325 16.1093 4.30711 16.3332 4.58325 16.3332H15.4166C15.6927 16.3332 15.9166 16.1093 15.9166 15.8332V8.24984Z"/>
                                </svg>
                            </span>
                        </div>
                        <p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">Any date inside the period you want to report.</p>
                    </div>

                    <div id="visitor-from-wrap" @if ($period !== '') hidden @endif>
                        <label for="visitor-from" class="{{ $fieldLabelClasses }}">From date</label>
                        <div class="relative">
                            <input id="visitor-from" type="date" name="from" value="{{ $dateFrom }}" onclick="this.showPicker()" @disabled($period !== '') class="{{ $dateClasses }}">
                            <span class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66659 1.5415C7.0808 1.5415 7.41658 1.87729 7.41658 2.2915V2.99984H12.5833V2.2915C12.5833 1.87729 12.919 1.5415 13.3333 1.5415C13.7475 1.5415 14.0833 1.87729 14.0833 2.2915V2.99984L15.4166 2.99984C16.5212 2.99984 17.4166 3.89527 17.4166 4.99984V7.49984V15.8332C17.4166 16.9377 16.5212 17.8332 15.4166 17.8332H4.58325C3.47868 17.8332 2.58325 16.9377 2.58325 15.8332V7.49984V4.99984C2.58325 3.89527 3.47868 2.99984 4.58325 2.99984L5.91659 2.99984V2.2915C5.91659 1.87729 6.25237 1.5415 6.66659 1.5415ZM6.66659 4.49984H4.58325C4.30711 4.49984 4.08325 4.7237 4.08325 4.99984V6.74984H15.9166V4.99984C15.9166 4.7237 15.6927 4.49984 15.4166 4.49984H13.3333H6.66659ZM15.9166 8.24984H4.08325V15.8332C4.08325 16.1093 4.30711 16.3332 4.58325 16.3332H15.4166C15.6927 16.3332 15.9166 16.1093 15.9166 15.8332V8.24984Z"/>
                                </svg>
                            </span>
                        </div>
                    </div>

                    <div id="visitor-to-wrap" @if ($period !== '') hidden @endif>
                        <label for="visitor-to" class="{{ $fieldLabelClasses }}">To date</label>
                        <div class="relative">
                            <input id="visitor-to" type="date" name="to" value="{{ $dateTo }}" onclick="this.showPicker()" @disabled($period !== '') class="{{ $dateClasses }}">
                            <span class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66659 1.5415C7.0808 1.5415 7.41658 1.87729 7.41658 2.2915V2.99984H12.5833V2.2915C12.5833 1.87729 12.919 1.5415 13.3333 1.5415C13.7475 1.5415 14.0833 1.87729 14.0833 2.2915V2.99984L15.4166 2.99984C16.5212 2.99984 17.4166 3.89527 17.4166 4.99984V7.49984V15.8332C17.4166 16.9377 16.5212 17.8332 15.4166 17.8332H4.58325C3.47868 17.8332 2.58325 16.9377 2.58325 15.8332V7.49984V4.99984C2.58325 3.89527 3.47868 2.99984 4.58325 2.99984L5.91659 2.99984V2.2915C5.91659 1.87729 6.25237 1.5415 6.66659 1.5415ZM6.66659 4.49984H4.58325C4.30711 4.49984 4.08325 4.7237 4.08325 4.99984V6.74984H15.9166V4.99984C15.9166 4.7237 15.6927 4.49984 15.4166 4.49984H13.3333H6.66659ZM15.9166 8.24984H4.08325V15.8332C4.08325 16.1093 4.30711 16.3332 4.58325 16.3332H15.4166C15.6927 16.3332 15.9166 16.1093 15.9166 15.8332V8.24984Z"/>
                                </svg>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label for="visitor-site" class="{{ $fieldLabelClasses }}">Site</label>
                        <div class="relative">
                            <select id="visitor-site" name="site" class="{{ $selectClasses }}">
                                <option value="">All sites</option>
                                @foreach ($sites as $siteOption)
                                    <option value="{{ $siteOption }}" @selected($site === $siteOption)>{{ $siteLabels[$siteOption] ?? $siteOption }}</option>
                                @endforeach
                            </select>
                            <span class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 dark:text-gray-500" aria-hidden="true">
                                <svg class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M5 8l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label for="visitor-page-search" class="{{ $fieldLabelClasses }}">Page contains <span class="font-normal text-gray-400 dark:text-gray-500">(optional)</span></label>
                        <div class="relative">
                            <span class="pointer-events-none absolute top-1/2 left-3.5 -translate-y-1/2 text-gray-400 dark:text-gray-500" aria-hidden="true">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"/></svg>
                            </span>
                            <input id="visitor-page-search" type="search" name="page" value="{{ $pageSearch }}" placeholder="e.g. article-web"
                                class="shadow-theme-xs h-11 w-full rounded-lg border border-gray-300 bg-transparent py-2.5 pr-3 pl-10 text-sm text-gray-800 placeholder:text-gray-400 transition focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                        </div>
                    </div>
                </div>

                <div class="flex flex-col gap-4 border-t border-gray-100 pt-4 dark:border-gray-800 lg:flex-row lg:items-center lg:justify-between">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">Quick select</span>
                        @foreach ($quickRanges as $quickRange)
                            <button type="button" data-visitor-range="{{ $quickRange['key'] }}"
                                class="visitor-range rounded-full border px-3 py-1.5 text-xs font-medium transition {{ $activeQuickRange === $quickRange['key'] ? $quickActiveClasses : $quickInactiveClasses }}">{{ $quickRange['label'] }}</button>
                        @endforeach
                    </div>
                    <div class="flex flex-col gap-2 sm:flex-row">
                        <button type="submit" class="inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 text-sm font-medium text-white shadow-theme-xs transition hover:bg-brand-600 focus:ring-3 focus:ring-brand-500/10 focus:outline-hidden sm:w-auto">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5h18M6 12h12M10 19h4"/></svg>
                            Apply filters
                        </button>
                        <a href="{{ route('visitor.index') }}" class="inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 text-sm font-medium text-gray-700 shadow-theme-xs transition hover:bg-gray-50 sm:w-auto dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-white/[0.03]">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v6h6M20 20v-6h-6M5.64 18.36A9 9 0 0 0 20 12M4 12a9 9 0 0 1 14.36-6.36L20 7"/></svg>
                            <span>Reset</span>
                        </a>
                    </div>
                </div>
            </form>
        </section>

        <section id="visitor-panel-visitors" role="tabpanel" aria-labelledby="visitor-tab-visitors" data-visitor-panel="visitors" @if (! $isVisitors) hidden @endif class="space-y-5">
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
                @php
                    $visitPeriodNotes = [
                        'Today' => now()->format('j M Y'),
                        'This week' => now()->startOfWeek(\Illuminate\Support\Carbon::MONDAY)->format('j M').' – '.now()->format('j M Y'),
                        'This month' => now()->startOfMonth()->format('j M').' – '.now()->format('j M Y'),
                        'This year' => now()->startOfYear()->format('j M').' – '.now()->format('j M Y'),
                    ];
                @endphp
                @foreach ($dailyVisitPeriods as $label => $count)
                    <article class="rounded-2xl border border-gray-200 bg-white p-4 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03] sm:p-5">
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ $label }}</p>
                            <span class="h-2 w-2 shrink-0 rounded-full bg-violet-500"></span>
                        </div>
                        <p class="mt-3 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">{{ number_format($count) }}</p>
                        <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ $visitPeriodNotes[$label] ?? 'Daily visits' }}</p>
                    </article>
                @endforeach
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                @foreach ($visitorMetrics as $metric)
                    <article class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ $metric['label'] }}</p>
                                <p class="mt-3 text-3xl font-bold tracking-tight text-gray-900 dark:text-white">{{ number_format($metric['value']) }}</p>
                            </div>
                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl {{ $metric['color_classes'] }}">
                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $metric['icon'] }}"/></svg>
                            </span>
                        </div>
                        <div class="mt-4 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-3 text-xs text-gray-400 dark:border-gray-800 dark:text-gray-500">
                            <span>{{ $metric['note'] }}</span>
                            <span class="text-gray-300 dark:text-gray-700">·</span>
                            <span>{{ $rangeSummary }}</span>
                        </div>
                    </article>
                @endforeach
            </div>

            <section class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03] sm:p-6">
                <div class="mb-5 flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <h2 class="font-semibold text-gray-900 dark:text-white">Visits by day</h2>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $rangeSummary }} · {{ $siteSummary }} · {{ $chartGranularity === 'month' ? 'grouped by month' : 'one bar per day' }}</p>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="inline-flex items-center gap-2 rounded-lg bg-violet-50 px-3 py-1.5 text-xs font-medium text-violet-700 dark:bg-violet-500/10 dark:text-violet-300">
                            <i class="h-2 w-2 rounded-full bg-violet-500"></i> Daily visits
                        </span>
                        <span class="inline-flex items-center gap-1.5 rounded-lg bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-600 dark:bg-white/[0.04] dark:text-gray-300">
                            Total {{ number_format(array_sum($chartVisitors)) }}
                        </span>
                    </div>
                </div>
                @if (array_sum($chartVisitors) === 0)
                    <div class="flex h-64 flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-gray-200 px-6 text-center dark:border-gray-700 sm:h-72">
                        <span class="flex h-12 w-12 items-center justify-center rounded-full bg-violet-50 text-violet-500 dark:bg-violet-500/10 dark:text-violet-300">
                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 20V10m6 10V4m6 16v-7"/></svg>
                        </span>
                        <h3 class="mt-2 text-base font-medium text-gray-700 dark:text-gray-300">No daily visits in this range</h3>
                        <p class="max-w-sm text-sm text-gray-500 dark:text-gray-400">Try a wider period or a different site. Bars appear here as soon as visitors arrive.</p>
                    </div>
                @else
                    <div class="relative h-64 w-full sm:h-72">
                        <canvas id="visitor-daily-chart" aria-label="Daily visits chart for the selected report filter"></canvas>
                    </div>
                @endif
                <p class="mt-3 text-xs text-gray-400 dark:text-gray-500">Bars follow the active report filter: one bar per day for a day, week, month or custom range, and one bar per month when the range is longer than a year. Values follow the selected site filter.</p>
            </section>

            @unless ($setting->is_active)
                <div class="flex items-start gap-2.5 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-200">
                    <svg class="mt-0.5 h-4 w-4 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-.75-11.5a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-1.5 0v-4ZM10 14.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" clip-rule="evenodd"/></svg>
                    <p>Daily visitor tracking is paused. The figures above reflect data that was collected before it was switched off.</p>
                </div>
            @endunless
        </section>

        <section id="visitor-panel-pageviews" role="tabpanel" aria-labelledby="visitor-tab-pageviews" data-visitor-panel="pageviews" @if (! $isPageViews) hidden @endif class="space-y-5">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                @foreach ($pageViewMetrics as $metric)
                    <article class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ $metric['label'] }}</p>
                                <p class="mt-3 text-3xl font-bold tracking-tight text-gray-900 dark:text-white">{{ number_format($metric['value']) }}</p>
                            </div>
                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl {{ $metric['color_classes'] }}">
                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $metric['icon'] }}"/></svg>
                            </span>
                        </div>
                        <div class="mt-4 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-3 text-xs text-gray-400 dark:border-gray-800 dark:text-gray-500">
                            <span>{{ $metric['note'] }}</span>
                            <span class="text-gray-300 dark:text-gray-700">·</span>
                            <span>{{ $rangeSummary }}</span>
                        </div>
                    </article>
                @endforeach
            </div>

            <section class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03] sm:p-6">
                <div class="mb-5 flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <h2 class="font-semibold text-gray-900 dark:text-white">Traffic trend</h2>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $rangeSummary }} · {{ $siteSummary }}</p>
                    </div>
                    <div class="flex flex-wrap items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
                        <span class="inline-flex items-center gap-2"><i class="h-2.5 w-2.5 rounded-full bg-violet-500"></i>Daily visits</span>
                        <span class="inline-flex items-center gap-2"><i class="h-2.5 w-2.5 rounded-full bg-sky-500"></i>Page views</span>
                    </div>
                </div>
                @if (array_sum($chartVisitors) === 0 && array_sum($chartPageViews) === 0)
                    <div class="flex h-72 flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-gray-200 px-6 text-center dark:border-gray-700">
                        <span class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-50 text-gray-400 dark:bg-white/[0.04] dark:text-gray-500">
                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3v18h18M7 14l4-4 4 4 6-7"/></svg>
                        </span>
                        <h3 class="mt-2 text-base font-medium text-gray-700 dark:text-gray-300">No traffic in this range</h3>
                        <p class="max-w-sm text-sm text-gray-500 dark:text-gray-400">Try a wider period or a different site. New visits will appear here automatically.</p>
                    </div>
                @else
                    <div class="relative h-72 w-full">
                        <canvas id="visitor-trend-chart" aria-label="Visitor and page-view trends"></canvas>
                    </div>
                @endif
                <p class="mt-3 text-xs text-gray-400 dark:text-gray-500">Long ranges are grouped by month. A visitor is pseudonymous and may be counted again after clearing their browser cookie.</p>
            </section>

            @php
                $topPageChart = $topPages->take(10)->map(fn ($page) => ['label' => $page->page_path, 'views' => (int) $page->page_views])->values();
            @endphp
            <section class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-gray-100 px-5 py-4 dark:border-gray-800 sm:px-6">
                    <div>
                        <h2 class="font-semibold text-gray-900 dark:text-white">Most visited pages</h2>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Highest traffic in the selected report range.</p>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="hidden text-xs text-gray-400 sm:inline">Top 25 pages</span>
                        <form action="{{ route('visitor.clear') }}" method="POST" class="delete-form">
                            @csrf
                            <button type="submit" class="inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg border border-red-200 bg-white px-3 text-sm font-medium text-red-600 transition hover:bg-red-50 dark:border-red-500/30 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-500/10 sm:w-auto">Clear data</button>
                        </form>
                    </div>
                </div>

                @if ($topPages->isNotEmpty())
                    <div class="border-b border-gray-100 px-5 py-5 dark:border-gray-800 sm:px-6">
                        <div class="mb-3">
                            <h3 class="text-sm font-semibold text-gray-800 dark:text-white/90">Top 10 page views</h3>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Compare the most-viewed pages in this report.</p>
                        </div>
                        <div class="relative h-64 w-full">
                            <canvas id="visitor-top-pages-chart" aria-label="Top ten most-viewed pages"></canvas>
                        </div>
                    </div>

                    <div class="max-w-full overflow-x-auto">
                        <table class="w-full min-w-[760px] text-sm">
                            <thead class="bg-gray-50 text-left dark:bg-gray-800/50">
                                <tr>
                                    <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">#</th>
                                    <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">Page</th>
                                    <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">Site</th>
                                    <th class="px-5 py-3 text-right font-medium text-gray-500 dark:text-gray-400">Page views</th>
                                    <th class="px-5 py-3 text-right font-medium text-gray-500 dark:text-gray-400">Unique visitors</th>
                                    <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">Popularity</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                @foreach ($topPages as $index => $page)
                                    <tr class="transition hover:bg-gray-50/70 dark:hover:bg-white/[0.02]">
                                        <td class="px-5 py-3.5 text-gray-400">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</td>
                                        <td class="max-w-sm px-5 py-3.5 font-medium text-gray-800 dark:text-gray-200"><span class="block truncate" title="{{ $page->page_path }}">{{ $page->page_path }}</span></td>
                                        <td class="px-5 py-3.5"><span class="inline-flex whitespace-nowrap rounded-full bg-gray-100 px-2.5 py-1 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-300">{{ $siteLabels[$page->site_key] ?? $page->site_key }}</span></td>
                                        <td class="px-5 py-3.5 text-right font-semibold text-gray-900 dark:text-white">{{ number_format($page->page_views) }}</td>
                                        <td class="px-5 py-3.5 text-right text-gray-600 dark:text-gray-300">{{ number_format($page->unique_visitors) }}</td>
                                        <td class="min-w-32 px-5 py-3.5">
                                            <div class="h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                                                <div class="h-full rounded-full bg-gradient-to-r from-violet-500 to-sky-500" style="width: {{ $topPages->first()->page_views > 0 ? max(6, round($page->page_views / $topPages->first()->page_views * 100)) : 0 }}%"></div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="flex flex-col items-center justify-center gap-2 px-5 py-16 text-center">
                        <span class="flex h-12 w-12 items-center justify-center rounded-full bg-sky-50 text-sky-500 dark:bg-sky-500/10 dark:text-sky-300">
                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4h16v16H4zM8 8h8m-8 4h8m-8 4h5"/></svg>
                        </span>
                        <h3 class="mt-2 text-base font-medium text-gray-700 dark:text-gray-300">No page views yet</h3>
                        <p class="max-w-md text-sm text-gray-500 dark:text-gray-400">Try widening the report range or removing the page filter. Page views appear here once visitors browse your site.</p>
                    </div>
                @endif
            </section>
        </section>

        <section id="visitor-panel-report" role="tabpanel" aria-labelledby="visitor-tab-report" data-visitor-panel="report" @if (! $isReport) hidden @endif class="space-y-5">
            <section class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="flex flex-wrap items-start justify-between gap-3 border-b border-gray-100 px-5 py-4 dark:border-gray-800 sm:px-6">
                    <div>
                        <h2 class="font-semibold text-gray-900 dark:text-white">Monthly report</h2>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Full calendar month · official reporting format.</p>
                    </div>
                    <div class="flex flex-wrap items-end gap-2">
                        <form method="GET" action="{{ route('visitor.index') }}" data-no-reset class="flex flex-wrap items-end gap-2">
                            @foreach (request()->query() as $queryKey => $queryValue)
                                @if (! in_array($queryKey, ['report_year', 'report_month', 'page', 'tab', 'site'], true) && is_scalar($queryValue))
                                    <input type="hidden" name="{{ $queryKey }}" value="{{ $queryValue }}">
                                @endif
                            @endforeach
                            <input type="hidden" name="tab" value="report">
                            <div>
                                <label for="visitor-report-month" class="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">Month</label>
                                <select id="visitor-report-month" name="report_month" onchange="this.form.submit()"
                                    class="shadow-theme-xs h-10 w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-3 text-sm text-gray-800 transition focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                    @foreach (range(1, 12) as $reportMonthOption)
                                        <option value="{{ $reportMonthOption }}" @selected($report['month'] === $reportMonthOption)>{{ \Illuminate\Support\Carbon::create($report['year'], $reportMonthOption, 1)->format('F') }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="visitor-report-year" class="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">Year</label>
                                <select id="visitor-report-year" name="report_year" onchange="this.form.submit()"
                                    class="shadow-theme-xs h-10 w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-3 text-sm text-gray-800 transition focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                    @foreach ($reportYears as $reportYearOption)
                                        <option value="{{ $reportYearOption }}" @selected($report['year'] === $reportYearOption)>{{ $reportYearOption }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="visitor-report-site" class="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">Site</label>
                                <select id="visitor-report-site" name="site" onchange="this.form.submit()"
                                    class="shadow-theme-xs h-10 w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-3 text-sm text-gray-800 transition focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                    <option value="">All sites</option>
                                    @foreach ($sites as $siteOption)
                                        <option value="{{ $siteOption }}" @selected($site === $siteOption)>{{ $siteLabels[$siteOption] ?? $siteOption }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </form>
                        <a href="{{ route('visitor.report.pdf', $reportQuery) }}" class="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-3 text-sm font-medium text-gray-700 shadow-theme-xs transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-white/[0.03]">
                            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5 2.75A1.75 1.75 0 0 1 6.75 1h4.19c.46 0 .9.18 1.23.51l3.32 3.32c.33.33.51.77.51 1.23v10.2A1.75 1.75 0 0 1 14.25 18h-7.5A1.75 1.75 0 0 1 5 16.25V2.75Zm6.5.69v3.06h3.06L11.5 3.44Z"/></svg>
                            PDF
                        </a>
                        <a href="{{ route('visitor.report.export', $reportQuery) }}" class="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-3 text-sm font-medium text-gray-700 shadow-theme-xs transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-white/[0.03]">
                            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10.75 2.75a.75.75 0 0 0-1.5 0v7.19L6.53 7.22a.75.75 0 0 0-1.06 1.06l3.999 4a.75.75 0 0 0 1.06 0l4-4a.75.75 0 0 0-1.06-1.06l-2.72 2.72V2.75ZM3.5 13.5a.75.75 0 0 0-1.5 0v2A2.5 2.5 0 0 0 4.5 18h11a2.5 2.5 0 0 0 2.5-2.5v-2a.75.75 0 0 0-1.5 0v2a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-2Z"/></svg>
                            CSV
                        </a>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 px-5 py-5 sm:gap-4 sm:px-6 lg:grid-cols-3 xl:grid-cols-6">
                    @foreach ($report['kpis'] as $kpi)
                        <article class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.02]">
                            <div class="flex items-start justify-between gap-2">
                                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ $kpi['label'] }}</p>
                                @if (! is_null($kpi['delta']))
                                    <span class="inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-semibold {{ $kpi['delta'] >= 0 ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-300' }}">
                                        {{ $kpi['delta'] >= 0 ? '+' : '' }}{{ number_format($kpi['delta'], 1) }}%
                                    </span>
                                @endif
                            </div>
                            <p class="mt-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ $kpi['format'] === 'decimal' ? number_format($kpi['value'], 1) : number_format($kpi['value']) }}</p>
                            <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ $kpi['note'] }}</p>
                        </article>
                    @endforeach
                </div>

                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-gray-100 px-5 py-3 text-xs text-gray-500 dark:border-gray-800 dark:text-gray-400 sm:px-6">
                    <span>Compared with <strong class="font-semibold text-gray-700 dark:text-gray-200">{{ $report['mom']['label'] }}</strong></span>
                    <span class="text-gray-300 dark:text-gray-700">·</span>
                    <span>Page views {{ $report['mom']['page_views_delta'] === null ? 'n/a' : (($report['mom']['page_views_delta'] >= 0 ? '+' : '').number_format($report['mom']['page_views_delta'], 1).'%') }}</span>
                    <span class="text-gray-300 dark:text-gray-700">·</span>
                    <span>Unique visitors {{ $report['mom']['unique_visitors_delta'] === null ? 'n/a' : (($report['mom']['unique_visitors_delta'] >= 0 ? '+' : '').number_format($report['mom']['unique_visitors_delta'], 1).'%') }}</span>
                    <span class="text-gray-300 dark:text-gray-700">·</span>
                    <span>Peak day {{ $report['kpis'][5]['note'] }}</span>
                    <span class="text-gray-300 dark:text-gray-700">·</span>
                    <span>Peak hour {{ $report['peakHourLabel'] ?? 'n/a' }}</span>
                </div>

                <!-- __REPORT_CHARTS__ -->
                <div class="grid grid-cols-1 gap-6 border-t border-gray-100 px-5 py-5 dark:border-gray-800 sm:px-6 lg:grid-cols-2">
                    <div>
                        <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                            <h3 class="text-sm font-semibold text-gray-800 dark:text-white/90">Monthly visitors · {{ $report['year'] }}</h3>
                            <span class="text-xs text-gray-400 dark:text-gray-500">{{ number_format($report['yearlyUnique']) }} unique visitors</span>
                        </div>
                        <div class="relative h-64 w-full">
                            <canvas id="visitor-report-months-chart" aria-label="Monthly unique visitors for {{ $report['year'] }}"></canvas>
                        </div>
                    </div>
                    <div>
                        <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                            <h3 class="text-sm font-semibold text-gray-800 dark:text-white/90">Visits by hour · {{ $report['monthName'] }}</h3>
                            <span class="text-xs text-gray-400 dark:text-gray-500">Peak {{ $report['peakHourLabel'] ?? 'n/a' }}</span>
                        </div>
                        <div class="relative h-64 w-full">
                            <canvas id="visitor-report-hours-chart" aria-label="Page views by hour for {{ $report['monthLabel'] }}"></canvas>
                        </div>
                    </div>
                </div>

                <!-- __REPORT_TABLE__ -->
                <div class="border-t border-gray-100 dark:border-gray-800">
                    <div class="flex flex-wrap items-center justify-between gap-2 px-5 pt-4 sm:px-6">
                        <h3 class="text-sm font-semibold text-gray-800 dark:text-white/90">Monthly breakdown</h3>
                        <span class="text-xs text-gray-400 dark:text-gray-500">Calendar months · {{ $report['year'] }}</span>
                    </div>
                    <div class="mt-3 max-w-full overflow-x-auto">
                        <table class="w-full min-w-[680px] text-sm">
                            <thead class="bg-gray-50 text-left dark:bg-gray-800/50">
                                <tr>
                                    <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">Month</th>
                                    <th class="px-5 py-3 text-right font-medium text-gray-500 dark:text-gray-400">Unique visitors</th>
                                    <th class="px-5 py-3 text-right font-medium text-gray-500 dark:text-gray-400">Page views</th>
                                    <th class="px-5 py-3 text-right font-medium text-gray-500 dark:text-gray-400">Share of year</th>
                                    <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">Distribution</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                @foreach ($report['months'] as $row)
                                    <tr class="transition {{ $row['current'] ? 'bg-violet-50 dark:bg-violet-500/10' : 'hover:bg-gray-50/70 dark:hover:bg-white/[0.02]' }}">
                                        <td class="px-5 py-2.5 font-medium text-gray-800 dark:text-gray-200">
                                            {{ $row['label'] }}
                                            @if ($row['current'])
                                                <span class="ml-2 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700 dark:bg-violet-500/15 dark:text-violet-300">Current</span>
                                            @endif
                                        </td>
                                        <td class="px-5 py-2.5 text-right text-gray-600 dark:text-gray-300">{{ number_format($row['unique_visitors']) }}</td>
                                        <td class="px-5 py-2.5 text-right font-semibold text-gray-900 dark:text-white">{{ number_format($row['page_views']) }}</td>
                                        <td class="px-5 py-2.5 text-right text-gray-600 dark:text-gray-300">{{ number_format($row['share'], 1) }}%</td>
                                        <td class="min-w-32 px-5 py-2.5">
                                            <div class="h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                                                <div class="h-full rounded-full bg-violet-500" style="width: {{ $row['share'] }}%"></div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="bg-gray-50 dark:bg-gray-800/50">
                                <tr>
                                    <td class="px-5 py-3 font-semibold text-gray-800 dark:text-gray-200">Total</td>
                                    <td class="px-5 py-3 text-right font-semibold text-gray-900 dark:text-white">{{ number_format($report['yearlyUnique']) }}</td>
                                    <td class="px-5 py-3 text-right font-semibold text-gray-900 dark:text-white">{{ number_format($report['yearPageViews']) }}</td>
                                    <td class="px-5 py-3 text-right font-semibold text-gray-900 dark:text-white">100%</td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <p class="px-5 pt-2 pb-4 text-xs text-gray-400 dark:text-gray-500 sm:px-6">Yearly unique visitors are de-duplicated across the whole year; monthly figures are de-duplicated within each month.</p>
                </div>

                <!-- __REPORT_TOP__ -->
                <div class="border-t border-gray-100 dark:border-gray-800">
                    <div class="flex flex-wrap items-center justify-between gap-2 px-5 pt-4 sm:px-6">
                        <h3 class="text-sm font-semibold text-gray-800 dark:text-white/90">Top pages · {{ $report['monthLabel'] }}</h3>
                        <span class="text-xs text-gray-400 dark:text-gray-500">Share of {{ number_format($report['kpis'][0]['value']) }} page views</span>
                    </div>
                    @if ($report['topPages']->isEmpty())
                        <p class="px-5 py-10 text-center text-sm text-gray-500 dark:text-gray-400 sm:px-6">No page views were recorded in this month.</p>
                    @else
                        <div class="mt-3 max-w-full overflow-x-auto">
                            <table class="w-full min-w-[720px] text-sm">
                                <thead class="bg-gray-50 text-left dark:bg-gray-800/50">
                                    <tr>
                                        <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">#</th>
                                        <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">Page</th>
                                        <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">Site</th>
                                        <th class="px-5 py-3 text-right font-medium text-gray-500 dark:text-gray-400">Page views</th>
                                        <th class="px-5 py-3 text-right font-medium text-gray-500 dark:text-gray-400">Unique visitors</th>
                                        <th class="px-5 py-3 font-medium text-gray-500 dark:text-gray-400">Share</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                    @foreach ($report['topPages'] as $index => $page)
                                        <tr class="transition hover:bg-gray-50/70 dark:hover:bg-white/[0.02]">
                                            <td class="px-5 py-3 text-gray-400">{{ $index + 1 }}</td>
                                            <td class="max-w-sm px-5 py-3 font-medium text-gray-800 dark:text-gray-200"><span class="block truncate" title="{{ $page->page_path }}">{{ $page->page_path }}</span></td>
                                            <td class="px-5 py-3"><span class="inline-flex whitespace-nowrap rounded-full bg-gray-100 px-2.5 py-1 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-300">{{ $siteLabels[$page->site_key] ?? $page->site_key }}</span></td>
                                            <td class="px-5 py-3 text-right font-semibold text-gray-900 dark:text-white">{{ number_format($page->page_views) }}</td>
                                            <td class="px-5 py-3 text-right text-gray-600 dark:text-gray-300">{{ number_format($page->unique_visitors) }}</td>
                                            <td class="min-w-32 px-5 py-3">
                                                <div class="flex items-center gap-2">
                                                    <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                                                        <div class="h-full rounded-full bg-sky-500" style="width: {{ $page->share }}%"></div>
                                                    </div>
                                                    <span class="w-10 text-right text-xs text-gray-500 dark:text-gray-400">{{ number_format($page->share, 1) }}%</span>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                    <p class="px-5 pt-2 pb-4 text-xs text-gray-400 dark:text-gray-500 sm:px-6">This table covers the selected calendar month only; "Most visited pages" above follows the dashboard filters.</p>
                </div>

                <div class="border-t border-gray-100 bg-gray-50 px-5 py-3 text-xs text-gray-500 dark:border-gray-800 dark:bg-white/[0.02] dark:text-gray-400 sm:px-6">
                    Data source: first-party visitor counter (no IP address or user-agent stored) · daily visitors de-duplicated per visitor per day · page views de-duplicated for 30 minutes · report covers the full calendar month.
                </div>
            </section>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const filterForm = document.getElementById('visitor-filter-form');
            const activeTabInput = document.getElementById('visitor-active-tab');
            const tabButtons = document.querySelectorAll('[data-visitor-tab]');
            const tabPanels = document.querySelectorAll('[data-visitor-panel]');
            const filterCard = document.querySelector('[data-visitor-filter-card]');
            const chartInstances = {};

            const tabClasses = {
                visitors: {
                    active: ['border-violet-300', 'bg-violet-50', 'text-violet-700', 'dark:border-violet-500/40', 'dark:bg-violet-500/10', 'dark:text-violet-300'],
                    inactive: ['border-transparent', 'text-gray-600', 'hover:bg-gray-50', 'dark:text-gray-300', 'dark:hover:bg-white/[0.04]'],
                    subtitleActive: ['text-violet-600', 'dark:text-violet-300'],
                    subtitleInactive: ['text-gray-400', 'dark:text-gray-500'],
                },
                pageviews: {
                    active: ['border-sky-300', 'bg-sky-50', 'text-sky-700', 'dark:border-sky-500/40', 'dark:bg-sky-500/10', 'dark:text-sky-300'],
                    inactive: ['border-transparent', 'text-gray-600', 'hover:bg-gray-50', 'dark:text-gray-300', 'dark:hover:bg-white/[0.04]'],
                    subtitleActive: ['text-sky-600', 'dark:text-sky-300'],
                    subtitleInactive: ['text-gray-400', 'dark:text-gray-500'],
                },
                report: {
                    active: ['border-emerald-300', 'bg-emerald-50', 'text-emerald-700', 'dark:border-emerald-500/40', 'dark:bg-emerald-500/10', 'dark:text-emerald-300'],
                    inactive: ['border-transparent', 'text-gray-600', 'hover:bg-gray-50', 'dark:text-gray-300', 'dark:hover:bg-white/[0.04]'],
                    subtitleActive: ['text-emerald-600', 'dark:text-emerald-300'],
                    subtitleInactive: ['text-gray-400', 'dark:text-gray-500'],
                },
            };

            const activateTab = (tabName) => {
                activeTabInput.value = tabName;
                tabButtons.forEach((button) => {
                    const tab = button.dataset.visitorTab;
                    const styles = tabClasses[tab];
                    const isActive = tab === tabName;
                    button.setAttribute('aria-selected', isActive ? 'true' : 'false');
                    button.classList.remove(...styles.active, ...styles.inactive);
                    button.classList.add(...(isActive ? styles.active : styles.inactive));

                    const subtitle = button.querySelector('[data-visitor-tab-subtitle]');
                    if (subtitle) {
                        subtitle.classList.remove(...styles.subtitleActive, ...styles.subtitleInactive);
                        subtitle.classList.add(...(isActive ? styles.subtitleActive : styles.subtitleInactive));
                    }
                });
                tabPanels.forEach((panel) => {
                    panel.hidden = panel.dataset.visitorPanel !== tabName;
                });

                // The dashboard filter card does not apply to the monthly report tab.
                if (filterCard) {
                    filterCard.hidden = tabName === 'report';
                }

                // Charts rendered while their panel was hidden need a resize once shown.
                window.requestAnimationFrame(() => {
                    Object.values(chartInstances).forEach((chart) => chart.resize());
                });
            };

            tabButtons.forEach((button) => {
                button.addEventListener('click', () => activateTab(button.dataset.visitorTab));
            });
            activateTab(activeTabInput.value);

            const fromInput = document.getElementById('visitor-from');
            const toInput = document.getElementById('visitor-to');
            const periodInput = document.getElementById('visitor-period');
            const periodDateInput = document.getElementById('visitor-period-date');
            const periodDateWrap = document.getElementById('visitor-period-date-wrap');
            const fromWrap = document.getElementById('visitor-from-wrap');
            const toWrap = document.getElementById('visitor-to-wrap');
            const formatLocalDate = (date) => [
                date.getFullYear(),
                String(date.getMonth() + 1).padStart(2, '0'),
                String(date.getDate()).padStart(2, '0'),
            ].join('-');

            const syncPeriodFields = () => {
                const isCustom = periodInput.value === '';
                periodDateWrap.hidden = isCustom;
                periodDateInput.disabled = isCustom;
                fromWrap.hidden = !isCustom;
                toWrap.hidden = !isCustom;
                fromInput.disabled = !isCustom;
                toInput.disabled = !isCustom;
            };

            periodInput.addEventListener('change', () => {
                syncPeriodFields();
                filterForm.requestSubmit();
            });
            syncPeriodFields();

            document.querySelectorAll('.visitor-range').forEach((button) => {
                button.addEventListener('click', () => {
                    const today = new Date();
                    const start = new Date(today);
                    const range = button.dataset.visitorRange;
                    if (['day', 'week', 'month', 'year'].includes(range)) {
                        periodInput.value = range;
                        periodDateInput.value = formatLocalDate(today);
                    } else {
                        periodInput.value = '';
                        start.setDate(start.getDate() - (Number(range) - 1));
                        fromInput.value = formatLocalDate(start);
                        toInput.value = formatLocalDate(today);
                    }
                    syncPeriodFields();
                    filterForm.requestSubmit();
                });
            });

            const chartCanvas = document.getElementById('visitor-trend-chart');
            if (chartCanvas && window.Chart) {
                chartInstances.trend = new window.Chart(chartCanvas, {
                    type: 'line',
                    data: {
                        labels: @json($chartLabels),
                        datasets: [
                            {
                                label: 'Daily visits',
                                data: @json($chartVisitors),
                                borderColor: '#8b5cf6',
                                backgroundColor: 'rgba(139, 92, 246, 0.12)',
                                borderWidth: 2,
                                fill: true,
                                tension: 0.35,
                                pointRadius: 2,
                                pointHoverRadius: 5,
                            },
                            {
                                label: 'Page views',
                                data: @json($chartPageViews),
                                borderColor: '#0ea5e9',
                                backgroundColor: 'rgba(14, 165, 233, 0.08)',
                                borderWidth: 2,
                                fill: true,
                                tension: 0.35,
                                pointRadius: 2,
                                pointHoverRadius: 5,
                            },
                        ],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: { intersect: false, mode: 'index' },
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                padding: 12,
                                usePointStyle: true,
                                callbacks: {
                                    label: (context) => ' ' + context.dataset.label + ': ' + context.parsed.y.toLocaleString(),
                                },
                            },
                        },
                        scales: {
                            x: { grid: { display: false }, ticks: { maxTicksLimit: 12, color: '#9ca3af' } },
                            y: { beginAtZero: true, grid: { color: 'rgba(148, 163, 184, .15)' }, ticks: { precision: 0, color: '#9ca3af' } },
                        },
                    },
                });
            }

            const dailyCanvas = document.getElementById('visitor-daily-chart');
            if (dailyCanvas && window.Chart) {
                const dailyLabels = @json($chartLabels);
                const dailyVisits = @json($chartVisitors);
                const dailyGranularity = @json($chartGranularity);

                chartInstances.daily = new window.Chart(dailyCanvas, {
                    type: 'bar',
                    data: {
                        labels: dailyLabels,
                        datasets: [{
                            label: 'Daily visits',
                            data: dailyVisits,
                            backgroundColor: 'rgba(139, 92, 246, 0.85)',
                            hoverBackgroundColor: '#6d28d9',
                            borderRadius: 4,
                            borderSkipped: false,
                            maxBarThickness: 40,
                            categoryPercentage: 0.9,
                            barPercentage: 0.9,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                padding: 12,
                                displayColors: false,
                                callbacks: {
                                    label: (context) => context.parsed.y.toLocaleString()
                                        + (dailyGranularity === 'month' ? ' visits in ' + context.label : ' daily visits on ' + context.label),
                                },
                            },
                        },
                        scales: {
                            x: { grid: { display: false }, ticks: { maxTicksLimit: 14, maxRotation: 0, autoSkip: true, color: '#6b7280' } },
                            y: { beginAtZero: true, grid: { color: 'rgba(148, 163, 184, .15)' }, ticks: { precision: 0, color: '#9ca3af' } },
                        },
                    },
                });
            }

            const reportMonthsCanvas = document.getElementById('visitor-report-months-chart');
            if (reportMonthsCanvas && window.Chart) {
                const reportMonths = @json($report['months']);

                chartInstances.reportMonths = new window.Chart(reportMonthsCanvas, {
                    type: 'bar',
                    data: {
                        labels: reportMonths.map((row) => row.label),
                        datasets: [{
                            label: 'Unique visitors',
                            data: reportMonths.map((row) => row.unique_visitors),
                            backgroundColor: reportMonths.map((row) => row.current ? '#6d28d9' : 'rgba(139, 92, 246, 0.45)'),
                            hoverBackgroundColor: '#5b21b6',
                            borderRadius: 6,
                            borderSkipped: false,
                            maxBarThickness: 34,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                padding: 12,
                                displayColors: false,
                                callbacks: {
                                    label: (context) => context.parsed.y.toLocaleString() + ' unique visitors',
                                },
                            },
                        },
                        scales: {
                            x: { grid: { display: false }, ticks: { color: '#6b7280' } },
                            y: { beginAtZero: true, grid: { color: 'rgba(148, 163, 184, .15)' }, ticks: { precision: 0, color: '#9ca3af' } },
                        },
                    },
                });
            }

            const reportHoursCanvas = document.getElementById('visitor-report-hours-chart');
            if (reportHoursCanvas && window.Chart) {
                const reportHours = @json($report['hours']);
                const reportPeakHour = @json($report['peakHour']);

                chartInstances.reportHours = new window.Chart(reportHoursCanvas, {
                    type: 'bar',
                    data: {
                        labels: reportHours.map((value, hour) => String(hour).padStart(2, '0') + ':00'),
                        datasets: [{
                            label: 'Page views',
                            data: reportHours,
                            backgroundColor: reportHours.map((value, hour) => hour === reportPeakHour ? '#6d28d9' : 'rgba(139, 92, 246, 0.35)'),
                            hoverBackgroundColor: '#5b21b6',
                            borderRadius: 3,
                            borderSkipped: false,
                            maxBarThickness: 18,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                padding: 12,
                                displayColors: false,
                                callbacks: {
                                    label: (context) => context.parsed.y.toLocaleString() + ' page views at ' + context.label,
                                },
                            },
                        },
                        scales: {
                            x: { grid: { display: false }, ticks: { maxTicksLimit: 12, maxRotation: 0, autoSkip: true, color: '#6b7280' } },
                            y: { beginAtZero: true, grid: { color: 'rgba(148, 163, 184, .15)' }, ticks: { precision: 0, color: '#9ca3af' } },
                        },
                    },
                });
            }

            const topPagesCanvas = document.getElementById('visitor-top-pages-chart');
            if (topPagesCanvas && window.Chart) {
                const topPages = @json($topPageChart);
                chartInstances.topPages = new window.Chart(topPagesCanvas, {
                    type: 'bar',
                    data: {
                        labels: topPages.map((page) => page.label),
                        datasets: [{
                            label: 'Page views',
                            data: topPages.map((page) => page.views),
                            borderRadius: 6,
                            backgroundColor: 'rgba(14, 165, 233, 0.75)',
                            maxBarThickness: 22,
                        }],
                    },
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                padding: 12,
                                callbacks: { label: (context) => ' ' + context.parsed.x.toLocaleString() + ' views' },
                            },
                        },
                        scales: {
                            x: { beginAtZero: true, grid: { color: 'rgba(148, 163, 184, .15)' }, ticks: { precision: 0, color: '#9ca3af' } },
                            y: { grid: { display: false }, ticks: { color: '#6b7280' } },
                        },
                    },
                });
            }

            document.querySelectorAll('.delete-form').forEach((form) => {
                form.addEventListener('submit', function (event) {
                    event.preventDefault();
                    Swal.fire({
                        title: 'Clear visitor data?',
                        text: 'All visitor analytics will be permanently deleted.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#ef4444',
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: 'Clear data',
                        cancelButtonText: 'Cancel',
                    }).then((result) => {
                        if (result.isConfirmed) form.submit();
                    });
                });
            });
        });
    </script>
@endsection