@extends('layouts.app')

@section('content')
<!-- Page Header Start -->
<div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
    <div class="container text-center">
        <h1 class="display-4 text-white animated slideInDown mb-4">{{ __('news.title') }}</h1>
        <nav aria-label="breadcrumb animated slideInDown">
            <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item"><a class="text-white" href="/">{{ __('nav.home') }}</a></li>
                <li class="breadcrumb-item text-primary active" aria-current="page">{{ __('news.title') }}</li>
            </ol>
        </nav>
    </div>
</div>
<!-- Page Header End -->

<div class="container-xxl py-6">
    <div class="container">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-9 col-md-9 col-sm-12">
                <!-- Search Bar -->
                <div class="row mb-4 wow fadeIn" data-wow-delay="0.1s">
                    <div class="col-md-8">
                        <form action="{{ route('news', ['locale' => app()->getLocale()]) }}" method="GET">
                            <div class="input-group">
                                <input type="text"
                                       name="search"
                                       class="form-control form-control-lg p-3 border-0"
                                       placeholder="{{ __('navigation.search_news') }}"
                                       value="{{ request('search') }}"
                                       style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                                <button class="btn btn-primary" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Featured News Slider -->
                @if($featuredNews->count() > 0)
                <div class="featured-news mb-5 wow fadeIn" data-wow-delay="0.1s">
                    <h3 class="h4 fw-bold mb-4" style="{{ app()->getLocale() === 'ar' ? 'text-align: right;' : 'text-align: left;' }}">
                        @if(app()->getLocale() === 'ar')
                            <i class="fas fa-star ms-2"></i>{{ __('navigation.featured_news') }}
                        @else
                            <i class="fas fa-star me-2"></i>{{ __('navigation.featured_news') }}
                        @endif
                    </h3>
                    <div id="featuredCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
                        <div class="carousel-inner">
                            @foreach($featuredNews as $index => $newsItem)
                            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                <div class="courses-item d-flex flex-column bg-light overflow-hidden h-100 shadow">
                                    <div class="text-center p-4 pt-0" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                                        <div class="d-inline-block bg-primary text-white fs-5 py-1 px-4 mb-4">{{ $newsItem->category->name }}</div>
                                        @if($newsItem->is_pinned)
                                        <div class="d-inline-block bg-warning text-white fs-5 py-1 px-4 mb-4 {{ app()->getLocale() === 'ar' ? 'me-1' : 'ms-1' }}">
                                            <i class="fas fa-thumbtack"></i> {{ __('navigation.pinned') }}
                                        </div>
                                        @endif
                                        <h4 class="card-title fw-bold mb-3" style="{{ app()->getLocale() === 'ar' ? 'text-align: right;' : 'text-align: left;' }}">
                                            <a href="{{ route('news.show', ['locale' => app()->getLocale(), 'slug' => $newsItem->slug]) }}"
                                               class="text-dark text-decoration-none">
                                                {{ $newsItem->title }}
                                            </a>
                                        </h4>
                                        <p class="card-text text-muted mb-3" style="{{ app()->getLocale() === 'ar' ? 'text-align: right;' : 'text-align: left;' }}">
                                            {{ Str::limit($newsItem->excerpt, 150) }}
                                        </p>
                                        <ol class="breadcrumb justify-content-center mb-0">
                                            <li class="breadcrumb-item small">
                                                <i class="fa fa-calendar-alt text-primary {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"></i>
                                                {{ $newsItem->published_at->diffForHumans() }}
                                            </li>
                                        </ol>
                                    </div>
                                    <div class="position-relative mt-auto">
                                        <img class="img-fluid" src="{{ $newsItem->featured_image ?: '/assets/images/news/default.jpg' }}"
                                             alt="{{ $newsItem->title }}"
                                             style="object-fit: cover; min-height: 300px;">
                                        <div class="courses-overlay">
                                            <a class="btn btn-outline-primary border-2" href="{{ route('news.show', ['locale' => app()->getLocale(), 'slug' => $newsItem->slug]) }}">
                                                {{ __('navigation.read_more') }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <a class="carousel-control-prev" href="#featuredCarousel" role="button" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#featuredCarousel" role="button" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </a>
                    </div>
                </div>
                @endif

                <!-- News List -->
                <div class="news-list">
                    <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
                        <h6 class="text-primary text-uppercase mb-2">{{ __('navigation.latest_news') }}</h6>
                        <h1 class="display-6 mb-4">{{ __('navigation.latest_news') }}</h1>
                    </div>
                    <div class="row g-4 justify-content-center">
                        @forelse($news as $newsItem)
                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                            <div class="courses-item d-flex flex-column bg-light overflow-hidden h-100">
                                <div class="text-center p-4 pt-0" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                                    <h5 class="mb-3">{{ $newsItem->title }}</h5>
                                    <p>{{ Str::limit($newsItem->excerpt, 150) }}</p>
                                    <ol class="breadcrumb justify-content-center mb-0">
                                        <li class="breadcrumb-item small">
                                            <i class="fa fa-signal text-primary {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"></i>
                                            {{ $newsItem->category->name }}
                                        </li>
                                        <li class="breadcrumb-item small">
                                            <i class="fa fa-calendar-alt text-primary {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"></i>
                                            {{ $newsItem->published_at->format('M j, Y') }}
                                        </li>
                                        @if($newsItem->read_time)
                                        <li class="breadcrumb-item small">
                                            <i class="fa fa-clock text-primary {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"></i>
                                            {{ $newsItem->read_time }} {{ __('news.min_read') }}
                                        </li>
                                        @endif
                                    </ol>
                                </div>
                                <div class="position-relative mt-auto">
                                    <img class="img-fluid" src="{{ $newsItem->featured_image ?: '/assets/images/news/default.jpg' }}"
                                         alt="{{ $newsItem->title }}"
                                         style="height: 200px; object-fit: cover;">
                                    <div class="courses-overlay">
                                        <a class="btn btn-outline-primary border-2" href="{{ route('news.show', ['locale' => app()->getLocale(), 'slug' => $newsItem->slug]) }}">
                                            {{ __('news.read_more') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="text-center py-5" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                            <i class="fas fa-newspaper fa-4x text-muted mb-3"></i>
                            <h4 class="text-muted">{{ __('navigation.no_news_articles_found') }}</h4>
                            <p class="text-muted">{{ __('navigation.check_back_later_for_updates') }}</p>
                            <a href="{{ route('news', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                                {{ __('navigation.view_all_news') }}
                            </a>
                        </div>
                        @endforelse
                    </div>
                    <!-- Pagination -->
                    @if($news->hasPages())
                    <div class="d-flex {{ app()->getLocale() === 'ar' ? 'justify-content-start' : 'justify-content-center' }} mt-5">
                        {{ $news->onEachSide(1)->links('pagination::bootstrap-5') }}
                    </div>
                    @endif
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-3 col-md-3 col-sm-12">
                @include('frontend.news.partials.sidebar')
            </div>
        </div>
    </div>
</div>
@endsection