@extends('frontend.layouts.main-profile')

@section('title', $seo['title'] ?? '' )
@section('keywords', $seo['keywords']??'')
@section('description', $seo['description']??'')
@section('abstract', $seo['abstract']??'')
@section('image', $seo['image']??'')
@section('css')
<link rel="stylesheet" href="/frontend/css/profile/ranking.css">
@endsection

@section('content')
<div class="content-wrapper">
    <div class="main">
        <div class="rank-container">
            <div class="rank-content">
                <div class="left-section">
                    <div class="current-rank">
                        <div class="rank-badge">
                            <div class="rank-icon">⭐</div>
                            <span>{{$user->rank->name}}</span>
                        </div>
                        <div class="current-spending">Tổng chi tiêu hiện tại</div>
                        <div class="spending-amount">{{number_format($user->point)}}đ</div>
                    </div>

                    @if($nextRank)
                    <div class="progress-section">
                        <div class="progress-header">
                            <div class="next-rank">🏆 Lên {{$nextRank->name}}</div>
                            <div class="remaining-amount">Còn {{number_format($nextRank->total - $user->point)}}đ</div>
                        </div>
                        @else
                        <div class="progress-section">
                            <div class="progress-header">
                                <div class="next-rank">🎉 Bạn đã đạt hạng cao nhất</div>
                            </div>
                            @endif

                            @php
                            $progress = $nextRank ? round(($user->point / $nextRank->total) * 100, 2) : 100;
                            @endphp
                            <div class="progress-bar">
                                <div class="progress-fill" style=" width: {{$progress}}%;"></div>
                            </div>

                            @if($nextRank)
                            <div class="progress-labels">
                                <span>0₫</span>
                                <span>{{number_format($nextRank->total)}}đ</span>
                            </div>
                            @else
                            <div class="progress-labels">
                                <span>{{number_format($currentRank->total)}}đ</span>
                                <span>∞</span>
                            </div>
                            @endif

                        </div>
                    </div>

                    <div class="right-section">
                        @if($nextRank)
                        <div class="call-to-action">
                            @isset($categoryProduct)
                            <a href="{{$categoryProduct->slug_full}}">
                                <div class="cta-title">🎯 Chỉ cần thêm {{number_format($nextRank->total - $user->point)}}đ nữa!</div>
                                <div class="cta-subtitle">Mua sắm ngay để lên hạng {{$nextRank->name}} và nhận ưu đãi tốt hơn</div>
                            </a>
                            @endisset
                        </div>

                        <div class="benefits-list">
                            <div class="benefits-title">🏆 Quyền lợi {{$nextRank->name}}</div>
                            {!!$nextRank->description!!}
                        </div>
                        @else
                        <div class="call-to-action">
                            <div class="cta-title">🏅 Bạn đã đạt hạng cao nhất!</div>
                            <div class="cta-subtitle">Tận hưởng toàn bộ ưu đãi đặc biệt dành cho bạn.</div>
                        </div>

                        <div class="benefits-list">
                            <div class="benefits-title">🏆 Quyền lợi hiện tại</div>
                            {!!$currentRank->description!!}
                        </div>
                        @endif
                    </div>

                </div>

                <div class="rank-levels">
                    @php
                    $currentRankIndex = null;
                    foreach ($ranks as $index => $item) {
                    if ($user->rank_id == $item->id) {
                    $currentRankIndex = $index;
                    break;
                    }
                    }
                    @endphp

                    @foreach($ranks as $index => $item)
                    @php
                    if ($index === $currentRankIndex) {
                    $class = 'current';
                    } elseif ($index < $currentRankIndex) {
                        $class='completed' ;
                        } else {
                        $class='upcoming' ;
                        }

                        // Gán thêm logic: nếu point user>= 90% của rank kế tiếp thì vẫn xem như "current"
                        if ($index === $currentRankIndex + 1 && $user->point >= ($item->total * 0.9)) {
                        $class = 'current';
                        }
                        @endphp

                        <div class="rank-level {{ $class }}">
                            <span class="rank-level-icon">🏆</span>
                            <div>{{ $item->name }}</div>
                            <div>{{ number_format($item->total) }}đ</div>
                        </div>
                        @endforeach
                </div>

            </div>

        </div>
    </div>



    @endsection
    @section('js')

    @endsection