@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'لوحة المدرس' : 'Teacher Dashboard')
@section('page_heading', app()->getLocale() === 'ar' ? 'لوحة المدرس' : 'Teacher Dashboard')
@section('page_subtitle', app()->getLocale() === 'ar' ? 'إدارة المقررات والمحتوى والأنشطة القادمة من مساحة واحدة.' : 'Manage courses, teaching content, and upcoming activity from one space.')

@section('content')
    @php
        $isArabic = app()->getLocale() === 'ar';
    @endphp

    <section class="relative overflow-hidden rounded-[2rem] border border-emerald-100 bg-gradient-to-br from-emerald-600 via-teal-700 to-cyan-800 p-6 text-white shadow-[0_24px_60px_-32px_rgba(6,95,70,0.8)] md:p-8 dark:border-emerald-500/20">
        <div class="absolute -top-16 end-0 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
        <div class="absolute -bottom-14 start-0 h-40 w-40 rounded-full bg-cyan-300/10 blur-3xl"></div>
        <div class="relative grid gap-6 xl:grid-cols-[minmax(0,1.4fr)_22rem] xl:items-end">
            <div>
                <span class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-black uppercase tracking-[0.28em]">
                    <i class="fa-solid fa-chalkboard-user text-[11px]"></i>
                    {{ $isArabic ? 'مركز إدارة التدريس' : 'Teaching command center' }}
                </span>
                <h2 class="mt-4 text-3xl font-black md:text-4xl">
                    {{ $isArabic ? "مرحبًا {$teacherName}" : "Welcome back, {$teacherName}" }}
                </h2>
                <p class="mt-3 max-w-2xl text-sm leading-7 text-emerald-50/90 md:text-base">
                    {{ $isArabic
                        ? 'واجهة أكثر احترافية لمتابعة مقرراتك، نشر المحتوى، ورؤية الأنشطة القادمة بسرعة.'
                        : 'A sharper teaching dashboard to track courses, publish content, and monitor upcoming class activity fast.' }}
                </p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
                <a href="{{ route('teacher.courses.my-courses') }}" class="rounded-2xl border border-white/15 bg-white/10 p-4 backdrop-blur-sm">
                    <p class="text-xs font-black uppercase tracking-[0.24em] text-emerald-50/80">{{ $isArabic ? 'المقررات المسندة' : 'Assigned courses' }}</p>
                    <p class="mt-3 text-3xl font-black">{{ $activeCoursesCount }}</p>
                    <p class="mt-2 text-sm text-emerald-50/80">{{ $isArabic ? 'إجمالي المقررات التي تدرّسها' : 'Total courses under your responsibility' }}</p>
                </a>
                <a href="{{ route('teacher.notifications.my_sent') }}" class="rounded-2xl border border-white/15 bg-white/10 p-4 backdrop-blur-sm">
                    <p class="text-xs font-black uppercase tracking-[0.24em] text-emerald-50/80">{{ $isArabic ? 'الفصول المباشرة' : 'Live classes' }}</p>
                    <p class="mt-3 text-3xl font-black">{{ $liveRoomsCount }}</p>
                    <p class="mt-2 text-sm text-emerald-50/80">{{ $isArabic ? 'جلسات افتراضية ضمن مقرراتك' : 'Virtual sessions across your courses' }}</p>
                </a>
            </div>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
        <div class="rounded-3xl border border-zinc-200 bg-zinc-50/80 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'المواد' : 'Materials' }}</p>
            <p class="mt-4 text-3xl font-black text-zinc-900 dark:text-white">{{ $materialsCount }}</p>
        </div>
        <div class="rounded-3xl border border-zinc-200 bg-zinc-50/80 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'الواجبات' : 'Assignments' }}</p>
            <p class="mt-4 text-3xl font-black text-zinc-900 dark:text-white">{{ $assignmentsCount }}</p>
        </div>
        <div class="rounded-3xl border border-zinc-200 bg-zinc-50/80 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'الاختبارات' : 'Quizzes' }}</p>
            <p class="mt-4 text-3xl font-black text-zinc-900 dark:text-white">{{ $quizzesCount }}</p>
        </div>
        <div class="rounded-3xl border border-zinc-200 bg-zinc-50/80 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'الحضور' : 'Attendance' }}</p>
            <p class="mt-4 text-3xl font-black text-zinc-900 dark:text-white">{{ $attendanceCount }}</p>
        </div>
        <div class="rounded-3xl border border-zinc-200 bg-zinc-50/80 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
            <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'الفصول المباشرة' : 'Live rooms' }}</p>
            <p class="mt-4 text-3xl font-black text-zinc-900 dark:text-white">{{ $liveRoomsCount }}</p>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(22rem,0.9fr)]">
        <div class="space-y-6">
            <div class="rounded-3xl border border-zinc-200 dark:border-zinc-800">
                <div class="flex items-center justify-between border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                    <div>
                        <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'مقرراتي' : 'My courses' }}</h3>
                        <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'بطاقات عملية لإدارة المحتوى والتكليفات داخل كل مقرر.' : 'Action-oriented cards for managing content and class work.' }}</p>
                    </div>
                    <a href="{{ route('teacher.courses.my-courses') }}" class="inline-flex items-center gap-2 rounded-2xl bg-emerald-600 px-4 py-2 text-sm font-bold text-white">
                        <i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
                        {{ $isArabic ? 'فتح المقررات' : 'Open courses' }}
                    </a>
                </div>

                <div class="grid gap-4 p-6 lg:grid-cols-2">
                    @forelse ($courseCards as $course)
                        <article class="rounded-3xl border border-zinc-200 bg-zinc-50/70 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
                            <div class="flex items-start justify-between gap-4">
                                <div class="min-w-0">
                                    <h4 class="truncate text-base font-black text-zinc-900 dark:text-white">{{ $course['name'] }}</h4>
                                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $course['subject_name'] }}@if($course['class_name']) • {{ $course['class_name'] }} @endif</p>
                                </div>
                                <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-black text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300">
                                    {{ $isArabic ? 'نشط' : 'Active' }}
                                </span>
                            </div>

                            <div class="mt-5 grid grid-cols-2 gap-3">
                                <div class="rounded-2xl bg-white p-3 ring-1 ring-zinc-200 dark:bg-zinc-950 dark:ring-zinc-800">
                                    <p class="text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'مواد' : 'Materials' }}</p>
                                    <p class="mt-2 text-xl font-black text-zinc-900 dark:text-white">{{ $course['materials_count'] }}</p>
                                </div>
                                <div class="rounded-2xl bg-white p-3 ring-1 ring-zinc-200 dark:bg-zinc-950 dark:ring-zinc-800">
                                    <p class="text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'واجبات' : 'Assignments' }}</p>
                                    <p class="mt-2 text-xl font-black text-zinc-900 dark:text-white">{{ $course['assignments_count'] }}</p>
                                </div>
                                <div class="rounded-2xl bg-white p-3 ring-1 ring-zinc-200 dark:bg-zinc-950 dark:ring-zinc-800">
                                    <p class="text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'اختبارات' : 'Quizzes' }}</p>
                                    <p class="mt-2 text-xl font-black text-zinc-900 dark:text-white">{{ $course['quizzes_count'] }}</p>
                                </div>
                                <div class="rounded-2xl bg-white p-3 ring-1 ring-zinc-200 dark:bg-zinc-950 dark:ring-zinc-800">
                                    <p class="text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'حضور' : 'Attendance' }}</p>
                                    <p class="mt-2 text-xl font-black text-zinc-900 dark:text-white">{{ $course['attendance_count'] }}</p>
                                </div>
                            </div>

                            <div class="mt-5 flex flex-wrap gap-2">
                                <a href="{{ $course['materials_url'] }}" class="inline-flex items-center gap-2 rounded-2xl bg-white px-4 py-2 text-sm font-bold text-zinc-700 ring-1 ring-zinc-200 transition hover:text-emerald-700 dark:bg-zinc-950 dark:text-zinc-200 dark:ring-zinc-800">
                                    <i class="fa-solid fa-folder-open text-xs"></i>
                                    {{ $isArabic ? 'المواد' : 'Materials' }}
                                </a>
                                <a href="{{ $course['assignments_url'] }}" class="inline-flex items-center gap-2 rounded-2xl bg-white px-4 py-2 text-sm font-bold text-zinc-700 ring-1 ring-zinc-200 transition hover:text-emerald-700 dark:bg-zinc-950 dark:text-zinc-200 dark:ring-zinc-800">
                                    <i class="fa-solid fa-list-check text-xs"></i>
                                    {{ $isArabic ? 'الواجبات' : 'Assignments' }}
                                </a>
                                <a href="{{ $course['quizzes_url'] }}" class="inline-flex items-center gap-2 rounded-2xl bg-white px-4 py-2 text-sm font-bold text-zinc-700 ring-1 ring-zinc-200 transition hover:text-emerald-700 dark:bg-zinc-950 dark:text-zinc-200 dark:ring-zinc-800">
                                    <i class="fa-solid fa-clipboard-question text-xs"></i>
                                    {{ $isArabic ? 'الاختبارات' : 'Quizzes' }}
                                </a>
                            </div>
                        </article>
                    @empty
                        <div class="rounded-3xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400 lg:col-span-2">
                            {{ $isArabic ? 'لا توجد مقررات مسندة إليك حاليًا.' : 'No courses are currently assigned to you.' }}
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="rounded-3xl border border-zinc-200 dark:border-zinc-800">
                <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                    <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'آخر الأنشطة' : 'Latest activity' }}</h3>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'ملخص فوري لما نُشر مؤخرًا داخل مقرراتك.' : 'A fast summary of what was published recently in your courses.' }}</p>
                </div>
                <div class="space-y-3 p-6">
                    @forelse ($activityFeed as $item)
                        <a href="{{ $item['route'] }}" class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-zinc-50/70 p-4 transition hover:border-emerald-200 hover:bg-emerald-50/50 dark:border-zinc-800 dark:bg-zinc-900/60 dark:hover:border-emerald-500/30">
                            <div class="flex h-11 w-11 items-center justify-center rounded-2xl {{ $item['tone'] === 'brand' ? 'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300' : ($item['tone'] === 'amber' ? 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-300' : 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-300') }}">
                                <i class="fa-solid {{ $item['icon'] }}"></i>
                            </div>
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center justify-between gap-3">
                                    <span class="rounded-full bg-white px-2.5 py-1 text-[11px] font-black text-zinc-500 dark:bg-zinc-950 dark:text-zinc-300">{{ $item['type'] }}</span>
                                    <span class="text-xs text-zinc-400 dark:text-zinc-500">{{ $item['time_label'] }}</span>
                                </div>
                                <h4 class="mt-3 truncate text-sm font-black text-zinc-900 dark:text-white">{{ $item['title'] }}</h4>
                                <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $item['course'] }}</p>
                            </div>
                        </a>
                    @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 recent course activity yet.' }}
                        </div>
                    @endforelse
                </div>
            </div>

            <div class="rounded-3xl border border-zinc-200 dark:border-zinc-800">
                <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                    <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الجلسات القادمة' : 'Upcoming live sessions' }}</h3>
                </div>
                <div class="space-y-3 p-6">
                    @forelse ($upcomingRoomCards as $room)
                        <a href="{{ $room['url'] }}" class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-zinc-50/70 p-4 transition hover:border-emerald-200 hover:bg-emerald-50/50 dark:border-zinc-800 dark:bg-zinc-900/60 dark:hover:border-emerald-500/30">
                            <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-300">
                                <i class="fa-solid fa-video"></i>
                            </div>
                            <div class="min-w-0 flex-1">
                                <h4 class="truncate text-sm font-black text-zinc-900 dark:text-white">{{ $room['title'] }}</h4>
                                <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $room['course_name'] }}</p>
                                <p class="mt-2 text-xs text-zinc-400 dark:text-zinc-500">{{ $room['start_label'] }}</p>
                            </div>
                            <span class="text-xs text-zinc-400 dark:text-zinc-500">{{ $room['relative_label'] }}</span>
                        </a>
                    @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 upcoming live sessions right now.' }}
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
@endsection