@extends('layouts.account')

@section('title', __('Analytics'))
@section('heading', $listing->title)
@section('subheading', __('How this listing is doing.'))

@section('account')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
        <div class="flex flex-wrap gap-2">
            @foreach ($windows as $window)
                <a href="{{ route('account.listings.analytics', ['listing' => $listing, '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>

        <div class="flex flex-wrap gap-2">
            <a href="{{ $listing->publicUrl() }}" class="btn-outline btn-sm">{{ __('View listing') }}</a>
            <a href="{{ route('account.listings.promote', $listing) }}" class="btn-primary btn-sm">{{ __('Promote') }}</a>
        </div>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ([
            ['label' => __('Enquiry rate'), 'value' => $totals['enquiry_rate'].'%'],
            ['label' => __('Enquiries'), 'value' => $totals['enquiries']],
            ['label' => __('Views'), 'value' => $totals['views']],
            ['label' => __('Saved'), 'value' => $totals['favourites']],
        ] 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>
            </div>
        @endforeach
    </div>

    @php
        $peak = max(1, $series->max('views'));
    @endphp

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

        {{-- Drawn in CSS rather than with a charting library: it is one series of
             bars, and a page of listings should not download a plotting engine
             to show it. The table below carries the same numbers for anybody who
             cannot see the bars. --}}
        <div class="rounded-xl border border-border bg-surface p-5">
            <div class="flex h-40 items-end gap-1 overflow-x-auto" role="presentation">
                @foreach ($series as $day)
                    <div class="flex min-w-1.5 flex-1 flex-col justify-end" style="height: 100%">
                        <div class="rounded-t bg-primary/70"
                             style="height: {{ round($day['views'] / $peak * 100) }}%"></div>
                    </div>
                @endforeach
            </div>

            <div class="mt-2 flex justify-between text-xs text-text-muted">
                <span>{{ \Illuminate\Support\Carbon::parse($series->first()['date'])->format('j M') }}</span>
                <span>{{ \Illuminate\Support\Carbon::parse($series->last()['date'])->format('j M') }}</span>
            </div>
        </div>

        <details class="mt-4">
            <summary class="cursor-pointer text-sm text-text-brand">{{ __('Show the numbers') }}</summary>

            <div class="mt-3 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-2 font-semibold">{{ __('Date') }}</th>
                            <th class="px-4 py-2 text-right font-semibold">{{ __('Views') }}</th>
                            <th class="px-4 py-2 text-right font-semibold">{{ __('Enquiries') }}</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-border">
                        @foreach ($series->reverse() as $day)
                            <tr>
                                <td class="px-4 py-2 text-text-secondary">
                                    {{ \Illuminate\Support\Carbon::parse($day['date'])->format('j M Y') }}
                                </td>
                                <td class="px-4 py-2 text-right text-text">{{ $day['views'] }}</td>
                                <td class="px-4 py-2 text-right text-text">{{ $day['enquiries'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </details>
    </section>
@endsection