@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'لوحة الأخصائية الاجتماعية' : 'Social Worker Dashboard')
@section('page_heading', app()->getLocale() === 'ar' ? 'لوحة الأخصائية الاجتماعية' : 'Social Worker Dashboard')
@section('page_subtitle', app()->getLocale() === 'ar' ? 'متابعة الغياب والحالات المفتوحة والصفوف الأكثر حاجة للتدخل من مساحة واحدة.' : 'Track absences, open cases, and the classes needing intervention from one workspace.')

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
    $highestTrendValue = max(1, $weeklyAbsenceTrend->max());
@endphp

<div class="space-y-6">
    <section class="relative overflow-hidden rounded-[2rem] border border-rose-100 bg-gradient-to-br from-rose-600 via-pink-700 to-orange-600 p-6 text-white shadow-[0_24px_60px_-32px_rgba(190,24,93,0.6)] md:p-8 dark:border-rose-500/20">
        <div class="absolute -top-20 end-0 h-56 w-56 rounded-full bg-white/10 blur-3xl"></div>
        <div class="absolute -bottom-16 start-0 h-44 w-44 rounded-full bg-orange-200/10 blur-3xl"></div>

        <div class="relative grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_22rem] xl:items-end">
            <div>
                <span class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-black uppercase tracking-[0.28em]">
                    <i class="fa-solid fa-hands-holding-child text-[11px]"></i>
                    {{ $isArabic ? 'مركز المتابعة الاجتماعية' : 'Social care command center' }}
                </span>

                <h2 class="mt-4 text-3xl font-black md:text-4xl">
                    {{ $isArabic ? 'رؤية أسرع للحالات الاجتماعية والغياب' : 'A clearer view of absences and social cases' }}
                </h2>

                <p class="mt-3 max-w-2xl text-sm leading-7 text-rose-50/90 md:text-base">
                    {{ $isArabic
                        ? 'هذه اللوحة تجمع إشارات التدخل الأساسية: عدد الطلاب المتغيبين، الصفوف الأعلى خطورة، والاستفسارات التي ما زالت مفتوحة وتحتاج متابعة.'
                        : 'This dashboard concentrates the main intervention signals: absent students, higher-risk classes, and open inquiries still awaiting follow-up.' }}
                </p>
            </div>

            <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
                <div class="rounded-2xl border border-white/15 bg-white/10 p-4 backdrop-blur-sm">
                    <p class="text-xs font-black uppercase tracking-[0.24em] text-rose-50/80">{{ $isArabic ? 'الطلاب المتغيبون' : 'Absent students' }}</p>
                    <p class="mt-3 text-3xl font-black font-numbers">{{ $totalAbsentStudents }}</p>
                    <p class="mt-2 text-sm text-rose-50/80">{{ $isArabic ? 'إجمالي الحالات المسجلة في النظام' : 'Total absence cases recorded in the system' }}</p>
                </div>

                <div class="rounded-2xl border border-white/15 bg-white/10 p-4 backdrop-blur-sm">
                    <p class="text-xs font-black uppercase tracking-[0.24em] text-rose-50/80">{{ $isArabic ? 'طلاب يحتاجون تدخل' : 'Students needing action' }}</p>
                    <p class="mt-3 text-3xl font-black font-numbers">{{ $flaggedStudentsCount }}</p>
                    <p class="mt-2 text-sm text-rose-50/80">{{ $isArabic ? 'غياب متكرر خلال آخر 30 يوماً' : 'Repeated absences during the last 30 days' }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-3xl border border-zinc-200 bg-zinc-50/80 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'جلسات الحضور' : 'Attendance sessions' }}</p>
            <p class="mt-4 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $totalAbsenceSessions }}</p>
        </div>

        <div class="rounded-3xl border border-zinc-200 bg-zinc-50/80 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'حالات الغياب' : 'Absence records' }}</p>
            <p class="mt-4 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $totalAbsentStudents }}</p>
        </div>

        <div class="rounded-3xl border border-zinc-200 bg-zinc-50/80 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'استفسارات مفتوحة' : 'Open inquiries' }}</p>
            <p class="mt-4 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $openInquiriesCount }}</p>
        </div>

        <div class="rounded-3xl border border-zinc-200 bg-zinc-50/80 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'صفوف عالية الخطورة' : 'High-risk classes' }}</p>
            <p class="mt-4 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $classRiskBoard->count() }}</p>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.45fr)_minmax(21rem,0.95fr)]">
        <div class="rounded-3xl border border-zinc-200 dark:border-zinc-800">
            <div class="flex items-center justify-between border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <div>
                    <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'اتجاه الغياب خلال 7 أيام' : '7-day absence trend' }}</h3>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'قراءة سريعة لتذبذب حالات الغياب اليومية.' : 'A quick look at day-to-day absence volume.' }}</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 h-full gap-4 p-6 md:grid-cols-7">
                @foreach ($weeklyAbsenceTrend as $date => $total)
                    @php
                        $height = max(10, (int) round(($total / $highestTrendValue) * 100));
                    @endphp
                    <div class="flex flex-col justify-end gap-3 rounded-3xl bg-zinc-50/80 p-4 dark:bg-zinc-900/60">
                        <div class="flex h-40 items-end justify-center rounded-2xl bg-white px-3 py-4 ring-1 ring-zinc-200 dark:bg-zinc-950 dark:ring-zinc-800">
                            <div class="w-full rounded-t-2xl bg-gradient-to-t from-rose-500 to-orange-400 transition-all" style="height: {{ $height }}%;"></div>
                        </div>
                        <div class="text-center">
                            <div class="text-xl font-black text-zinc-900 dark:text-white font-numbers">{{ $total }}</div>
                            <div class="mt-1 text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-400 dark:text-zinc-500">
                                {{ \Illuminate\Support\Carbon::parse($date)->translatedFormat('D') }}
                            </div>
                            <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ \Illuminate\Support\Carbon::parse($date)->translatedFormat('d M') }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="rounded-3xl border border-zinc-200 dark:border-zinc-800">
            <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الأكثر تأثراً حسب الصف' : 'Most affected grades' }}</h3>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'توزيع حالات الغياب على الصفوف الدراسية.' : 'How absence cases are distributed across grades.' }}</p>
            </div>

            <div class="space-y-3 p-6">
                @forelse ($absencesByGrade as $gradeAbsence)
                    <article class="rounded-2xl border border-zinc-200 bg-zinc-50/70 p-4 dark:border-zinc-800 dark:bg-zinc-900/60">
                        <div class="flex items-center justify-between gap-3">
                            <div>
                                <h4 class="text-sm font-black text-zinc-900 dark:text-white">{{ $gradeAbsence->grade_name }}</h4>
                                <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'إجمالي حالات غياب مرتبطة بهذا الصف' : 'Total absence cases linked to this grade' }}</p>
                            </div>
                            <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 font-numbers">
                                {{ $gradeAbsence->total }}
                            </span>
                        </div>
                    </article>
                @empty
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                        {{ $isArabic ? 'لا توجد بيانات غياب متاحة حالياً.' : 'No absence data is currently available.' }}
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,1.2fr)]">
        <div class="rounded-3xl border border-zinc-200 dark:border-zinc-800">
            <div class="flex items-center justify-between border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <div>
                    <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'طلاب يحتاجون متابعة' : 'Students needing follow-up' }}</h3>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'أعلى الطلاب من حيث تكرار الغياب.' : 'Students with the highest repeated absence count.' }}</p>
                </div>
                <span class="text-xs font-bold uppercase tracking-[0.24em] text-zinc-400 dark:text-zinc-500">{{ $isArabic ? 'أولوية' : 'Priority' }}</span>
            </div>

            <div class="space-y-3 p-6">
                @forelse ($flaggedStudents as $row)
                    @php
                        $student = $row->student;
                        $studentClass = $student?->schoolClass->first();
                    @endphp
                    <article class="flex items-center justify-between gap-4 rounded-2xl border border-zinc-200 bg-zinc-50/70 p-4 dark:border-zinc-800 dark:bg-zinc-900/60">
                        <div class="min-w-0 flex-1">
                            <h4 class="truncate text-sm font-black text-zinc-900 dark:text-white">{{ $student?->name ?? ($isArabic ? 'طالب غير معروف' : 'Unknown student') }}</h4>
                            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
                                {{ $studentClass?->grade?->name ? $studentClass->grade->name . ' • ' : '' }}{{ $studentClass?->name ?? ($isArabic ? 'بدون فصل' : 'No class') }}
                            </p>
                            <p class="mt-2 text-[11px] text-zinc-400 dark:text-zinc-500">
                                {{ $isArabic ? 'آخر غياب:' : 'Last absence:' }}
                                {{ $row->last_absence_at ? \Illuminate\Support\Carbon::parse($row->last_absence_at)->translatedFormat('d MMM Y') : ($isArabic ? 'غير متاح' : 'Unavailable') }}
                            </p>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $row->absences_count }}</div>
                            <div class="text-[11px] font-bold uppercase tracking-[0.22em] text-rose-600">{{ $isArabic ? 'غياب' : 'Absences' }}</div>
                        </div>
                    </article>
                @empty
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                        {{ $isArabic ? 'لا توجد حالات حرجة لطلاب حالياً.' : 'No critical student cases right now.' }}
                    </div>
                @endforelse
            </div>
        </div>

        <div class="rounded-3xl border border-zinc-200 dark:border-zinc-800">
            <div class="flex items-center justify-between border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <div>
                    <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الصفوف الأكثر حاجة للتدخل' : 'Classes needing intervention' }}</h3>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'مقارنة بين عدد الغيابات والطلاب المتأثرين في كل فصل.' : 'Compare absence volume and affected students by class.' }}</p>
                </div>
            </div>

            <div class="space-y-3 p-6">
                @forelse ($classRiskBoard as $classRow)
                    <article class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h4 class="text-sm font-black text-zinc-900 dark:text-white">{{ $classRow->grade_name }}{{ $classRow->class_name ? ' • ' . $classRow->class_name : '' }}</h4>
                                <p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
                                    {{ $isArabic ? 'طلاب متأثرون:' : 'Affected students:' }}
                                    <span class="font-black text-zinc-700 dark:text-zinc-200 font-numbers">{{ $classRow->students_count }}</span>
                                </p>
                            </div>
                            <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 font-numbers">
                                {{ $classRow->absences_count }}
                            </span>
                        </div>
                    </article>
                @empty
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                        {{ $isArabic ? 'لا توجد صفوف حرجة حالياً.' : 'No high-risk classes right now.' }}
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
        <div class="rounded-3xl border border-zinc-200 dark:border-zinc-800">
            <div class="flex items-center justify-between border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <div>
                    <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'أحدث حالات الغياب' : 'Latest absence cases' }}</h3>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'آخر الحالات المسجلة مع الطالب والمقرر والفصل.' : 'Latest logged cases with student, course, and class context.' }}</p>
                </div>
            </div>

            <div class="space-y-3 p-6">
                @forelse ($recentCases as $case)
                    @php
                        $studentClass = $case->student?->schoolClass->first();
                        $courseClass = $case->attendance?->course?->schoolClass;
                    @endphp
                    <article class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-zinc-200 bg-zinc-50/70 p-4 dark:border-zinc-800 dark:bg-zinc-900/60">
                        <div class="min-w-0 flex-1">
                            <h4 class="truncate text-sm font-black text-zinc-900 dark:text-white">{{ $case->student?->name ?? ($isArabic ? 'طالب غير معروف' : 'Unknown student') }}</h4>
                            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
                                {{ $case->attendance?->course?->name ?? ($isArabic ? 'مقرر غير محدد' : 'Unassigned course') }}
                            </p>
                            <p class="mt-2 text-[11px] text-zinc-400 dark:text-zinc-500">
                                {{ $studentClass?->grade?->name ?? $courseClass?->grade?->name }}{{ ($studentClass?->name ?? $courseClass?->name) ? ' • ' . ($studentClass?->name ?? $courseClass?->name) : '' }}
                            </p>
                        </div>
                        <div class="text-right">
                            <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">
                                {{ $case->attendance?->type === 'virtual' ? ($isArabic ? 'افتراضي' : 'Virtual') : ($isArabic ? 'مدرسي' : 'School') }}
                            </span>
                            <p class="mt-2 text-[11px] text-zinc-400 dark:text-zinc-500">
                                {{ \Illuminate\Support\Carbon::parse($case->attendance?->date ?? $case->created_at)->translatedFormat('d MMM, h:mm a') }}
                            </p>
                        </div>
                    </article>
                @empty
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                        {{ $isArabic ? 'لا توجد حالات غياب حديثة مسجلة.' : 'No recent absence cases have been logged.' }}
                    </div>
                @endforelse
            </div>
        </div>

        <div class="rounded-3xl border border-zinc-200 dark:border-zinc-800">
            <div class="flex items-center justify-between border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <div>
                    <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'استفسارات بانتظار المتابعة' : 'Inquiries awaiting follow-up' }}</h3>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'رسائل جديدة قد تتطلب دعماً اجتماعياً أو متابعة مع الطالب.' : 'New messages that may require social follow-up or student support.' }}</p>
                </div>
                <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-black text-brand-700 dark:bg-brand-500/10 dark:text-brand-300 font-numbers">
                    {{ $openInquiries->count() }}
                </span>
            </div>

            <div class="space-y-3 p-6">
                @forelse ($openInquiries as $inquiry)
                    @php
                        $studentClass = $inquiry->student?->schoolClass->first();
                    @endphp
                    <article class="rounded-2xl border border-zinc-200 bg-zinc-50/70 p-4 dark:border-zinc-800 dark:bg-zinc-900/60">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0 flex-1">
                                <h4 class="truncate text-sm font-black text-zinc-900 dark:text-white">{{ $inquiry->title }}</h4>
                                <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
                                    {{ $inquiry->student?->name ?? ($isArabic ? 'طالب غير معروف' : 'Unknown student') }}
                                    @if ($studentClass?->name)
                                        • {{ $studentClass->grade?->name }} {{ $studentClass->name }}
                                    @endif
                                </p>
                            </div>
                            <span class="rounded-full bg-amber-100 px-3 py-1 text-[11px] font-black text-amber-700 dark:bg-amber-500/10 dark:text-amber-300">
                                {{ $isArabic ? 'جديد' : 'New' }}
                            </span>
                        </div>

                        <p class="mt-3 text-sm leading-6 text-zinc-600 dark:text-zinc-300">{{ \Illuminate\Support\Str::limit($inquiry->message, 120) }}</p>

                        <div class="mt-4 flex flex-wrap items-center justify-between gap-3 text-[11px] text-zinc-400 dark:text-zinc-500">
                            <span>{{ $inquiry->course?->name ?? ($isArabic ? 'بدون مقرر' : 'No course') }}</span>
                            <span>{{ $inquiry->created_at?->diffForHumans() }}</span>
                        </div>
                    </article>
                @empty
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                        {{ $isArabic ? 'لا توجد استفسارات مفتوحة حالياً.' : 'There are no open inquiries right now.' }}
                    </div>
                @endforelse
            </div>
        </div>
    </section>
</div>
@endsection