@extends('layouts.main_dashboard.app')

@php
    $routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin';
    $isArabic = app()->getLocale() === 'ar';
    $backRoute = $routePrefix === 'teacher' ? route('teacher.courses.my-courses') : route('admin.courses.index');
    $courseImage = $course->image ?: asset('assets/media/svg/files/blank-image.svg');
    $stageName = $course->subject?->grade?->stage?->name;
    $gradeName = $course->schoolClass?->grade?->name ?? $course->subject?->grade?->name;
    $className = $course->schoolClass?->name;
    $teacherName = $course->teacher?->name ?? __('dashboard.Not assigned yet');
    $subjectName = $course->subject?->name ?? __('dashboard.Not assigned yet');

    $managementCards = [
        [
            'title' => __('dashboard.Materials'),
            'count' => $course->materials_count,
            'route' => route($routePrefix . '.courses.materials.index', $course->id),
            'icon' => 'fa-folder-open',
            'hint' => $isArabic ? 'المحتوى والملفات التعليمية' : 'Learning content and files',
        ],
        [
            'title' => __('dashboard.Assignments'),
            'count' => $course->assignments_count,
            'route' => route($routePrefix . '.courses.assignments.index', $course->id),
            'icon' => 'fa-list-check',
            'hint' => $isArabic ? 'الواجبات والتسليمات' : 'Assignments and submissions',
        ],
        [
            'title' => __('dashboard.Quizzes'),
            'count' => $course->quizzes_count,
            'route' => route($routePrefix . '.courses.quizzes.index', $course->id),
            'icon' => 'fa-clipboard-question',
            'hint' => $isArabic ? 'الاختبارات والتقييم' : 'Quizzes and assessment',
        ],
        [
            'title' => __('dashboard.Virtual Class Rooms'),
            'count' => $course->virtual_class_rooms_count,
            'route' => route($routePrefix . '.courses.virtual_class_rooms.index', $course->id),
            'icon' => 'fa-video',
            'hint' => $isArabic ? 'الجلسات المباشرة' : 'Live sessions',
        ],
        [
            'title' => __('dashboard.Attendance'),
            'count' => $course->attendance_count,
            'route' => route($routePrefix . '.courses.attendance.index', $course->id),
            'icon' => 'fa-user-check',
            'hint' => $isArabic ? 'الحضور والغياب' : 'Attendance tracking',
        ],
    ];

    if ($routePrefix === 'admin') {
        $managementCards[] = [
            'title' => __('dashboard.Marks'),
            'count' => $course->marks_count,
            'route' => route('admin.courses.marks.index', $course->id),
            'icon' => 'fa-square-poll-vertical',
            'hint' => $isArabic ? 'الدرجات والنتائج' : 'Marks and results',
        ];
    }

    // Exam V2 — available for both admin and teacher
    $managementCards[] = [
        'title' => $isArabic ? 'اختبارات V2' : 'Exams V2',
        'count' => $course->exams_v2_count ?? \App\Models\ExamV2::where('course_id', $course->id)->count(),
        'route' => route('admin.exams-v2.index') . '?course_id=' . $course->id,
        'icon' => 'fa-file-pen',
        'hint' => $isArabic ? 'الاختبارات المتقدمة' : 'Advanced exams',
    ];
@endphp

@section('title', $isArabic ? 'ملف المساق' : 'Course Profile')
@section('page_heading', $isArabic ? 'ملف المساق' : 'Course Profile')
@section('page_subtitle', $course->name)
@section('skip_page_hero', true)

@section('styles')
<style>
    .course-page-block {
        border-radius: 1.8rem;
        border: 1px solid rgba(228, 228, 231, 0.95);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
    }

    .dark .course-page-block {
        border-color: rgba(39, 39, 42, 1);
        background: rgba(24, 24, 27, 0.94);
        box-shadow: none;
    }

    .course-soft-card {
        border-radius: 1.4rem;
        border: 1px solid rgba(228, 228, 231, 0.92);
        background: rgba(250, 250, 250, 0.95);
    }

    .dark .course-soft-card {
        border-color: rgba(39, 39, 42, 1);
        background: rgba(9, 9, 11, 0.72);
    }
</style>
@endsection

@section('content')
<div class="space-y-6">
    <section class="course-page-block p-5 lg:p-6">
        <div class="grid gap-6 xl:grid-cols-[8rem_minmax(0,1fr)_auto] xl:items-start">
            <img src="{{ $courseImage }}" alt="{{ $course->name }}" class="h-28 w-28 rounded-xl object-cover ring-1 ring-surface-200 dark:ring-surface-800">

            <div class="min-w-0">
                <div class="flex flex-wrap gap-2">
                    <span class="rounded-full bg-surface-100 px-3 py-1 text-[11px] font-black uppercase tracking-[0.18em] text-surface-600 dark:bg-surface-800 dark:text-surface-300">
                        {{ $isArabic ? 'ملف المساق' : 'Course Profile' }}
                    </span>
                    @if($stageName)
                        <span class="rounded-full bg-surface-100 px-3 py-1 text-[11px] font-black text-surface-600 dark:bg-surface-800 dark:text-surface-300">{{ $stageName }}</span>
                    @endif
                    @if($className)
                        <span class="rounded-full bg-surface-100 px-3 py-1 text-[11px] font-black text-surface-600 dark:bg-surface-800 dark:text-surface-300">{{ $className }}</span>
                    @endif
                </div>

                <h1 class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $course->name }}</h1>
                <p class="mt-2 max-w-3xl text-sm leading-6 text-surface-500 dark:text-surface-400">
                    {{ $isArabic ? 'ملف مرتب للمقرر يضع الأدوات والمحتوى والمتابعة في مساحات أوضح وأسهل استخداماً.' : 'A structured course page that gives tools, content, and tracking clearer space and hierarchy.' }}
                </p>

                <div class="mt-6 grid gap-3 md:grid-cols-3">
                    <div class="course-soft-card px-4 py-4">
                        <p class="text-[11px] font-black uppercase tracking-[0.18em] text-surface-400">{{ $isArabic ? 'المادة' : 'Subject' }}</p>
                        <p class="mt-2 text-sm font-bold text-surface-900 dark:text-white">{{ $subjectName }}</p>
                    </div>
                    <div class="course-soft-card px-4 py-4">
                        <p class="text-[11px] font-black uppercase tracking-[0.18em] text-surface-400">{{ $isArabic ? 'المعلم' : 'Teacher' }}</p>
                        <p class="mt-2 text-sm font-bold text-surface-900 dark:text-white">{{ $teacherName }}</p>
                    </div>
                    <div class="course-soft-card px-4 py-4">
                        <p class="text-[11px] font-black uppercase tracking-[0.18em] text-surface-400">{{ $isArabic ? 'المرحلة / الصف / الفصل' : 'Stage / Grade / Class' }}</p>
                        <p class="mt-2 text-sm font-bold text-surface-900 dark:text-white">{{ $stageName ?? '--' }} / {{ $gradeName ?? '--' }} / {{ $className ?? '--' }}</p>
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap gap-2 xl:justify-end">
                @if($routePrefix === 'admin')
                    <a href="{{ route('admin.courses.edit', $course->id) }}" class="inline-flex items-center gap-2 rounded-xl bg-surface-900 px-3 py-2 text-xs font-bold text-white transition hover:bg-surface-800 dark:bg-white dark:text-surface-900 dark:hover:bg-surface-100">
                        <i class="fa-solid fa-pen-to-square"></i>
                        <span>{{ __('dashboard.Edit') }}</span>
                    </a>
                @endif
                <a href="{{ $backRoute }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 px-3 py-2 text-xs font-bold text-surface-700 transition hover:border-surface-300 dark:border-surface-700 dark:text-surface-200">
                    <i class="fa-solid fa-arrow-right"></i>
                    <span>{{ __('dashboard.Back') }}</span>
                </a>
            </div>
        </div>
    </section>

    <section class="course-page-block p-6">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'أدوات إدارة المساق' : 'Course Management Tools' }}</h2>
                <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'كل أداة في مساحة مستقلة وواضحة لسرعة الوصول.' : 'Each tool gets its own clearer block for faster access.' }}</p>
            </div>
        </div>

        <div class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @foreach($managementCards as $card)
                <a href="{{ $card['route'] }}" class="course-soft-card p-5 transition hover:border-surface-300 hover:bg-white dark:hover:border-surface-700 dark:hover:bg-surface-950">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-surface-900 text-white dark:bg-white dark:text-surface-900">
                            <i class="fa-solid {{ $card['icon'] }}"></i>
                        </div>
                        <span class="text-2xl font-black text-surface-900 dark:text-white">{{ $card['count'] }}</span>
                    </div>
                    <h3 class="mt-4 text-base font-black text-surface-900 dark:text-white">{{ $card['title'] }}</h3>
                    <p class="mt-2 text-sm leading-6 text-surface-500 dark:text-surface-400">{{ $card['hint'] }}</p>
                </a>
            @endforeach
        </div>

        @if($routePrefix === 'admin')
        <div class="mt-6 border-t border-surface-200 pt-5 dark:border-surface-800">
            <p class="mb-3 text-sm font-black text-surface-500 uppercase tracking-widest">{{ $isArabic ? 'تصدير التقارير' : 'Export Reports' }}</p>
            <div class="flex flex-wrap gap-3">
                <a href="{{ route('admin.reports.marks.excel', $course) }}"
                   class="inline-flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-bold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400">
                    <i class="fa-solid fa-file-excel text-xs"></i>
                    {{ $isArabic ? 'درجات Excel' : 'Marks Excel' }}
                </a>
                <a href="{{ route('admin.reports.marks.pdf', $course) }}"
                   class="inline-flex items-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 py-2 text-sm font-bold text-red-700 transition hover:bg-red-100 dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-400">
                    <i class="fa-solid fa-file-pdf text-xs"></i>
                    {{ $isArabic ? 'درجات PDF' : 'Marks PDF' }}
                </a>
                <a href="{{ route('admin.reports.attendance.excel', $course) }}"
                   class="inline-flex items-center gap-2 rounded-xl border border-sky-200 bg-sky-50 px-4 py-2 text-sm font-bold text-sky-700 transition hover:bg-sky-100 dark:border-sky-500/20 dark:bg-sky-500/10 dark:text-sky-400">
                    <i class="fa-solid fa-file-excel text-xs"></i>
                    {{ $isArabic ? 'حضور Excel' : 'Attendance Excel' }}
                </a>
                <a href="{{ route('admin.reports.attendance.pdf', $course) }}"
                   class="inline-flex items-center gap-2 rounded-xl border border-violet-200 bg-violet-50 px-4 py-2 text-sm font-bold text-violet-700 transition hover:bg-violet-100 dark:border-violet-500/20 dark:bg-violet-500/10 dark:text-violet-400">
                    <i class="fa-solid fa-file-pdf text-xs"></i>
                    {{ $isArabic ? 'حضور PDF' : 'Attendance PDF' }}
                </a>
            </div>
        </div>
        @endif
    </section>

    <section class="course-page-block p-6">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'أحدث المحتوى' : 'Latest Content' }}</h2>
                <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'قسم مستقل للمحتوى التعليمي داخل المقرر.' : 'A dedicated section for the course learning content.' }}</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route($routePrefix . '.courses.materials.index', $course->id) }}" class="text-xs font-bold uppercase tracking-[0.18em] text-surface-500 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white">{{ __('dashboard.Materials') }}</a>
                <a href="{{ route($routePrefix . '.courses.assignments.index', $course->id) }}" class="text-xs font-bold uppercase tracking-[0.18em] text-surface-500 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white">{{ __('dashboard.Assignments') }}</a>
                <a href="{{ route($routePrefix . '.courses.quizzes.index', $course->id) }}" class="text-xs font-bold uppercase tracking-[0.18em] text-surface-500 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white">{{ __('dashboard.Quizzes') }}</a>
            </div>
        </div>

        <div class="mt-6 grid gap-4 xl:grid-cols-3">
            @foreach([
                ['title' => __('dashboard.Materials'), 'items' => $materials, 'empty' => $isArabic ? 'لا توجد مواد بعد.' : 'No materials yet.'],
                ['title' => __('dashboard.Assignments'), 'items' => $assignments, 'empty' => $isArabic ? 'لا توجد واجبات بعد.' : 'No assignments yet.'],
                ['title' => __('dashboard.Quizzes'), 'items' => $quizzes, 'empty' => $isArabic ? 'لا توجد اختبارات بعد.' : 'No quizzes yet.'],
            ] as $section)
                <div class="course-soft-card p-4">
                    <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ $section['title'] }}</h3>
                    <div class="mt-4 space-y-3">
                        @forelse($section['items'] as $item)
                            <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
                                <p class="text-sm font-black text-surface-900 dark:text-white">{{ $item->title }}</p>
                                <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $item->created_at?->format('Y-m-d h:i A') ?? $item->due_date?->format('Y-m-d') }}</p>
                            </div>
                        @empty
                            <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $section['empty'] }}</div>
                        @endforelse
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="course-page-block p-6">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'التواصل والنشاط' : 'Communication & Activity' }}</h2>
                <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المنشورات والاستفسارات والمعرض في مساحة مستقلة أوسع.' : 'Posts, inquiries, and gallery in a wider dedicated section.' }}</p>
            </div>
            @if($routePrefix === 'admin')
                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('admin.courses.posts.index', $course->id) }}" class="text-xs font-bold uppercase tracking-[0.18em] text-surface-500 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white">{{ __('dashboard.Posts') }}</a>
                    <a href="{{ route('admin.courses.inquiries.index', $course->id) }}" class="text-xs font-bold uppercase tracking-[0.18em] text-surface-500 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white">{{ __('dashboard.Inquiries') }}</a>
                    <a href="{{ route('admin.courses.activity_galleries.index', $course->id) }}" class="text-xs font-bold uppercase tracking-[0.18em] text-surface-500 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white">{{ __('dashboard.Activity Gallery') }}</a>
                </div>
            @endif
        </div>

        <div class="mt-6 grid gap-4 xl:grid-cols-3">
            <div class="course-soft-card p-4">
                <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ __('dashboard.Posts') }}</h3>
                <div class="mt-4 space-y-3">
                    @forelse($posts as $post)
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
                            <p class="text-sm font-black text-surface-900 dark:text-white">{{ $post->user?->name ?? ($isArabic ? 'المعلم' : 'Teacher') }}</p>
                            <p class="mt-2 text-sm leading-6 text-surface-500 dark:text-surface-400">{{ \Illuminate\Support\Str::limit($post->body, 88) }}</p>
                        </div>
                    @empty
                        <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لا توجد منشورات بعد.' : 'No posts yet.' }}</div>
                    @endforelse
                </div>
            </div>

            <div class="course-soft-card p-4">
                <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ __('dashboard.Inquiries') }}</h3>
                <div class="mt-4 space-y-3">
                    @forelse($inquiries as $inquiry)
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
                            <div class="flex items-center justify-between gap-2">
                                <p class="text-sm font-black text-surface-900 dark:text-white">{{ $inquiry->title }}</p>
                                <span class="text-[11px] font-bold text-surface-400">{{ $inquiry->status === 'replied' ? __('dashboard.Replied') : __('dashboard.New') }}</span>
                            </div>
                            <p class="mt-2 text-sm leading-6 text-surface-500 dark:text-surface-400">{{ \Illuminate\Support\Str::limit($inquiry->message, 82) }}</p>
                        </div>
                    @empty
                        <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لا توجد استفسارات بعد.' : 'No inquiries yet.' }}</div>
                    @endforelse
                </div>
            </div>

            <div class="course-soft-card p-4">
                <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ __('dashboard.Activity Gallery') }}</h3>
                <div class="mt-4 space-y-3">
                    @forelse($activityGalleries as $gallery)
                        <div class="flex items-center gap-3 rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
                            <div class="h-12 w-12 overflow-hidden rounded-xl bg-surface-100 dark:bg-surface-800">
                                <img src="{{ $gallery->thumbnail }}" alt="{{ $gallery->title }}" class="h-full w-full object-cover">
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-black text-surface-900 dark:text-white">{{ $gallery->title }}</p>
                                <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $gallery->created_at?->format('Y-m-d') }}</p>
                            </div>
                        </div>
                    @empty
                        <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لا توجد عناصر معرض.' : 'No gallery items yet.' }}</div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    <section class="course-page-block p-6">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'الجدولة والمتابعة' : 'Scheduling & Tracking' }}</h2>
                <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الحصص المباشرة والحضور والدرجات في سكشن مستقل يأخذ مساحته.' : 'Live sessions, attendance, and marks in a standalone section with proper space.' }}</p>
            </div>
            <a href="{{ route($routePrefix . '.courses.virtual_class_rooms.index', $course->id) }}" class="text-xs font-bold uppercase tracking-[0.18em] text-surface-500 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white">
                {{ $isArabic ? 'كل الجلسات' : 'All sessions' }}
            </a>
        </div>

        <div class="mt-6 grid gap-4 xl:grid-cols-3">
            <div class="course-soft-card p-4">
                <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ __('dashboard.Virtual Class Rooms') }}</h3>
                <div class="mt-4 space-y-3">
                    @forelse($virtualClassRooms as $room)
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
                            <div class="flex items-center justify-between gap-3">
                                <p class="text-sm font-black text-surface-900 dark:text-white">{{ $room->title }}</p>
                                <span class="text-[11px] font-black uppercase tracking-[0.18em] text-surface-400">{{ $room->status }}</span>
                            </div>
                            <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ $room->start_time?->format('Y-m-d h:i A') }}</p>
                        </div>
                    @empty
                        <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لا توجد حصص مباشرة.' : 'No live sessions.' }}</div>
                    @endforelse
                </div>
            </div>

            <div class="course-soft-card p-4">
                <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ __('dashboard.Attendance') }}</h3>
                <div class="mt-4 space-y-3">
                    @forelse($attendanceRecords as $attendance)
                        <div class="flex items-center justify-between gap-3 rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
                            <p class="text-sm font-black text-surface-900 dark:text-white">{{ $attendance->type ?? __('dashboard.Attendance') }}</p>
                            <span class="text-xs text-surface-500 dark:text-surface-400">{{ $attendance->date?->format('Y-m-d') }}</span>
                        </div>
                    @empty
                        <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لا توجد سجلات حضور.' : 'No attendance records.' }}</div>
                    @endforelse
                </div>
            </div>

            @if($routePrefix === 'admin')
                <div class="course-soft-card p-4">
                    <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ __('dashboard.Marks') }}</h3>
                    <div class="mt-4 space-y-3">
                        @forelse($marks as $mark)
                            <div class="flex items-center justify-between gap-3 rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
                                <div>
                                    <p class="text-sm font-black text-surface-900 dark:text-white">{{ $mark->title }}</p>
                                    <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $mark->date?->format('Y-m-d') }}</p>
                                </div>
                                <span class="text-base font-black text-surface-900 dark:text-white">{{ $mark->score ?? '--' }}</span>
                            </div>
                        @empty
                            <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لا توجد درجات.' : 'No marks yet.' }}</div>
                        @endforelse
                    </div>
                </div>
            @endif
        </div>
    </section>
</div>
@endsection