{{-- Upcoming PTM Widget --}}
@if(isset($upcomingPtm) && $upcomingPtm)
<div class="bg-gradient-to-r from-amber-50 to-orange-50 rounded-2xl ring-1 ring-amber-200/60 p-4">
    <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-amber-500 rounded-xl flex items-center justify-center flex-shrink-0">
            <i class="fas fa-handshake text-white text-sm"></i>
        </div>
        <div class="flex-1 min-w-0">
            <p class="font-bold text-stone-800 text-sm">{{ $upcomingPtm->title }}</p>
            <p class="text-xs text-amber-700 mt-0.5">
                <i class="far fa-calendar mr-1"></i>{{ $upcomingPtm->date->format('D, d M Y') }}
                · {{ $upcomingPtm->formatted_time }}
            </p>
            @if($upcomingPtm->venue)
            <p class="text-[10px] text-stone-400 mt-0.5"><i class="fas fa-map-marker-alt mr-1"></i>{{ $upcomingPtm->venue }}</p>
            @endif
        </div>
        @if(in_array(auth()->user()->role, ['parent']))
        <a href="{{ route('ptm.show', $upcomingPtm) }}" class="px-3 py-1.5 bg-amber-500 text-white rounded-lg text-xs font-semibold hover:bg-amber-600 transition flex-shrink-0">
            Book <i class="fas fa-arrow-right ml-1 text-[9px]"></i>
        </a>
        @elseif(auth()->user()->role === 'teacher')
        <a href="{{ route('ptm.show', $upcomingPtm) }}" class="px-3 py-1.5 bg-amber-500 text-white rounded-lg text-xs font-semibold hover:bg-amber-600 transition flex-shrink-0">
            Slots <i class="fas fa-arrow-right ml-1 text-[9px]"></i>
        </a>
        @endif
    </div>
</div>
@endif