@extends('layouts.app')

@section('content')
<div class="header">
    <div class="container">

        <div class="row">
            <!-- Sidebar - Right for Arabic, Left for English -->
            <div class="col-lg-3 col-md-3 col-sm-12 {{ app()->getLocale() === 'en' ? 'order-lg-2 order-md-2 order-sm-2' : 'order-lg-1 order-md-1 order-sm-1' }}">
                @include('frontend.blog.partials.sidebar')
            </div>

            <!-- Main Content - Left for Arabic, Right for English -->
            <div class="col-lg-9 col-md-9 col-sm-12 mt-5 {{ app()->getLocale() === 'en' ? 'order-lg-1 order-md-1 order-sm-1 text-left' : 'order-lg-2 order-md-2 order-sm-2 text-right' }}">
                <!-- Search Header -->
                <div class="search-header mb-4">
                    <div class="d-flex align-items-center mb-3 {{ app()->getLocale() === 'ar' ? 'flex-row-reverse justify-content-end' : '' }}">
                        <span class="badge fs-6 bg-primary {{ app()->getLocale() === 'ar' ? 'ms-3' : 'me-3' }}">
                            <i class="fas fa-search {{ app()->getLocale() === 'ar' ? 'ms-1' : 'me-1' }}"></i>
                            {{ __('navigation.search_results') }}
                        </span>
                    </div>

                    <h1 class="display-6 fw-bold text-dark mb-3 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                        {{ __('navigation.search_results_for') }}: "{{ $searchQuery }}"
                    </h1>

                    <p class="text-muted {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                        {{ __('navigation.found_count_results', ['count' => $blogs->total()]) }}
                    </p>
                </div>

                <!-- Breadcrumb -->
                <nav aria-label="breadcrumb" class="mb-4">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home', ['locale' => app()->getLocale()]) }}">{{ __('navigation.home') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('blog', ['locale' => app()->getLocale()]) }}">{{ __('navigation.blog') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('navigation.search_results') }}</li>
                    </ol>
                </nav>

                <!-- Search Form -->
                <div class="search-form mb-4">
                    <form action="{{ route('blog.search', ['locale' => app()->getLocale()]) }}" method="GET">
                        <div class="input-group {{ app()->getLocale() === 'ar' ? 'flex-row-reverse' : '' }}">
                            <input type="text"
                                   name="q"
                                   class="form-control form-control-lg {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}"
                                   placeholder="{{ __('navigation.search_blog_posts') }}"
                                   value="{{ $searchQuery }}"
                                   required>
                            <button class="btn btn-primary" type="submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Blog Posts List -->
                <div class="blog-posts">
                    @forelse($blogs as $blog)
                    <article class="blog-item card border-0 shadow-sm mb-4">
                        <div class="card-body p-4">
                            <div class="row align-items-center {{ app()->getLocale() === 'ar' ? 'flex-row-reverse' : '' }}">
                                <div class="col-md-4">
                                    <img src="{{ $blog->featured_image ?: '/assets/images/blog/default.jpg' }}"
                                         class="img-fluid rounded"
                                         alt="{{ $blog->title }}"
                                         style="height: 200px; width: 100%; object-fit: cover;">
                                </div>
                                <div class="col-md-8 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                    <div class="d-flex align-items-center mb-2 {{ app()->getLocale() === 'ar' ? 'flex-row-reverse justify-content-end' : '' }}">
                                        <span class="badge {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"
                                              style="background-color: {{ $blog->category->color ?? '#007bff' }}; color: white;">
                                            {{ $blog->category->name }}
                                        </span>
                                        <small class="text-muted">
                                            <i class="fas fa-calendar {{ app()->getLocale() === 'ar' ? 'ms-1' : 'me-1' }}"></i>
                                            {{ $blog->published_at->format('M j, Y') }}
                                        </small>
                                        @if($blog->read_time)
                                        <small class="text-muted {{ app()->getLocale() === 'ar' ? 'me-3' : 'ms-3' }}">
                                            <i class="fas fa-clock {{ app()->getLocale() === 'ar' ? 'ms-1' : 'me-1' }}"></i>
                                            {{ $blog->read_time }} min read
                                        </small>
                                        @endif
                                    </div>

                                    <h4 class="h5 fw-bold mb-3 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                        <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => $blog->slug]) }}"
                                           class="text-dark text-decoration-none">
                                            {!! highlightSearchTerm($blog->title, $searchQuery) !!}
                                        </a>
                                    </h4>

                                    <p class="text-muted mb-3 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                        {!! highlightSearchTerm($blog->summary, $searchQuery) !!}
                                    </p>

                                    <div class="d-flex justify-content-between align-items-center {{ app()->getLocale() === 'ar' ? 'flex-row-reverse' : '' }}">
                                        <div class="d-flex align-items-center {{ app()->getLocale() === 'ar' ? 'flex-row-reverse' : '' }}">
                                            <img src="{{ optional($blog->author)->avatar ?? '/assets/images/avatars/default.jpg' }}"
                                                 class="rounded-circle {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"
                                                 width="32"
                                                 height="32"
                                                 alt="{{ optional($blog->author)->full_name ?? 'Unknown' }}">
                                            <small class="text-muted">
                                                {{ __('navigation.by') }} {{ optional($blog->author)->full_name ?? 'Unknown' }}
                                            </small>
                                        </div>
                                        <div class="d-flex gap-2 {{ app()->getLocale() === 'ar' ? 'flex-row-reverse' : '' }}">
                                            <span class="text-muted small">
                                                <i class="fas fa-eye {{ app()->getLocale() === 'ar' ? 'ms-1' : 'me-1' }}"></i>{{ $blog->views_count }}
                                            </span>
                                            <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => $blog->slug]) }}"
                                               class="btn btn-outline-primary btn-sm">
                                                {{ __('navigation.read_more') }}
                                                <i class="fas fa-arrow-{{ app()->getLocale() === 'ar' ? 'left' : 'right' }} {{ app()->getLocale() === 'ar' ? 'me-1' : 'ms-1' }}"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                    @empty
                    <div class="text-center py-5 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                        <i class="fas fa-search fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">{{ __('navigation.no_search_results') }}</h4>
                        <p class="text-muted">{{ __('navigation.try_different_keywords') }}</p>
                        <div class="mt-3">
                            <a href="{{ route('blog', ['locale' => app()->getLocale()]) }}" class="btn btn-primary me-2">
                                {{ __('navigation.view_all_posts') }}
                            </a>
                            <a href="{{ route('blog.search', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-primary">
                                {{ __('navigation.new_search') }}
                            </a>
                        </div>
                    </div>
                    @endforelse

                    <!-- Pagination -->
                    @if($blogs->hasPages())
                    <div class="d-flex justify-content-center mt-5">
                        {{ $blogs->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@php
function highlightSearchTerm($text, $searchTerm) {
    if (empty($searchTerm)) {
        return $text;
    }

    $searchTerm = preg_quote($searchTerm, '/');
    $pattern = '/(' . $searchTerm . ')/i';

    return preg_replace($pattern, '<mark class="bg-warning">$1</mark>', $text);
}
@endphp