@extends('layouts.app')

@section('title', 'Search Sports - 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">Search</span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left Column: Search Results -->
        <div class="lg:col-span-2">
            <h1 class="text-3xl font-bold text-white mb-6 border-l-4 border-blue-500 pl-4">Search Results</h1>
            
            <!-- Search Form -->
            <form action="{{ route('sports.search') }}" method="GET" class="mb-8 relative">
                <input type="text" name="s" class="w-full bg-gray-800 text-white border border-gray-700 rounded-lg py-3 px-4 focus:outline-none focus:border-blue-500 shadow-md" placeholder="Search sports news..." value="{{ $query }}" required>
                <button class="absolute right-2 top-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-1.5 rounded transition" type="submit">Search</button>
            </form>

            @if($query)
                <p class="text-gray-400 mb-6">Results for: <strong class="text-white">"{{ $query }}"</strong></p>
                
                @if(isset($sportsData) && is_array($sportsData) && count($sportsData) > 0)
                    <div class="space-y-6">
                        @foreach($sportsData as $key => $item)
                            @if(isset($item['sports']) && $item['sports'] != null)
                                @php
                                    $link = route('sports.article', [
                                        'sport' => $item['sports'],
                                        'type' => $item['type'],
                                        'idsport' => $item['idsport'],
                                        'id' => $item['id'],
                                        'term' => $item['news'],
                                        'more' => $item['more'] ?? ''
                                    ]);
                                @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['poster'] ?? 'https://placehold.co/400x250/1f2937/60a5fa?text='.urlencode($item['title'] ?? 'News') }}" alt="{{ $item['title'] }}" 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">{{ strtoupper($item['sports']) }}</div>
                                        <h3 class="text-lg font-bold text-white mb-2 group-hover:text-blue-400 leading-tight">{{ $item['title'] }}</h3>
                                        <div class="flex items-center gap-3 text-xs text-gray-500">
                                            <span class="font-semibold text-gray-300">{{ $item['tag'] ?? 'Sports' }}</span>
                                        </div>
                                    </div>
                                </a>
                            @endif
                        @endforeach
                    </div>
                    
                    <!-- Pagination -->
                    @if(isset($sportsData['total_results']) && $sportsData['total_results'] > 19)
                        <div class="mt-10 flex justify-center">
                            <nav class="inline-flex rounded-md shadow-sm isolate" aria-label="Pagination">
                                @php
                                    $totalPages = ceil($sportsData['total_results'] / 20);
                                    $currentPage = $page;
                                @endphp
                                
                                @if($currentPage > 1)
                                    <a href="?s={{ urlencode($query) }}&page={{ $currentPage - 1 }}" 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
                                
                                @for($i = max(1, $currentPage - 2); $i <= min($totalPages, $currentPage + 2); $i++)
                                    <a href="?s={{ urlencode($query) }}&page={{ $i }}" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold {{ $i == $currentPage ? 'bg-blue-600 text-white focus-visible:outline-blue-600' : 'text-gray-400 ring-1 ring-inset ring-gray-700 hover:bg-gray-700' }} focus:z-20 focus:outline-offset-0">{{ $i }}</a>
                                @endfor
                                
                                @if($currentPage < $totalPages)
                                    <a href="?s={{ urlencode($query) }}&page={{ $currentPage + 1 }}" 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>
                    @endif
                @else
                    <div class="bg-gray-800 p-6 rounded-lg text-center text-gray-400">
                        <p>No sports news found for your search. Try different keywords.</p>
                    </div>
                @endif
            @else
                <div class="bg-gray-800 p-6 rounded-lg text-center text-gray-400">
                    <p>Enter a search term above to find sports news articles.</p>
                </div>
            @endif
        </div>

        <!-- Right Column: Sidebar -->
        <div class="lg:col-span-1 space-y-8">
            
            <!-- 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