@extends('layouts.main')

@section('title', $blog->title . ' - ' . setting('brand.name', 'Grace Family Church'))
@section('meta_description', $blog->meta_description ?: ($blog->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($blog->body), 155)))
@if($blog->coverUrl())
    @section('og_image', $blog->coverUrl())
@endif

@section('json_ld')
<script type="application/ld+json">
@php
echo json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'BlogPosting',
    'headline' => $blog->title,
    'description' => $blog->meta_description ?: \Illuminate\Support\Str::limit(strip_tags($blog->body), 155),
    'datePublished' => optional($blog->published_at)->toIso8601String(),
    'dateModified' => $blog->updated_at->toIso8601String(),
    'author' => ['@type' => 'Organization', 'name' => setting('brand.name', 'Grace Family Church')],
    'publisher' => ['@type' => 'Organization', 'name' => setting('brand.name', 'Grace Family Church')],
    'mainEntityOfPage' => route('blog.show', $blog->slug),
] + ($blog->coverUrl() ? ['image' => $blog->coverUrl()] : []), JSON_UNESCAPED_SLASHES);
@endphp
</script>
@endsection

@section('content')

<!-- COVER -->
<section class="blog-hero" @if(!$blog->coverUrl()) style="background: {{ $blog->gradientCss() }};" @endif>
    @if($blog->coverUrl())
        <img src="{{ $blog->coverUrl() }}" alt="{{ $blog->title }}" class="blog-hero-img">
    @endif
    <div class="blog-hero-overlay"></div>
    <div class="container blog-hero-content">
        <a href="{{ route('blog.index') }}" class="blog-back"><i class="fas fa-arrow-left me-1"></i> All Articles</a>
        <h1 class="blog-hero-title">{{ $blog->title }}</h1>
        <div class="blog-hero-meta">
            <span><i class="fas fa-calendar me-1"></i> {{ $blog->published_at->format('d F Y') }}</span>
            <span class="mx-2">•</span>
            <span><i class="fas fa-eye me-1"></i> {{ $blog->views }} views</span>
        </div>
    </div>
</section>

<!-- ARTICLE -->
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">

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

                <hr class="my-5">

                <!-- COMMENTS -->
                <div id="comments">
                    <h3 class="section-title">Comments ({{ $comments->count() }})</h3>
                    <div class="section-divider" style="margin-left: 0;"></div>

                    @if(session('comment_success'))
                        <div class="alert alert-success mt-3"><i class="fas fa-check-circle me-1"></i> {{ session('comment_success') }}</div>
                    @endif

                    <div class="mt-4">
                        @forelse($comments as $comment)
                            <div class="blog-comment">
                                <div class="blog-comment-avatar">{{ strtoupper(substr($comment->name, 0, 1)) }}</div>
                                <div class="blog-comment-body">
                                    <strong>{{ $comment->name }}</strong>
                                    <span class="blog-comment-date">{{ $comment->created_at->diffForHumans() }}</span>
                                    <p class="mb-1">{{ $comment->body }}</p>
                                    @if($comment->admin_response)
                                        <div class="blog-comment-response">
                                            <strong><i class="fas fa-church me-1" style="color: var(--gfc-accent);"></i> {{ setting('brand.name', 'Grace Family Church') }}</strong>
                                            <p class="mb-0">{{ $comment->admin_response }}</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <p class="text-muted">Be the first to comment.</p>
                        @endforelse
                    </div>

                    <!-- COMMENT FORM -->
                    <div class="blog-comment-form mt-4">
                        <h5 class="fw-bold mb-3">Leave a Comment</h5>
                        @if($errors->any())
                            <div class="alert alert-danger small">
                                <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                            </div>
                        @endif
                        <form method="POST" action="{{ route('blog.comment', $blog->slug) }}">
                            @csrf
                            <div style="position:absolute; left:-9999px;" aria-hidden="true">
                                <input type="text" name="website" tabindex="-1" autocomplete="off">
                            </div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <input type="text" name="name" class="form-control" placeholder="Your name" value="{{ old('name') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <input type="email" name="email" class="form-control" placeholder="Your email (optional, not published)" value="{{ old('email') }}">
                                </div>
                                <div class="col-12">
                                    <textarea name="body" rows="4" class="form-control" placeholder="Share your thoughts..." required>{{ old('body') }}</textarea>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-gfc-primary"><i class="fas fa-paper-plane me-1"></i> Post Comment</button>
                                    <small class="text-muted ms-2">Comments are reviewed before they appear.</small>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>

        @if($related->count() > 0)
        <div class="row justify-content-center mt-5">
            <div class="col-lg-8">
                <h4 class="section-title">More Articles</h4>
                <div class="section-divider" style="margin-left: 0;"></div>
                <div class="row g-3 mt-1">
                    @foreach($related as $r)
                        <div class="col-md-4">
                            <a href="{{ route('blog.show', $r->slug) }}" class="blog-card h-100">
                                <div class="blog-card-cover blog-card-cover-sm" @if(!$r->coverUrl()) style="background: {{ $r->gradientCss() }};" @endif>
                                    @if($r->coverUrl())<img src="{{ $r->coverUrl() }}" alt="{{ $r->title }}" loading="lazy">@else<i class="fas fa-feather-pointed"></i>@endif
                                </div>
                                <div class="blog-card-body">
                                    <div class="blog-card-meta"><i class="fas fa-calendar me-1"></i> {{ $r->published_at->format('d M Y') }}</div>
                                    <h6 class="blog-card-title">{{ \Illuminate\Support\Str::limit($r->title, 60) }}</h6>
                                    <p class="blog-card-excerpt">{{ \Illuminate\Support\Str::limit($r->excerpt ?: strip_tags($r->body), 90) }}</p>
                                    <span class="blog-card-readmore">Read more <i class="fas fa-arrow-right ms-1"></i></span>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

    </div>
</section>

@endsection