@extends('layouts.app')

@section('title', $query ? 'Search results for "' . $query . '"' : 'Search')
@section('meta_description', 'Search AIT Broadcasting Network for news, articles and videos')

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

        {{-- MAIN COLUMN --}}
        <div>
            {{-- SEARCH BOX --}}
            <div class="bg-white border border-[#e2e2dc] rounded overflow-hidden mb-5">
                <div class="p-5">
                    <h1 class="text-xl font-bold text-[#111110] font-serif mb-4">
                        Search AIT Broadcasting Network
                    </h1>
                    <form action="{{ route('search') }}" method="GET">
                        <div class="flex gap-2">
                            <input
                                type="text"
                                name="q"
                                value="{{ $query }}"
                                placeholder="Search news, articles, videos..."
                                class="flex-1 border border-[#e2e2dc] rounded px-4 py-2 text-sm text-gray-700 outline-none focus:border-[#0a3828] transition"
                            >
                            <button type="submit" class="bg-[#0a3828] text-white text-sm font-bold px-6 py-2 rounded hover:bg-[#0d4a33] transition">
                                Search
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- SEARCH RESULTS --}}
            @if($query)
                <div class="flex items-center justify-between mb-3">
                    <div class="text-sm text-gray-500">
                        @if($articles->total() > 0)
                            Found <strong>{{ $articles->total() }}</strong> results for
                            <strong>"{{ $query }}"</strong>
                        @else
                            No results found for <strong>"{{ $query }}"</strong>
                        @endif
                    </div>
                </div>

                @if($articles->count() > 0)
                    <div class="flex flex-col gap-3 mb-5">
                        @foreach($articles 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-36 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 object-center">
                                    @endif
                                </div>
                                <div class="p-4 flex-1">
                                    <div class="flex items-center gap-2 mb-1">
                                        @if($article->category)
                                            <span class="text-[8.5px] font-bold tracking-widest uppercase" style="color:{{ $article->category->color }}">
                                                {{ $article->category->name }}
                                            </span>
                                        @endif
                                        @if($article->region)
                                            <span class="text-[8.5px] text-gray-400">·</span>
                                            <span class="text-[8.5px] font-bold tracking-widest uppercase text-gray-500">
                                                {{ $article->region->flag_emoji }} {{ $article->region->name }}
                                            </span>
                                        @endif
                                    </div>
                                    <div class="text-base font-bold text-[#111110] font-serif leading-tight mb-1">
                                        {{ $article->title }}
                                    </div>
                                    <div class="text-xs text-[#3d3d3a] leading-relaxed mb-2">
                                        {{ Str::limit($article->excerpt, 200) }}
                                    </div>
                                    <div class="text-[9.5px] text-[#767670]">
                                        {{ $article->author?->name ?? 'AIT Newsroom' }}
                                        · {{ $article->published_at_human }}
                                        · {{ $article->reading_time_label }}
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>

                    {{-- PAGINATION --}}
                    <div class="mt-4">
                        {{ $articles->links() }}
                    </div>
                @else
                    <div class="bg-white border border-[#e2e2dc] rounded p-8 text-center">
                        <div class="text-gray-400 text-sm mb-2">
                            No articles found for "{{ $query }}".
                        </div>
                        <div class="text-gray-400 text-xs">
                            Try different keywords or browse by category using the navigation above.
                        </div>
                    </div>
                @endif
            @endif
        </div>

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

    </div>
</div>
@endsection