@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'الجلسات الإرشادية' : 'Counseling Sessions')
@section('skip_page_hero', true)
@php($isArabic = app()->getLocale() === 'ar')
@section('content')
<div class="space-y-6">
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
        <div class="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(22rem,0.9fr)]">
            <div>
                <p class="text-xs font-black uppercase tracking-[0.24em] text-sky-600">{{ $isArabic ? 'الجلسات الإرشادية' : 'Counseling sessions' }}</p>
                <h1 class="mt-3 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $isArabic ? 'جدولة الجلسات وتوثيق ملاحظاتها' : 'Schedule sessions and document their notes' }}</h1>
            </div>
            <form action="{{ route('social-worker.sessions.store') }}" method="POST" class="space-y-3 rounded-[1.75rem] border border-zinc-200 bg-zinc-50/80 p-4 dark:border-zinc-800 dark:bg-zinc-900/60">@csrf
                <select name="student_id" required class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="">{{ $isArabic ? 'الطالب' : 'Student' }}</option>@foreach($students as $student)<option value="{{ $student->id }}">{{ $student->name }}</option>@endforeach</select>
                <select name="parent_user_id" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="">{{ $isArabic ? 'ولي الأمر' : 'Parent' }}</option>@foreach($linkedParents as $parent)<option value="{{ $parent->id }}">{{ $parent->name }}</option>@endforeach</select>
                <select name="referral_id" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="">{{ $isArabic ? 'بدون إحالة' : 'No referral' }}</option>@foreach($referrals as $referral)<option value="{{ $referral->id }}">{{ $referral->title }}</option>@endforeach</select>
                <div class="grid gap-3 md:grid-cols-2">
                    <input type="text" name="session_type" value="counseling" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
                    <select name="status" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="scheduled">{{ $isArabic ? 'مجدولة' : 'Scheduled' }}</option><option value="in_progress">{{ $isArabic ? 'قيد التنفيذ' : 'In progress' }}</option><option value="completed">{{ $isArabic ? 'مكتملة' : 'Completed' }}</option></select>
                </div>
                <div class="grid gap-3 md:grid-cols-2">
                    <input type="datetime-local" name="starts_at" required class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
                    <input type="datetime-local" name="ends_at" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
                </div>
                <input type="text" name="location" placeholder="{{ $isArabic ? 'المكان' : 'Location' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
                <button class="inline-flex w-full items-center justify-center rounded-2xl bg-sky-600 px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'حفظ الجلسة' : 'Save session' }}</button>
            </form>
        </div>
    </section>
    <div class="space-y-4">
        @if($sessions->count() > 0)
            @foreach($sessions as $session)
                <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
                    <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-center gap-2">
                                <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $session->student?->name ?? '—' }}</h2>
                                <span class="rounded-full bg-zinc-100 px-3 py-1 text-xs font-black text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">{{ $session->status }}</span>
                            </div>
                            <p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">{{ $session->session_type }} • {{ $session->starts_at?->translatedFormat('Y/m/d h:i A') ?? '—' }}{{ $session->location ? ' • ' . $session->location : '' }}</p>
                            @if($session->outcome_summary)<p class="mt-4 text-sm text-zinc-600 dark:text-zinc-300">{{ $session->outcome_summary }}</p>@endif
                        </div>
                        <form action="{{ route('social-worker.sessions.notes.store', $session) }}" method="POST" class="w-full max-w-sm space-y-3">@csrf
                            <textarea name="body" rows="3" placeholder="{{ $isArabic ? 'أضف ملاحظة جلسة' : 'Add session note' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"></textarea>
                            <button class="inline-flex w-full items-center justify-center rounded-2xl bg-zinc-900 px-4 py-3 text-sm font-black text-white dark:bg-white dark:text-zinc-900">{{ $isArabic ? 'حفظ الملاحظة' : 'Save note' }}</button>
                        </form>
                    </div>
                </article>
            @endforeach
        @else
            <div class="rounded-[1.75rem] border border-dashed border-zinc-300 bg-white p-10 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-400">{{ $isArabic ? 'لا توجد جلسات مجدولة.' : 'No sessions scheduled.' }}</div>
        @endif
    </div>
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white px-6 py-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">{{ $sessions->links('pagination::simple-tailwind') }}</section>
</div>
@endsection