@extends('layouts.app')

@section('title', 'Home')

@section('content')
#Letakan iklan disini 
    <!-- Top Section: Feature + Gallery -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
        
        <!-- Left: Feature Story -->
        <div class="lg:col-span-2">
            <div class="flex justify-between items-end mb-4">             
                <h2 class="text-2xl font-bold text-white">Top Stories</h2>
                <!-- <a href="#" class="text-blue-400 text-xs font-semibold hover:text-blue-300 uppercase">See More <span class="ml-1">&rarr;</span></a> -->
            </div>
            
            @if($featuredPosts->count() > 0)
                @php $feature = $featuredPosts->first(); @endphp
                <div class="relative group overflow-hidden rounded-xl shadow-lg aspect-video">
                    <img src="{{ $feature->image ?? 'https://placehold.co/800x450/1f2937/60a5fa?text='.$feature->title.' ' }}" alt="{{ $feature->title }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent flex flex-col justify-end p-4 md:p-6">
                        <span class="bg-blue-600 text-white text-[10px] md:text-xs font-bold px-2 py-1 rounded w-fit mb-1 md:mb-2">{{ $feature->category->name ?? 'News' }}</span>
                       <a href="{{ url('/post/' . $feature->slug) }}" class="text-decoration-none"> <h3 class="text-lg md:text-3xl font-bold text-white mb-1 md:mb-2 leading-tight group-hover:text-blue-400 transition-colors line-clamp-3 md:line-clamp-none">{{ $feature->title }}</h3></a>
                        <p class="text-gray-300 text-sm hidden md:block">{{ $feature->excerpt ?? Str::limit($feature->content, 150) }}</p>
                    </div>
                </div>
            @endif
        </div>

        <!-- Right: Gallery/List -->
        <div class="lg:col-span-1">
            <div class="flex justify-between items-end mb-4">
                <h2 class="text-xl font-bold text-white">Latest News</h2>
            </div>
            <div class="space-y-4">
                @foreach($featuredPosts->skip(1)->take(3) as $post)
                <div class="flex gap-4 bg-gray-800 p-3 rounded-lg hover:bg-gray-750 transition-colors group cursor-pointer">
                    <div class="w-24 h-24 flex-shrink-0 overflow-hidden rounded">
                       <a href="{{ url('/post/' . $post->slug) }}" class="text-decoration-none"> <img src="{{ $post->image ?? 'https://placehold.co/150x150/1f2937/9ca3af?text=Img' }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform"></a>
                    </div>
                    <div class="flex flex-col justify-center">
                       <a href="{{ url('/post/' . $post->slug) }}" class="text-decoration-none"> <h4 class="text-sm font-semibold text-white leading-snug mb-1 group-hover:text-blue-400 line-clamp-3">{{ $post->title }}</h4></a>
                        <div class="text-xs text-gray-500">
                            <span class="text-blue-400">By Admin</span> &bull; {{ $post->published_at->format('M d, Y') }}
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Middle Section: Horizontal Cards (Transfer News / Latest) -->
    <div class="mb-12">
        <div class="flex justify-between items-end mb-4">
            <h2 class="text-xl font-bold text-white">Football News</h2>
            <a href="{{ url('/category/football') }}" class="text-blue-400 text-xs font-semibold hover:text-blue-300 uppercase">See More <span class="ml-1">&rarr;</span></a>
        </div>     
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($footballPosts as $post)
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-md group hover:bg-gray-750 transition-all">
                <div class="relative h-48 overflow-hidden">
                            <a href="{{ url('/post/' . $post->slug) }}" class="text-decoration-none"> <img src="{{ $post->image ?? 'https://placehold.co/400x300/1f2937/60a5fa?text=News' }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"></a>
                    <div class="absolute bottom-2 left-2 bg-black/70 text-white text-[10px] px-2 py-1 rounded">{{ $post->published_at->format('M d, Y') }}</div>
                </div>
                <div class="p-4">
                        <a href="{{ url('/post/' . $post->slug) }}" class="text-decoration-none"> <h3 class="text-white font-bold text-sm mb-2 line-clamp-2 group-hover:text-blue-400">{{ $post->title }}</h3></a>
                    <div class="flex justify-between items-center text-xs text-gray-500 mt-3">
                        <span>By Admin</span>
                        <span class="flex items-center gap-1"><svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"></path></svg> 0</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
#Letakan iklan disini 
@php 
$categoriesmatch = [
    'football' => 'Football',
    'basketball' => 'Basketball',
    'baseball' => 'Baseball',
    'tennis' => 'Tennis',
    'american-football' => 'NFL',
    'hockey' => 'Hockey',
    'cricket' => 'Cricket',
    'fight' => 'Fight',
    'motor-sports' => 'Motor Sports',
    'rugby' => 'Rugby',
    'golf' => 'Golf',
    'darts' => 'Darts',
    'billiards' => 'Billiards',
    'afl' => 'AFL',
    'other' => 'Other'
];
@endphp
        <!-- Category Filter -->
        <div class="mb-6">
            <div class="space-x-2 flex flex-wrap justify-center">
                @foreach ($categoriesmatch as $slug => $category)
                    <a href="?sport={{ $slug }}" 
                       class="px-4 mb-2 py-2  rounded-full text-sm font-medium transition-colors whitespace-nowrap {{ $selectedSport === $slug ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30' : 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white' }}">
                        {{ $category }}
                    </a>
                @endforeach
            </div>
        </div>

        <!-- Tabs -->
        <div class="flex space-x-1 bg-gray-800 p-1 rounded-xl mb-6 w-full">
            <button class="tab-btn flex-1 py-2.5 text-sm font-medium rounded-lg focus:outline-none transition-colors text-white bg-blue-600 shadow" onclick="switchTab('live')">
                Live <span class="ml-1 bg-white text-blue-600 py-0.5 px-2 rounded-full text-xs">{{ count($liveMatches) }}</span>
            </button>
            <button class="tab-btn flex-1 py-2.5 text-sm font-medium rounded-lg focus:outline-none transition-colors text-gray-400 hover:text-white hover:bg-gray-700" onclick="switchTab('today')">
                Today <span class="ml-1 bg-gray-700 text-gray-300 py-0.5 px-2 rounded-full text-xs">{{ count($todayMatches) }}</span>
            </button>
            <button class="tab-btn flex-1 py-2.5 text-sm font-medium rounded-lg focus:outline-none transition-colors text-gray-400 hover:text-white hover:bg-gray-700" onclick="switchTab('all')">
                All Matches <span class="ml-1 bg-gray-700 text-gray-300 py-0.5 px-2 rounded-full text-xs">{{ count($allMatches) }}</span>
            </button>
        </div>

        <!-- Match List -->
        <div id="match-list" class="space-y-3 mb-6">
            
            <!-- Live Matches -->
            <div id="tab-live" class="tab-content space-y-3">
                @forelse ($liveMatches as $match)
                    @php 
                        $home = $match['teams']['home']['name'] ?? 'Home';
                        $away = $match['teams']['away']['name'] ?? 'Away';
                        $homeBadge = $match['teams']['home']['badge'] ?? '';
                        $awayBadge = $match['teams']['away']['badge'] ?? '';
                        
                        // Fix Badge URLs for Streami API
                        if ($homeBadge && strpos($homeBadge, 'http') === false) {
                            $homeBadge = 'https://streami.su/api/images/badge/' . $homeBadge . '.webp';
                        }
                        if ($awayBadge && strpos($awayBadge, 'http') === false) {
                            $awayBadge = 'https://streami.su/api/images/badge/' . $awayBadge . '.webp';
                        }
                    @endphp
                    <a href="/play/{{ $match['id'] }}" class="match-item block bg-gray-800 hover:bg-gray-750 rounded-xl p-4 transition-all border border-gray-700 hover:border-blue-500 group">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-4 flex-1">
                                <div class="text-gray-400 text-xs font-mono w-16 text-center">
                                    <span class="text-red-500 font-bold animate-pulse">LIVE</span>
                                </div>
                                <div class="flex flex-col gap-2 flex-1">
                                    <div class="flex items-center gap-3">
                                        <img src="{{ $homeBadge }}" class="w-6 h-6 object-contain" onerror="this.src='https://placehold.co/24x24/374151/E5E7EB?text=H'">
                                        <span class="font-medium text-white group-hover:text-blue-400 transition-colors">{{ $home }}</span>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <img src="{{ $awayBadge }}" class="w-6 h-6 object-contain" onerror="this.src='https://placehold.co/24x24/374151/E5E7EB?text=A'">
                                        <span class="font-medium text-white group-hover:text-blue-400 transition-colors">{{ $away }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center group-hover:bg-blue-600 transition-colors">
                                    <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"></path></svg>
                                </div>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="text-center text-gray-500 py-10">No live matches at the moment.</div>
                @endforelse
            </div>

            <!-- Today Matches -->
            <div id="tab-today" class="tab-content space-y-3 hidden">
                @forelse ($todayMatches as $match)
                    @php 
                        $home = $match['teams']['home']['name'] ?? 'Home';
                        $away = $match['teams']['away']['name'] ?? 'Away';
                        $homeBadge = $match['teams']['home']['badge'] ?? '';
                        $awayBadge = $match['teams']['away']['badge'] ?? '';
                        
                        if ($homeBadge && strpos($homeBadge, 'http') === false) {
                            $homeBadge = 'https://streami.su/api/images/badge/' . $homeBadge . '.webp';
                        }
                        if ($awayBadge && strpos($awayBadge, 'http') === false) {
                            $awayBadge = 'https://streami.su/api/images/badge/' . $awayBadge . '.webp';
                        }
                        $time = \Carbon\Carbon::createFromTimestampMs($match['date'])->format('H:i');
                    @endphp
                    <a href="/play/{{ $match['id'] }}" class="match-item block bg-gray-800 hover:bg-gray-750 rounded-xl p-4 transition-all border border-gray-700 hover:border-blue-500 group">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-4 flex-1">
                                <div class="text-gray-400 text-xs font-mono w-16 text-center bg-gray-700 rounded py-1">
                                    {{ $time }}
                                </div>
                                <div class="flex flex-col gap-2 flex-1">
                                    <div class="flex items-center gap-3">
                                        <img src="{{ $homeBadge }}" class="w-6 h-6 object-contain" onerror="this.src='https://placehold.co/24x24/374151/E5E7EB?text=H'">
                                        <span class="font-medium text-white group-hover:text-blue-400 transition-colors">{{ $home }}</span>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <img src="{{ $awayBadge }}" class="w-6 h-6 object-contain" onerror="this.src='https://placehold.co/24x24/374151/E5E7EB?text=A'">
                                        <span class="font-medium text-white group-hover:text-blue-400 transition-colors">{{ $away }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center group-hover:bg-blue-600 transition-colors">
                                    <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"></path></svg>
                                </div>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="text-center text-gray-500 py-10">No matches scheduled for today.</div>
                @endforelse
            </div>

            <!-- All Matches -->
            <div id="tab-all" class="tab-content space-y-3 hidden">
                @forelse ($allMatches as $match)
                    @php 
                        $home = $match['teams']['home']['name'] ?? 'Home';
                        $away = $match['teams']['away']['name'] ?? 'Away';
                        $homeBadge = $match['teams']['home']['badge'] ?? '';
                        $awayBadge = $match['teams']['away']['badge'] ?? '';
                        
                        if ($homeBadge && strpos($homeBadge, 'http') === false) {
                            $homeBadge = 'https://streami.su/api/images/badge/' . $homeBadge . '.webp';
                        }
                        if ($awayBadge && strpos($awayBadge, 'http') === false) {
                            $awayBadge = 'https://streami.su/api/images/badge/' . $awayBadge . '.webp';
                        }
                        $time = \Carbon\Carbon::createFromTimestampMs($match['date'])->format('H:i');
                        $date = \Carbon\Carbon::createFromTimestampMs($match['date'])->format('d M');
                    @endphp
                    <a href="play/{{ $match['id'] }}" class="match-item block bg-gray-800 hover:bg-gray-750 rounded-xl p-4 transition-all border border-gray-700 hover:border-blue-500 group">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-4 flex-1">
                                <div class="flex flex-col items-center justify-center w-16 text-center">
                                    <span class="text-gray-500 text-[10px] uppercase">{{ $date }}</span>
                                    <span class="text-gray-300 text-xs font-mono bg-gray-700 rounded px-1 py-0.5 mt-1">{{ $time }}</span>
                                </div>
                                <div class="flex flex-col gap-2 flex-1">
                                    <div class="flex items-center gap-3">
                                        <img src="{{ $homeBadge }}" class="w-6 h-6 object-contain" onerror="this.src='https://placehold.co/24x24/374151/E5E7EB?text=H'">
                                        <span class="font-medium text-white group-hover:text-blue-400 transition-colors">{{ $home }}</span>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <img src="{{ $awayBadge }}" class="w-6 h-6 object-contain" onerror="this.src='https://placehold.co/24x24/374151/E5E7EB?text=A'">
                                        <span class="font-medium text-white group-hover:text-blue-400 transition-colors">{{ $away }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center group-hover:bg-blue-600 transition-colors">
                                    <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"></path></svg>
                                </div>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="text-center text-gray-500 py-10">No matches found.</div>
                @endforelse
            </div>

        </div>


    <!-- Bottom Section: More News & Trending -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left: More News -->
        <div class="lg:col-span-2">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b border-gray-700 pb-2 gap-4 md:gap-0">
                <h2 class="text-xl md:text-2xl font-bold text-white mb-2 md:mb-0">More News</h2>
                <div class="flex flex-wrap gap-2 w-full md:w-auto">
                    <button class="bg-blue-600 text-white text-[10px] md:text-xs px-3 py-1 rounded hover:bg-blue-700 transition">All</button>
                    @foreach($categories->random(5) as $cat)
                    <a href="{{ url('/category/' . $cat->slug) }}" class="bg-gray-700 text-gray-300 text-[10px] md:text-xs px-3 py-1 rounded hover:bg-gray-600 transition">{{ $cat->name }}</a>
                    @endforeach
                </div>
            </div>

            <div class="space-y-6">
                @foreach($latestPosts->skip(4) as $post)
                <a href="{{ url('/post/' . $post->slug) }}" class="flex flex-col sm:flex-row gap-4 bg-gray-800 p-4 rounded-lg shadow hover:bg-gray-750 transition group block">
                    <div class="w-full sm:w-48 h-32 flex-shrink-0 overflow-hidden rounded">
                        <img src="{{ $post->image ?? 'https://placehold.co/300x200/1f2937/60a5fa?text=News' }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform">
                    </div>
                    <div class="flex-grow">
                        <div class="text-xs text-blue-400 mb-1">{{ $post->published_at->format('M d, Y') }}</div>
                        <h3 class="text-lg font-bold text-white mb-2 group-hover:text-blue-400 leading-tight">{{ $post->title }}</h3>
                        <p class="text-gray-400 text-sm line-clamp-2 mb-3">{{ $post->excerpt ?? Str::limit($post->content, 150) }}</p>
                        <div class="flex items-center gap-3 text-xs text-gray-500">
                            <span class="font-semibold text-gray-300">By Admin</span>
                            <span class="flex items-center gap-1">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg> 
                                {{ $post->category->name ?? 'General' }}
                            </span>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="mt-8 flex justify-center">
                {{ $latestPosts->onEachSide(1)->links() }}
            </div>
        </div>

        <!-- Right: Cricket-->
        <div class="lg:col-span-1">
            <div class="flex justify-between items-center mb-6 border-b border-gray-700 pb-2">
                <h2 class="text-xl font-bold text-white">Cricket</h2>
            </div>
            <div class="space-y-4">
                @foreach($cricketPosts as $post)
                <div class="flex gap-3 group cursor-pointer">
                    <a href="{{ url('/post/' . $post->slug) }}">
                    <div class="w-20 h-20 flex-shrink-0 overflow-hidden rounded bg-gray-800">
                        <img src="{{ $post->image ?? 'https://placehold.co/100x100/1f2937/60a5fa?text=Trend' }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform">
                    </div>
                    </a>
                    <div>
                        <a href="{{ url('/post/' . $post->slug) }}">
                        <h4 class="text-sm font-semibold text-white leading-snug group-hover:text-blue-400">{{ $post->title }}</h4>
                        </a>
                        <span class="text-xs text-gray-500 mt-1 block">{{ $post->category->name ?? 'News' }}</span>
                    </div>
                </div>
                @endforeach
            </div>

            
        <!-- Right: Other Sports-->
            <div class="flex justify-between items-center mb-6 border-b border-gray-700 pb-2">
                <h2 class="text-xl font-bold text-white">Other Sports</h2>
            </div>
            <div class="space-y-4">
                @foreach($otherPosts as $post)
                <div class="flex gap-3 group cursor-pointer">
                    <a href="{{ url('/post/' . $post->slug) }}">
                    <div class="w-20 h-20 flex-shrink-0 overflow-hidden rounded bg-gray-800">
                        <img src="{{ $post->image ?? 'https://placehold.co/100x100/1f2937/60a5fa?text=Trend' }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform">
                    </div>
                    </a>
                    <div>
                        <a href="{{ url('/post/' . $post->slug) }}">
                        <h4 class="text-sm font-semibold text-white leading-snug group-hover:text-blue-400">{{ $post->title }}</h4>
                        </a>
                        <span class="text-xs text-gray-500 mt-1 block">{{ $post->category->name ?? 'News' }}</span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

    </div>

    <script>
        function switchTab(tabId) {
            // Hide all tab contents
            document.querySelectorAll('.tab-content').forEach(el => {
                el.classList.add('hidden');
            });
            
            // Show selected tab content
            document.getElementById('tab-' + tabId).classList.remove('hidden');
            
            // Update tab buttons
            document.querySelectorAll('.tab-btn').forEach(btn => {
                // Reset to inactive state
                btn.className = 'tab-btn flex-1 py-2.5 text-sm font-medium rounded-lg focus:outline-none transition-colors text-gray-400 hover:text-white hover:bg-gray-700';
                
                // If this is the active button (based on onclick)
                if (btn.getAttribute('onclick').includes(tabId)) {
                    btn.className = 'tab-btn flex-1 py-2.5 text-sm font-medium rounded-lg focus:outline-none transition-colors text-white bg-blue-600 shadow';
                }
            });
        }
    </script>
@endsection