@extends('layouts.app')
@section('title', __('Leaderboard'))
@section('content')
<section class="mb-6 flex flex-wrap items-end justify-between gap-4">
    <div>
        <p class="text-sm font-semibold text-orange-700">{{ __('Monthly team sales') }} · {{ $month }}</p>
        <h2 class="mt-1 text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">{{ __('Member leaderboard') }}</h2>
        <p class="mt-2 text-sm text-slate-500">{{ __('Celebrate the strongest growing teams across the institute.') }}</p>
    </div>
    <span class="rounded-full border border-orange-100 bg-orange-50 px-4 py-2 text-xs font-bold text-orange-800">{{ __('Top 10 members') }}</span>
</section>

<section class="panel-card overflow-hidden">
    <div class="grid grid-cols-[3rem_minmax(0,1fr)_auto] items-center gap-3 border-b border-slate-100 bg-slate-50 px-4 py-3 text-xs font-bold uppercase tracking-wider text-slate-400 sm:grid-cols-[4rem_minmax(0,1.3fr)_minmax(7rem,.7fr)_minmax(9rem,.8fr)] sm:px-6">
        <span>{{ __('Rank') }}</span>
        <span>{{ __('Member') }}</span>
        <span class="hidden sm:block">{{ __('Achievement') }}</span>
        <span class="text-right">{{ __('Team sales') }}</span>
    </div>
    @forelse($leaders as $index => $leader)
        <div class="grid grid-cols-[3rem_minmax(0,1fr)_auto] items-center gap-3 border-b border-slate-100 px-4 py-4 last:border-0 sm:grid-cols-[4rem_minmax(0,1.3fr)_minmax(7rem,.7fr)_minmax(9rem,.8fr)] sm:px-6">
            <span @class([
                'flex h-9 w-9 items-center justify-center rounded-full text-sm font-extrabold',
                'bg-orange-100 text-orange-800' => $index === 0,
                'bg-blue-50 text-blue-800' => $index === 1,
                'bg-slate-100 text-slate-600' => $index > 1,
            ])>{{ $index + 1 }}</span>
            <div class="flex min-w-0 items-center gap-3">
                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-orange-100 to-blue-100 text-sm font-extrabold text-blue-900">{{ strtoupper(substr($leader->name, 0, 1)) }}</span>
                <div class="min-w-0"><p class="truncate text-sm font-bold text-slate-900">{{ $leader->name }}</p><p class="mt-1 truncate text-xs text-slate-400">{{ $leader->member_id }}</p></div>
            </div>
            <span class="hidden text-sm font-semibold text-slate-600 sm:block">{{ $leader->leaderboard_rank?->name ?? __('Getting started') }}</span>
            <span class="whitespace-nowrap text-right text-sm font-extrabold text-slate-900">৳{{ number_format($leader->monthly_team_sales, 2) }}</span>
        </div>
    @empty
        <div class="px-6 py-14 text-center">
            <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-orange-50 text-orange-700"><x-nav-icon name="chart" class="h-6 w-6" /></span>
            <p class="mt-4 font-semibold text-slate-700">{{ __('The monthly leaderboard is ready') }}</p>
            <p class="mt-1 text-sm text-slate-400">{{ __('Approved team sales will appear here.') }}</p>
        </div>
    @endforelse
    @if($leaders->isNotEmpty())
        <p class="border-t border-slate-100 bg-slate-50/70 px-5 py-3 text-xs leading-5 text-slate-500 sm:px-6">{{ __('Rankings use approved sales recorded this month from each member’s placed downline. Your own personal sales are not included in your team total.') }}</p>
    @endif
</section>
@endsection