@extends('student.layouts.app')

@section('title', __('dashboard.Home'))

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

<div class="flex flex-col gap-6">

    {{-- Hero --}}
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 lg:p-7">
        <div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
            <div class="space-y-1">
                <p class="text-[11px] font-black uppercase tracking-[0.2em] text-brand-600 dark:text-brand-400">
                    {{ now()->translatedFormat('l، d F Y') }}
                </p>
                <h1 class="text-2xl font-black tracking-tight text-zinc-900 dark:text-white md:text-3xl">
                    {{ $isArabic ? "أهلاً، {$studentDisplayName} 👋" : "Welcome, {$studentDisplayName} 👋" }}
                </h1>
                <p class="text-sm text-zinc-500 dark:text-zinc-400">
                    <i class="fa-solid fa-school me-1.5 text-brand-500"></i>{{ $primaryClassName }}
                </p>
            </div>
            <div class="flex flex-wrap gap-3">
                <a href="{{ route('student.courses.index') }}"
                   class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-bold text-white no-underline transition hover:bg-brand-700">
                    <i class="fa-solid fa-book-open text-xs"></i>
                    {{ $isArabic ? 'موادي' : 'My Courses' }}
                </a>
                <a href="{{ route('student.schedule.index') }}"
                   class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-5 py-2.5 text-sm font-bold text-zinc-700 no-underline transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800">
                    <i class="fa-solid fa-calendar-days text-xs"></i>
                    {{ $isArabic ? 'جدولي' : 'Schedule' }}
                </a>
            </div>
        </div>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
        {{-- Progress --}}
        <div class="col-span-2 flex flex-col rounded-[1.5rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-[11px] font-black uppercase tracking-[0.14em] text-zinc-500 dark:text-zinc-400">
                {{ $isArabic ? 'التقدم العام' : 'Overall Progress' }}
            </p>
            <p class="mt-2 text-[2.2rem] font-black leading-none text-zinc-900 dark:text-white">
                {{ $averageProgress }}<span class="text-xl text-zinc-400">%</span>
            </p>
            <div class="mt-3 h-2 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800"
                 role="progressbar" aria-valuenow="{{ $averageProgress }}" aria-valuemin="0" aria-valuemax="100"
                 aria-label="{{ $isArabic ? 'التقدم العام' : 'Overall progress' }}">
                <div class="h-full rounded-full bg-brand-600 transition-all duration-700"
                     style="width: {{ min(100, max(0, $averageProgress)) }}%"></div>
            </div>
            <p class="mt-2 text-xs text-zinc-400">
                {{ $completedCoursesCount }}/{{ $courses->count() }} {{ $isArabic ? 'مادة مكتملة' : 'courses completed' }}
            </p>
        </div>

        {{-- Points --}}
        <a href="{{ route('student.rewards.index') }}"
           class="flex flex-col rounded-[1.5rem] border border-zinc-200 bg-white p-5 no-underline shadow-sm transition hover:border-amber-400 dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-50 text-amber-500 dark:bg-amber-500/10">
                <i class="fa-solid fa-trophy"></i>
            </div>
            <p class="mt-3 text-[1.7rem] font-black leading-none text-zinc-900 dark:text-white">{{ number_format($pointsBalance) }}</p>
            <p class="mt-1.5 text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'نقطة' : 'Points' }}</p>
        </a>

        {{-- Badges --}}
        <a href="{{ route('student.rewards.index') }}"
           class="flex flex-col rounded-[1.5rem] border border-zinc-200 bg-white p-5 no-underline shadow-sm transition hover:border-emerald-400 dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-500 dark:bg-emerald-500/10">
                <i class="fa-solid fa-medal"></i>
            </div>
            <p class="mt-3 text-[1.7rem] font-black leading-none text-zinc-900 dark:text-white">{{ $earnedBadgesCount }}</p>
            <p class="mt-1.5 text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'شارة' : 'Badges' }}</p>
        </a>
    </div>

    {{-- Mini Calendar --}}
    <section
        x-data="{
            init() {
                const el = this.$refs.miniCal;
                const cal = new FullCalendar.Calendar(el, {
                    initialView: 'dayGridMonth',
                    headerToolbar: { left: 'prev,next', center: 'title', right: '' },
                    height: 'auto',
                    events: {
                        url: '{{ route('student.calendar.events') }}',
                        method: 'GET',
                        failure() { console.error('Failed to load calendar events'); }
                    },
                    eventDidMount(info) {
                        info.el.title = info.event.title;
                    }
                });
                cal.render();
            }
        }"
        class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
    >
        <div class="mb-4 flex items-center gap-2">
            <i class="fa-solid fa-calendar-days text-brand-600 dark:text-brand-400"></i>
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'التقويم' : 'Calendar' }}</h2>
        </div>
        <div x-ref="miniCal" class="[&_.fc-toolbar-title]:text-sm [&_.fc-toolbar-title]:font-bold [&_.fc-button]:!py-1 [&_.fc-button]:!px-2 [&_.fc-button]:!text-xs"></div>
        <div class="mt-3 flex flex-wrap gap-3 text-xs text-zinc-500 dark:text-zinc-400">
            <span class="flex items-center gap-1.5"><span class="inline-block h-2.5 w-2.5 rounded-full bg-red-500"></span>{{ $isArabic ? 'واجبات' : 'Assignments' }}</span>
            <span class="flex items-center gap-1.5"><span class="inline-block h-2.5 w-2.5 rounded-full bg-blue-500"></span>{{ $isArabic ? 'اختبارات' : 'Quizzes' }}</span>
            <span class="flex items-center gap-1.5"><span class="inline-block h-2.5 w-2.5 rounded-full bg-green-500"></span>{{ $isArabic ? 'جداول' : 'Schedule' }}</span>
            <span class="flex items-center gap-1.5"><span class="inline-block h-2.5 w-2.5 rounded-full bg-purple-500"></span>{{ $isArabic ? 'فعاليات' : 'Events' }}</span>
        </div>
    </section>

    {{-- Quick Links --}}
    <div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
        @php
            $links = [
                ['icon' => 'fa-book-open',    'label' => $isArabic ? 'المواد'      : 'Courses',       'url' => route('student.courses.index')],
                ['icon' => 'fa-calendar-days','label' => $isArabic ? 'الجدول'      : 'Schedule',      'url' => route('student.schedule.index')],
                ['icon' => 'fa-chart-bar',    'label' => $isArabic ? 'النتائج'     : 'Results',       'url' => route('student.final-results.index')],
                ['icon' => 'fa-trophy',       'label' => $isArabic ? 'المكافآت'    : 'Rewards',       'url' => route('student.rewards.index')],
                ['icon' => 'fa-bell',         'label' => $isArabic ? 'الإشعارات'   : 'Notifications', 'url' => route('student.notifications.index')],
                ['icon' => 'fa-clock-rotate-left','label' => $isArabic ? 'السجل'  : 'History',       'url' => route('student.history.index')],
            ];
        @endphp
        @foreach($links as $link)
        <a href="{{ $link['url'] }}"
           class="group relative flex flex-col items-center gap-2.5 rounded-[1.5rem] border border-zinc-200 bg-white p-4 no-underline transition hover:border-brand-500 hover:-translate-y-0.5 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900">
            <div class="relative flex h-11 w-11 items-center justify-center rounded-2xl bg-zinc-50 text-lg text-zinc-500 transition group-hover:bg-brand-50 group-hover:text-brand-600 dark:bg-zinc-800 dark:group-hover:bg-brand-500/10 dark:group-hover:text-brand-400">
                <i class="fa-solid {{ $link['icon'] }}"></i>
                @if($link['icon'] === 'fa-bell' && ($unreadStudentNotifications ?? 0) > 0)
                    <span class="absolute -top-1 -end-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[9px] font-black text-white">
                        {{ min(99, $unreadStudentNotifications) }}
                    </span>
                @endif
            </div>
            <span class="text-center text-xs font-bold text-zinc-600 dark:text-zinc-400">{{ $link['label'] }}</span>
        </a>
        @endforeach
    </div>

    {{-- Courses --}}
    @if($courses->isNotEmpty())
    <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="mb-5 flex items-center justify-between gap-4">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'موادي الدراسية' : 'My Courses' }}</h2>
            <a href="{{ route('student.courses.index') }}"
               class="text-xs font-bold text-brand-600 no-underline hover:text-brand-800 dark:text-brand-400">
                {{ $isArabic ? 'عرض الكل' : 'View all' }} →
            </a>
        </div>
        <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
            @foreach($courses->take(6) as $course)
            @php
                $p = (int) $course->student_progress;
                $barColor = $p >= 100 ? 'bg-emerald-500' : ($p >= 50 ? 'bg-brand-600' : 'bg-sky-500');
                $textColor = $p >= 100 ? 'text-emerald-600' : ($p >= 50 ? 'text-brand-600' : 'text-sky-600');
            @endphp
            <a href="{{ route('student.courses.show', $course->id) }}"
               class="group flex flex-col gap-3 rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-4 no-underline transition hover:border-brand-400 hover:bg-white dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900">
                <div class="flex items-start justify-between gap-2">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white text-brand-600 shadow-sm dark:bg-zinc-900">
                        <i class="fa-solid fa-book"></i>
                    </div>
                    @if($p >= 100)
                        <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-black text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400">✓ {{ $isArabic ? 'مكتمل' : 'Done' }}</span>
                    @endif
                </div>
                <div>
                    <p class="font-black text-zinc-900 line-clamp-1 dark:text-white">{{ $course->name }}</p>
                    @if($course->teacher)
                        <p class="mt-0.5 text-xs text-zinc-400 truncate">{{ $course->teacher->name }}</p>
                    @endif
                </div>
                <div>
                    <div class="mb-1 flex items-center justify-between text-xs">
                        <span class="text-zinc-400">{{ $isArabic ? 'التقدم' : 'Progress' }}</span>
                        <span class="font-black {{ $textColor }}">{{ $p }}%</span>
                    </div>
                    <div class="h-1.5 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700"
                         role="progressbar" aria-valuenow="{{ $p }}" aria-valuemin="0" aria-valuemax="100"
                         aria-label="{{ $course->name }}">
                        <div class="h-full rounded-full {{ $barColor }}" style="width: {{ min(100, max(0, $p)) }}%"></div>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </section>
    @endif

    {{-- Upcoming + Schedule --}}
    <div class="grid gap-6 xl:grid-cols-2">

        {{-- Upcoming Tasks --}}
        <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <h2 class="mb-5 text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'المهام القادمة' : 'Upcoming Tasks' }}</h2>
            <div class="flex flex-col gap-4">
                @foreach($upcomingPanels as $panel)
                <div>
                    <div class="mb-2 flex items-center gap-2">
                        <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-brand-50 text-xs text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                            <i class="fa-solid {{ $panel['icon'] }}"></i>
                        </div>
                        <p class="text-sm font-black text-zinc-700 dark:text-zinc-300">{{ $panel['title'] }}</p>
                    </div>
                    <div class="space-y-1.5">
                        @forelse($panel['items'] as $item)
                            <a href="{{ $item['url'] }}"
                               class="flex items-center justify-between gap-3 rounded-xl border border-zinc-100 bg-zinc-50 px-3 py-2.5 no-underline transition hover:border-brand-300 hover:bg-brand-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-brand-500/40 dark:hover:bg-brand-500/5">
                                <p class="text-sm font-bold text-zinc-800 line-clamp-1 dark:text-zinc-200">{{ $item['title'] }}</p>
                                <p class="shrink-0 text-[11px] font-bold text-zinc-400">{{ $item['date_label'] }}</p>
                            </a>
                        @empty
                            <p class="rounded-xl border border-dashed border-zinc-200 py-3 text-center text-xs text-zinc-400 dark:border-zinc-700">{{ $panel['empty'] }}</p>
                        @endforelse
                    </div>
                </div>
                @endforeach
            </div>
        </section>

        {{-- Today's Schedule --}}
        <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="mb-5 flex items-center justify-between gap-4">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الجدول الدراسي' : 'Class Schedule' }}</h2>
                <a href="{{ route('student.schedule.index') }}"
                   class="text-xs font-bold text-brand-600 no-underline hover:text-brand-800 dark:text-brand-400">
                    {{ $isArabic ? 'الكامل' : 'Full' }} →
                </a>
            </div>
            <div class="flex flex-col gap-4">
                @foreach($schedulePanels as $panel)
                <div>
                    <p class="mb-2 text-xs font-black uppercase tracking-widest text-zinc-400">{{ $panel['label'] }}</p>
                    <div class="space-y-1.5">
                        @forelse($panel['entries'] as $entry)
                            <div class="flex items-center gap-3 rounded-xl border border-zinc-100 bg-zinc-50 px-3 py-2.5 dark:border-zinc-800 dark:bg-zinc-950">
                                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white text-xs font-black text-brand-600 shadow-sm dark:bg-zinc-900">
                                    {{ $entry['period'] }}
                                </div>
                                <div class="min-w-0">
                                    <p class="text-sm font-bold text-zinc-800 truncate dark:text-zinc-200">{{ $entry['course_name'] }}</p>
                                    <p class="text-xs text-zinc-400">{{ $entry['time_range'] }}</p>
                                </div>
                            </div>
                        @empty
                            <p class="rounded-xl border border-dashed border-zinc-200 py-3 text-center text-xs text-zinc-400 dark:border-zinc-700">{{ $panel['empty'] }}</p>
                        @endforelse
                    </div>
                </div>
                @endforeach
            </div>
        </section>
    </div>

    {{-- Media --}}
    <div class="grid gap-6 xl:grid-cols-2">

        {{-- Continue Watching --}}
        <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <h2 class="mb-5 text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'استمر من حيث توقفت' : 'Continue Watching' }}</h2>
            <div class="space-y-2">
                @forelse($recentMediaCards as $card)
                    <a href="{{ $card['url'] }}"
                       class="flex items-center gap-3 rounded-xl border border-zinc-100 bg-zinc-50 p-3 no-underline transition hover:border-sky-300 hover:bg-sky-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-sky-500/30 dark:hover:bg-sky-500/5">
                        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-sky-500 shadow-sm dark:bg-zinc-900">
                            <i class="fa-solid {{ $card['media_icon'] }}"></i>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-bold text-zinc-800 truncate dark:text-zinc-200">{{ $card['title'] }}</p>
                            <div class="mt-1.5 flex items-center gap-2">
                                <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700"
                                     role="progressbar" aria-valuenow="{{ $card['progress_value'] }}" aria-valuemin="0" aria-valuemax="100"
                                     aria-label="{{ $card['title'] }}">
                                    <div class="h-full rounded-full bg-sky-500" style="width: {{ min(100, max(0, $card['progress_value'])) }}%"></div>
                                </div>
                                <span class="text-[10px] font-black text-sky-600 dark:text-sky-400">{{ $card['progress_value'] }}%</span>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="rounded-xl border border-dashed border-zinc-200 py-8 text-center dark:border-zinc-700">
                        <i class="fa-solid fa-play-circle mb-2 text-2xl text-zinc-300 dark:text-zinc-600"></i>
                        <p class="text-sm text-zinc-400">{{ $isArabic ? 'لم تشاهد أي محتوى بعد' : 'No media played yet' }}</p>
                    </div>
                @endforelse
            </div>
        </section>

        {{-- New Content --}}
        <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <h2 class="mb-5 text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'محتوى جديد' : 'New Content' }}</h2>
            <div class="space-y-2">
                @forelse($publishedMediaCards as $card)
                    <a href="{{ $card['url'] }}"
                       class="flex items-center gap-3 rounded-xl border border-zinc-100 bg-zinc-50 p-3 no-underline transition hover:border-emerald-300 hover:bg-emerald-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-emerald-500/30 dark:hover:bg-emerald-500/5">
                        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-emerald-500 shadow-sm dark:bg-zinc-900">
                            <i class="fa-solid {{ $card['media_icon'] }}"></i>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-bold text-zinc-800 truncate dark:text-zinc-200">{{ $card['title'] }}</p>
                            <p class="mt-0.5 text-xs text-zinc-400 truncate">{{ $card['course_name'] }}</p>
                            <p class="mt-0.5 text-[11px] text-zinc-400">{{ $card['created_on'] }}</p>
                        </div>
                    </a>
                @empty
                    <div class="rounded-xl border border-dashed border-zinc-200 py-8 text-center dark:border-zinc-700">
                        <i class="fa-solid fa-film mb-2 text-2xl text-zinc-300 dark:text-zinc-600"></i>
                        <p class="text-sm text-zinc-400">{{ $isArabic ? 'لا يوجد محتوى جديد' : 'No new content yet' }}</p>
                    </div>
                @endforelse
            </div>
        </section>
    </div>

    {{-- Final Results --}}
    @if($finalResultsOverview->isNotEmpty())
    <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="mb-5 flex items-center justify-between gap-4">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'النتائج النهائية' : 'Final Results' }}</h2>
            <a href="{{ route('student.final-results.index') }}"
               class="text-xs font-bold text-brand-600 no-underline hover:text-brand-800 dark:text-brand-400">
                {{ $isArabic ? 'التفاصيل' : 'Details' }} →
            </a>
        </div>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($finalResultsOverview as $result)
            @php
                $avg = $result['average'];
                $barColor = $avg === null ? 'bg-zinc-300' : ($avg >= 90 ? 'bg-emerald-500' : ($avg >= 75 ? 'bg-brand-600' : ($avg >= 60 ? 'bg-amber-500' : 'bg-red-500')));
                $textColor = $avg === null ? 'text-zinc-400' : ($avg >= 90 ? 'text-emerald-600' : ($avg >= 75 ? 'text-brand-600' : ($avg >= 60 ? 'text-amber-600' : 'text-red-600')));
            @endphp
            <article class="rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950">
                <p class="text-xs font-black uppercase tracking-[0.14em] text-zinc-500 dark:text-zinc-400">
                    {{ $result['term']->name ?? ($isArabic ? 'فصل' : 'Term') }}
                </p>
                @if($avg !== null)
                    <p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white">{{ $avg }}<span class="text-base text-zinc-400">%</span></p>
                    <p class="mt-1 text-xs text-zinc-400">{{ $result['marks_count'] }} {{ $isArabic ? 'مادة' : 'subjects' }}</p>
                    <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700"
                         role="progressbar" aria-valuenow="{{ $avg }}" aria-valuemin="0" aria-valuemax="100"
                         aria-label="{{ $result['term']->name ?? '' }}">
                        <div class="h-full rounded-full {{ $barColor }}" style="width: {{ min(100, $avg) }}%"></div>
                    </div>
                @else
                    <p class="mt-2 text-sm text-zinc-400">{{ $isArabic ? 'لا توجد نتائج بعد' : 'No results yet' }}</p>
                @endif
            </article>
            @endforeach
        </div>
    </section>
    @endif

    {{-- Certificates --}}
    @if($latestCertificates->isNotEmpty())
    <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <h2 class="mb-5 text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'شهاداتي' : 'My Certificates' }}</h2>
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($latestCertificates as $cert)
            <div class="flex items-center gap-3 rounded-[1.5rem] border border-amber-200 bg-amber-50 p-4 dark:border-amber-500/20 dark:bg-amber-500/5">
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white text-amber-500 shadow-sm dark:bg-zinc-900">
                    <i class="fa-solid fa-certificate"></i>
                </div>
                <div class="min-w-0">
                    <p class="font-black text-zinc-900 truncate dark:text-white">{{ $cert->album?->name ?? ($isArabic ? 'شهادة' : 'Certificate') }}</p>
                    <p class="text-xs text-zinc-400">{{ $cert->created_at?->format('Y-m-d') }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </section>
    @endif

</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
@endsection