@extends('layouts.account')

@section('title', __('Analytics'))
@section('heading', __('Analytics'))
@section('subheading', __('What your listings are doing.'))

@section('account')
    <div class="mb-6 flex flex-wrap gap-2">
        @foreach ($windows as $window)
            <a href="{{ route('account.analytics.index', ['days' => $window]) }}"
               @class(['pill', 'pill-brand' => $days === $window, 'pill-idle' => $days !== $window])>
                {{ trans_choice('Last day|Last :count days', $window, ['count' => $window]) }}
            </a>
        @endforeach
    </div>

    {{-- The enquiry rate leads. Views alone flatter a listing nobody contacts;
         the ratio is what tells a seller the price is wrong. --}}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ([
            ['label' => __('Enquiry rate'), 'value' => $totals['enquiry_rate'].'%', 'hint' => __('of views that got in touch')],
            ['label' => __('Enquiries'), 'value' => $totals['enquiries'], 'hint' => __('people who contacted you')],
            ['label' => __('Views'), 'value' => $totals['views'], 'hint' => trans_choice('from one visitor|from :count visitors', $totals['unique_views'], ['count' => $totals['unique_views']])],
            ['label' => __('Saved'), 'value' => $totals['favourites'], 'hint' => __('added to a shortlist')],
        ] as $card)
            <div class="rounded-xl border border-border bg-surface p-5">
                <p class="meta-label">{{ $card['label'] }}</p>

                <p class="mt-2 font-display text-display font-bold text-text">{{ $card['value'] }}</p>

                <p class="mt-1 text-xs text-text-muted">{{ $card['hint'] }}</p>
            </div>
        @endforeach
    </div>

    <section class="mt-10" aria-labelledby="by-listing">
        <h2 id="by-listing" class="mb-4 font-display text-title font-bold text-text">
            {{ __('Listing by listing') }}
        </h2>

        @if ($leaderboard->isEmpty())
            <x-empty-state icon="chart"
                           :title="$listingCount > 0 ? __('Nothing recorded yet') : __('No listings yet')"
                           :message="$listingCount > 0
                               ? __('Figures appear here once people start viewing your listings.')
                               : __('Once you publish a listing, its figures appear here.')" />
        @else
            <div class="overflow-x-auto rounded-xl border border-border bg-surface">
                <table class="w-full text-left text-sm">
                    <thead class="border-b border-border text-xs uppercase tracking-wide text-text-muted">
                        <tr>
                            <th class="px-4 py-3 font-semibold">{{ __('Listing') }}</th>
                            <th class="px-4 py-3 text-right font-semibold">{{ __('Views') }}</th>
                            <th class="px-4 py-3 text-right font-semibold">{{ __('Enquiries') }}</th>
                            <th class="px-4 py-3 text-right font-semibold">{{ __('Rate') }}</th>
                            <th class="px-4 py-3"><span class="sr-only">{{ __('Actions') }}</span></th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-border">
                        @foreach ($leaderboard as $row)
                            <tr>
                                <td class="px-4 py-3">
                                    <a href="{{ route('account.listings.analytics', $row['listing']) }}"
                                       class="font-medium text-text hover:text-text-brand">
                                        {{ $row['listing']?->title }}
                                    </a>
                                </td>

                                <td class="px-4 py-3 text-right text-text-secondary">{{ $row['views'] }}</td>
                                <td class="px-4 py-3 text-right text-text-secondary">{{ $row['enquiries'] }}</td>

                                <td class="px-4 py-3 text-right">
                                    <span @class([
                                        'font-medium',
                                        'text-success' => $row['rate'] >= 2,
                                        'text-text-secondary' => $row['rate'] < 2,
                                    ])>{{ $row['rate'] }}%</span>
                                </td>

                                <td class="px-4 py-3 text-right">
                                    <a href="{{ route('account.listings.analytics', $row['listing']) }}"
                                       class="text-sm text-text-brand hover:underline">{{ __('Detail') }}</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>

    <p class="mt-8 text-sm text-text-muted">
        {{ __('Visitor counts are approximate: somebody browsing on a phone and a laptop counts twice. We do not track people between devices.') }}
    </p>
@endsection