{{-- Upcoming Events Widget --}}
{{-- Usage: @include('components.upcoming-events', ['upcomingEvents' => $upcomingEvents]) --}}
@if(isset($upcomingEvents) && $upcomingEvents->isNotEmpty())
<div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center justify-between">
        <h3 class="font-semibold text-gray-800 text-sm">
            <i class="fas fa-calendar-day mr-2 text-primary-500"></i>Upcoming Events
        </h3>
        <a href="{{ route('academic-calendar.index') }}" class="text-xs text-primary-600 hover:underline">View Calendar →</a>
    </div>
    <div class="divide-y divide-gray-50">
        @foreach($upcomingEvents as $event)
        @php
            $daysUntil = now()->startOfDay()->diffInDays($event->start_date, false);
            $urgencyClass = match(true) {
                $daysUntil <= 1 => 'bg-red-50 text-red-600 border-red-200',
                $daysUntil <= 3 => 'bg-orange-50 text-orange-600 border-orange-200',
                $daysUntil <= 7 => 'bg-yellow-50 text-yellow-600 border-yellow-200',
                default => 'bg-gray-50 text-gray-600 border-gray-200',
            };
            $typeIcon = match($event->type) {
                'holiday', 'vacation' => 'fa-umbrella-beach',
                'exam' => 'fa-file-alt',
                'celebration', 'cultural' => 'fa-star',
                'sports', 'camp' => 'fa-running',
                'competition' => 'fa-trophy',
                'meeting' => 'fa-handshake',
                'workshop' => 'fa-tools',
                'term_start', 'term_end' => 'fa-flag',
                default => 'fa-calendar-check',
            };
        @endphp
        <div class="px-5 py-3 flex items-center gap-3 hover:bg-gray-50/50 transition">
            {{-- Color dot + icon --}}
            <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0"
                 style="background-color: {{ $event->color }}15;">
                <i class="fas {{ $typeIcon }} text-xs" style="color: {{ $event->color }};"></i>
            </div>

            {{-- Event info --}}
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-gray-800 truncate">{{ $event->title }}</p>
                <p class="text-xs text-gray-400 mt-0.5">
                    {{ $event->start_date->format('D, d M') }}
                    @if($event->end_date && !$event->start_date->eq($event->end_date))
                     – {{ $event->end_date->format('d M') }}
                    @endif
                </p>
            </div>

            {{-- Days badge --}}
            <div class="flex-shrink-0">
                @if($daysUntil === 0)
                <span class="inline-flex items-center px-2 py-1 rounded-md text-[10px] font-bold bg-red-100 text-red-700 border border-red-200">
                    TODAY
                </span>
                @elseif($daysUntil === 1)
                <span class="inline-flex items-center px-2 py-1 rounded-md text-[10px] font-bold bg-orange-100 text-orange-700 border border-orange-200">
                    TOMORROW
                </span>
                @else
                <span class="inline-flex items-center px-2 py-1 rounded-md text-[10px] font-semibold {{ $urgencyClass }} border">
                    {{ $daysUntil }}d
                </span>
                @endif

                @if($event->is_holiday)
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold bg-red-50 text-red-500 ml-1">
                    HOLIDAY
                </span>
                @endif
            </div>
        </div>
        @endforeach
    </div>
</div>
@endif