@inject('calendar', 'App\Services\AcademicCalendarService')

@php
    $currentYear = $calendar->getCurrentYear();
    $currentTerm = $calendar->getCurrentTerm();
    $upcomingEvents = $calendar->getUpcomingEvents(4);
    $weekNumber = $calendar->getCurrentWeekNumber($currentTerm);
@endphp

<div class="space-y-6">
    <!-- Current Term Card -->
    <div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 overflow-hidden relative group">
        <div class="absolute -right-4 -top-4 w-20 h-20 bg-indigo-50 rounded-full opacity-50 group-hover:scale-110 transition-transform duration-500"></div>
        <div class="relative">
            <div class="flex items-center gap-2 text-indigo-600 mb-2">
                <span class="text-xs font-black uppercase tracking-widest leading-none">التقويم الحالي</span>
                <span class="w-1 h-1 bg-indigo-600 rounded-full animate-pulse"></span>
            </div>
            
            @if($currentTerm)
                <h4 class="text-xl font-black text-gray-900 leading-tight">
                    {{ $currentTerm->name }}
                </h4>
                <div class="mt-4 flex items-center gap-4">
                    <div class="bg-indigo-600 text-white px-3 py-1.5 rounded-xl">
                        <span class="text-[10px] block opacity-70 leading-none">الأسبوع</span>
                        <span class="text-lg font-black">{{ $weekNumber ?? '--' }}</span>
                    </div>
                    <div>
                        <div class="text-[10px] text-gray-400 font-bold uppercase tracking-tighter">السنة الدراسية</div>
                        <div class="text-sm font-bold text-gray-700">{{ $currentYear->name ?? '---' }}</div>
                    </div>
                </div>
            @else
                <div class="text-sm text-gray-400 italic py-4">لا يوجد فصل دراسي نشط حالياً</div>
            @endif
            
            <a href="{{ route('calendar.index') }}" class="mt-6 flex items-center justify-between text-xs font-bold text-gray-400 hover:text-indigo-600 transition group/link">
                عرض التقويم الكامل
                <svg class="w-4 h-4 group-hover/link:translate-x-[-4px] transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            </a>
        </div>
    </div>

    <!-- Upcoming Events List -->
    <div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100">
        <h5 class="font-black text-gray-900 mb-5 flex items-center gap-2">
            المواعيد القادمة
            <span class="text-[10px] bg-red-50 text-red-600 px-2 py-0.5 rounded-full">{{ $upcomingEvents->count() }}</span>
        </h5>
        
        <div class="space-y-4">
            @forelse($upcomingEvents as $event)
                <div class="flex gap-3 group/item">
                    <div class="w-1 h-10 rounded-full bg-{{ $event['color'] ?? 'indigo' }}-500 mt-1"></div>
                    <div>
                        <div class="text-[10px] font-black text-{{ $event['color'] ?? 'indigo' }}-600 uppercase tracking-tighter mb-0.5">
                            {{ $event['type'] == 'exam' ? 'امتحان' : ($event['type'] == 'assignment' ? 'تكليف' : 'فعالية') }}
                        </div>
                        <div class="text-sm font-bold text-gray-800 leading-tight group-hover/item:text-indigo-600 transition">
                            {{ $event['title'] }}
                        </div>
                        <div class="text-[10px] text-gray-400 mt-1 flex items-center gap-1">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            {{ \Carbon\Carbon::parse($event['date'])->diffForHumans() }}
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-6">
                    <div class="text-2xl opacity-20 mb-2">✨</div>
                    <div class="text-xs text-gray-400 italic">لا توجد مواعيد قريبة</div>
                </div>
            @endforelse
        </div>
    </div>
</div>