@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">{{ __('navigation.blog.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="{{ route('home', ['locale' => app()->getLocale()]) }}">{{ __('home.title') }}</a></li>
                
                <li class="breadcrumb-item text-primary active" aria-current="page">{{ __('navigation.blog.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('blog', ['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_blog') }}"
                                       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 Blog Posts Slider -->
                @if($featuredBlogs->count() > 0)
                <div class="featured-blogs mb-5 wow fadeIn" data-wow-delay="0.2s">
                    <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_posts') }}
                        @else
                            <i class="fas fa-star me-2"></i>{{ __('navigation.featured_posts') }}
                        @endif
                    </h3>
                    <div id="featuredCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
                        <div class="carousel-inner">
                            @foreach($featuredBlogs as $index => $blog)
                            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                <div class="card featured-card border-0 shadow-lg">
                                    <div class="row g-0" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: row-reverse;' : '' }}">
                                        <div class="col-md-6">
                                            <img src="{{ $blog->featured_image ?: '/assets/images/blog/default.jpg' }}"
                                                 class="img-fluid h-100 w-100"
                                                 alt="{{ $blog->title }}"
                                                 style="object-fit: cover; min-height: 300px;">
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card-body p-4 d-flex flex-column h-100" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                                                <div class="mb-2" style="{{ app()->getLocale() === 'ar' ? 'display: flex; justify-content: flex-end;' : '' }}">
                                                    <span class="badge"
                                                          style="background-color: {{ $blog->category->color ?? '#007bff' }}; color: white;">
                                                        {{ $blog->category->name }}
                                                    </span>
                                                    @if($blog->is_pinned)
                                                    <span class="badge bg-warning" style="{{ app()->getLocale() === 'ar' ? 'margin-right: 0.25rem; margin-left: 0;' : 'margin-left: 0.25rem; margin-right: 0;' }}">
                                                        <i class="fas fa-thumbtack"></i> {{ __('navigation.pinned') }}
                                                    </span>
                                                    @endif
                                                </div>
                                                <h4 class="card-title fw-bold mb-3">
                                                    <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => $blog->slug]) }}"
                                                       class="text-dark text-decoration-none">
                                                        {{ $blog->title }}
                                                    </a>
                                                </h4>
                                                <p class="card-text text-muted flex-grow-1">
                                                    {{ Str::limit($blog->summary, 150) }}
                                                </p>
                                                <div class="d-flex justify-content-between align-items-center mt-auto" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: row-reverse;' : '' }}">
                                                    <small class="text-muted">
                                                        <i class="fas fa-clock" style="{{ app()->getLocale() === 'ar' ? 'margin-right: 0.25rem; margin-left: 0;' : 'margin-left: 0.25rem; margin-right: 0;' }}"></i>
                                                        {{ $blog->published_at->diffForHumans() }}
                                                    </small>
                                                    <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => $blog->slug]) }}"
                                                       class="btn btn-primary btn-sm">
                                                        {{ __('navigation.read_more') }}
                                                    </a>
                                                </div>
                                            </div>
                                        </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

                <!-- Blog Posts List -->
                <div class="blog-posts">
                    <div class="d-flex justify-content-between align-items-center mb-4 wow fadeIn" data-wow-delay="0.3s" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: row-reverse;' : '' }}">
                        <h3 class="h4 fw-bold mb-0" style="{{ app()->getLocale() === 'ar' ? 'text-align: right;' : 'text-align: left;' }}">
                            {{ __('navigation.latest_posts') }}
                        </h3>
                        <div class="text-muted small" style="{{ app()->getLocale() === 'ar' ? 'text-align: right;' : 'text-align: left;' }}">
                            {{ __('navigation.showing_count_posts', ['count' => $blogs->count()]) }}
                        </div>
                    </div>

                    @forelse($blogs as $blog)
                    <article class="blog-item card border-0 shadow-sm mb-4 wow fadeInUp" data-wow-delay="0.{{ $loop->iteration + 3 }}s">
                        <div class="card-body p-4">
                            <div class="row align-items-center" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: 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" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                                    <div class="d-flex align-items-center mb-2" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: row-reverse; justify-content: flex-end;' : '' }}">
                                        <span class="badge"
                                              style="background-color: {{ $blog->category->color ?? '#007bff' }}; color: white; {{ app()->getLocale() === 'ar' ? 'margin-left: 0.5rem; margin-right: 0;' : 'margin-right: 0.5rem; margin-left: 0;' }}">
                                            {{ $blog->category->name }}
                                        </span>
                                        <small class="text-muted">
                                            <i class="fas fa-calendar" style="{{ app()->getLocale() === 'ar' ? 'margin-right: 0.25rem; margin-left: 0;' : 'margin-left: 0.25rem; margin-right: 0;' }}"></i>
                                            {{ $blog->published_at->format('M j, Y') }}
                                        </small>
                                        @if($blog->read_time)
                                        <small class="text-muted" style="{{ app()->getLocale() === 'ar' ? 'margin-right: 1rem; margin-left: 0;' : 'margin-left: 1rem; margin-right: 0;' }}">
                                            <i class="fas fa-clock" style="{{ app()->getLocale() === 'ar' ? 'margin-right: 0.25rem; margin-left: 0;' : 'margin-left: 0.25rem; margin-right: 0;' }}"></i>
                                            {{ $blog->read_time }} {{ __('blog.min_read') }}
                                        </small>
                                        @endif
                                    </div>

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

                                    <p class="text-muted mb-3">
                                        {{ $blog->summary }}
                                    </p>

                                    <div class="d-flex justify-content-between align-items-center" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: row-reverse;' : '' }}">
                                        <div class="d-flex align-items-center" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: row-reverse;' : '' }}">
                                            <img src="{{ optional($blog->author)->avatar ?? '/assets/images/avatars/default.jpg' }}"
                                                 class="rounded-circle"
                                                 style="width: 32px; height: 32px; {{ app()->getLocale() === 'ar' ? 'margin-right: 0; margin-left: 0.5rem;' : 'margin-left: 0; margin-right: 0.5rem;' }}"
                                                 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" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: row-reverse;' : '' }}">
                                            <span class="text-muted small">
                                                <i class="fas fa-eye" style="{{ app()->getLocale() === 'ar' ? 'margin-right: 0.25rem; margin-left: 0;' : 'margin-left: 0.25rem; margin-right: 0;' }}"></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') }}
                                                @if(app()->getLocale() === 'ar')
                                                    <i class="fas fa-arrow-left" style="margin-right: 0.25rem; margin-left: 0;"></i>
                                                @else
                                                    <i class="fas fa-arrow-right" style="margin-left: 0.25rem; margin-right: 0;"></i>
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                    @empty
                    <div class="text-center py-5 wow fadeIn" data-wow-delay="0.3s" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                        <i class="fas fa-blog fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">{{ __('navigation.no_blog_posts_found') }}</h4>
                        <p class="text-muted">{{ __('navigation.check_back_later_for_updates') }}</p>
                        <a href="{{ route('blog', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                            {{ __('navigation.view_all_posts') }}
                        </a>
                    </div>
                    @endforelse

                    <!-- Pagination -->
                    @if($blogs->hasPages())
                    <div class="d-flex {{ app()->getLocale() === 'ar' ? 'justify-content-start' : 'justify-content-center' }} mt-5 wow fadeIn" data-wow-delay="0.5s">
                        {{ $blogs->onEachSide(1)->links('pagination::bootstrap-5') }}
                    </div>
                    @endif
                </div>
            </div>

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