@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'رئيس قسم المواد' : 'Subject Head Dashboard')

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
    $departmentName = $department?->name ?? ($isArabic ? 'قسم غير معرف' : 'Unassigned department');
    $subjectCount = $subjects->count();
    $teacherCount = $teacherLoads->count();
    $materialCount = $recentMaterials->count();
    $hasDepartment = (bool) $department;
@endphp

<div class="space-y-6">
    <section class="student-card p-6">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h1 class="text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'إدارة القسم' : 'Department management' }}</h1>
                <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">
                    {{ $isArabic
                        ? 'متابعة المواد والمدرسين ضمن قسمك وجمع المستجدات بسرعة.'
                        : 'Oversee subjects and teachers in your department with quick insights.' }}
                </p>
            </div>
            <div class="rounded-2xl bg-primary px-5 py-3 text-white text-right">
                <div class="text-xs font-semibold uppercase tracking-[0.3em]">{{ $isArabic ? 'القسم المسؤول عنه' : 'Managed department' }}</div>
                <div class="text-lg font-black">{{ $departmentName }}</div>
            </div>
        </div>
        <div class="mt-6 grid gap-4 md:grid-cols-3">
            <div class="rounded-2xl bg-zinc-50 p-4 dark:bg-zinc-950">
                <div class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'المواد في القسم' : 'Department subjects' }}</div>
                <div class="mt-3 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $subjectCount }}</div>
            </div>
            <div class="rounded-2xl bg-zinc-50 p-4 dark:bg-zinc-950">
                <div class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'المدرسون' : 'Teachers' }}</div>
                <div class="mt-3 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $teacherCount }}</div>
            </div>
            <div class="rounded-2xl bg-zinc-50 p-4 dark:bg-zinc-950">
                <div class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'مواد حديثة' : 'Recent materials' }}</div>
                <div class="mt-3 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $materialCount }}</div>
            </div>
        </div>
    </section>

    <section class="student-card p-6">
        <header class="flex items-center justify-between">
            <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'مراقبة المواد' : 'Subject monitoring' }}</h2>
            <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'عدد الدروس' : 'Lesson count' }}</span>
        </header>
        <div class="mt-5 space-y-4">
            @forelse ($subjects as $subject)
                <article class="rounded-3xl border border-zinc-200 bg-zinc-50/70 p-5 dark:border-zinc-800 dark:bg-zinc-950/60">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $subject->name }}</h3>
                            <p class="text-xs text-zinc-500 dark:text-zinc-400">{{ $subject->lessons_count }} {{ $isArabic ? 'دروس' : 'lessons' }}</p>
                        </div>
                        <span class="rounded-full bg-primary/10 px-3 py-1 text-xs font-black text-primary font-numbers">
                            {{ $subject->courses->count() }} {{ $isArabic ? 'كورسات' : 'courses' }}
                        </span>
                    </div>
                    <div class="mt-4 grid gap-3 md:grid-cols-2">
                        @foreach ($subject->courses as $course)
                            <div class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900/60">
                                <div>
                                    <div class="text-sm font-black text-zinc-900 dark:text-white">{{ $course->name }}</div>
                                    <p class="text-[11px] text-zinc-500 dark:text-zinc-400">{{ $course->teacher?->name ?? ($isArabic ? 'مدرّس غير محدد' : 'Teacher not assigned') }}</p>
                                </div>
                                <span class="text-[11px] font-black text-zinc-400 dark:text-zinc-500">{{ $course->materials_count }} {{ $isArabic ? 'مواد' : 'materials' }}</span>
                            </div>
                        @endforeach
                    </div>
                </article>
            @empty
                <div class="rounded-2xl border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                    {{ $isArabic ? 'لا توجد مواد في هذا القسم بعد.' : 'No subjects are assigned to this department yet.' }}
                </div>
            @endforelse
        </div>
    </section>

    <section class="student-card p-6">
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'تحميلات حديثة' : 'Recent uploads' }}</h3>
            <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'مواد مضافة' : 'Materials added' }}</span>
        </div>
        <div class="mt-4 space-y-3">
            @forelse ($recentMaterials as $material)
                <article class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
                    <div class="text-sm font-black text-zinc-900 dark:text-white">{{ $material->title }}</div>
                    <p class="text-xs text-zinc-500 dark:text-zinc-400">{{ $material->course?->name }}</p>
                    <div class="mt-2 text-[11px] text-zinc-400 dark:text-zinc-500">{{ $material->created_at?->diffForHumans() }}</div>
                </article>
            @empty
                <div class="rounded-2xl border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                    {{ $isArabic ? 'لم تُنشر مواد جديدة مؤخرًا.' : 'No new materials have been published recently.' }}
                </div>
            @endforelse
        </div>
    </section>
</div>
@endsection