@extends('layouts.app')
@section('title', __('Rank progress'))
@section('content')
<div class="space-y-6">
    <section class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-indigo-950 via-blue-900 to-sky-700 p-6 text-white shadow-xl shadow-blue-950/15 sm:p-8">
        <div class="relative z-10 flex flex-wrap items-end justify-between gap-5">
            <div>
                <p class="text-xs font-bold uppercase tracking-[.2em] text-sky-200">{{ __('Your next milestone') }}</p>
                <h2 class="mt-2 text-2xl font-extrabold sm:text-3xl">{{ __('Rank progress') }}</h2>
                <p class="mt-2 text-sm text-blue-100/80">{{ __('See each qualification and what remains before your next rank.') }}</p>
            </div>
            <div class="rounded-2xl border border-white/15 bg-white/10 px-5 py-3 text-center">
                <p class="text-xs font-semibold text-blue-100">{{ __('Overall progress') }}</p>
                <p class="mt-1 text-3xl font-black">{{ number_format($progress, 0) }}%</p>
            </div>
        </div>
        <div class="mt-6 h-2.5 overflow-hidden rounded-full bg-white/15">
            <div class="h-full rounded-full bg-gradient-to-r from-cyan-300 to-emerald-300" style="width: {{ min(100, max(0, $progress)) }}%"></div>
        </div>
    </section>

    <section class="grid gap-4 sm:grid-cols-[1fr_auto_1fr] sm:items-stretch">
        <article class="panel-card p-5">
            <p class="text-xs font-bold uppercase tracking-wider text-slate-400">{{ __('Current rank') }}</p>
            <p class="mt-2 text-xl font-extrabold text-slate-900">{{ $currentRank?->badge ? $currentRank->badge.' ' : '' }}{{ $currentRank?->name ?? __('Starter') }}</p>
        </article>
        <div class="hidden items-center justify-center text-2xl font-bold text-slate-300 sm:flex">→</div>
        <article class="panel-card border-blue-100 bg-gradient-to-br from-white to-blue-50/70 p-5">
            <p class="text-xs font-bold uppercase tracking-wider text-blue-500">{{ __('Next rank') }}</p>
            <p class="mt-2 text-xl font-extrabold text-blue-950">{{ $nextRank?->badge ? $nextRank->badge.' ' : '' }}{{ $nextRank?->name ?? __('Top rank') }}</p>
        </article>
    </section>

    <section class="panel-card overflow-hidden">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-5 sm:px-6">
            <div>
                <h3 class="font-extrabold text-slate-900">{{ __('Next rank requirements') }}</h3>
                <p class="mt-1 text-xs text-slate-500">{{ __('Progress is limited by the qualification with the lowest completion.') }}</p>
            </div>
            <a href="{{ route('ranks') }}" class="text-sm font-bold text-orange-700">{{ __('View rank guide') }} →</a>
        </div>
        @if($nextRank)
            <div class="grid gap-4 p-5 sm:grid-cols-2 sm:p-6 xl:grid-cols-3">
                @foreach($requirements as $requirement)
                    <article class="rounded-2xl border border-slate-100 bg-white p-4 shadow-sm">
                        <div class="flex items-start justify-between gap-3">
                            <p class="text-sm font-bold leading-5 text-slate-700">{{ $requirement['label'] }}</p>
                            <span class="shrink-0 rounded-full bg-blue-50 px-2.5 py-1 text-xs font-extrabold text-blue-700">{{ number_format($requirement['progress'], 0) }}%</span>
                        </div>
                        <p class="mt-4 text-lg font-extrabold text-slate-950">
                            @if($requirement['currency'])৳@endif{{ number_format($requirement['current'], $requirement['decimals']) }}
                            <span class="text-xs font-semibold text-slate-400">/ @if($requirement['currency'])৳@endif{{ number_format($requirement['required'], $requirement['decimals']) }}</span>
                        </p>
                        <div class="mt-3 h-2 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full bg-gradient-to-r from-blue-700 to-cyan-400" style="width: {{ min(100, max(0, $requirement['progress'])) }}%"></div>
                        </div>
                    </article>
                @endforeach
            </div>
        @else
            <div class="px-6 py-12 text-center">
                <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-700"><x-nav-icon name="sparkles" class="h-6 w-6" /></span>
                <p class="mt-4 text-sm font-bold text-slate-800">{{ __('You have reached the highest rank currently configured.') }}</p>
                <p class="mt-1 text-xs text-slate-500">{{ __('Your progress will update if an administrator adds another rank.') }}</p>
            </div>
        @endif
    </section>
</div>
@endsection