@extends('layouts.app')

@section('title', $pagename . ' - Sports Portal')

@section('content')
    <!-- Breadcrumb -->
    <nav class="flex mb-6 text-sm text-gray-400" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ url('/') }}" class="inline-flex items-center hover:text-white">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
                    Home
                </a>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="ml-1 text-gray-100 md:ml-2 font-medium">{{ ucwords($pagename) }}</span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left Column: News List -->
        <div class="lg:col-span-2">
            <h1 class="text-3xl font-bold text-white mb-6 border-l-4 border-blue-500 pl-4">{{ ucwords($pagename) }} News</h1>
            
            @php
                $articles = $sportsData['items'] ?? null;
                if ($articles === null && is_array($sportsData)) {
                    $articles = array_values(array_filter($sportsData, function($item) {
                        return is_array($item) && isset($item['sports']) && $item['sports'] != null;
                    }));
                } elseif (is_array($articles)) {
                    $articles = array_values(array_filter($articles, function($item) {
                        return is_array($item) && isset($item['sports']) && $item['sports'] != null;
                    }));
                } else {
                    $articles = [];
                }
                
            @endphp

            @if(count($articles) > 0)
            <div class="space-y-6">
                @foreach($articles as $key => $item)
                    @if($key >= 20) @break @endif
                    @php
                  //  echo json_encode($item);
                        $link = '#';
                        $sport = !empty($item['sports']) ? $item['sports'] : 'sports';
                        $type = !empty($item['type']) ? $item['type'] : false;
                        $idsport = !empty($item['idsport']) ? $item['idsport'] : ($id ?? '0');
                        $itemId = !empty($item['id']) ? $item['id'] : '0';
                        $newsTerm = !empty($item['news']) ? $item['news'] : 'article';

                        if (isset($item['link']) && str_contains($item['link'], '/more-sport/')) {
                            $type = 'more';
                        } elseif ($type === false) {
                            $type = 'report';
                        }
                        if ($type === 'report') {
                             $idsport = $id;
                        }
                        
                          switch ($type) {
                                case 'news':
                                        $link =route('sports.article', [
                                    'sport' => $sport,
                                    'type' => $type,
                                    'idsport' => $idsport,
                                    'id' => $itemId,
                                    'term' => $newsTerm
                                    ]);
                                    break;
                                case 'report':
                                        $link =route('sports.article', [
                                    'sport' => $sport,
                                    'type' => $type,
                                    'idsport' => $id,
                                    'id' => $itemId,
                                    'term' => $newsTerm
                                    ]);
                                    break;
                                case 'video':
                                        $link =route('sports.article', [
                                    'sport' => $sport,
                                    'type' => $type,
                                    'idsport' => $idsport,
                                    'id' => $itemId,
                                    'term' => $newsTerm
                                    ]);
                                case 'live-blog':
                                        $link =route('sports.article', [
                                    'sport' => $sport,
                                    'type' => $type,
                                    'idsport' => $idsport,
                                    'id' => $itemId,
                                    'term' => $newsTerm
                                    ]);
                                    break;
                                
                                default:
                                    $link =route('sports.article', [
                                    'sport' => $sport,
                                    'type' => $type,
                                    'idsport' => $idsport,
                                    'id' => $itemId,
                                    'term' => $newsTerm
                                    ]);
                                    break;
                            }
                    @endphp

                <a href="{{ $link }}" 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="{{ $item['image'] ?? 'https://placehold.co/400x250/1f2937/60a5fa?text='.urlencode($item['title'] ?? 'News') }}" alt="{{ $item['title'] ?? '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">{{ $item['tag'] ?? 'Sports' }}</div>
                        <h3 class="text-lg font-bold text-white mb-2 group-hover:text-blue-400 leading-tight">{{ $item['title'] ?? 'Untitled' }}</h3>
                        <div class="flex items-center gap-3 text-xs text-gray-500">
                            <span class="font-semibold text-gray-300">By Admin</span>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>

            <!-- Pagination -->
            @php
                $currentPage = $page ?? 1;
                $hasNext = $sportsData['next'] ?? false;
            @endphp
            <div class="mt-10 flex justify-center">
                 <nav class="inline-flex rounded-md shadow-sm isolate" aria-label="Pagination">
                    @if($currentPage > 1)
                        <a href="{{ route('sports.category', ['page' => $currentPage - 1, 'category' => $term, 'id' => $id]) }}" class="relative inline-flex items-center rounded-l-md px-4 py-2 text-sm font-semibold text-gray-400 ring-1 ring-inset ring-gray-700 hover:bg-gray-700 focus:z-20 focus:outline-offset-0">Previous</a>
                    @endif
                    
                    <span class="relative z-10 inline-flex items-center bg-blue-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">{{ $currentPage }}</span>
                    
                    @if($hasNext || count($articles) >= 20)
                        <a href="{{ route('sports.category', ['page' => $currentPage + 1, 'category' => $term, 'id' => $id]) }}" class="relative inline-flex items-center rounded-r-md px-4 py-2 text-sm font-semibold text-gray-400 ring-1 ring-inset ring-gray-700 hover:bg-gray-700 focus:z-20 focus:outline-offset-0">Next</a>
                    @endif
                </nav>
            </div>
            @else
            <div class="bg-gray-800 p-6 rounded-lg text-center text-gray-400">
                <p>No sports news found.</p>
            </div>
            @endif
        </div>

        <!-- Right Column: Sidebar -->
        <div class="lg:col-span-1 space-y-8">
            
            <!-- Search Widget -->
            <div class="bg-gray-800 p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-bold text-white mb-4">Search</h3>
                <form action="{{ route('sports.search') }}" method="GET" class="relative">
                    <input type="text" name="s" placeholder="Search sports..." class="w-full bg-gray-700 text-white border border-gray-600 rounded-lg py-2 px-4 focus:outline-none focus:border-blue-500">
                    <button type="submit" class="absolute right-2 top-2 text-gray-400 hover:text-white">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    </button>
                </form>
            </div>

            <!-- Categories Widget -->
            <div class="bg-gray-800 p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-bold text-white mb-4">Categories</h3>
                <ul class="space-y-2">
                    @foreach($categories as $cat)
                    <li>
                        <a href="{{ url('/category/' . $cat->slug) }}" class="text-gray-300 hover:text-blue-400 flex justify-between">
                            <span>{{ $cat->name }}</span> 
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>

        </div>

    </div>
@endsection
