@extends('layouts.superadmin')

@section('title', 'ميزانيات دعم تيكتوك للتيم')
@section('page-title', '📊 ميزانيات دعم تيكتوك للتيم')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6 sm:py-8">
    <div class="max-w-7xl mx-auto px-3 sm:px-5 space-y-6">

        {{-- هيدر ناعم --}}
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-l from-sky-900 via-slate-950 to-fuchsia-900 border border-slate-700/80 shadow-2xl">
            <div class="pointer-events-none absolute -top-24 -right-16 w-60 h-60 bg-sky-500/25 blur-3xl rounded-full"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-16 w-64 h-64 bg-fuchsia-500/25 blur-3xl rounded-full"></div>

            <div class="relative px-5 sm:px-7 py-5 sm:py-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-start gap-3">
                    <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-400 via-pink-500 to-violet-500 grid place-items-center shadow-lg shadow-amber-500/40">
                        <i class="fa-solid fa-sack-dollar text-white text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl sm:text-2xl md:text-3xl font-black text-white">
                            ميزانيات دعم تيكتوك لأعضاء التيم
                        </h1>
                        <p class="text-xs sm:text-sm text-slate-200/80 mt-1">
                            رؤية شاملة لحجم الدعم بالهدايا لكل عضو (يومي، أسبوعي، شهري، سنوي، وإجمالي التيم) مع تحويل تلقائي لعدة عملات.
                        </p>
                    </div>
                </div>
                <div class="rounded-2xl bg-black/30 border border-amber-400/40 px-4 py-3 text-xs sm:text-sm text-amber-100 max-w-xs">
                    <div class="font-semibold mb-1">💡 ملاحظة</div>
                    <div>الأرقام تعتمد على العمليات المسجلة في نظام دعم تيكتوك والهدايا (tiktok_gift_logs).</div>
                </div>
            </div>
        </div>

        {{-- معدل التيم --}}
        @php $avg = $teamAverage; @endphp
        <div class="rounded-2xl border border-emerald-500/40 bg-gradient-to-r from-emerald-500/10 via-slate-950 to-emerald-500/10 px-4 sm:px-5 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-xl bg-emerald-500/20 grid place-items-center border border-emerald-400/60 text-emerald-100">
                    <i class="fa-solid fa-chart-line"></i>
                </div>
                <div>
                    <div class="text-xs text-emerald-200/90 font-semibold">معدل دعم التيم (إجمالي لكل عضو)</div>
                    <div class="text-sm text-slate-100">
                        حوالي
                        <span class="font-bold text-emerald-300">{{ number_format($avg['total']['coins']) }}</span>
                        عملة تيكتوك للعضو الواحد
                        (<span class="text-emerald-300">${{ number_format($avg['total']['usd'], 2) }}</span>)
                    </div>
                </div>
            </div>
            <div class="text-[11px] sm:text-xs text-slate-300 space-y-0.5">
                <div>متوسط يومي: <span class="text-emerald-200">{{ number_format($avg['day']['coins']) }}</span> عملة</div>
                <div>متوسط شهري: <span class="text-emerald-200">{{ number_format($avg['month']['coins']) }}</span> عملة</div>
            </div>
        </div>

        {{-- جدول الميزانيات --}}
        <div class="rounded-3xl border border-slate-800 bg-slate-950/80 shadow-2xl overflow-hidden">
            <div class="px-4 sm:px-5 py-3 border-b border-slate-800 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-xl bg-slate-900 grid place-items-center border border-slate-700 text-sky-300">
                        <i class="fa-solid fa-users"></i>
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-slate-100">جدول ميزانيات التيم</div>
                        <div class="text-[11px] text-slate-400">اسم العضو، آخر تاريخ دعم، يومي / أسبوعي / شهري / سنوي / إجمالي مع تحويل عملات احترافي.</div>
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs sm:text-sm text-slate-100">
                    <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] sm:text-xs">
                        <tr>
                            <th class="px-3 sm:px-4 py-3 text-right whitespace-nowrap">#</th>
                            <th class="px-3 sm:px-4 py-3 text-right whitespace-nowrap">العضو</th>
                            <th class="px-3 sm:px-4 py-3 text-right whitespace-nowrap">آخر دعم</th>
                            <th class="px-3 sm:px-4 py-3 text-right whitespace-nowrap">إجمالي التراكمية</th>
                            <th class="px-3 sm:px-4 py-3 text-right whitespace-nowrap">سنوي</th>
                            <th class="px-3 sm:px-4 py-3 text-right whitespace-nowrap">شهري</th>
                            <th class="px-3 sm:px-4 py-3 text-right whitespace-nowrap">أسبوعي</th>
                            <th class="px-3 sm:px-4 py-3 text-right whitespace-nowrap">يومي</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/80">
                        @forelse($members as $index => $m)
                            @php
                                $b = $m->budget;
                                $fmtDate = $m->last_gifted_at
                                    ? \Carbon\Carbon::parse($m->last_gifted_at)->locale('ar')->isoFormat('YYYY/MM/DD HH:mm')
                                    : 'لا يوجد بعد';
                            @endphp
                            <tr class="hover:bg-slate-900/70">
                                {{-- # --}}
                                <td class="px-3 sm:px-4 py-3 align-top text-slate-400 text-[11px]">
                                    {{ $index + 1 }}
                                </td>

                                {{-- العضو --}}
                                <td class="px-3 sm:px-4 py-3 align-top">
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-slate-100 text-xs sm:text-sm">
                                            {{ $m->name ?? $m->username ?? ('عضو #' . $m->id) }}
                                        </span>
                                        @if($m->username)
                                            <span class="text-[11px] text-slate-500">{{ '@'.$m->username }}</span>
                                        @endif
                                        <span class="mt-1 inline-flex items-center gap-1 text-[10px] text-slate-500">
                                            <i class="fa-brands fa-tiktok text-[9px] text-pink-400"></i>
                                            إجمالي: {{ number_format($b['total']['coins']) }} عملة
                                        </span>
                                    </div>
                                </td>

                                {{-- آخر دعم --}}
                                <td class="px-3 sm:px-4 py-3 align-top text-[11px] text-slate-300 whitespace-nowrap">
                                    {{ $fmtDate }}
                                </td>

                                {{-- إجمالي --}}
                                <td class="px-3 sm:px-4 py-3 align-top">
                                    <div class="text-amber-300 text-xs font-semibold">
                                        {{ number_format($b['total']['coins']) }} <span class="text-[10px] text-slate-400">عملة</span>
                                    </div>
                                    <div class="text-[10px] text-slate-400 mt-1 space-y-0.5">
                                        <div>USD: ${{ number_format($b['total']['usd'], 2) }}</div>
                                        <div>₪ {{ number_format($b['total']['currencies']['ILS'], 2) }} | ج.م {{ number_format($b['total']['currencies']['EGP'], 2) }}</div>
                                        <div>ل.ل {{ number_format($b['total']['currencies']['LBP']) }} | € {{ number_format($b['total']['currencies']['EUR'], 2) }}</div>
                                    </div>
                                </td>

                                {{-- سنوي --}}
                                <td class="px-3 sm:px-4 py-3 align-top">
                                    <div class="text-sky-300 text-xs font-semibold">
                                        {{ number_format($b['year']['coins']) }} <span class="text-[10px] text-slate-400">عملة</span>
                                    </div>
                                    <div class="text-[10px] text-slate-400 mt-1">
                                        ${{ number_format($b['year']['usd'], 2) }}
                                    </div>
                                </td>

                                {{-- شهري --}}
                                <td class="px-3 sm:px-4 py-3 align-top">
                                    <div class="text-emerald-300 text-xs font-semibold">
                                        {{ number_format($b['month']['coins']) }} <span class="text-[10px] text-slate-400">عملة</span>
                                    </div>
                                    <div class="text-[10px] text-slate-400 mt-1">
                                        ${{ number_format($b['month']['usd'], 2) }}
                                    </div>
                                </td>

                                {{-- أسبوعي --}}
                                <td class="px-3 sm:px-4 py-3 align-top">
                                    <div class="text-violet-300 text-xs font-semibold">
                                        {{ number_format($b['week']['coins']) }} <span class="text-[10px] text-slate-400">عملة</span>
                                    </div>
                                    <div class="text-[10px] text-slate-400 mt-1">
                                        ${{ number_format($b['week']['usd'], 2) }}
                                    </div>
                                </td>

                                {{-- يومي --}}
                                <td class="px-3 sm:px-4 py-3 align-top">
                                    <div class="text-pink-300 text-xs font-semibold">
                                        {{ number_format($b['day']['coins']) }} <span class="text-[10px] text-slate-400">عملة</span>
                                    </div>
                                    <div class="text-[10px] text-slate-400 mt-1">
                                        ${{ number_format($b['day']['usd'], 2) }}
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-4 py-6 text-center text-slate-400 text-sm">
                                    لا توجد بيانات دعم مسجلة بعد.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
@endsection