@extends('layouts.app')

@section('title', __('radio.timetable') . ' - ' . config('app.name'))

@section('content')
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    <div class="bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-white">
            <h2 class="text-2xl font-bold mb-6">{{ __('radio.timetable') }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-7 gap-4">
                @php
                    $days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
                @endphp

                @foreach($days as $day)
                    <div class="bg-gray-700 rounded-lg overflow-hidden">
                        <div class="bg-gray-600 p-3 text-center font-bold">
                            {{ __('radio.days.' . $day) }}
                        </div>
                        <div class="p-4 space-y-3">
                            @if(isset($schedule[$day]) && count($schedule[$day]) > 0)
                                @foreach($schedule[$day] as $slot)
                                    <div class="bg-gray-800 p-3 rounded border border-gray-600">
                                        <div class="text-sm text-indigo-400 font-semibold">
                                            {{ $slot->start_time->format('H:i') }} - {{ $slot->end_time->format('H:i') }}
                                        </div>
                                        <div class="font-bold">{{ $slot->user->username ?? __('radio.unknown') }}</div>
                                        <div class="text-xs text-gray-400 truncate">{{ $slot->show_name }}</div>
                                    </div>
                                @endforeach
                            @else
                                <div class="text-center text-gray-500 text-sm py-4">
                                    {{ __('radio.no_shows') }}
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection