@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'المتابعة السلوكية' : 'Behavior Tracking')
@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-2">
        <form action="{{ route('social-worker.behavior.incidents.store') }}" method="POST" class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">@csrf
            <p class="text-xs font-black uppercase tracking-[0.24em] text-amber-600">{{ $isArabic ? 'واقعة سلوكية' : 'Behavior incident' }}</p>
            <div class="mt-5 space-y-3">
                <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>
                <div class="grid gap-3 md:grid-cols-3">
                    <input type="text" name="category" placeholder="{{ $isArabic ? 'التصنيف' : 'Category' }}" 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="severity" 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="low">low</option><option value="medium">medium</option><option value="high">high</option><option value="critical">critical</option></select>
                    <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="open">open</option><option value="monitoring">monitoring</option><option value="resolved">resolved</option></select>
                </div>
                <input type="date" name="occurred_on" 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="text" name="summary" placeholder="{{ $isArabic ? 'ملخص الحالة' : 'Summary' }}" 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 name="details" rows="4" placeholder="{{ $isArabic ? 'التفاصيل' : 'Details' }}" 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-amber-600 px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'تسجيل الواقعة' : 'Record incident' }}</button>
            </div>
        </form>
        <form action="{{ route('social-worker.behavior.plans.store') }}" method="POST" class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">@csrf
            <p class="text-xs font-black uppercase tracking-[0.24em] text-emerald-600">{{ $isArabic ? 'خطة تعديل' : 'Behavior plan' }}</p>
            <div class="mt-5 space-y-3">
                <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>
                <input type="text" name="title" placeholder="{{ $isArabic ? 'عنوان الخطة' : 'Plan title' }}" 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 name="goal" rows="3" placeholder="{{ $isArabic ? 'هدف الخطة' : 'Goal' }}" 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>
                <textarea name="baseline_status" rows="2" placeholder="{{ $isArabic ? 'الوضع الحالي' : 'Baseline' }}" 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>
                <textarea name="target_status" rows="2" placeholder="{{ $isArabic ? 'الوضع المستهدف' : 'Target 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"></textarea>
                <input type="date" name="review_due_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">
                <button class="inline-flex w-full items-center justify-center rounded-2xl bg-emerald-600 px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'إنشاء الخطة' : 'Create plan' }}</button>
            </div>
        </form>
    </section>
    <section class="grid gap-6 xl:grid-cols-2">
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الوقائع السلوكية' : 'Behavior incidents' }}</h2>
            <div class="mt-5 space-y-3">
                @if($incidents->count() > 0)
                    @foreach($incidents as $incident)
                        <article class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                            <p class="text-sm font-black text-zinc-900 dark:text-white">{{ $incident->student?->name ?? '—' }} • {{ $incident->summary }}</p>
                            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $incident->occurred_on?->format('Y-m-d') }} • {{ $incident->severity }} • {{ $incident->status }}</p>
                        </article>
                    @endforeach
                @endif
            </div>
        </div>
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'خطط التعديل' : 'Behavior plans' }}</h2>
            <div class="mt-5 space-y-4">
                @if($plans->count() > 0)
                    @foreach($plans as $plan)
                        <article class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                            <div class="flex items-center justify-between gap-3">
                                <h3 class="text-sm font-black text-zinc-900 dark:text-white">{{ $plan->student?->name ?? '—' }} • {{ $plan->title }}</h3>
                                <span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-black text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300">{{ $plan->status }}</span>
                            </div>
                            <p class="mt-3 text-sm text-zinc-600 dark:text-zinc-300">{{ $plan->goal }}</p>
                            <form action="{{ route('social-worker.behavior.plans.progress', $plan) }}" method="POST" class="mt-4 grid gap-3 md:grid-cols-[1fr_9rem]">@csrf
                                <textarea name="note" rows="2" placeholder="{{ $isArabic ? 'ملاحظة تقدم' : 'Progress 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>
                                <div class="space-y-3">
                                    <select name="progress_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="ongoing">ongoing</option><option value="improving">improving</option><option value="stable">stable</option><option value="completed">completed</option></select>
                                    <input type="number" name="progress_percent" min="0" max="100" value="50" 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-zinc-900 px-4 py-3 text-sm font-black text-white dark:bg-white dark:text-zinc-900">{{ $isArabic ? 'تحديث' : 'Update' }}</button>
                                </div>
                            </form>
                        </article>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
</div>
@endsection