@extends('layouts.portal')

@section('title', 'Timetable')

@section('page-header')
    <div class="mb-8">
        <h1 class="font-display text-2xl font-extrabold text-slate-900 sm:text-3xl">Timetable</h1>
        <p class="mt-1 text-sm text-slate-500">Weekly schedule for {{ $child->class?->name ?? 'unassigned' }}.</p>
    </div>
@endsection

@section('content')
    @if ($grid->isEmpty() || $grid->sum(fn ($d) => $d->count()) === 0)
        <x-portal.empty icon="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
                        message="The timetable for this class hasn't been published yet."/>
    @else
        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
            @foreach ($days as $day)
                @php $isToday = strcasecmp($day, $today) === 0; @endphp
                <div class="{{ $isToday ? 'ring-2 ring-accent-500/40' : '' }} overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm shadow-slate-900/[0.03]">
                    <div class="flex items-center justify-between px-4 py-3 {{ $isToday ? 'bg-gradient-to-r from-accent-600 to-accent-500 text-white' : 'border-b border-slate-100 bg-slate-50/60' }}">
                        <p class="text-sm font-bold">{{ $day }}</p>
                        @if ($isToday)
                            <span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider backdrop-blur">Today</span>
                        @endif
                    </div>
                    <div class="space-y-2 p-3">
                        @forelse ($grid[$day] as $entry)
                            <div class="rounded-xl border border-slate-100 bg-slate-50/70 p-3 transition hover:border-accent-200 hover:bg-accent-50/70">
                                <div class="flex items-center gap-2">
                                    <span class="font-mono text-[10px] font-bold text-accent-700">{{ $entry->start_time->format('H:i') }}</span>
                                    <span class="h-1 w-1 rounded-full bg-slate-300"></span>
                                    <span class="font-mono text-[10px] text-slate-400">{{ $entry->end_time->format('H:i') }}</span>
                                </div>
                                <p class="mt-1 truncate text-sm font-bold text-slate-800">{{ $entry->subject?->name ?? '—' }}</p>
                                <p class="mt-0.5 truncate text-xs text-slate-400">
                                    @if ($entry->teacher) {{ $entry->teacher->name }} @endif
                                    @if ($entry->room) · {{ $entry->room }} @endif
                                </p>
                            </div>
                        @empty
                            <div class="rounded-xl border border-dashed border-slate-200 px-3 py-6 text-center text-xs text-slate-300">Free</div>
                        @endforelse
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection