@extends('layouts.main_dashboard.app')

@php
    $isArabic = app()->getLocale() === 'ar';
    $managerName = $context['user']->first_name ?: $context['user']->name;
    $departmentName = $context['department']?->name ?? ($isArabic ? 'بدون قسم مرتبط' : 'No linked department');
    $scopeBadge = $context['usesLegacyDepartmentScope']
        ? ($isArabic ? 'نطاق القسم المرتبط' : 'Linked department scope')
        : ($isArabic ? 'مواد مسندة مباشرة' : 'Direct subject assignments');
@endphp

@section('title', $isArabic ? 'لوحة رئيس القسم' : 'Subject Head Dashboard')
@section('page_heading', $isArabic ? 'لوحة رئيس القسم' : 'Subject Head Dashboard')
@section('page_subtitle', $isArabic ? 'لوحتان في نفس الحساب: متابعة القسم بالكامل، ولوحتك التدريسية الشخصية عند تفعيلها من الإدارة.' : 'Two workspaces in one account: department-wide oversight and your personal teaching board when enabled by admin.')
@section('skip_page_hero', true)

@section('content')
<div class="space-y-6">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
            <div class="space-y-3">
                <p class="text-[11px] font-black uppercase tracking-[0.24em] text-brand-600 dark:text-brand-300">{{ $isArabic ? 'قيادة القسم' : 'Department leadership' }}</p>
                <h1 class="text-3xl font-black tracking-tight text-surface-900 dark:text-white">{{ $isArabic ? "مرحبًا {$managerName}" : "Welcome back, {$managerName}" }}</h1>
                <p class="max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'من هنا تتابع مواد القسم، كل المساقات الواقعة تحته، جداولها، واستفساراتها. وإذا كان خيار التدريس مفعّلًا لك فستظهر لك أيضًا لوحة مدرسك الشخصية داخل نفس الحساب.' : 'From here you monitor department subjects, all courses under them, their schedules, and their inquiries. If teaching mode is enabled for you, your personal teacher board also stays available in the same account.' }}</p>
            </div>

            <div class="grid gap-3 sm:grid-cols-2 xl:min-w-[27rem]">
                <div class="rounded-2xl border border-surface-200 bg-surface-50/80 px-5 py-4 dark:border-surface-700 dark:bg-surface-950/60">
                    <p class="text-[11px] font-black uppercase tracking-[0.18em] text-surface-500 dark:text-surface-400">{{ $isArabic ? 'القسم الحالي' : 'Current department' }}</p>
                    <p class="mt-3 text-lg font-black text-surface-900 dark:text-white">{{ $departmentName }}</p>
                    <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ $scopeBadge }}</p>
                </div>
                <div class="rounded-2xl border border-surface-200 bg-surface-50/80 px-5 py-4 dark:border-surface-700 dark:bg-surface-950/60">
                    <p class="text-[11px] font-black uppercase tracking-[0.18em] text-surface-500 dark:text-surface-400">{{ $isArabic ? 'وضع التدريس' : 'Teaching mode' }}</p>
                    <p class="mt-3 text-lg font-black {{ $context['canTeach'] ? 'text-emerald-600 dark:text-emerald-300' : 'text-surface-900 dark:text-white' }}">{{ $context['canTeach'] ? ($isArabic ? 'مفعّل' : 'Enabled') : ($isArabic ? 'غير مفعّل' : 'Disabled') }}</p>
                    <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ $context['canTeach'] ? ($isArabic ? 'لوحتك التدريسية الشخصية متاحة من القائمة الجانبية.' : 'Your personal teaching board is available from the sidebar.') : ($isArabic ? 'يمكن للإدارة تفعيل التدريس لك من إعدادات القسم.' : 'Admin can enable teaching for you from department settings.') }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-3 xl:grid-cols-6">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'مواد القسم' : 'Department subjects' }}</p><p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($summary->subjects_count) }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'مساقات القسم' : 'Department courses' }}</p><p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($summary->courses_count) }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'مدرسو القسم' : 'Department teachers' }}</p><p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($summary->teachers_count) }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'استفسارات الطلاب' : 'Student inquiries' }}</p><p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($summary->student_inquiries_count) }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'استفسارات الأسر' : 'Parent inquiries' }}</p><p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($summary->parent_inquiries_count) }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'مساقاتي أنا' : 'My own courses' }}</p><p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($summary->own_courses_count) }}</p></article>
    </section>

    <section class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
        <a href="{{ route('teacher.subject-head.subjects.index') }}" class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm transition hover:border-brand-200 hover:bg-brand-50/40 dark:border-surface-800 dark:bg-surface-900 dark:hover:border-brand-500/20 dark:hover:bg-brand-500/5">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'مواد القسم' : 'Department Subjects' }}</h2>
            <p class="mt-2 text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'راجع كل المواد تحت هذا القسم مع عدد المساقات والمدرسين في كل مادة.' : 'Review every subject under this department with course and teacher coverage for each one.' }}</p>
        </a>
        <a href="{{ route('teacher.subject-head.courses.index') }}" class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm transition hover:border-brand-200 hover:bg-brand-50/40 dark:border-surface-800 dark:bg-surface-900 dark:hover:border-brand-500/20 dark:hover:bg-brand-500/5">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'مساقات القسم' : 'Department Courses' }}</h2>
            <p class="mt-2 text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'جدول موحد لكل مساقات القسم مع الفلاتر حسب المادة والمدرس والفصل.' : 'A unified table for all department courses with filters by subject, teacher, and class.' }}</p>
        </a>
        <a href="{{ route('teacher.subject-head.questions.index') }}" class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm transition hover:border-brand-200 hover:bg-brand-50/40 dark:border-surface-800 dark:bg-surface-900 dark:hover:border-brand-500/20 dark:hover:bg-brand-500/5">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'بنك أسئلة القسم' : 'Department Question Bank' }}</h2>
            <p class="mt-2 text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'عرض كل أسئلة القسم مع فلاتر المادة والمدرس ونوع السؤال من مكان واحد.' : 'Browse all department questions with subject, teacher, and question-type filters in one place.' }}</p>
        </a>
        <a href="{{ route('teacher.subject-head.schedule.index') }}" class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm transition hover:border-brand-200 hover:bg-brand-50/40 dark:border-surface-800 dark:bg-surface-900 dark:hover:border-brand-500/20 dark:hover:bg-brand-500/5">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'جدول القسم' : 'Department Schedule' }}</h2>
            <p class="mt-2 text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'عرض حصص القسم كلها، مع البدء التلقائي بيوم اليوم مثل جدول المدرس.' : 'View every department session with the same today-first flow used in the teacher schedule.' }}</p>
        </a>
        <a href="{{ route('teacher.subject-head.inquiries.students') }}" class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm transition hover:border-brand-200 hover:bg-brand-50/40 dark:border-surface-800 dark:bg-surface-900 dark:hover:border-brand-500/20 dark:hover:bg-brand-500/5">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'استفسارات الطلاب' : 'Student Inquiries' }}</h2>
            <p class="mt-2 text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'متابعة جميع استفسارات الطلاب الخاصة بمساقات القسم في صفحة واحدة.' : 'Follow all student inquiries across department courses from one page.' }}</p>
        </a>
        <a href="{{ route('teacher.subject-head.inquiries.parents') }}" class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm transition hover:border-brand-200 hover:bg-brand-50/40 dark:border-surface-800 dark:bg-surface-900 dark:hover:border-brand-500/20 dark:hover:bg-brand-500/5">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'استفسارات أولياء الأمور' : 'Parent Inquiries' }}</h2>
            <p class="mt-2 text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'رؤية موحدة لكل ما يرسله أولياء الأمور إلى المدرسين داخل نطاق القسم.' : 'A unified view of every parent message sent to teachers within the department scope.' }}</p>
        </a>
        @if($context['canTeach'])
            <a href="{{ route('teacher.home') }}" class="rounded-xl border border-emerald-200 bg-emerald-50/70 p-5 shadow-sm transition hover:bg-emerald-50 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:hover:bg-emerald-500/15">
                <h2 class="text-lg font-black text-emerald-800 dark:text-emerald-200">{{ $isArabic ? 'لوحتي التدريسية' : 'My Teaching Board' }}</h2>
                <p class="mt-2 text-sm leading-7 text-emerald-700/80 dark:text-emerald-200/80">{{ $isArabic ? 'انتقل إلى لوحتك الخاصة كمدرس لمتابعة مساقاتك الشخصية وجدولك واستفساراتك المباشرة.' : 'Open your personal teacher board for your own courses, schedule, and direct inquiries.' }}</p>
            </a>
        @endif
    </section>

    <div class="grid gap-6 xl:grid-cols-12">
        <section class="space-y-6 xl:col-span-7">
            <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                    <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'كل مدرسِي القسم' : 'All department teachers' }}</h2>
                </div>
                <div class="space-y-3 p-6">
                    @forelse ($scopedTeachers as $teacher)
                        <article class="rounded-xl border border-surface-200 bg-surface-50/70 p-4 dark:border-surface-800 dark:bg-surface-950/30">
                            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                                <div class="min-w-0">
                                    <h3 class="text-base font-black text-surface-900 dark:text-white">{{ $teacher->name }}</h3>
                                    <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $teacher->email }}</p>
                                    <p class="mt-3 text-xs leading-6 text-surface-500 dark:text-surface-400">{{ $teacher->courses->take(3)->map(fn ($course) => $course->subject?->name . ($course->schoolClass?->name ? ' • ' . $course->schoolClass->name : ''))->filter()->join(' • ') ?: ($isArabic ? 'لا توجد مساقات مفصلة بعد.' : 'No course details yet.') }}</p>
                                </div>
                                <div class="grid min-w-[12rem] gap-3 sm:grid-cols-2">
                                    <div class="rounded-2xl bg-white px-3 py-3 text-center dark:bg-surface-900">
                                        <div class="text-[11px] text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المساقات' : 'Courses' }}</div>
                                        <div class="mt-2 text-lg font-black text-surface-900 dark:text-white">{{ $teacher->scoped_courses_count }}</div>
                                    </div>
                                    <div class="rounded-2xl bg-white px-3 py-3 text-center dark:bg-surface-900">
                                        <div class="text-[11px] text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الفصول' : 'Classes' }}</div>
                                        <div class="mt-2 text-lg font-black text-surface-900 dark:text-white">{{ $teacher->courses->pluck('school_class_id')->filter()->unique()->count() }}</div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @empty
                        <div class="rounded-xl border border-dashed border-surface-300 px-5 py-8 text-center text-sm leading-7 text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لا يوجد مدرسون مرتبطون بمساقات هذا القسم بعد.' : 'There are no teachers linked to this department scope yet.' }}</div>
                    @endforelse
                </div>
            </section>
        </section>

        <section class="space-y-6 xl:col-span-5">
            <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                    <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'مواد القسم' : 'Department subjects' }}</h2>
                </div>
                <div class="space-y-3 p-6">
                    @forelse ($subjects->take(6) as $subject)
                        <article class="rounded-xl border border-surface-200 bg-surface-50/70 p-4 dark:border-surface-800 dark:bg-surface-950/30">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ $subject->name }}</h3>
                                    <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $subject->grade?->stage?->name }}{{ $subject->grade?->name ? ' • ' . $subject->grade->name : '' }}</p>
                                </div>
                                <span class="rounded-full bg-brand-50 px-3 py-1 text-[11px] font-black text-brand-700 dark:bg-brand-500/10 dark:text-brand-300">{{ $subject->courses_count }} {{ $isArabic ? 'مساقات' : 'courses' }}</span>
                            </div>
                        </article>
                    @empty
                        <div class="rounded-xl border border-dashed border-surface-300 px-5 py-8 text-center text-sm leading-7 text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لا توجد مواد مرتبطة بهذا النطاق بعد.' : 'No subjects are attached to this scope yet.' }}</div>
                    @endforelse
                </div>
            </section>

            @if($context['canTeach'])
                <section class="overflow-hidden rounded-xl border border-emerald-200 bg-white shadow-sm dark:border-emerald-500/20 dark:bg-surface-900">
                    <div class="border-b border-emerald-200 bg-emerald-50/80 px-6 py-5 dark:border-emerald-500/20 dark:bg-emerald-500/10">
                        <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'مساقات رئيس القسم' : 'Head personal courses' }}</h2>
                    </div>
                    <div class="space-y-3 p-6">
                        @forelse ($ownCourses as $course)
                            <a href="{{ route('teacher.courses.show', $course->id) }}" class="flex items-start justify-between gap-3 rounded-xl border border-surface-200 bg-surface-50/70 p-4 transition hover:border-emerald-200 hover:bg-white dark:border-surface-800 dark:bg-surface-950/30 dark:hover:border-emerald-500/20">
                                <div class="min-w-0">
                                    <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ $course->name }}</h3>
                                    <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $course->subject?->name }}{{ $course->schoolClass?->name ? ' • ' . $course->schoolClass->name : '' }}</p>
                                </div>
                                <i class="fa-solid fa-arrow-up-right-from-square text-xs text-surface-400"></i>
                            </a>
                        @empty
                            <div class="rounded-xl border border-dashed border-surface-300 px-5 py-8 text-center text-sm leading-7 text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لم تُسند لك مساقات شخصية داخل هذا القسم بعد.' : 'No personal courses are assigned to you inside this department yet.' }}</div>
                        @endforelse
                    </div>
                </section>
            @endif
        </section>
    </div>
</div>
@endsection