@extends('layouts.app')
@section('title', __('Leaderboard'))
@section('content')
<section class="mb-7 flex flex-wrap items-end justify-between gap-5">
    <div>
        <p class="text-sm font-bold text-orange-700">{{ __('Global sales leaderboard') }} · {{ $period }}</p>
        <h2 class="mt-1 text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">{{ __('Global Team Leader leaderboard') }}</h2>
        <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500">{{ __('Compete with team leaders across the institute. Approved team sales are included automatically.') }}</p>
    </div>
    <div class="flex items-center gap-2 rounded-full border border-emerald-100 bg-emerald-50 px-3 py-2 text-xs font-bold text-emerald-800">
        <span class="relative flex h-2 w-2">
            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span>
            <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
        </span>
        {{ __('Live · refreshes every 30 seconds') }}
    </div>
</section>

<section class="panel-card mb-7 p-4 sm:p-5">
    <form method="GET" action="{{ route('leaderboard') }}" class="flex flex-col gap-4 sm:flex-row sm:items-end">
        <label class="flex-1 text-xs font-bold uppercase tracking-wider text-slate-500">
            {{ __('From date') }}
            <input type="date" name="from" value="{{ $from }}" max="{{ now()->toDateString() }}" required class="field-control mt-2 w-full">
            @error('from')<span class="mt-1 block normal-case tracking-normal text-rose-600">{{ $message }}</span>@enderror
        </label>
        <label class="flex-1 text-xs font-bold uppercase tracking-wider text-slate-500">
            {{ __('To date') }}
            <input type="date" name="to" value="{{ $to }}" min="{{ $from }}" max="{{ now()->toDateString() }}" required class="field-control mt-2 w-full">
            @error('to')<span class="mt-1 block normal-case tracking-normal text-rose-600">{{ $message }}</span>@enderror
        </label>
        <div class="flex gap-2">
            <button type="submit" class="inline-flex min-h-11 items-center justify-center rounded-xl bg-slate-950 px-5 text-sm font-bold text-white transition hover:bg-slate-800">{{ __('Show results') }}</button>
            <a href="{{ route('leaderboard') }}" class="inline-flex min-h-11 items-center justify-center rounded-xl border border-slate-200 px-4 text-sm font-bold text-slate-600 transition hover:bg-slate-50">{{ __('Reset') }}</a>
        </div>
    </form>
</section>

@if($podium->isNotEmpty())
    <section aria-label="{{ __('Top three team leaders') }}" class="mb-8 grid gap-4 sm:grid-cols-3 sm:items-end">
        @foreach($podium as $index => $leader)
            @php
                $rankIndex = $leader->leaderboard_rank
                    ? array_search($leader->leaderboard_rank->order, $rankGlowOrder, true)
                    : false;
                $rankGlowLevel = $rankIndex === false
                    ? null
                    : min(4, max(1, (int) round(($rankIndex / max(count($rankGlowOrder) - 1, 1)) * 3) + 1));
            @endphp
            <article @class([
                'leaderboard-podium-card relative overflow-hidden rounded-3xl border p-5 text-center shadow-sm transition hover:-translate-y-1 hover:shadow-lg',
                'leaderboard-podium-rank-'.$rankGlowLevel => $rankGlowLevel,
                'order-1 border-amber-200 bg-gradient-to-br from-amber-50 via-white to-amber-100 sm:order-2 sm:-translate-y-3' => $index === 0,
                'order-2 border-slate-200 bg-gradient-to-br from-slate-50 via-white to-slate-100 sm:order-1' => $index === 1,
                'order-3 border-orange-200 bg-gradient-to-br from-orange-50 via-white to-orange-100' => $index === 2,
            ])>
                <span @class([
                    'mx-auto flex h-16 w-16 items-center justify-center rounded-2xl shadow-sm',
                    'bg-amber-400 text-amber-950' => $index === 0,
                    'bg-slate-200 text-slate-700' => $index === 1,
                    'bg-orange-200 text-orange-900' => $index === 2,
                ])>
                    <svg class="h-9 w-9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 21h8m-4-4v4m-5-17h10v5a5 5 0 0 1-10 0V4Zm0 2H4v2a4 4 0 0 0 4 4m8-6h4v2a4 4 0 0 1-4 4M9 4V2h6v2" />
                    </svg>
                </span>
                <p @class([
                    'mt-4 text-xs font-extrabold uppercase tracking-[.2em]',
                    'text-amber-700' => $index === 0,
                    'text-slate-500' => $index === 1,
                    'text-orange-700' => $index === 2,
                ])>{{ __('Place :number', ['number' => $index + 1]) }}</p>
                <p class="mt-2 truncate text-lg font-extrabold text-slate-950">{{ $leader->name }}</p>
                <p class="mt-1 text-xs font-medium text-slate-500">{{ $leader->member_id }}</p>
                <div class="mx-auto my-4 h-px max-w-40 bg-slate-200/80"></div>
                <p class="text-[11px] font-bold uppercase tracking-wider text-slate-500">{{ __('Sales count') }}</p>
                <p class="mt-1 text-xl font-black tracking-tight text-slate-950">{{ number_format($leader->monthly_team_sales_count) }} {{ __('sales') }}</p>
                @if($leader->leaderboard_rank)
                    <span @class([
                        'leaderboard-rank-badge mt-3 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-extrabold',
                        'leaderboard-rank-tier-'.$rankGlowLevel,
                    ])>
                        @if($leader->leaderboard_rank->badge)<span>{{ $leader->leaderboard_rank->badge }}</span>@endif
                        {{ $leader->leaderboard_rank->name }}
                    </span>
                @else
                    <span class="mt-3 inline-flex rounded-full bg-white/80 px-3 py-1 text-xs font-bold text-slate-600">{{ __('Getting started') }}</span>
                @endif
            </article>
        @endforeach
    </section>
@endif

<section class="panel-card overflow-hidden">
    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 bg-slate-50 px-4 py-4 sm:px-6">
        <div>
            <h3 class="font-extrabold text-slate-900">{{ __('Leaderboard standings') }}</h3>
            <p class="mt-1 text-xs text-slate-500">{{ __('Approved team sales · :period', ['period' => $period]) }}</p>
        </div>
        <span class="rounded-full border border-orange-100 bg-orange-50 px-3 py-1.5 text-xs font-bold text-orange-800">{{ __('Top 10 team leaders') }}</span>
    </div>

    @if($leaders->isEmpty())
        <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">{{ __('No approved team sales for this date range') }}</p>
            <p class="mt-1 text-sm text-slate-400">{{ __('Try another date range to see the global standings.') }}</p>
        </div>
    @else
        <div class="hidden grid-cols-[4rem_minmax(0,1fr)_minmax(7rem,.7fr)_minmax(9rem,.8fr)] items-center gap-3 border-b border-slate-100 px-5 py-3 text-xs font-bold uppercase tracking-wider text-slate-400 sm:grid sm:px-6">
            <span>{{ __('Rank') }}</span>
            <span>{{ __('Team Leader') }}</span>
            <span>{{ __('Achievement') }}</span>
            <span class="text-right">{{ __('Team sales') }}</span>
        </div>
        @foreach($remainingLeaders as $index => $leader)
            <div class="grid grid-cols-[2.5rem_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,1fr)_minmax(7rem,.7fr)_minmax(9rem,.8fr)] sm:px-6">
                <span class="flex h-9 w-9 items-center justify-center rounded-xl bg-slate-100 text-sm font-extrabold text-slate-600">{{ $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>
        @endforeach
        <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 include approved sales in each team leader’s placed downline for the selected dates. Personal sales are excluded from their own team total.') }}</p>
    @endif
</section>

<script>
    window.setInterval(() => window.location.reload(), 30000);
</script>
@endsection