@extends('layouts.app')

@section('title', 'AIT TV — Watch Live')
@section('meta_description', 'Watch AIT Television 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>

            {{-- LIVE PLAYER --}}
            <div class="bg-black rounded overflow-hidden mb-4" style="aspect-ratio:16/9;position:relative;">

                {{-- HLS Player placeholder -- connects to NGINX-RTMP stream on VPS --}}
                <div class="w-full h-full flex flex-col items-center justify-center bg-[#050d1a]"
                     id="player-placeholder">
                    <svg class="w-16 h-16 text-white/10 mb-4" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/>
                    </svg>
                    <div class="text-white/40 text-sm font-bold mb-2">AIT Television — Channel 1</div>
                    <div class="text-white/20 text-xs">Live stream will appear here when broadcasting begins</div>
                    <div class="mt-4 flex items-center gap-2 bg-red-600/20 border border-red-600/30 px-4 py-2 rounded-full">
                        <div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
                        <span class="text-red-400 text-xs font-bold tracking-wider">LIVE BROADCAST</span>
                    </div>
                </div>

                {{-- Video.js player — uncomment when VPS streaming is configured --}}
                {{--
                <video id="ait-tv-player"
                       class="video-js vjs-default-skin vjs-big-play-centered w-full h-full"
                       controls
                       autoplay
                       muted
                       data-setup='{"fluid": true}'>
                    <source src="{{ config('streaming.hls_url') }}" type="application/x-mpegURL">
                    <p class="vjs-no-js">Please enable JavaScript to watch this stream.</p>
                </video>
                --}}

            </div>

            {{-- NOW PLAYING BAR --}}
            <div class="bg-white border border-[#e2e2dc] rounded p-4 mb-4 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="flex items-center gap-1.5 bg-red-600 px-3 py-1 rounded-full">
                        <div class="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></div>
                        <span class="text-white text-[9px] font-bold tracking-wider">LIVE</span>
                    </div>
                    <div>
                        @if($currentTvShow)
                            <div class="text-sm font-bold text-[#111110] font-serif">
                                {{ $currentTvShow->show->title }}
                            </div>
                            <div class="text-xs text-gray-500">
                                {{ $currentTvShow->show->host_names }}
                                · {{ $currentTvShow->formatted_start_time }} – {{ $currentTvShow->formatted_end_time }}
                            </div>
                        @else
                            <div class="text-sm font-bold text-[#111110] font-serif">AIT Broadcasting Network</div>
                            <div class="text-xs text-gray-500">Ghana's Technology & Education Intelligence Platform</div>
                        @endif
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <a href="{{ route('schedule') }}"
                       class="text-xs font-bold text-[#0a3828] border border-[#0a3828] px-3 py-1.5 rounded hover:bg-[#0a3828] hover:text-white transition">
                        Full Schedule
                    </a>
                </div>
            </div>

            {{-- TODAY'S SCHEDULE --}}
            <div class="mb-5">
                <div class="flex items-stretch border-b-2 border-[#0a3828] mb-3">
                    <div class="bg-[#0a3828] text-white text-[10px] font-bold tracking-widest uppercase px-4 py-1.5 rounded-t">
                        📺 Today on AIT TV
                    </div>
                    <span class="text-xs text-gray-400 self-end pb-1.5 px-3">{{ now()->format('l, d F Y') }}</span>
                </div>

                @if($todayTvSchedule->count() > 0)
                    <div class="bg-white border border-[#e2e2dc] rounded overflow-hidden">
                        @foreach($todayTvSchedule as $schedule)
                            <div class="flex items-center gap-4 px-4 py-2.5 border-b border-[#f0f0eb] last:border-0
                                {{ isset($currentTvShow) && $currentTvShow && $currentTvShow->id === $schedule->id ? 'bg-[#f0f8f4]' : 'hover:bg-[#fafaf7]' }} transition">
                                <div class="min-w-[50px] text-sm font-bold
                                    {{ isset($currentTvShow) && $currentTvShow && $currentTvShow->id === $schedule->id ? 'text-[#0a3828]' : '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($currentTvShow) && $currentTvShow && $currentTvShow->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>

            {{-- LATEST NEWS --}}
            <div class="mb-5">
                <div class="flex items-stretch border-b-2 border-[#0a3828] mb-3">
                    <div class="bg-[#0a3828] text-white text-[10px] font-bold tracking-widest uppercase px-4 py-1.5 rounded-t">
                        Latest News
                    </div>
                    <a href="{{ route('home') }}" class="ml-auto text-[10px] font-bold text-[#0a3828] self-end pb-1.5 hover:underline">
                        All news →
                    </a>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    @foreach($latestNews as $article)
                        <a href="{{ route('article.show', $article->slug) }}"
                           class="bg-white border border-[#e2e2dc] rounded overflow-hidden flex hover:border-[#0a3828] transition">
                            <div class="w-20 flex-shrink-0 bg-[#1a2f48] overflow-hidden">
                                @if($article->featured_image_url)
                                    <img src="{{ asset('storage/' . $article->featured_image_url) }}"
                                         alt="{{ $article->title }}"
                                         class="w-full h-full object-cover">
                                @endif
                            </div>
                            <div class="p-2 flex-1">
                                <div class="text-xs font-bold text-[#111110] font-serif leading-tight">
                                    {{ Str::limit($article->title, 70) }}
                                </div>
                                <div class="text-[9px] text-gray-400 mt-1">
                                    {{ $article->published_at_human }}
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>

        </div>

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

    </div>
</div>
@endsection