@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'إحالات الدعم' : 'Support Referrals')
@section('skip_page_hero', true)
@php($isArabic = app()->getLocale() === 'ar')
@section('content')
<div class="space-y-6">
    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.05fr)_minmax(24rem,0.95fr)]">
        <div class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-950">
            <p class="text-xs font-black uppercase tracking-[0.24em] text-brand-600">{{ $isArabic ? 'إحالات الدعم' : 'Support referrals' }}</p>
            <h1 class="mt-3 text-2xl font-black text-surface-900 dark:text-white md:text-3xl">{{ $isArabic ? 'تحويل الطلاب للأخصائي من مكان واحد' : 'Refer students to the counselor from one place' }}</h1>
        </div>
        <form action="{{ route('teacher.social-support.referrals.store') }}" method="POST" class="space-y-3 rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-950">@csrf
            <select name="student_id" required class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-white"><option value="">{{ $isArabic ? 'الطالب' : 'Student' }}</option>@foreach($students as $student)<option value="{{ $student->id }}">{{ $student->name }}</option>@endforeach</select>
            <input type="text" name="title" placeholder="{{ $isArabic ? 'عنوان الإحالة' : 'Referral title' }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-white">
            <div class="grid gap-3 md:grid-cols-2">
                <input type="text" name="category" placeholder="{{ $isArabic ? 'التصنيف' : 'Category' }}" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-white">
                <select name="urgency" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-white"><option value="low">low</option><option value="normal">normal</option><option value="high">high</option></select>
            </div>
            <textarea name="concern" rows="4" placeholder="{{ $isArabic ? 'سبب الإحالة' : 'Concern details' }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-white"></textarea>
            <textarea name="requested_action" rows="3" placeholder="{{ $isArabic ? 'الإجراء المطلوب' : 'Requested action' }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-white"></textarea>
            <button class="inline-flex w-full items-center justify-center rounded-2xl bg-brand-600 px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'إرسال الإحالة' : 'Submit referral' }}</button>
        </form>
    </section>
    <section class="space-y-4">
        @if($referrals->count() > 0)
            @foreach($referrals as $referral)
                <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-950">
                    <h2 class="text-base font-black text-surface-900 dark:text-white">{{ $referral->title }}</h2>
                    <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ $referral->student?->name ?? '—' }} • {{ $referral->status }} • {{ $referral->urgency }}</p>
                    <p class="mt-4 text-sm text-surface-600 dark:text-surface-300">{{ $referral->concern }}</p>
                </article>
            @endforeach
        @endif
    </section>
    <section class="rounded-xl border border-surface-200 bg-white px-6 py-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">{{ $referrals->links('pagination::simple-tailwind') }}</section>
</div>
@endsection