@extends('layouts.app')

@section('title', 'AIT Radio 89.7 FM — Listen Live')
@section('meta_description', 'Listen to AIT Radio 89.7 FM live — Ghana\'s Technology and Education Intelligence Platform')

@section('content')
<div class="px-6 py-4">
    <div class="grid grid-cols-[1fr_280px] gap-5">

        {{-- MAIN COLUMN --}}
        <div>

            {{-- RADIO PLAYER --}}
            <div class="bg-[#0a3828] rounded overflow-hidden mb-4">
                <div class="p-6 text-center">
                    {{-- Station Identity --}}
                    <div class="w-20 h-20 bg-[#b8962e] rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-10 h-10 text-[#0a3828]" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20 6h-2.18c.07-.44.18-.88.18-1.36C18 2.51 15.49 0 12.36 0 9.9 0 7.77 1.51 6.91 3.68L3.08 12H3c-1.66 0-3 1.34-3 3v4c0 1.66 1.34 3 3 3h18c1.66 0 3-1.34 3-3v-5c0-2.21-1.79-4-4-4z"/>
                        </svg>
                    </div>
                    <div class="text-2xl font-bold text-white font-serif mb-1">AIT Radio 89.7 FM</div>
                    <div class="text-white/50 text-sm mb-4">Ghana's Technology & Education Intelligence Platform</div>

                    {{-- Now Playing --}}
                    <div class="bg-white/10 rounded-lg p-4 mb-4">
                        <div class="text-[9px] font-bold text-[#d4af50] tracking-widest uppercase mb-2">On Air Now</div>
                        @if($currentRadioShow)
                            <div class="text-lg font-bold text-white font-serif">
                                {{ $currentRadioShow->show->title }}
                            </div>
                            <div class="text-white/50 text-sm mt-1">
                                Hosted by {{ $currentRadioShow->show->host_names }}
                            </div>
                            <div class="text-white/40 text-xs mt-1">
                                {{ $currentRadioShow->formatted_start_time }} – {{ $currentRadioShow->formatted_end_time }}
                            </div>
                        @else
                            <div class="text-lg font-bold text-white font-serif">AIT Radio 89.7 FM</div>
                            <div class="text-white/50 text-sm mt-1">Streaming live 24 hours</div>
                        @endif
                    </div>

                    {{-- Audio Player --}}
                    <div class="flex items-center justify-center gap-4 mb-4">
                        <button class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:border-white/50 transition">
                            <svg class="w-4 h-4 text-white/60" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
                            </svg>
                        </button>
                        <button id="radio-play-btn"
                                class="w-14 h-14 rounded-full bg-[#b8962e] flex items-center justify-center hover:bg-[#d4af50] transition shadow-lg">
                            <svg class="w-6 h-6 text-[#0a3828]" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                        </button>
                        <button class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:border-white/50 transition">
                            <svg class="w-4 h-4 text-white/60" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM14 6h2v12h-2z"/>
                            </svg>
                        </button>
                    </div>

                    {{-- Progress bar --}}
                    <div class="flex items-center gap-3 mb-2">
                        <span class="text-white/30 text-xs">LIVE</span>
                        <div class="flex-1 h-1 bg-white/10 rounded">
                            <div class="h-full bg-[#b8962e] rounded animate-pulse" style="width:100%"></div>
                        </div>
                        <span class="text-white/30 text-xs">89.7 FM</span>
                    </div>

                    {{-- HTML5 Audio element - connects to Icecast on VPS --}}
                    {{-- Uncomment and set src when VPS is ready --}}
                    {{-- <audio id="radio-stream" preload="none">
                        <source src="{{ config('streaming.icecast_url') }}" type="audio/mpeg">
                    </audio> --}}

                    <div class="text-white/20 text-xs mt-2">
                        Stream will be available when broadcasting begins
                    </div>
                </div>
            </div>

            {{-- TODAY'S RADIO SCHEDULE --}}
            <div class="mb-5">
                <div class="flex items-stretch border-b-2 border-[#0a3828] mb-3">
                    <div class="bg-[#b8962e] text-white text-[10px] font-bold tracking-widest uppercase px-4 py-1.5 rounded-t">
                        📻 Today on AIT Radio
                    </div>
                    <span class="text-xs text-gray-400 self-end pb-1.5 px-3">{{ now()->format('l, d F Y') }}</span>
                    <a href="{{ route('schedule') }}" class="ml-auto text-[10px] font-bold text-[#0a3828] self-end pb-1.5 hover:underline">
                        Full schedule →
                    </a>
                </div>

                @if($todayRadioSchedule->count() > 0)
                    <div class="bg-white border border-[#e2e2dc] rounded overflow-hidden">
                        @foreach($todayRadioSchedule as $schedule)
                            <div class="flex items-center gap-4 px-4 py-3 border-b border-[#f0f0eb] last:border-0
                                {{ isset($currentRadioShow) && $currentRadioShow && $currentRadioShow->id === $schedule->id ? 'bg-[#f0f8f4]' : 'hover:bg-[#fafaf7]' }} transition">
                                <div class="min-w-[50px] text-sm font-bold
                                    {{ isset($currentRadioShow) && $currentRadioShow && $currentRadioShow->id === $schedule->id ? 'text-[#b8962e]' : 'text-gray-500' }}">
                                    {{ $schedule->formatted_start_time }}
                                </div>
                                <div class="flex-1">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-bold text-[#111110] font-serif">
                                            {{ $schedule->show->title }}
                                        </span>
                                        @if(isset($currentRadioShow) && $currentRadioShow && $currentRadioShow->id === $schedule->id)
                                            <span class="text-[7.5px] font-bold bg-red-600 text-white px-1.5 py-0.5 rounded tracking-wider">
                                                ● ON AIR
                                            </span>
                                        @endif
                                    </div>
                                    @if($schedule->show->host_names)
                                        <div class="text-xs text-gray-400">{{ $schedule->show->host_names }}</div>
                                    @endif
                                </div>
                                <div class="text-[9.5px] text-gray-400">
                                    {{ $schedule->formatted_start_time }} – {{ $schedule->formatted_end_time }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="bg-white border border-[#e2e2dc] rounded p-6 text-center text-gray-400 text-sm">
                        No schedule available for today.
                    </div>
                @endif
            </div>

        </div>

        {{-- SIDEBAR --}}
        @include('partials.sidebar')

    </div>
</div>
@endsection