@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' }}">
                <!-- Category Header -->
                <div class="category-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 {{ app()->getLocale() === 'ar' ? 'ms-3' : 'me-3' }}"
                              style="background-color: {{ $category->color ?? '#007bff' }}; color: white;">
                            {{ $category->name }}
                        </span>
                        <small class="text-muted">
                            {{ __('navigation.category') }}
                        </small>
                    </div>

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

                    @if($category->description)
                    <p class="text-muted lead {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                        {{ $category->description }}
                    </p>
                    @endif
                </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">{{ $category->name }}</li>
                    </ol>
                </nav>

                <!-- Blog Posts List -->
                <div class="blog-posts">
                    <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.posts_in_category') }}: {{ $category->name }}</h3>
                        <div class="text-muted small {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-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">
                        <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">
                                            {{ $blog->title }}
                                        </a>
                                    </h4>

                                    <p class="text-muted mb-3 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                        {{ $blog->summary }}
                                    </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-blog fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">{{ __('navigation.no_posts_in_category') }}</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 justify-content-center mt-5">
                        {{ $blogs->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection