@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'الإنذارات المبكرة' : 'Early Warnings')
@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">
        <p class="text-xs font-black uppercase tracking-[0.24em] text-rose-600">{{ $isArabic ? 'الإنذارات المبكرة' : 'Early warnings' }}</p>
        <h1 class="mt-3 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $isArabic ? 'التنبيهات الآلية للحالات التي تحتاج تدخلًا' : 'Automated alerts for cases that need intervention' }}</h1>
        <p class="mt-3 max-w-3xl text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'يتم تحديث هذه القائمة تلقائيًا من الحضور والدرجات والملاحظات السلوكية المفتوحة.' : 'This list is refreshed automatically from attendance, marks, and open behavior incidents.' }}</p>
    </section>

    <section class="space-y-4">
        @if($alerts->count() > 0)
            @foreach($alerts as $alert)
                <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 lg:flex-row lg:items-start lg: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">{{ $alert->title }}</h2>
                                <span class="rounded-full px-3 py-1 text-xs font-black {{ $alert->severity === 'high' ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300' }}">{{ strtoupper($alert->severity) }}</span>
                            </div>
                            <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $alert->student?->name }}{{ $alert->student?->schoolClass->first()?->name ? ' • ' . $alert->student->schoolClass->first()->name : '' }}</p>
                            <p class="mt-4 text-sm leading-7 text-zinc-600 dark:text-zinc-300">{{ $alert->summary }}</p>
                        </div>
                        <a href="{{ route('social-worker.students.show', $alert->student_id) }}" class="inline-flex 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 ? 'فتح الملف' : 'Open profile' }}</a>
                    </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 ? 'لا توجد إنذارات مفتوحة حاليًا.' : 'There are no open alerts right now.' }}</div>
        @endif
    </section>

    <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">
        {{ $alerts->links('pagination::simple-tailwind') }}
    </section>
</div>
@endsection