@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'الدعم الاجتماعي' : 'Social Support')
@section('skip_page_hero', true)

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

@section('content')
<div class="space-y-6">
    <section class="rounded-[2rem] border border-zinc-200 bg-white/80 p-6 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70">
        <p class="text-xs font-black uppercase tracking-[0.28em] text-amber-500">{{ $isArabic ? 'الدعم الاجتماعي' : 'Social Support' }}</p>
        <h1 class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'ملاحظات الأخصائية الاجتماعية وطلبات الحضور' : 'Social worker notes and parent requests' }}</h1>
        <p class="mt-2 max-w-3xl text-sm leading-6 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'كل ما تم ربطه بك من الأخصائية الاجتماعية بخصوص الأبناء يظهر هنا بوضوح.' : 'Everything linked to you by the social worker about your children appears here clearly.' }}</p>
    </section>

    <section class="grid gap-6 xl:grid-cols-2">
        <div class="rounded-3xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
            <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الملاحظات الاجتماعية' : 'Social notes' }}</h2>
            </div>
            <div class="space-y-4 p-6">
                @foreach($notes as $note)
                    <article class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                        <h3 class="text-sm font-black text-zinc-900 dark:text-white">{{ $note->title }}</h3>
                        <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $note->student?->name ?? '—' }}</p>
                        <p class="mt-3 text-sm leading-7 text-zinc-600 dark:text-zinc-300">{{ $note->note }}</p>
                    </article>
                @endforeach
@if($notes->isEmpty())
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">{{ $isArabic ? 'لا توجد ملاحظات اجتماعية مشتركة حتى الآن.' : 'No shared social notes yet.' }}</div>
                @endif
            </div>
        </div>

        <div class="rounded-3xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
            <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'طلبات واستدعاءات ولي الأمر' : 'Parent requests and summons' }}</h2>
            </div>
            <div class="space-y-4 p-6">
                @foreach($requests as $request)
                    <article class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                        <div class="flex flex-wrap items-center gap-2">
                            <h3 class="text-sm font-black text-zinc-900 dark:text-white">{{ $request->title }}</h3>
                            <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-black text-amber-700 dark:bg-amber-500/10 dark:text-amber-300">{{ $request->status }}</span>
                        </div>
                        <p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">{{ $request->student?->name ?? '—' }} · {{ $request->meeting_at?->translatedFormat('Y/m/d h:i A') ?? ($isArabic ? 'بدون موعد محدد' : 'No meeting scheduled') }}</p>
                        <p class="mt-3 text-sm leading-7 text-zinc-600 dark:text-zinc-300">{{ $request->message }}</p>
                    </article>
                @endforeach
@if($requests->isEmpty())
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">{{ $isArabic ? 'لا توجد طلبات من الأخصائية الاجتماعية حاليًا.' : 'No social worker requests right now.' }}</div>
                @endif
            </div>
        </div>
    </section>
</div>
@endsection