@extends('layout.front.master')

@section('title', trans('Search Results for: :query', ['query' => $query]))
@section('meta_description', trans('Search results for news articles containing: :query', ['query' => $query]))

@section('content')
<div class="px-3 px-lg-5">
    <!-- Page Header -->
    <div class="page-header py-0 bg-primary px-3 px-xl-0 border-radius-2-top p-relative mb-5 overflow-hidden">
        <div class="overflow-hidden p-absolute top-0 left-0 bottom-0 h-100 w-100">
            <div class="custom-el-5 custom-pos-4">
                <img class="img-fluid opacity-2 opacity-hover-2" src="{{ asset('cd-project/img/demos/accounting-1/svg/waves.svg') }}" alt="">
            </div>
        </div>
        <div class="container p-relative z-index-1 py-2">
            <div class="row mh-200px mh-lg-300px align-items-center py-4">
                <div class="col">
                    <div class="appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="0">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ url('/') }}" class="text-light">{{ trans('Home') }}</a>
                                </li>
                                                                 <li class="breadcrumb-item">
                                     <a href="{{ route('frontend.news.index') }}" class="text-light">{{ trans('News') }}</a>
                                 </li>
                                <li class="breadcrumb-item active text-light" aria-current="page">
                                    {{ trans('Search Results') }}
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                        <h1 class="text-light text-10 font-weight-semibold line-height-1 mb-2">
                            {{ trans('Search Results') }}
                        </h1>
                        <p class="text-light text-4 mb-0">
                            {{ trans('Results for: ":query"', ['query' => $query]) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="my-5">
        <div class="row">
            <div class="col-lg-8">
                                 <!-- Search Form -->
                 <div class="mb-4">
                     <form action="{{ route('frontend.news.search') }}" method="GET" class="search-form">
                         <div class="input-group">
                             <input name="q" type="text" class="form-control form-control-lg"
                                    placeholder="{{ trans('Search news...') }}"
                                    value="{{ $query }}" required>
                             <button class="btn btn-primary btn-lg" type="submit">
                                 <i class="fas fa-search me-2"></i>{{ trans('Search') }}
                             </button>
                         </div>
                     </form>
                 </div>

                <!-- Results Count -->
                <div class="mb-4">
                    @if(is_countable($news))
                        <p class="text-muted">
                            {{ trans('Found :count results for ":query"', ['count' => $news->count(), 'query' => $query]) }}
                        </p>
                    @else
                        <p class="text-muted">
                            {{ trans('Found results for ":query"', ['query' => $query]) }}
                        </p>
                    @endif
                </div>

                <!-- Search Results -->
                @if($news && $news->count() > 0)
                                                     <div class="search-results">
                         @foreach($news as $article)
                             <article class="search-result-item mb-4 pb-4 border-bottom">
                                 <div class="row">
                                     <div class="col-12">
                                         <div class="result-content">
                                             <h3 class="result-title mb-2">
                                                 <a href="{{ route('frontend.news.show', $article->slug) }}"
                                                    class="text-decoration-none text-dark">
                                                     {{ $article->title }}
                                                 </a>
                                             </h3>
                                            <div class="result-meta mb-2">
                                                <span class="text-muted me-3">
                                                    <i class="fas fa-calendar-alt me-1"></i>
                                                    {{ $article->created_at->format('M d, Y') }}
                                                </span>
                                                @if($article->user)
                                                    <span class="text-muted">
                                                        <i class="fas fa-user me-1"></i>
                                                        {{ $article->user->name }}
                                                    </span>
                                                @endif
                                            </div>
                                                                                         <p class="result-excerpt text-muted mb-2">
                                                 {{ Str::limit(strip_tags($article->content), 150) }}
                                             </p>
                                             <a href="{{ route('frontend.news.show', $article->slug) }}"
                                                class="btn btn-outline-primary btn-sm">
                                                 {{ trans('Read More') }}
                                             </a>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>

                    <!-- Pagination for Collection -->
                    @if(method_exists($news, 'hasPages') && $news->hasPages())
                        <div class="row">
                            <div class="col">
                                <div class="d-flex justify-content-center">
                                    {{ $news->appends(request()->query())->links() }}
                                </div>
                            </div>
                        </div>
                    @endif
                @else
                    <!-- No Results -->
                    <div class="no-results text-center py-5">
                        <i class="fas fa-search fa-4x text-muted mb-4"></i>
                        <h3 class="text-4 font-weight-bold text-dark mb-3">
                            {{ trans('No Results Found') }}
                        </h3>
                                                 <p class="text-3 text-muted mb-4">
                             {{ trans('Sorry, no news articles match your search for ":query". Try different keywords or browse our latest news.', ['query' => $query]) }}
                         </p>
                         <a href="{{ route('frontend.news.index') }}" class="btn btn-primary">
                             {{ trans('Browse All News') }}
                         </a>
                    </div>
                @endif
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <aside class="sidebar">
                    <!-- Search Tips -->
                    <div class="px-3 mt-4">
                        <h5 class="text-5 font-weight-semi-bold">{{ trans('Search Tips') }}</h5>
                        <div class="pb-2 mb-1">
                            <ul class="list-unstyled text-3">
                                <li class="mb-2">{{ trans('Use specific keywords for better results') }}</li>
                                <li class="mb-2">{{ trans('Try different word variations') }}</li>
                                <li class="mb-2">{{ trans('Check spelling and try again') }}</li>
                                <li>{{ trans('Browse categories if search fails') }}</li>
                            </ul>
                        </div>
                    </div>

                    <!-- Recent News -->
                    @if($recentNews && $recentNews->count() > 0)
                        <div class="px-3 mt-4">
                            <h5 class="text-5 font-weight-semi-bold">{{ trans('Recent News') }}</h5>
                            <div class="pb-2 mb-1">
                                @foreach($recentNews as $recent)
                                    <div class="row mb-3">
                                        <div class="col">
                                            <div class="row align-items-center">
                                                <div class="col-auto pe-2">
                                                    <div class="date text-center">
                                                        <span class="day text-4 font-weight-bold text-dark d-block">{{ $recent->created_at->format('d') }}</span>
                                                        <span class="month text-1 text-uppercase">{{ $recent->created_at->format('M') }}</span>
                                                    </div>
                                                </div>
                                                                                                     <div class="col ps-1">
                                                         <h4 class="text-3 font-weight-medium letter-spacing-0 pt-1 mb-1">
                                                             <a href="{{ route('frontend.news.show', $recent->slug) }}" class="text-decoration-none">
                                                                 {{ Str::limit($recent->title, 45) }}
                                                             </a>
                                                         </h4>
                                                    <p class="mb-0 text-2 text-muted">{{ $recent->created_at->diffForHumans() }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                                         <!-- Popular Searches -->
                     <div class="px-3 mt-4">
                         <h5 class="text-5 font-weight-semi-bold">{{ trans('Quick Links') }}</h5>
                         <div class="pb-2 mb-1">
                             <a href="{{ route('frontend.news.index') }}" class="d-block py-1 text-decoration-none">
                                 {{ trans('Latest News') }}
                             </a>
                             <a href="{{ route('frontend.news.archive', ['year' => now()->year]) }}" class="d-block py-1 text-decoration-none">
                                 {{ trans('This Year Archive') }}
                             </a>
                             <a href="{{ route('frontend.news.rss') }}" class="d-block py-1 text-decoration-none" target="_blank">
                                 {{ trans('RSS Feed') }}
                             </a>
                         </div>
                     </div>
                </aside>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Highlight search terms in results
        var searchQuery = '{{ $query }}';
        if (searchQuery.length > 2) {
            $('.result-title, .result-excerpt').each(function() {
                var regex = new RegExp('(' + searchQuery + ')', 'gi');
                $(this).html($(this).html().replace(regex, '<mark>$1</mark>'));
            });
        }

        // Focus search input
        $('input[name="q"]').focus();
    });
</script>
@endsection