@extends('emails.layout')

@section('content')
    {{-- نشرة شهرية: أفضل المستقلين لأصحاب المشاريع --}}
    <div class="email-title">
        ⭐ أفضل المستقلين هذا الشهر!
    </div>

    <div class="email-content">
        عزيزي <b>{{ $client->name }}</b>،<br/><br/>

        اخترنا لك أفضل المستقلين على المنصة هذا الشهر بناءً على تقييماتهم وإنجازاتهم ومستوى احترافيتهم.<br/>
        من <b>{{ $monthStart->format('Y-m-d') }}</b> إلى <b>{{ $monthEnd->format('Y-m-d') }}</b>
        <br/><br/>

        <div style="background: #f0f9ff; padding: 15px; border-radius: 8px; border-right: 4px solid #0284c7; margin-bottom: 20px;">
            <b style="color: #0284c7;">📊 إحصائيات هذا الشهر:</b><br/>
            • عدد المستقلين المميزين: <b>{{ $freelancers->count() }}</b><br/>
            @php
                $avgRating    = $freelancers->avg('rating');
                $avgScore     = $freelancers->avg('professionalism_score');
                $totalCompleted = $freelancers->sum('completed_projects_count');
            @endphp
            • متوسط التقييم: <b>{{ number_format($avgRating ?? 0, 1) }} / 5</b><br/>
            • متوسط درجة الاحترافية: <b>{{ number_format($avgScore ?? 0, 0) }} / 100</b><br/>
            • إجمالي المشاريع المكتملة: <b>{{ $totalCompleted }}</b>
        </div>

        @if($freelancers->count() > 0)
            <h3 style="color: #2d3748; margin-bottom: 15px; border-bottom: 2px solid #14965A; padding-bottom: 8px;">
                🏆 نجوم الشهر:
            </h3>

            @foreach($freelancers as $index => $freelancer)
                <div style="background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 18px; margin-bottom: 16px; position: relative;">

                    {{-- Badge for top 3 --}}
                    @if($index === 0)
                        <div style="position: absolute; top: -10px; right: 15px; background: #f59e0b; color: white; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px;">
                            🥇 الأول
                        </div>
                    @elseif($index === 1)
                        <div style="position: absolute; top: -10px; right: 15px; background: #94a3b8; color: white; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px;">
                            🥈 الثاني
                        </div>
                    @elseif($index === 2)
                        <div style="position: absolute; top: -10px; right: 15px; background: #cd7c3a; color: white; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px;">
                            🥉 الثالث
                        </div>
                    @endif

                    {{-- Header: avatar + name + score --}}
                    <div style="display: flex; align-items: center; gap: 14px; margin-bottom: 12px; margin-top: {{ $index < 3 ? '6px' : '0' }};">
                        <img src="{{ $freelancer->image }}"
                             width="56" height="56"
                             alt="{{ $freelancer->name }}"
                             style="border-radius: 50%; border: 2px solid #14965A; object-fit: cover; min-width: 56px;" />
                        <div style="flex: 1;">
                            <div style="font-size: 16px; font-weight: 700; color: #1f2937; margin-bottom: 2px;">
                                {{ $freelancer->name }}
                            </div>
                            @if($freelancer->category)
                                <div style="font-size: 13px; color: #6b7280;">
                                    📁 {{ $freelancer->category->name }}
                                </div>
                            @endif
                        </div>
                        {{-- Professionalism score badge --}}
                        <div style="text-align: center; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 6px 12px; min-width: 60px;">
                            <div style="font-size: 18px; font-weight: 700; color: #14965A; line-height: 1;">
                                {{ number_format($freelancer->professionalism_score, 0) }}
                            </div>
                            <div style="font-size: 10px; color: #6b7280;">/ 100</div>
                        </div>
                    </div>

                    {{-- Rating stars --}}
                    @php
                        $rating    = round($freelancer->rating ?? 0);
                        $fullStars = $rating;
                        $emptyStars = 5 - $fullStars;
                    @endphp
                    <div style="margin-bottom: 10px; font-size: 15px;">
                        @for($s = 0; $s < $fullStars; $s++)
                            <span style="color: #f59e0b;">★</span>
                        @endfor
                        @for($s = 0; $s < $emptyStars; $s++)
                            <span style="color: #d1d5db;">★</span>
                        @endfor
                        <span style="font-size: 13px; color: #6b7280; margin-right: 6px;">
                            ({{ number_format($freelancer->rating ?? 0, 1) }})
                        </span>
                    </div>

                    {{-- Bio --}}
                    @if($freelancer->description)
                        <p style="color: #4b5563; margin: 0 0 10px 0; font-size: 14px; line-height: 1.6;">
                            {{ Str::limit($freelancer->description, 160) }}
                        </p>
                    @endif

                    {{-- Stats row --}}
                    <div style="display: flex; gap: 20px; font-size: 13px; color: #6b7280; margin-bottom: 12px; flex-wrap: wrap;">
                        <span>✅ {{ $freelancer->completed_projects_count }} مشروع مكتمل</span>
                        @if($freelancer->skills->count() > 0)
                            <span>🔧 {{ $freelancer->skills->take(3)->pluck('name')->implode(' · ') }}</span>
                        @endif
                    </div>

                    {{-- CTA --}}
                    <a href="{{ route('freelancers.details', $freelancer->username) }}"
                       style="display: inline-block; background: #14965A; color: #fff; text-decoration: none; padding: 8px 20px; border-radius: 6px; font-size: 14px; font-weight: 600;">
                        عرض الملف الشخصي ←
                    </a>
                </div>
            @endforeach

        @else
            <div style="background: #fef2f2; padding: 20px; border-radius: 8px; text-align: center;">
                <p style="color: #991b1b; margin: 0;">
                    لا يوجد مستقلون مميزون هذا الشهر.<br/>
                    تحقق مرة أخرى الشهر القادم!
                </p>
            </div>
        @endif

        <br/>
        <div style="background: #f9fafb; padding: 15px; border-radius: 6px; margin-top: 20px;">
            <b style="color: #374151;">💡 نصيحة الشهر:</b><br/>
            <p style="color: #6b7280; margin: 8px 0 0 0; font-size: 14px; line-height: 1.6;">
                {{ $monthlyTip }}
            </p>
        </div>
    </div>

    <br/>
    <a href="{{ route('freelancers.list') }}"
       style="background: #14965A; color: #fff !important; text-transform: capitalize; min-width: 150px; font-weight: 700; text-decoration: none; padding: 12px 24px; display: inline-block; margin: 20px 0; font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;">
        تصفح جميع المستقلين
    </a>
    <br/><br/>

    <div class="email-footer-text">
        شكراً لاستخدامك <b>{{ config('app.name') }}</b><br/>
        نتمنى لك التوفيق في مشاريعك القادمة!
        <br/><br/>
        <small style="color: #9ca3af;">
            تصلك هذه الرسالة شهرياً. لإلغاء الاشتراك، يمكنك تعديل إعدادات الإشعارات في حسابك.
        </small>
    </div>
@endsection