@extends('layouts.app')

@section('title', __('app.nav_dashboard'))

@section('content')
    <section class="hero">
        <h1>{{ $settings['platform_name'] }}</h1>
        <p>{{ $settings['tagline'] ?? '' }}</p>
    </section>

    <h2 class="sr-only">{{ __('app.overview') }}</h2>
    <div class="grid grid-4" style="margin-bottom:16px">
        <div class="card stat"><span class="stat-label">{{ __('app.audiobooks') }}</span><span class="stat-value">{{ $stats['books'] }}</span><span class="stat-note">{{ __('app.chapters_count', ['count' => $stats['chapters']]) }}</span></div>
        <div class="card stat"><span class="stat-label">{{ __('app.nav_centers') }}</span><span class="stat-value">{{ $stats['centers'] }}</span></div>
        <div class="card stat"><span class="stat-label">{{ __('app.nav_learners') }}</span><span class="stat-value">{{ $stats['learners'] }}</span></div>
        <div class="card stat"><span class="stat-label">{{ __('app.vision_blind') }}</span><span class="stat-value">{{ $vision['blind'] ?? 0 }}</span></div>
        <div class="card stat"><span class="stat-label">{{ __('app.vision_low_vision') }}</span><span class="stat-value">{{ $vision['low_vision'] ?? 0 }}</span></div>
        <div class="card stat"><span class="stat-label">{{ __('app.books_completed') }}</span><span class="stat-value">{{ $stats['completed'] }}</span></div>
    </div>

    <div class="grid grid-2">
        <section class="card" aria-labelledby="popular-h">
            <div class="card-head"><h2 id="popular-h">{{ __('app.most_listened') }}</h2><a href="{{ route('library.index') }}">{{ __('app.nav_library') }} →</a></div>
            @php $max = max(1, $popular->max('listens_count')); @endphp
            <div class="bars">
                @foreach($popular as $book)
                    <div class="bar-row">
                        <a href="{{ route('library.show', $book) }}">{{ $book->t('title') }}</a>
                        <div class="bar-track" role="img" aria-label="{{ __('app.listeners_count', ['count' => $book->listens_count]) }}"><div class="bar-fill" style="width: {{ round($book->listens_count / $max * 100) }}%"></div></div>
                        <span>{{ $book->listens_count }}</span>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="card" aria-labelledby="mix-h">
            <div class="card-head"><h2 id="mix-h">{{ __('app.learner_profiles') }}</h2></div>
            @php $totalL = max(1, $stats['learners']); @endphp
            <div class="bars">
                @foreach(['blind', 'low_vision', 'sighted'] as $v)
                    @php $n = $vision[$v] ?? 0; @endphp
                    <div class="bar-row">
                        <span>{{ __('app.vision_'.$v) }}</span>
                        <div class="bar-track" role="img" aria-label="{{ round($n / $totalL * 100) }}%"><div class="bar-fill" style="width: {{ round($n / $totalL * 100) }}%"></div></div>
                        <span>{{ $n }}</span>
                    </div>
                @endforeach
                <div class="bar-row">
                    <span>{{ __('app.screen_reader_users') }}</span>
                    <div class="bar-track" role="img" aria-label="{{ round($stats['screen_reader'] / $totalL * 100) }}%"><div class="bar-fill" style="width: {{ round($stats['screen_reader'] / $totalL * 100) }}%"></div></div>
                    <span>{{ $stats['screen_reader'] }}</span>
                </div>
            </div>
        </section>
    </div>

    <section class="card" style="margin-top:16px" aria-labelledby="recent-h">
        <div class="card-head"><h2 id="recent-h">{{ __('app.recent_listening') }}</h2></div>
        <div class="table-wrap">
            <table>
                <caption class="sr-only">{{ __('app.recent_listening') }}</caption>
                <thead><tr><th scope="col">{{ __('app.learner') }}</th><th scope="col">{{ __('app.audiobook') }}</th><th scope="col">{{ __('app.progress') }}</th><th scope="col">{{ __('app.last_listened') }}</th></tr></thead>
                <tbody>
                @foreach($recent as $listen)
                    <tr>
                        <td>@include('partials.person', ['name' => $listen->learner->t('name'), 'sub' => $listen->learner->center->t('name')])</td>
                        <td>{{ $listen->book->cover_emoji }} {{ $listen->book->t('title') }}</td>
                        <td>@if($listen->completed)<span class="badge badge-ok">{{ __('app.completed') }}</span>@else<span class="badge">{{ __('app.chapters_done', ['done' => $listen->chapters_done]) }}</span>@endif</td>
                        <td class="muted">{{ optional($listen->last_listened_at)->diffForHumans() }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </section>
@endsection