@extends('layouts.app')
@section('title', __('Rank guide'))
@section('content')
<section class="panel-card mb-5 p-5 sm:p-7">
    <p class="text-xs font-bold uppercase tracking-widest text-orange-700">{{ __('Institute-wide rank system') }}</p>
    <h2 class="mt-1 text-2xl font-extrabold text-slate-900">{{ __('Rank qualifications') }}</h2>
    <p class="mt-2 text-sm leading-6 text-slate-500">{{ __('All team leaders are evaluated against the same rank requirements across every team.') }}</p>
    @if(auth()->user()->isAdmin() || auth()->user()->isEmployee())
        <p class="mt-3 text-xs text-slate-500">{{ __('Ranks apply to team leader binary teams. Employee accounts are not ranked as network members.') }}</p>
    @else
        <p class="mt-4 rounded-xl bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">{{ __('Your current rank') }}: {{ $currentRank?->name ?? __('Starter') }}</p>
    @endif
</section>

<section class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
    @forelse($ranks as $rank)
        <article class="panel-card p-5 sm:p-6">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-xs font-bold uppercase tracking-wider text-orange-700">{{ __('Rank') }} {{ $rank->order }}</p>
                    <h3 class="mt-1 text-lg font-extrabold text-slate-900">{{ $rank->badge ? $rank->badge.' ' : '' }}{{ $rank->name }}</h3>
                </div>
                @if($currentRank?->id === $rank->id)
                    <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-700">{{ __('Your rank') }}</span>
                @endif
            </div>
            <dl class="mt-5 space-y-3 text-sm">
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Left volume required') }}</dt><dd class="font-bold text-slate-800">{{ number_format($rank->left_volume_req, 2) }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Right volume required') }}</dt><dd class="font-bold text-slate-800">{{ number_format($rank->right_volume_req, 2) }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Personal sales required') }}</dt><dd class="font-bold text-slate-800">৳{{ number_format($rank->personal_sales_req, 2) }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Direct team required') }}</dt><dd class="font-bold text-slate-800">{{ number_format($rank->team_req) }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Matching volume required') }}</dt><dd class="font-bold text-slate-800">৳{{ number_format($rank->matching_req, 2) }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Rank bonus') }}</dt><dd class="font-bold text-slate-800">৳{{ number_format($rank->rank_bonus, 2) }}</dd></div>
            </dl>
            <div class="mt-5 flex flex-wrap gap-2">
                @if($rank->salary_eligible)<span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">{{ __('Salary eligible') }}</span>@endif
                @if($rank->royalty_eligible)<span class="rounded-full bg-violet-50 px-3 py-1 text-xs font-semibold text-violet-700">{{ __('Royalty eligible') }}</span>@endif
                @if($rank->tour_eligible)<span class="rounded-full bg-orange-50 px-3 py-1 text-xs font-semibold text-orange-700">{{ __('Tour eligible') }}</span>@endif
            </div>
        </article>
    @empty
        <div class="panel-card p-8 text-center text-sm text-slate-500 md:col-span-2 xl:col-span-3">{{ __('No ranks configured yet.') }}</div>
    @endforelse
</section>
@endsection