@extends('layouts.master')

@section('title', $post->seo_title)
@section('meta_description', $post->seo_description)
@section('canonical', $post->canonical_url ?: route('blog.show', $post))
@section('og_title', $post->seo_title)
@section('og_description', $post->seo_description)

@push('head')
    {!! \App\Support\SchemaMarkup::toScript(\App\Support\SchemaMarkup::blogPost($post)) !!}
@endpush

@section('content')
    <section class="bg-soft py-5 border-bottom">
        <div class="container">
            @if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
            <div class="row justify-content-center">
                <div class="col-lg-9">
                    @if($post->category)
                        <a href="{{ route('blog.category', $post->category) }}" class="text-primary fw-bold small text-uppercase text-decoration-none">{{ $post->category->name }}</a>
                    @endif
                    <h1 class="display-5 fw-bold mt-2">{{ $post->title }}</h1>
                    <p class="text-muted mb-0">
                        By {{ $post->author?->name ?: 'HomesInKerala Editorial' }} ·
                        {{ $post->published_at?->format('d M Y') }} ·
                        {{ $post->reading_time }} min read ·
                        {{ number_format($post->views_count) }} views
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="row g-4">
                <article class="col-lg-8">
                    <div class="property-detail-card">
                        @if($post->excerpt)
                            <p class="lead">{{ $post->excerpt }}</p>
                        @endif
                        <div class="blog-content">{!! nl2br(e($post->content)) !!}</div>

                        @if($post->tags->isNotEmpty())
                            <div class="d-flex flex-wrap gap-2 mt-4 pt-4 border-top">
                                @foreach($post->tags as $tag)
                                    <a class="badge text-bg-light text-decoration-none" href="{{ route('blog.tag', $tag) }}">{{ $tag->name }}</a>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <div class="property-detail-card mt-4">
                        <h2 class="h4 mb-3">Comments</h2>
                        @forelse($post->approvedComments as $comment)
                            <div class="border-bottom py-3">
                                <strong>{{ $comment->name }}</strong>
                                <small class="text-muted d-block">{{ $comment->created_at->format('d M Y') }}</small>
                                <p class="mb-0 mt-2">{{ $comment->comment }}</p>
                            </div>
                        @empty
                            <p class="text-muted">No comments yet.</p>
                        @endforelse

                        @if($post->allow_comments)
                            <form class="row g-3 mt-3" method="POST" action="{{ route('blog.comments.store', $post) }}">
                                @csrf
                                <div class="col-md-6">
                                    <label class="form-label" for="comment-name">Name</label>
                                    <input id="comment-name" name="name" value="{{ old('name', auth()->user()?->name) }}" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="comment-email">Email</label>
                                    <input id="comment-email" type="email" name="email" value="{{ old('email', auth()->user()?->email) }}" class="form-control" required>
                                </div>
                                <div class="col-12">
                                    <label class="form-label" for="comment-body">Comment</label>
                                    <textarea id="comment-body" name="comment" class="form-control" rows="5" required>{{ old('comment') }}</textarea>
                                </div>
                                @include('frontend.partials.recaptcha')
                                <div class="col-12">
                                    <button class="btn btn-primary">Submit Comment</button>
                                </div>
                            </form>
                        @endif
                    </div>

                    @if($relatedPosts->isNotEmpty())
                        <div class="mt-4">
                            <h2 class="h4 mb-3">Related Posts</h2>
                            <div class="row g-4">
                                @foreach($relatedPosts as $post)
                                    <div class="col-md-4">@include('frontend.blog.partials.card')</div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </article>
                <div class="col-lg-4">@include('frontend.blog.partials.sidebar')</div>
            </div>
        </div>
    </section>
@endsection