@extends('layouts.superadmin')

@section('title','الأهداف الفردية الذكية')
@section('page-title','الأهداف الفردية – تحليل ذكي')

@section('content')
@php
    $isCards = (request('view','cards') === 'cards');

    $badge = function($status){
        return str_contains($status,'🟢') ? 'bg-emerald-500/20 text-emerald-200 border-emerald-500/20' :
               (str_contains($status,'🟡') ? 'bg-amber-500/20 text-amber-200 border-amber-500/20' :
               (str_contains($status,'🔵') ? 'bg-sky-500/20 text-sky-200 border-sky-500/20' :
                                            'bg-rose-500/20 text-rose-200 border-rose-500/20'));
    };

    $pct = function($c, $t){
        $c = (float)$c; $t = (float)$t;
        if ($t <= 0) return 0;
        return round(min(100, max(0, ($c/$t)*100)), 1);
    };
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
<div class="max-w-6xl mx-auto px-4 rtl text-white">

    {{-- Header --}}
    <div class="mb-6">
        <div class="flex items-center justify-between gap-3">
            <div class="flex items-center gap-3">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-purple-500/60 shadow-lg shadow-purple-500/30">
                    <i class="fa-solid fa-brain text-purple-300 text-xl"></i>
                </div>
                <div>
                    <h1 class="text-xl sm:text-2xl font-bold">الأهداف الفردية الذكية</h1>
                    <p class="text-sm text-slate-300/80">
                        هدف العضو: {{ $goal_mix }}س (لايف+قست) + {{ $goal_sahra }}س سهرة
                        • هدف التيم: {{ $team['goal_total_hours'] }}س إجمالي • {{ $team['goal_guest_count'] }} قست • {{ $team['goal_live_hours'] }}س لايف • {{ $team['goal_sahra_hours'] }}س سهرة
                    </p>
                </div>
            </div>

            {{-- Toggle --}}
            <div class="flex items-center gap-2">
                <a href="{{ request()->fullUrlWithQuery(['view'=>'cards','page'=>null]) }}"
                   class="h-9 px-3 rounded-xl text-xs font-semibold border
                          {{ $isCards ? 'bg-white/15 border-white/20 text-white' : 'border-slate-700 text-slate-200 hover:bg-white/10' }}">
                    <i class="fa-solid fa-id-card ml-1"></i> كروت
                </a>
                <a href="{{ request()->fullUrlWithQuery(['view'=>'table','page'=>null]) }}"
                   class="h-9 px-3 rounded-xl text-xs font-semibold border
                          {{ !$isCards ? 'bg-white/15 border-white/20 text-white' : 'border-slate-700 text-slate-200 hover:bg-white/10' }}">
                    <i class="fa-solid fa-table ml-1"></i> جدول
                </a>
            </div>
        </div>
    </div>

    {{-- Team Summary --}}
    <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 mb-6">
        <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
            <div class="text-[11px] text-slate-400">أعضاء التيم</div>
            <div class="text-2xl font-bold mt-1">{{ $team['members'] }}</div>
        </div>

        <div class="rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-4">
            <div class="text-[11px] text-emerald-200/80">إنجاز التيم (إجمالي)</div>
            <div class="text-2xl font-bold text-emerald-100 mt-1">{{ $team['total_hours'] }}س</div>
            <div class="text-[11px] text-emerald-200/70 mt-1">{{ $team['pct_total'] }}%</div>
        </div>

        <div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4">
            <div class="text-[11px] text-sky-200/80">لايفات التيم</div>
            <div class="text-2xl font-bold text-sky-100 mt-1">{{ $team['live_hours'] }}س</div>
            <div class="text-[11px] text-sky-200/70 mt-1">{{ $team['pct_live'] }}%</div>
        </div>

        <div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4">
            <div class="text-[11px] text-amber-200/80">قستات + سهرات</div>
            <div class="text-sm font-bold text-amber-100 mt-1">
                قست: {{ $team['guest_count'] }} ({{ $team['pct_guest_count'] }}%) • سهرة: {{ $team['sahra_hours'] }}س ({{ $team['pct_sahra'] }}%)
            </div>
            <div class="text-[11px] text-amber-200/70 mt-1">المتبقي للهدف الكلي: {{ $team['remaining_total'] }}س</div>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" action="{{ route('superadmin.promission.personal.index') }}"
          class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">
        <div class="grid gap-4 md:grid-cols-6 grid-cols-1">
            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">من</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                              focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
            </div>
            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">إلى</label>
                <input type="date" name="to" value="{{ $to }}"
                       class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                              focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
            </div>

            <div class="flex flex-col gap-1 md:col-span-2">
                <label class="text-xs text-slate-300">اختيار عضو</label>
                <select name="user_id"
                        class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                               focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                    <option value="0">كل الأعضاء</option>
                    @foreach($users as $u)
                        <option value="{{ $u->id }}" {{ (int)$filter_user_id === (int)$u->id ? 'selected' : '' }}>
                            {{ $u->name ?? $u->username }} (#{{ $u->id }})
                        </option>
                    @endforeach
                </select>
            </div>

            <input type="hidden" name="view" value="{{ request('view','cards') }}">
        </div>

        <div class="mt-3 flex flex-wrap items-center gap-2">
            <button class="inline-flex items-center justify-center rounded-xl bg-purple-500 px-4 py-2 text-sm font-semibold
                           text-slate-950 hover:bg-purple-400 transition">
                <i class="fa-solid fa-filter ml-2 text-xs"></i> تطبيق
            </button>
            <a href="{{ route('superadmin.promission.personal.index') }}"
               class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm
                      font-medium text-slate-200 hover:bg-slate-800/80 transition">
                إعادة ضبط
            </a>
            <span class="text-[11px] text-slate-400">
                مقارنة تلقائية مع الشهر السابق: {{ $compare_from }} → {{ $compare_to }}
            </span>
        </div>
    </form>

    {{-- Cards / Table --}}
    @if($isCards)
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            @foreach($rows as $r)
                @php
                    $maxPct = max($r['pct_mix'], $r['pct_sahra']);
                @endphp
                <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
                    <div class="flex justify-between items-start gap-2">
                        <div class="min-w-0">
                            <div class="font-semibold text-slate-100 truncate">{{ $r['name'] }}</div>
                            <div class="text-[11px] text-slate-400 truncate">{{ $r['username'] }}</div>
                        </div>
                        <span class="text-xs px-2 py-0.5 rounded-full border {{ $badge($r['ai_status']) }}">
                            {{ $r['ai_status'] }}
                        </span>
                    </div>

                    <div class="grid grid-cols-4 gap-2 mt-3 text-sm">
                        <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                            <div class="text-[10px] text-slate-400">لايف</div>
                            <div class="font-bold text-sky-100">{{ $r['live'] }}س</div>
                        </div>
                        <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                            <div class="text-[10px] text-slate-400">قست</div>
                            <div class="font-bold text-amber-100">{{ $r['guest'] }}س</div>
                        </div>
                        <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                            <div class="text-[10px] text-slate-400">قست (عدد)</div>
                            <div class="font-bold text-amber-200">{{ $r['guest_count'] }}</div>
                        </div>
                        <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                            <div class="text-[10px] text-slate-400">سهرة</div>
                            <div class="font-bold text-purple-100">{{ $r['sahra'] }}س</div>
                        </div>
                    </div>

                    <div class="mt-3 text-[11px] text-slate-300">
                        هدفه: لايف+قست <b class="text-white">{{ $r['pct_mix'] }}%</b> • سهرة <b class="text-white">{{ $r['pct_sahra'] }}%</b>
                        • Δ <b class="{{ $r['delta_total'] >= 0 ? 'text-emerald-200' : 'text-rose-200' }}">{{ $r['delta_total'] }}س</b>
                    </div>

                    <div class="mt-2 h-2 bg-slate-800 rounded-full overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-purple-500 via-amber-400 to-emerald-400"
                             style="width: {{ max(0,min(100,$maxPct)) }}%"></div>
                    </div>

                    {{-- NEW: مساهمته من إنجاز التيم الحالي لكل محور --}}
                    <div class="mt-3 grid grid-cols-2 gap-2">
                        <div class="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-2">
                            <div class="text-[10px] text-emerald-200/80">من إنجاز التيم الحالي (إجمالي)</div>
                            <div class="text-sm font-extrabold text-emerald-100">{{ $r['contrib_total'] }}%</div>
                        </div>
                        <div class="rounded-xl border border-sky-500/20 bg-sky-500/5 p-2">
                            <div class="text-[10px] text-sky-200/80">من إنجاز اللايف الحالي</div>
                            <div class="text-sm font-extrabold text-sky-100">{{ $r['contrib_live'] }}%</div>
                        </div>
                        <div class="rounded-xl border border-amber-500/20 bg-amber-500/5 p-2">
                            <div class="text-[10px] text-amber-200/80">من إنجاز القست الحالي</div>
                            <div class="text-sm font-extrabold text-amber-100">{{ $r['contrib_guest'] }}%</div>
                        </div>
                        <div class="rounded-xl border border-purple-500/20 bg-purple-500/5 p-2">
                            <div class="text-[10px] text-purple-200/80">من إنجاز السهرة الحالي</div>
                            <div class="text-sm font-extrabold text-purple-100">{{ $r['contrib_sahra'] }}%</div>
                        </div>
                    </div>

                    {{-- NEW: نسبته من أهداف التيم الكلي لكل محور --}}
                    <div class="mt-3 grid grid-cols-2 gap-2">
                        <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                            <div class="text-[10px] text-slate-300">من هدف التيم الكلي (300س)</div>
                            <div class="text-sm font-extrabold text-white">{{ $r['of_team_total_goal'] }}%</div>
                        </div>
                        <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                            <div class="text-[10px] text-slate-300">من هدف اللايف (80س)</div>
                            <div class="text-sm font-extrabold text-white">{{ $r['of_team_live_goal'] }}%</div>
                        </div>
                        <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                            <div class="text-[10px] text-slate-300">من هدف القست (100)</div>
                            <div class="text-sm font-extrabold text-white">{{ $r['of_team_guest_goal'] }}%</div>
                        </div>
                        <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                            <div class="text-[10px] text-slate-300">من هدف السهرة (20س)</div>
                            <div class="text-sm font-extrabold text-white">{{ $r['of_team_sahra_goal'] }}%</div>
                        </div>
                    </div>

                    <p class="mt-3 text-[11px] text-slate-400 leading-relaxed">
                        {{ $r['ai_text'] }}
                    </p>
                </div>
            @endforeach
        </div>
    @else
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
            <div class="border-b border-slate-800 px-4 py-3 flex items-center justify-between">
                <div>
                    <h2 class="text-sm sm:text-base font-semibold">جدول الأهداف الفردية (تفصيل كامل)</h2>
                    <p class="text-[11px] text-slate-400">يشمل: هدف العضو + مساهمته من إنجاز التيم + نسبته من أهداف التيم + AI.</p>
                </div>
                <span class="text-[11px] text-slate-400">عدد الأعضاء: {{ count($rows) }}</span>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs sm:text-sm text-slate-200">
                    <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] uppercase tracking-wide">
                        <tr>
                            <th class="px-3 py-2 text-right">العضو</th>
                            <th class="px-3 py-2 text-right">لايف س</th>
                            <th class="px-3 py-2 text-right">قست س</th>
                            <th class="px-3 py-2 text-right">قست #</th>
                            <th class="px-3 py-2 text-right">سهرة س</th>
                            <th class="px-3 py-2 text-right">إجمالي س</th>
                            <th class="px-3 py-2 text-right">هدفه%</th>

                            <th class="px-3 py-2 text-right">مساهمته إجمالي%</th>
                            <th class="px-3 py-2 text-right">مساهمته لايف%</th>
                            <th class="px-3 py-2 text-right">مساهمته قست%</th>
                            <th class="px-3 py-2 text-right">مساهمته سهرة%</th>

                            <th class="px-3 py-2 text-right">من هدف التيم إجمالي%</th>
                            <th class="px-3 py-2 text-right">من هدف اللايف%</th>
                            <th class="px-3 py-2 text-right">من هدف القست%</th>
                            <th class="px-3 py-2 text-right">من هدف السهرة%</th>

                            <th class="px-3 py-2 text-right">AI</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @foreach($rows as $r)
                            @php $memberGoalPct = max($r['pct_mix'], $r['pct_sahra']); @endphp
                            <tr class="hover:bg-slate-800/50">
                                <td class="px-3 py-2">
                                    <div class="font-semibold text-slate-100">{{ $r['name'] }}</div>
                                    <div class="text-[11px] text-slate-400">{{ $r['username'] }}</div>
                                </td>
                                <td class="px-3 py-2 text-sky-100">{{ $r['live'] }}</td>
                                <td class="px-3 py-2 text-amber-100">{{ $r['guest'] }}</td>
                                <td class="px-3 py-2 text-amber-200">{{ $r['guest_count'] }}</td>
                                <td class="px-3 py-2 text-purple-100">{{ $r['sahra'] }}</td>
                                <td class="px-3 py-2 font-bold text-emerald-200">{{ $r['total'] }}</td>
                                <td class="px-3 py-2">{{ $memberGoalPct }}%</td>

                                <td class="px-3 py-2 font-bold text-emerald-100">{{ $r['contrib_total'] }}%</td>
                                <td class="px-3 py-2 font-bold text-sky-100">{{ $r['contrib_live'] }}%</td>
                                <td class="px-3 py-2 font-bold text-amber-100">{{ $r['contrib_guest'] }}%</td>
                                <td class="px-3 py-2 font-bold text-purple-100">{{ $r['contrib_sahra'] }}%</td>

                                <td class="px-3 py-2 font-bold text-white">{{ $r['of_team_total_goal'] }}%</td>
                                <td class="px-3 py-2 font-bold text-white">{{ $r['of_team_live_goal'] }}%</td>
                                <td class="px-3 py-2 font-bold text-white">{{ $r['of_team_guest_goal'] }}%</td>
                                <td class="px-3 py-2 font-bold text-white">{{ $r['of_team_sahra_goal'] }}%</td>

                                <td class="px-3 py-2">
                                    <span class="text-[11px] px-2 py-0.5 rounded-full border {{ $badge($r['ai_status']) }}">
                                        {{ $r['ai_status'] }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="px-4 py-3 border-t border-slate-800 text-[11px] text-slate-400">
                ✅ “مساهمته” = من إنجاز التيم الحالي في نفس الفترة • ✅ “من هدف التيم” = من الهدف الثابت (300/80/100/20).
            </div>
        </div>
    @endif

    <div class="mt-6 text-[11px] text-slate-500 text-center">
        صفحة الأهداف الفردية تعطي: نسب أهداف العضو + نسبته من إنجاز التيم الحالي + نسبته من أهداف التيم الكلية + تحليل ذكي.
    </div>

</div>
</div>
@endsection