@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8 col-md-7 col-sm-12 order-lg-2 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
            <!-- Page Header -->
            <div class="page-header mb-5">
                <h1 class="display-5 fw-bold text-primary mb-3">
                    {{ __('navigation.advanced_search') }}
                </h1>
                <p class="lead text-muted">
                    {{ __('navigation.find_specific_news_articles_using_advanced_filters') }}
                </p>
            </div>

            <!-- Search Form -->
            <div class="search-form card border-0 shadow-sm mb-5">
                <div class="card-body p-4 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                    <form action="{{ route('news.advanced-search', ['locale' => app()->getLocale()]) }}" method="GET">
                        <div class="row g-3">
                            <!-- Keyword Search -->
                            <div class="col-md-12">
                                <label for="keyword" class="form-label fw-bold {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.keyword') }}</label>
                                <input type="text"
                                       id="keyword"
                                       name="keyword"
                                       class="form-control {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}"
                                       placeholder="{{ __('navigation.enter_keywords_to_search') }}"
                                       value="{{ request('keyword') }}">
                            </div>

                            <!-- Category Filter -->
                            <div class="col-md-6">
                                <label for="category" class="form-label fw-bold {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.category') }}</label>
                                <select id="category" name="category" class="form-select">
                                    <option value="">{{ __('navigation.all_categories') }}</option>
                                    @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Author Filter -->
                            <div class="col-md-6">
                                <label for="author" class="form-label fw-bold {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.author') }}</label>
                                <select id="author" name="author" class="form-select">
                                    <option value="">{{ __('navigation.all_authors') }}</option>
                                    @foreach($authors as $author)
                                    <option value="{{ $author->id }}" {{ request('author') == $author->id ? 'selected' : '' }}>
                                        {{ $author->full_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Date From -->
                            <div class="col-md-6">
                                <label for="date_from" class="form-label fw-bold {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.date_from') }}</label>
                                <input type="date"
                                       id="date_from"
                                       name="date_from"
                                       class="form-control"
                                       value="{{ request('date_from') }}">
                            </div>

                            <!-- Date To -->
                            <div class="col-md-6">
                                <label for="date_to" class="form-label fw-bold {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.date_to') }}</label>
                                <input type="date"
                                       id="date_to"
                                       name="date_to"
                                       class="form-control"
                                       value="{{ request('date_to') }}">
                            </div>

                            <!-- Submit Button -->
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary btn-lg {{ app()->getLocale() === 'ar' ? 'me-0 ms-2' : 'me-2' }}">
                                    <i class="fas fa-search {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"></i>{{ __('navigation.search') }}
                                </button>
                                <a href="{{ route('news', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-secondary btn-lg">
                                    <i class="fas fa-times {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"></i>{{ __('navigation.clear_filters') }}
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Search Results -->
            <div class="search-results {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                <div class="d-flex justify-content-between align-items-center mb-4 {{ app()->getLocale() === 'ar' ? 'flex-row-reverse' : '' }}">
                    <h3 class="h4 fw-bold mb-0 text-primary {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                        {{ __('navigation.search_results') }}
                        @if($news->count() > 0)
                        <span class="badge bg-primary {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}">{{ $news->total() }}</span>
                        @endif
                    </h3>
                </div>

                @forelse($news as $newsItem)
                <article class="news-item card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <div class="row align-items-center">
                            <div class="col-md-3">
                                <img src="{{ $newsItem->featured_image ?: '/assets/images/news/default.jpg' }}"
                                     class="img-fluid rounded"
                                     alt="{{ $newsItem->title }}"
                                     style="height: 150px; width: 100%; object-fit: cover;">
                            </div>
                            <div class="col-md-9">
                                <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: {{ $newsItem->category->color }}; color: white;">
                                        {{ $newsItem->category->name }}
                                    </span>
                                    <small class="text-muted">
                                        <i class="fas fa-calendar {{ app()->getLocale() === 'ar' ? 'ms-1' : 'me-1' }}"></i>
                                        {{ $newsItem->published_at->format('M j, Y') }}
                                    </small>
                                    @if($newsItem->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>
                                        {{ $newsItem->read_time }} min read
                                    </small>
                                    @endif
                                </div>

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

                                <p class="text-muted mb-3 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                    {{ $newsItem->excerpt }}
                                </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($newsItem->author)->avatar ?? '/assets/images/avatars/default.jpg' }}"
                                             class="rounded-circle {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"
                                             width="32"
                                             height="32"
                                             alt="{{ optional($newsItem->author)->full_name ?? 'Unknown' }}">
                                        <small class="text-muted">
                                            {{ __('navigation.by') }} {{ optional($newsItem->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>{{ $newsItem->views_count }}
                                        </span>
                                        <a href="{{ route('news.show', ['locale' => app()->getLocale(), 'slug' => $newsItem->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 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.no_results_found') }}</h4>
                    <p class="text-muted {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.try_adjusting_your_search_criteria') }}</p>
                    <a href="{{ route('news', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                        {{ __('navigation.view_all_news') }}
                    </a>
                </div>
                @endforelse

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

        <!-- Sidebar -->
        <div class="col-lg-4 col-md-5 col-sm-12 order-lg-1 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
            @include('frontend.news.partials.sidebar')
        </div>
    </div>
</div>
@endsection