@php
    $metaTitle = $blog->meta_title ?: $blog->title;
    $metaDesc = $blog->meta_description ?: Str::limit(strip_tags($blog->excerpt ?: $blog->content), 160);
    $activeTheme = \App\Services\ThemeService::active();
@endphp
@extends("themes.{$activeTheme}.layouts.master")

@section('title', $metaTitle)

@push('styles')
<link rel="stylesheet" href="{{ asset('frontEnd/css/blog.css') }}?v=1">
<meta name="description" content="{{ $metaDesc }}">
@endpush

@section('content')
<div class="container py-4">
    <div class="row g-4">
        <div class="col-lg-8">
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb small mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('frontend.home') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('frontend.blog.index') }}">Blog</a></li>
                    @if($blog->category)
                    <li class="breadcrumb-item"><a href="{{ route('frontend.blog.category', $blog->category->slug) }}">{{ $blog->category->name }}</a></li>
                    @endif
                    <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($blog->title, 40) }}</li>
                </ol>
            </nav>

            <article>
                <h1 class="fw-bold mb-3">{{ $blog->title }}</h1>
                <div class="blog-meta mb-4">
                    @if($blog->category)
                    <a href="{{ route('frontend.blog.category', $blog->category->slug) }}" class="badge bg-success text-decoration-none">{{ $blog->category->name }}</a>
                    @endif
                    <span class="ms-2">{{ $blog->published_at?->format('d F Y') ?? $blog->created_at->format('d F Y') }}</span>
                </div>

                @if($blog->image)
                <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}" class="blog-article-img">
                @endif

                @if($blog->excerpt)
                <p class="lead text-muted">{{ $blog->excerpt }}</p>
                @endif

                <div class="blog-article-content">{!! $blog->content !!}</div>
            </article>

            <div class="mt-4 pt-3 border-top">
                <a href="{{ route('frontend.blog.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i> All Posts
                </a>
            </div>
        </div>

        <div class="col-lg-4">
            @include('frontEnd.blog.partials.sidebar')

            @if($recent->isNotEmpty())
            <div class="blog-sidebar-card">
                <div class="blog-sidebar-title">Recent Posts</div>
                @foreach($recent as $item)
                <a href="{{ route('frontend.blog.show', $item->slug) }}" class="blog-recent-item text-decoration-none">
                    @if($item->image)
                    <img src="{{ asset($item->image) }}" alt="" class="blog-recent-thumb">
                    @else
                    <div class="blog-recent-thumb d-flex align-items-center justify-content-center text-muted"><i class="fas fa-image"></i></div>
                    @endif
                    <div>
                        <div class="fw-semibold text-dark small">{{ Str::limit($item->title, 50) }}</div>
                        <div class="text-muted" style="font-size:.75rem">{{ $item->published_at?->format('d M Y') }}</div>
                    </div>
                </a>
                @endforeach
            </div>
            @endif
        </div>
    </div>
</div>
@endsection