@extends('front.layouts.master-auth')
@section('content')

<section class="page-content badges-page">
    <div class="container">
        <div class="badges-page-header">
            <h1>نظام وسوم المستقلين في ربحي</h1>
            <p>
                الوسوم هي شارات تُمنح تلقائيًا للمستقلين بناءً على إنجازاتهم وأدائهم على المنصة.
                كلما حققت المزيد، ارتقيت لوسم أعلى وزادت ثقة أصحاب المشاريع بك.
            </p>
        </div>

        <div class="badges-page-grid">
            @foreach($progressionBadges as $badge)
                @php
                    $userProgress = null;
                    if (!empty($badgeProgress)) {
                        $userProgress = collect($badgeProgress)->firstWhere('badge.id', $badge->id);
                    }

                    $iconSvg = match($badge->slug) {
                        'ready-to-work' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
                        'rising-star' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>',
                        'profit-pro' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>',
                        'ribhi-elite' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm0 2h14v2H5v-2z"/></svg>',
                        default => ''
                    };

                    $conditions = $badge->conditions ?? [];
                    $conditionLabels = [
                        'requires_complete_profile' => 'الملف الشخصي مكتمل (تخصص + نبذة + صورة + معرض أعمال + مهارات)',
                        'requires_identity_verification' => 'الهوية موثقة',
                        'requires_email_verification' => 'البريد الإلكتروني موثق',
                        'min_completed_projects' => 'إكمال ' . ($conditions['min_completed_projects'] ?? 0) . ' مشاريع على الأقل',
                        'min_rating' => 'تقييم ' . ($conditions['min_rating'] ?? 0) . ' من 5 أو أعلى',
                        'min_completion_rate' => 'نسبة إكمال المشاريع ' . ($conditions['min_completion_rate'] ?? 0) . '% أو أعلى',
                        'min_total_earnings' => 'إجمالي الأرباح ' . ($conditions['min_total_earnings'] ?? 0) . '$ أو أكثر',
                        'min_response_rate' => 'معدل الرد على الرسائل ' . ($conditions['min_response_rate'] ?? 0) . '% أو أعلى',
                        'min_member_months' => 'عضو منذ ' . ($conditions['min_member_months'] ?? 0) . ' أشهر على الأقل',
                    ];
                @endphp

                <div class="badge-explain-card">
                    <div class="badge-explain-header">
                        <div class="badge-explain-icon" style="background: {{ $badge->color }}20; color: {{ $badge->color }};">
                            {!! $iconSvg !!}
                        </div>
                        <div>
                            <h3 style="color: {{ $badge->color }};">{{ $badge->name }}</h3>
                            <span class="badge-tier">المستوى {{ 6 - $badge->tier }} من 4</span>
                        </div>
                    </div>

                    <p class="badge-explain-desc">{{ $badge->description }}</p>

                    <ul class="badge-explain-conditions">
                        @foreach($conditions as $key => $value)
                            @if($value !== null && isset($conditionLabels[$key]))
                                @php
                                    $isMet = $userProgress['conditions_status'][$key] ?? false;
                                @endphp
                                <li>
                                    @if($userProgress)
                                        <span class="condition-icon {{ $isMet ? 'met' : 'unmet' }}">
                                            {{ $isMet ? '✓' : '○' }}
                                        </span>
                                    @else
                                        <span class="condition-icon unmet">○</span>
                                    @endif
                                    {{ $conditionLabels[$key] }}
                                </li>
                            @endif
                        @endforeach
                    </ul>

                    @if($userProgress && !$userProgress['is_earned'])
                        <div class="badge-explain-progress-wrapper">
                            <div class="badge-progress">
                                <div class="badge-progress-bar" style="width: {{ $userProgress['progress'] }}%; background: {{ $badge->color }};"></div>
                            </div>
                            <span>{{ $userProgress['progress'] }}%</span>
                        </div>
                    @endif

                    @if($userProgress && $userProgress['is_earned'])
                        <div class="badge-earned-label" style="display: flex; align-items: center; gap: 6px; color: {{ $badge->color }}; font-size: 13px; font-weight: 600;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="none">
                                <circle cx="10" cy="10" r="10" fill="{{ $badge->color }}"/>
                                <path d="M6 10L9 13L14 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            حصلت على هذا الوسم
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

        @guest
            <div style="text-align: center; margin-top: 40px; padding: 30px; background: #F9FAFB; border-radius: 12px;">
                <p style="font-size: 16px; color: #374151; margin-bottom: 16px;">سجّل كمستقل وابدأ رحلتك للحصول على الوسوم</p>
                <a href="{{ route('view.register') }}" style="display: inline-block; padding: 10px 30px; background: #14965A; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600;">
                    سجّل الآن
                </a>
            </div>
        @endguest
    </div>
</section>

@endsection