@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'لوحة الأخصائية الاجتماعية' : 'Social Worker Dashboard')
@section('skip_page_hero', true)

@php $isArabic = app()->getLocale() === 'ar'; @endphp

@section('content')
<div class="space-y-6">

{{-- ═══ Hero ═══ --}}
<section class="rounded-[1.75rem] border border-violet-100 bg-gradient-to-br from-slate-50 via-violet-50 to-purple-50 p-6 dark:border-violet-900/30 dark:from-zinc-900 dark:via-violet-950/40 dark:to-zinc-900 lg:p-8">
    <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
        <div>
            <span class="inline-flex items-center gap-2 rounded-full border border-violet-200 bg-white px-3 py-1 text-xs font-black text-violet-700 dark:border-violet-800 dark:bg-violet-950/50 dark:text-violet-300">
                <i class="fa-solid fa-brain text-violet-500"></i>
                {{ $isArabic ? 'بوابة الأخصائية الاجتماعية' : 'Social Worker Portal' }}
            </span>
            <h1 class="mt-3 text-2xl font-black tracking-tight text-zinc-900 dark:text-white md:text-3xl">
                {{ $isArabic ? 'لوحة متابعة الحالات والدعم الاجتماعي' : 'Case Tracking & Social Support Dashboard' }}
            </h1>
            <p class="mt-2 max-w-xl text-sm leading-7 text-zinc-500 dark:text-zinc-400">
                {{ $isArabic ? 'متابعة يومية للطلاب الأكثر احتياجًا، الإنذارات المبكرة، الجلسات الإرشادية، والتواصل مع الأسر.' : 'Daily tracking of priority students, early warnings, counseling sessions, and family communication.' }}
            </p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('social-worker.students') }}" class="inline-flex items-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 py-2.5 text-sm font-bold text-violet-700 transition hover:border-violet-300 hover:bg-violet-50 dark:border-violet-800 dark:bg-violet-950/40 dark:text-violet-300 dark:hover:bg-violet-900/40">
                <i class="fa-solid fa-user-group text-xs"></i>{{ $isArabic ? 'الطلاب' : 'Students' }}
            </a>
            <a href="{{ route('social-worker.alerts') }}" class="inline-flex items-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 py-2.5 text-sm font-bold text-violet-700 transition hover:border-violet-300 hover:bg-violet-50 dark:border-violet-800 dark:bg-violet-950/40 dark:text-violet-300 dark:hover:bg-violet-900/40">
                <i class="fa-solid fa-triangle-exclamation text-xs"></i>{{ $isArabic ? 'الإنذارات' : 'Alerts' }}
            </a>
            <a href="{{ route('social-worker.sessions.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 py-2.5 text-sm font-bold text-violet-700 transition hover:border-violet-300 hover:bg-violet-50 dark:border-violet-800 dark:bg-violet-950/40 dark:text-violet-300 dark:hover:bg-violet-900/40">
                <i class="fa-solid fa-calendar-check text-xs"></i>{{ $isArabic ? 'الجلسات' : 'Sessions' }}
            </a>
            <a href="{{ route('social-worker.notes') }}" class="inline-flex items-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 py-2.5 text-sm font-bold text-violet-700 transition hover:border-violet-300 hover:bg-violet-50 dark:border-violet-800 dark:bg-violet-950/40 dark:text-violet-300 dark:hover:bg-violet-900/40">
                <i class="fa-solid fa-file-lines text-xs"></i>{{ $isArabic ? 'الملاحظات' : 'Notes' }}
            </a>
            <a href="{{ route('social-worker.referrals.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 py-2.5 text-sm font-bold text-violet-700 transition hover:border-violet-300 hover:bg-violet-50 dark:border-violet-800 dark:bg-violet-950/40 dark:text-violet-300 dark:hover:bg-violet-900/40">
                <i class="fa-solid fa-share-nodes text-xs"></i>{{ $isArabic ? 'الإحالات' : 'Referrals' }}
            </a>
        </div>
    </div>
</section>

@unless($hasScope)
<section class="rounded-[1.75rem] border border-dashed border-zinc-300 bg-white p-10 text-center dark:border-zinc-700 dark:bg-zinc-950">
    <i class="fa-solid fa-circle-exclamation mb-3 text-4xl text-zinc-300"></i>
    <h3 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'لا يوجد نطاق مسند لهذا الحساب بعد' : 'No scope assigned yet' }}</h3>
    <p class="mt-3 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'اربط الأخصائية بمراحل أو صفوف أو فصول ليبدأ النظام بعرض الحالات.' : 'Assign stages, grades, or classes to start seeing cases.' }}</p>
</section>
@endunless

{{-- ═══ Stats ═══ --}}
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    @foreach($supportHighlights as $h)
    <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="flex items-center justify-between">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $h['label'] }}</p>
            <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400">
                <i class="fa-solid {{ $h['icon'] }} text-sm"></i>
            </div>
        </div>
        <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $h['value'] }}</p>
    </article>
    @endforeach
</div>

{{-- ═══ Main Grid ═══ --}}
<div class="grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(22rem,0.9fr)]">

    {{-- Left: Priority Students --}}
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
        <div class="flex items-center justify-between border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
            <div>
                <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'طلاب بحاجة إلى تدخل قريب' : 'Students needing intervention' }}</h2>
                <p class="mt-0.5 text-xs text-zinc-400">{{ $isArabic ? 'مرتبون حسب تكرار الغياب' : 'Sorted by absence frequency' }}</p>
            </div>
            <a href="{{ route('social-worker.students') }}" class="text-xs font-black text-rose-600 dark:text-rose-400">{{ $isArabic ? 'عرض الكل' : 'View all' }}</a>
        </div>
        <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
            @forelse($flaggedStudentCards as $s)
                <div class="flex items-center justify-between gap-4 px-6 py-4">
                    <div class="min-w-0">
                        <p class="font-bold text-zinc-900 truncate dark:text-white">{{ $s['student_name'] }}</p>
                        <p class="mt-0.5 text-xs text-zinc-400">{{ $s['class_name'] }}</p>
                    </div>
                    <div class="flex shrink-0 items-center gap-3">
                        <span class="text-sm font-black text-zinc-900 dark:text-white">{{ $s['absences_count'] }}</span>
                        <span class="rounded-full px-2.5 py-1 text-[10px] font-black
                            {{ $s['risk_label'] === 'عاجل' || $s['risk_label'] === 'urgent' ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400' }}">
                            {{ $s['risk_label'] }}
                        </span>
                    </div>
                </div>
            @empty
                <div class="px-6 py-10 text-center text-sm text-zinc-400">
                    <i class="fa-solid fa-circle-check mb-2 text-2xl text-emerald-300"></i>
                    <p>{{ $isArabic ? 'لا توجد حالات حرجة حالياً.' : 'No critical cases right now.' }}</p>
                </div>
            @endforelse
        </div>
    </div>

    {{-- Right Column --}}
    <div class="space-y-6">

        {{-- Quick Actions --}}
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
            <h2 class="mb-4 text-sm font-black uppercase tracking-widest text-zinc-400">{{ $isArabic ? 'إجراءات سريعة' : 'Quick Actions' }}</h2>
            <div class="grid grid-cols-3 gap-3">
                <a href="{{ route('social-worker.notes') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-3 text-center transition hover:border-rose-300 hover:bg-rose-50 dark:border-zinc-700 dark:hover:bg-rose-500/5">
                    <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400"><i class="fa-solid fa-file-lines text-sm"></i></div>
                    <span class="text-[10px] font-bold text-zinc-600 dark:text-zinc-400">{{ $isArabic ? 'ملاحظة' : 'Note' }}</span>
                </a>
                <a href="{{ route('social-worker.sessions.index') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-3 text-center transition hover:border-sky-300 hover:bg-sky-50 dark:border-zinc-700 dark:hover:bg-sky-500/5">
                    <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400"><i class="fa-solid fa-calendar-check text-sm"></i></div>
                    <span class="text-[10px] font-bold text-zinc-600 dark:text-zinc-400">{{ $isArabic ? 'جلسة' : 'Session' }}</span>
                </a>
                <a href="{{ route('social-worker.behavior.index') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-3 text-center transition hover:border-amber-300 hover:bg-amber-50 dark:border-zinc-700 dark:hover:bg-amber-500/5">
                    <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400"><i class="fa-solid fa-flag text-sm"></i></div>
                    <span class="text-[10px] font-bold text-zinc-600 dark:text-zinc-400">{{ $isArabic ? 'سلوك' : 'Behavior' }}</span>
                </a>
                <a href="{{ route('social-worker.parent-requests') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-3 text-center transition hover:border-violet-300 hover:bg-violet-50 dark:border-zinc-700 dark:hover:bg-violet-500/5">
                    <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-400"><i class="fa-solid fa-handshake-angle text-sm"></i></div>
                    <span class="text-[10px] font-bold text-zinc-600 dark:text-zinc-400">{{ $isArabic ? 'استدعاء' : 'Request' }}</span>
                </a>
                <a href="{{ route('social-worker.referrals.index') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-3 text-center transition hover:border-emerald-300 hover:bg-emerald-50 dark:border-zinc-700 dark:hover:bg-emerald-500/5">
                    <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"><i class="fa-solid fa-share-nodes text-sm"></i></div>
                    <span class="text-[10px] font-bold text-zinc-600 dark:text-zinc-400">{{ $isArabic ? 'إحالة' : 'Referral' }}</span>
                </a>
                <a href="{{ route('social-worker.communication.index') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-3 text-center transition hover:border-cyan-300 hover:bg-cyan-50 dark:border-zinc-700 dark:hover:bg-cyan-500/5">
                    <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-cyan-50 text-cyan-600 dark:bg-cyan-500/10 dark:text-cyan-400"><i class="fa-solid fa-comments text-sm"></i></div>
                    <span class="text-[10px] font-bold text-zinc-600 dark:text-zinc-400">{{ $isArabic ? 'تواصل' : 'Comms' }}</span>
                </a>
            </div>
        </div>

        {{-- Active Alerts --}}
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
            <div class="flex items-center justify-between border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الإنذارات المفتوحة' : 'Active alerts' }}</h2>
                <a href="{{ route('social-worker.alerts') }}" class="text-xs font-black text-rose-600 dark:text-rose-400">{{ $isArabic ? 'عرض الكل' : 'View all' }}</a>
            </div>
            <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                @forelse($activeAlertCards as $alert)
                    <a href="{{ $alert['url'] }}" class="flex items-center justify-between gap-4 px-6 py-3 transition hover:bg-zinc-50 dark:hover:bg-zinc-900">
                        <div class="min-w-0">
                            <p class="text-sm font-bold text-zinc-900 truncate dark:text-white">{{ $alert['title'] }}</p>
                            <p class="mt-0.5 text-xs text-zinc-400">{{ $alert['student_name'] }}</p>
                        </div>
                        <span class="shrink-0 rounded-full px-2.5 py-1 text-[10px] font-black {{ $alert['severity'] === 'high' ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400' }}">{{ strtoupper($alert['severity']) }}</span>
                    </a>
                @empty
                    <div class="px-6 py-8 text-center text-sm text-zinc-400">{{ $isArabic ? 'لا توجد إنذارات مفتوحة.' : 'No active alerts.' }}</div>
                @endforelse
            </div>
        </div>

        {{-- Today Sessions --}}
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
            <div class="flex items-center justify-between border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'جلسات اليوم' : "Today's sessions" }}</h2>
                <a href="{{ route('social-worker.sessions.index') }}" class="text-xs font-black text-sky-600 dark:text-sky-400">{{ $isArabic ? 'كل الجلسات' : 'All sessions' }}</a>
            </div>
            <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                @forelse($todaySessionCards as $session)
                    <div class="flex items-center justify-between gap-4 px-6 py-3">
                        <div class="min-w-0">
                            <p class="text-sm font-bold text-zinc-900 truncate dark:text-white">{{ $session['student_name'] }}</p>
                            <p class="mt-0.5 text-xs text-zinc-400">{{ $session['starts_at_label'] }}</p>
                        </div>
                        <span class="shrink-0 rounded-full bg-amber-100 px-2.5 py-1 text-[10px] font-black text-amber-700 dark:bg-amber-500/10 dark:text-amber-400">{{ $session['status'] }}</span>
                    </div>
                @empty
                    <div class="px-6 py-8 text-center text-sm text-zinc-400">{{ $isArabic ? 'لا توجد جلسات اليوم.' : 'No sessions today.' }}</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- ═══ Trend + Risk ═══ --}}
<div class="grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(22rem,0.9fr)]">
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
        <div class="flex items-center justify-between mb-5">
            <div>
                <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'اتجاه الغياب — آخر 7 أيام' : '7-day absence trend' }}</h2>
                <p class="mt-0.5 text-xs text-zinc-400">{{ $isArabic ? 'إجمالي: ' . $totalAbsenceSessions . ' غياب' : 'Total: ' . $totalAbsenceSessions . ' absences' }}</p>
            </div>
            <span class="rounded-full bg-rose-50 px-3 py-1 text-xs font-black text-rose-700 dark:bg-rose-500/10 dark:text-rose-300">{{ $isArabic ? 'آخر أسبوع' : 'Last week' }}</span>
        </div>
        <div class="grid grid-cols-7 gap-2">
            @foreach($weeklyAbsenceTrendChart as $point)
                <div class="flex flex-col items-center gap-2">
                    <div class="flex h-28 w-full items-end justify-center rounded-2xl bg-zinc-50 px-2 py-2 dark:bg-zinc-900">
                        <div class="w-full rounded-t-xl bg-gradient-to-t from-rose-500 to-orange-400" style="height: {{ $point['height'] }}%"></div>
                    </div>
                    <span class="text-xl font-black text-zinc-900 dark:text-white">{{ $point['total'] }}</span>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-zinc-400">{{ $point['day_label'] }}</span>
                </div>
            @endforeach
        </div>
    </div>

    <div class="space-y-6">
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'أعلى الفصول خطورة' : 'Highest-risk classes' }}</h2>
                <a href="{{ route('social-worker.classes') }}" class="text-xs font-black text-rose-600 dark:text-rose-400">{{ $isArabic ? 'التفاصيل' : 'Details' }}</a>
            </div>
            <div class="space-y-3">
                @forelse($classRiskCards as $class)
                    <div class="flex items-center justify-between gap-3 rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-900">
                        <div class="min-w-0">
                            <p class="text-sm font-bold text-zinc-900 truncate dark:text-white">{{ $class['name'] }}</p>
                            <p class="text-xs text-zinc-400">{{ $class['students_count'] }} {{ $isArabic ? 'طالب' : 'students' }}</p>
                        </div>
                        <div class="flex items-center gap-2 shrink-0">
                            <span class="text-sm font-black text-zinc-900 dark:text-white">{{ $class['absences_count'] }}</span>
                            <span class="rounded-full px-2.5 py-1 text-[10px] font-black {{ $class['risk_label'] === 'مرتفع' ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400' }}">{{ $class['risk_label'] }}</span>
                        </div>
                    </div>
                @empty
                    <p class="py-4 text-center text-sm text-zinc-400">{{ $isArabic ? 'لا توجد بيانات.' : 'No data yet.' }}</p>
                @endforelse
            </div>
        </div>

        @if($gradeAbsenceBars->isNotEmpty())
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
            <h2 class="mb-4 text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الغياب حسب الصف' : 'Absences by grade' }}</h2>
            <div class="space-y-3">
                @foreach($gradeAbsenceBars as $bar)
                    <div class="flex items-center gap-3">
                        <span class="w-20 shrink-0 truncate text-xs font-bold text-zinc-600 dark:text-zinc-400">{{ $bar['grade_name'] }}</span>
                        <div class="h-2 flex-1 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
                            <div class="h-full rounded-full bg-rose-500" style="width: {{ $bar['width'] }}%"></div>
                        </div>
                        <span class="w-8 shrink-0 text-end text-xs font-black text-zinc-900 dark:text-white">{{ $bar['total'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>

{{-- ═══ Scope Summary ═══ --}}
@if($hasScope)
<div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
    <h2 class="mb-4 text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'ملخص النطاق المسند' : 'Assigned scope summary' }}</h2>
    <div class="grid gap-6 md:grid-cols-3">
        <div>
            <p class="mb-2 text-xs font-black uppercase tracking-widest text-zinc-400">{{ $isArabic ? 'المراحل' : 'Stages' }}</p>
            <div class="flex flex-wrap gap-2">
                @forelse($scopeSummary['stages'] as $item)
                    <span class="rounded-full bg-rose-100 px-3 py-1 text-xs font-black text-rose-700 dark:bg-rose-500/10 dark:text-rose-300">{{ $item }}</span>
                @empty
                    <span class="text-sm text-zinc-400">{{ $isArabic ? 'لا يوجد' : 'None' }}</span>
                @endforelse
            </div>
        </div>
        <div>
            <p class="mb-2 text-xs font-black uppercase tracking-widest text-zinc-400">{{ $isArabic ? 'الصفوف' : 'Grades' }}</p>
            <div class="flex flex-wrap gap-2">
                @forelse($scopeSummary['grades'] as $item)
                    <span class="rounded-full bg-orange-100 px-3 py-1 text-xs font-black text-orange-700 dark:bg-orange-500/10 dark:text-orange-300">{{ $item }}</span>
                @empty
                    <span class="text-sm text-zinc-400">{{ $isArabic ? 'لا يوجد' : 'None' }}</span>
                @endforelse
            </div>
        </div>
        <div>
            <p class="mb-2 text-xs font-black uppercase tracking-widest text-zinc-400">{{ $isArabic ? 'الفصول' : 'Classes' }}</p>
            <div class="flex flex-wrap gap-2">
                @forelse($scopeSummary['classes'] as $item)
                    <span class="rounded-full bg-sky-100 px-3 py-1 text-xs font-black text-sky-700 dark:bg-sky-500/10 dark:text-sky-300">{{ $item }}</span>
                @empty
                    <span class="text-sm text-zinc-400">{{ $isArabic ? 'لا يوجد' : 'None' }}</span>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endif

</div>
@endsection