@extends('layouts.dashboard')
@section('title', __('Leaderboard'))
@section('page_title', __('Leaderboard'))

@section('content')
    @if($currentUserRank)
        <div class="alert alert-primary d-flex align-items-center">
            <i class="bi bi-trophy-fill me-2 fs-5"></i>
            <span>{!! __('You are currently ranked :rank on the leaderboard.', ['rank' => '<strong>#'.$currentUserRank.'</strong>']) !!}</span>
        </div>
    @endif

    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th style="width:80px;">{{ __('Rank') }}</th>
                        <th>{{ __('Learner') }}</th>
                        <th class="text-end">{{ __('Points') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($leaders as $entry)
                        {{-- `table-primary` renders as a light band in dark mode, so the
                             row for the signed-in learner is highlighted with a themed
                             class of our own instead. --}}
                        <tr class="{{ $entry->is_current ? 'lf-lb-me' : '' }}">
                            <td>
                                @php($medal = ['', 'gold', 'silver', 'bronze'][$entry->rank] ?? null)
                                @if($medal)
                                    <span class="lf-medal lf-medal--{{ $medal }}" title="{{ __('Rank :n', ['n' => $entry->rank]) }}">
                                        <i class="bi bi-trophy-fill"></i>{{ $entry->rank }}
                                    </span>
                                @else
                                    <span class="lf-rank">#{{ $entry->rank }}</span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="{{ $entry->user->avatarUrl() }}" alt="" class="rounded-circle me-2" width="36" height="36">
                                    <span class="fw-medium">
                                        {{ $entry->user->name }}
                                        @if($entry->is_current)
                                            <span class="badge text-bg-primary ms-1">{{ __('You') }}</span>
                                        @endif
                                    </span>
                                </div>
                            </td>
                            <td class="text-end fw-bold">{{ number_format($entry->total) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="text-center text-muted py-4">{{ __('No points have been awarded yet.') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* Rank medals: one consistent shape for the top three, a plain number
           after that. Colours are fixed because a gold medal is gold in either
           theme; only the contrast text follows it. */
        .lf-medal {
            display: inline-flex; align-items: center; gap: .3rem;
            min-width: 3rem; justify-content: center;
            padding: .3rem .55rem; border-radius: 999px;
            font-weight: 700; font-size: .82rem; line-height: 1;
            color: #3f2d00;
        }
        .lf-medal i { font-size: .8rem; }
        .lf-medal--gold   { background: linear-gradient(135deg, #fde68a, #f59e0b); }
        .lf-medal--silver { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #1f2937; }
        .lf-medal--bronze { background: linear-gradient(135deg, #e6b088, #b45309); color: #fff; }

        .lf-rank { font-weight: 700; color: var(--bs-secondary-color); }

        /* The signed-in learner's row, readable in both themes. */
        .lf-lb-me > td {
            background: rgba(var(--bs-primary-rgb), .10);
            box-shadow: inset 3px 0 0 var(--bs-primary);
        }
        .table-hover > tbody > tr.lf-lb-me:hover > td {
            background: rgba(var(--bs-primary-rgb), .16);
        }
    </style>
@endpush