@extends('layouts.account', ['title' => 'الترقيات | RaseedNow'])

@php
    $currentRank = $user->rankMeta();
    $spentMinor = (int) $user->total_spent_minor;
    $currentIndex = collect($rankDefinitions)->search(fn ($rank) => $rank['key'] === $currentRank['key']);
    $currentIndex = $currentIndex === false ? 0 : $currentIndex;
    $fmt = fn ($minor) => number_format($minor / 100, 2).' ج.م';
@endphp

@section('account_content')
    <div class="kd-page-head rn-ranks-page-head">
        <div><h1>رحلة الترقيات</h1><p>كل طلب مدفوع يقربك من علامة توثيق أقوى ورتبة أعلى.</p></div>
    </div>

    <section class="rn-ranks-hero is-{{ $currentRank['class'] }}">
        <div class="rn-ranks-current-seal"><span class="rn-rank-verify is-{{ $currentRank['class'] }}">{{ $currentRank['icon'] }}</span></div>
        <div class="rn-ranks-current-copy">
            <span>رتبتك الحالية</span>
            <h2>{{ $currentRank['label'] }}</h2>
            <p>إجمالي مشترياتك المدفوعة: <strong>{{ $fmt($spentMinor) }}</strong></p>
            @if($user->customer_tier_locked)<small>هذه الرتبة مميزة ومثبتة لك من إدارة المتجر.</small>@else<small>تتحدث رتبتك تلقائيًا بعد تأكيد دفع كل طلب.</small>@endif
        </div>
        <div class="rn-ranks-next-progress">
            @if($rankProgress['next'])
                <div><span>الترقية التالية</span><strong>{{ $rankProgress['next']['label'] }}</strong></div>
                <div class="rn-ranks-progress-track"><span style="width:{{ $rankProgress['percent'] }}%"></span></div>
                <p>فاضلك <strong>{{ $fmt($rankProgress['remaining_minor']) }}</strong> عشان توصلها</p>
            @else
                <div><span>أعلى مستوى</span><strong>أنت من العملاء الأسطوريين</strong></div>
                <div class="rn-ranks-progress-track"><span style="width:100%"></span></div>
                <p>وصلت إلى أقوى علامة توثيق في المتجر.</p>
            @endif
        </div>
    </section>

    <section class="rn-ranks-explainer">
        <article><i>1</i><div><strong>اشتري بشكل طبيعي</strong><span>أي لعبة أو بطاقة أو حساب من المتجر.</span></div></article>
        <article><i>2</i><div><strong>أكد الدفع</strong><span>تُحسب الطلبات المدفوعة والمؤكدة فقط.</span></div></article>
        <article><i>3</i><div><strong>ارتقِ تلقائيًا</strong><span>علامة التوثيق تتغير فور وصولك للحد المطلوب.</span></div></article>
    </section>

    <section class="rn-ranks-section">
        <header><div><h2>مستويات التوثيق السبعة</h2><p>شوف اللي فتحته واللي فاضلك للوصول لكل مستوى.</p></div><span>{{ $currentIndex + 1 }} / {{ count($rankDefinitions) }}</span></header>
        <div class="rn-ranks-grid">
            @foreach($rankDefinitions as $index => $rank)
                @php
                    $isCurrent = $rank['key'] === $currentRank['key'];
                    $isUnlocked = $index <= $currentIndex;
                    $remaining = max(0, $rank['min_spend_minor'] - $spentMinor);
                @endphp
                <article @class(['rn-rank-level-card', 'is-current' => $isCurrent, 'is-unlocked' => $isUnlocked, 'is-locked' => ! $isUnlocked, 'is-'.$rank['class']])>
                    <div class="rn-rank-level-top">
                        <span class="rn-rank-level-seal"><i class="rn-rank-verify is-{{ $rank['class'] }}">{{ $rank['icon'] }}</i></span>
                        @if($isCurrent)<em>رتبتك الحالية</em>@elseif($isUnlocked)<em>تم الوصول</em>@else<em>مقفولة</em>@endif
                    </div>
                    <h3>{{ $rank['label'] }}</h3>
                    <p>@if($rank['min_spend_minor'] === 0) تبدأ بها بمجرد إنشاء حسابك @else تحتاج إجمالي مشتريات مدفوعة بقيمة <strong>{{ $fmt($rank['min_spend_minor']) }}</strong> @endif</p>
                    @if(! $isUnlocked)
                        <div class="rn-rank-level-remaining"><span>المتبقي</span><strong>{{ $fmt($remaining) }}</strong></div>
                    @elseif($isCurrent && $rankProgress['next'])
                        <div class="rn-rank-level-remaining is-progress"><span>تقدمك للرتبة التالية</span><strong>{{ $rankProgress['percent'] }}%</strong></div>
                    @else
                        <div class="rn-rank-level-remaining is-done"><span>الحالة</span><strong>مكتملة ✓</strong></div>
                    @endif
                </article>
            @endforeach
        </div>
    </section>

    <section class="rn-ranks-note">
        <span>i</span><div><strong>معلومة مهمة</strong><p>الطلبات المعلقة أو غير المدفوعة لا تدخل في حساب الترقية. عند تأكيد الدفع يظهر التقدم الجديد تلقائيًا.</p></div>
    </section>
@endsection