@php
    /** @var \App\Modules\Academic\Models\Timetable $timetable */
    $timetable = $getState()['timetable'] ?? null;
    /** @var array<string, \Illuminate\Support\Collection> $schedule */
    $schedule = $getState()['schedule'] ?? [];

    // Human-friendly day labels
    $dayLabels = [
        'monday' => __('Monday'),
        'tuesday' => __('Tuesday'),
        'wednesday' => __('Wednesday'),
        'thursday' => __('Thursday'),
        'friday' => __('Friday'),
        'saturday' => __('Saturday'),
        'sunday' => __('Sunday'),
    ];
@endphp

<div class="space-y-6">
    @foreach($schedule as $dayKey => $slots)
        <div class="w-full rounded-2xl border border-gray-100 bg-white shadow-sm">
            {{-- Day header --}}
            <div class="flex items-center justify-between px-4 py-3 sm:px-6">
                <div class="font-semibold text-sm text-gray-900">
                    {{ $dayLabels[$dayKey] ?? ucfirst($dayKey) }}
                </div>
                <div class="text-xs text-gray-400">
                    {{ __('Total periods:') }} {{ $slots->count() }}
                </div>
            </div>

            {{-- Slots --}}
            <div class="divide-y divide-gray-100">
                @foreach($slots as $slot)
                    <div class="flex w-full flex-col px-4 py-3 text-sm sm:flex-row sm:items-center sm:px-6">
                        <div class="flex flex-1 flex-col sm:flex-row sm:items-center sm:justify-between">
                            <div class="mb-2 flex items-center justify-between sm:mb-0 sm:block">
                                <div class="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800">
                                    {{ \Illuminate\Support\Str::padLeft($slot->start_time, 5, '0') }}
                                    <span class="mx-1 text-gray-400">–</span>
                                    {{ \Illuminate\Support\Str::padLeft($slot->end_time, 5, '0') }}
                                </div>
                                <div class="mt-1 text-xs text-gray-500 sm:hidden">
                                    {{ __('Period') }} {{ $slot->period_number }}
                                </div>
                            </div>

                            <div class="text-right sm:text-left">
                                <div class="font-semibold text-gray-900">
                                    {{ $slot->subject->name ?? '-' }}
                                </div>
                                <div class="mt-1 flex flex-wrap items-center justify-end gap-3 text-xs text-gray-500 sm:justify-start">
                                    <span>
                                        {{ $slot->teacher->name ?? 'TBA' }}
                                    </span>
                                    <span class="h-1 w-1 rounded-full bg-gray-300"></span>
                                    <span>
                                        {{ $slot->room ?? '-' }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="mt-2 text-xs text-gray-500 sm:mt-0 sm:w-20 sm:text-center">
                            <span class="hidden sm:inline">{{ __('Period') }} </span>{{ $slot->period_number }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach
</div>