@extends('layouts.blog')

@section('meta_title', 'Search: ' . $query)
@section('meta_description', 'Search results for ' . $query)

@section('content')
{{-- Breadcrumb --}}
<nav aria-label="breadcrumb" class="blog-breadcrumb">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
        <li class="breadcrumb-item"><a href="{{ route('blog.index') }}">Blog</a></li>
        <li class="breadcrumb-item active">Search</li>
    </ol>
</nav>

<div class="row">
    {{-- Main Content --}}
    <div class="col-lg-8">
        <div class="mb-4">
            <h1 class="h2"><i class="ti ti-search me-2"></i>Search Results</h1>
            <p class="text-muted">{{ $posts->total() }} results for "<strong>{{ $query }}</strong>"</p>
        </div>

        <div class="row">
            @forelse($posts as $post)
                <div class="col-md-6 mb-4">
                    <div class="post-card h-100">
                        @if($post->featured_image_url)
                            <img src="{{ $post->featured_image_url }}" alt="{{ $post->title }}" loading="lazy">
                        @else
                            <img src="https://via.placeholder.com/400x200?text=No+Image" alt="{{ $post->title }}">
                        @endif
                        <div class="card-body">
                            @if($post->category)
                                <a href="{{ $post->category->url }}" class="category-badge">{{ $post->category->name }}</a>
                            @endif
                            <h3><a href="{{ $post->url }}">{{ $post->title }}</a></h3>
                            <p class="text-muted mb-3">{{ $post->excerpt }}</p>
                            <div class="meta d-flex justify-content-between">
                                <span><i class="ti ti-calendar me-1"></i>{{ $post->published_at->format('d M Y') }}</span>
                                <span><i class="ti ti-eye me-1"></i>{{ number_format($post->views_count) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-warning">
                        <h5>Tidak ditemukan hasil untuk "{{ $query }}"</h5>
                        <p class="mb-0">Coba kata kunci lain atau lihat posts populer di sidebar.</p>
                    </div>
                </div>
            @endforelse
        </div>

        {{-- Pagination --}}
        <div class="d-flex justify-content-center mt-4">
            {{ $posts->appends(['q' => $query])->links('vendor.pagination.blog') }}
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="col-lg-4">
        {{-- Search Box --}}
        <div class="sidebar-widget">
            <h4><i class="ti ti-search me-2"></i>Search Again</h4>
            <form action="{{ route('blog.search') }}" method="GET">
                <div class="input-group">
                    <input type="text" class="form-control" name="q" value="{{ $query }}" placeholder="Keywords...">
                    <button class="btn btn-primary" type="submit">
                        <i class="ti ti-search"></i>
                    </button>
                </div>
            </form>
        </div>

        {{-- Popular Posts --}}
        <div class="sidebar-widget">
            <h4><i class="ti ti-flame me-2"></i>Popular Posts</h4>
            @foreach($popularPosts as $popular)
                <div class="popular-post">
                    @if($popular->featured_image_url)
                        <img src="{{ $popular->featured_image_url }}" alt="{{ $popular->title }}">
                    @else
                        <img src="https://via.placeholder.com/60x60?text=No" alt="{{ $popular->title }}">
                    @endif
                    <div>
                        <h5><a href="{{ $popular->url }}">{{ Str::limit($popular->title, 50) }}</a></h5>
                        <small class="text-muted">{{ number_format($popular->views_count) }} views</small>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Tags --}}
        <div class="sidebar-widget">
            <h4><i class="ti ti-tags me-2"></i>Popular Tags</h4>
            <div class="tag-cloud">
                @foreach($popularTags as $tag)
                    <a href="{{ $tag->url }}">{{ $tag->name }}</a>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection