@extends('layouts.superadmin')

@section('title','رادار الهدف - ProMission')
@section('page-title','رادار الهدف - ProMission')

@section('content')
@php
    $chip = fn($v)=> $v>=100 ? 'bg-emerald-500/15 text-emerald-200 border-emerald-500/25'
                            : 'bg-amber-500/15 text-amber-200 border-amber-500/25';
@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 flex items-start justify-between gap-3">
        <div class="flex items-center gap-3">
            <div class="h-11 w-11 rounded-2xl bg-slate-800 grid place-items-center ring-2 ring-emerald-500/60 shadow-lg shadow-emerald-500/30">
                <i class="fa-solid fa-radar text-emerald-300 text-xl"></i>
            </div>
            <div>
                <h1 class="text-xl sm:text-2xl font-bold">رادار الهدف</h1>
                <p class="text-sm text-slate-300/80">يعرض “نقطة الاختناق” الحالية + أفضل/أضعف مساهمين + توصية ذكية.</p>
            </div>
        </div>
        <div class="text-right text-[11px] text-slate-300/80">
            الفترة: <span class="font-bold text-white">{{ $from }}</span> → <span class="font-bold text-white">{{ $to }}</span>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" action="{{ route('superadmin.promission.radar.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-emerald-500 focus:border-emerald-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-emerald-500 focus:border-emerald-500">
            </div>

            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">المقارنة</label>
                <select name="compare_mode"
                        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-emerald-500 focus:border-emerald-500">
                    <option value="none" {{ $compareMode==='none'?'selected':'' }}>بدون</option>
                    <option value="prev_month" {{ $compareMode==='prev_month'?'selected':'' }}>شهر سابق</option>
                    <option value="custom" {{ $compareMode==='custom'?'selected':'' }}>مخصص</option>
                </select>
            </div>

            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">من (مقارنة)</label>
                <input type="date" name="compare_from" value="{{ $compareFrom }}"
                       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-emerald-500 focus:border-emerald-500">
            </div>

            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">إلى (مقارنة)</label>
                <input type="date" name="compare_to" value="{{ $compareTo }}"
                       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-emerald-500 focus:border-emerald-500">
            </div>
        </div>

        <div class="mt-3 flex flex-wrap items-center gap-2">
            <button class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-emerald-400 transition">
                <i class="fa-solid fa-filter ml-2 text-xs"></i> تطبيق
            </button>
            <a href="{{ route('superadmin.promission.radar.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>
        </div>
    </form>

    {{-- KPI cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 mb-6">
        <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">{{ $kpi['total_hours'] }}س</div>
            <span class="text-[11px] px-2 py-0.5 rounded-full border {{ $chip($kpi['pct_total']) }}">{{ $kpi['pct_total'] }}%</span>
        </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">{{ $kpi['live_hours'] }}س</div>
            <span class="text-[11px] px-2 py-0.5 rounded-full border {{ $chip($kpi['pct_live']) }}">{{ $kpi['pct_live'] }}%</span>
        </div>
        <div class="rounded-2xl border border-purple-500/20 bg-purple-500/5 p-4">
            <div class="text-[11px] text-purple-200/80">سهرة</div>
            <div class="text-2xl font-bold text-purple-100 mt-1">{{ $kpi['sahra_hours'] }}س</div>
            <span class="text-[11px] px-2 py-0.5 rounded-full border {{ $chip($kpi['pct_sahra']) }}">{{ $kpi['pct_sahra'] }}%</span>
        </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-2xl font-bold text-amber-100 mt-1">{{ $kpi['guest_count'] }}</div>
            <span class="text-[11px] px-2 py-0.5 rounded-full border {{ $chip($kpi['pct_guest']) }}">{{ $kpi['pct_guest'] }}%</span>
        </div>
    </div>

    {{-- Bottleneck + AI --}}
    <div class="mb-6 rounded-2xl border border-white/10 bg-white/5 p-4">
        <div class="text-sm font-extrabold text-white mb-2">
            نقطة الاختناق: <span class="text-amber-200">{{ $bottleneck['label'] }}</span>
            <span class="text-[11px] text-slate-300">({{ $bottleneck['ratio'] }}% نقص نسبي)</span>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-3">
                <div class="text-[11px] text-slate-400">متبقي إجمالي</div>
                <div class="text-lg font-bold">{{ $gaps['total'] }}س</div>
            </div>
            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-3">
                <div class="text-[11px] text-slate-400">متبقي لايف</div>
                <div class="text-lg font-bold">{{ $gaps['live'] }}س</div>
            </div>
            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-3">
                <div class="text-[11px] text-slate-400">متبقي سهرة</div>
                <div class="text-lg font-bold">{{ $gaps['sahra'] }}س</div>
            </div>
            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-3">
                <div class="text-[11px] text-slate-400">متبقي قست</div>
                <div class="text-lg font-bold">{{ $gaps['guest'] }}</div>
            </div>
        </div>
        <div class="mt-3 rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-3">
            <div class="text-[11px] text-emerald-100/90 font-bold mb-1"><i class="fa-solid fa-wand-magic-sparkles ml-2"></i>تحليل ذكي</div>
            <ul class="space-y-1 text-[12px] text-emerald-100/90">
                @foreach(($ai['tips'] ?? []) as $t)
                    <li>• {{ $t }}</li>
                @endforeach
            </ul>
        </div>
    </div>

    {{-- Top / bottom lists --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
        <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
            <div class="font-bold mb-2">Top 10 (الأعلى ساعات)</div>
            <div class="space-y-2">
                @foreach($topTotal as $r)
                    <div class="flex items-center justify-between rounded-xl border border-slate-800 bg-slate-950/40 p-3">
                        <div class="min-w-0">
                            <div class="font-semibold truncate">{{ $r['name'] }}</div>
                            <div class="text-[11px] text-slate-400 truncate">{{ $r['username'] }}</div>
                        </div>
                        <div class="text-right text-[11px]">
                            <div class="font-bold text-emerald-200">{{ $r['total'] }}س</div>
                            <div class="text-slate-400">مساهمة: {{ $r['share_total'] }}%</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
            <div class="font-bold mb-2">Bottom 10 (الأقل ساعات)</div>
            <div class="space-y-2">
                @foreach($bottomTotal as $r)
                    <div class="flex items-center justify-between rounded-xl border border-slate-800 bg-slate-950/40 p-3">
                        <div class="min-w-0">
                            <div class="font-semibold truncate">{{ $r['name'] }}</div>
                            <div class="text-[11px] text-slate-400 truncate">{{ $r['username'] }}</div>
                        </div>
                        <div class="text-right text-[11px]">
                            <div class="font-bold text-rose-200">{{ $r['total'] }}س</div>
                            <div class="text-slate-400">مساهمة: {{ $r['share_total'] }}%</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

</div>
</div>
@endsection