@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <article>
                <h1 class="mb-3 {{ app()->getLocale() === 'ar' ? 'text-end' : '' }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">{{ $blog->title }}</h1>

                @if($blog->image)
                    <img src="{{ asset('storage/' . $blog->image) }}" alt="{{ $blog->title }}" class="img-fluid rounded mb-4 w-100">
                @endif

                <div class="text-muted mb-4">{{ $blog->published_at?->format('F d, Y') }}</div>

                <div dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}" class="{{ app()->getLocale() === 'ar' ? 'text-end' : '' }}">
                    {!! $blog->content !!}
                </div>
            </article>

            @if($relatedBlogs->count())
                <div class="mt-5">
                    <h3 class="mb-3">Related Blogs</h3>
                    <div class="row g-3">
                        @foreach($relatedBlogs as $relatedBlog)
                            <div class="col-md-4">
                                <div class="card h-100 border-0 shadow-sm">
                                    @if($relatedBlog->image)
                                        <img src="{{ asset('storage/' . $relatedBlog->image) }}" class="card-img-top" alt="{{ $relatedBlog->title }}">
                                    @endif
                                    <div class="card-body">
                                        <h6>{{ $relatedBlog->title }}</h6>
                                        <a href="{{ route('blogs.show', $relatedBlog) }}" class="btn btn-sm btn-outline-primary mt-2">View</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection