@extends('layouts.app')

@section('title', $post->title)
@section('meta_description', $post->meta_description)
@section('meta_keywords', $post->meta_keywords)

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <article class="post-detail">
                <header class="mb-4">
                    <h1 class="display-5">{{ $post->title }}</h1>
                    <div class="text-muted mb-3">
                        <small>
                            Published: {{ $post->published_at->format('M d, Y') }}
                            @if($post->category)
                            | Category: <a href="{{ url('/category/' . $post->category->slug) }}">{{ $post->category->name }}</a>
                            @endif
                        </small>
                    </div>
                    @if($post->image)
                    <img src="{{ $post->image }}" class="img-fluid rounded mb-3" alt="{{ $post->title }}">
                    @endif
                </header>
                
                <div class="post-content">
                    {!! nl2br(e($post->content)) !!}
                </div>
                
                @if($post->tags)
                <div class="mt-4">
                    <h6>Tags:</h6>
                    @foreach(explode(',', $post->tags) as $tag)
                    <span class="badge bg-secondary me-1">{{ trim($tag) }}</span>
                    @endforeach
                </div>
                @endif
            </article>
            
            <!-- Related Posts -->
            @if($relatedPosts->count() > 0)
            <div class="mt-5">
                <h3>Related Posts</h3>
                <div class="row">
                    @foreach($relatedPosts as $relatedPost)
                    <div class="col-md-6 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">{{ $relatedPost->title }}</h5>
                                <p class="card-text">{{ Str::limit($relatedPost->excerpt ?? $relatedPost->content, 100) }}</p>
                                <a href="{{ url('/post/' . $relatedPost->slug) }}" class="btn btn-sm btn-primary">Read More</a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
        
        <!-- Sidebar -->
        <div class="col-md-4">
            <!-- Category Info -->
            @if($post->category)
            <div class="card mb-4">
                <div class="card-header">
                    <h5>Category: {{ $post->category->name }}</h5>
                </div>
                <div class="card-body">
                    <p>{{ $post->category->description }}</p>
                    <a href="{{ url('/category/' . $post->category->slug) }}" class="btn btn-sm btn-outline-primary">View All {{ $post->category->name }} News</a>
                </div>
            </div>
            @endif
            
            <!-- Recent Posts -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>Recent Posts</h5>
                </div>
                <div class="card-body">
                    @foreach($recentPosts as $recentPost)
                    <div class="mb-3">
                        <h6 class="mb-1">
                            <a href="{{ url('/post/' . $recentPost->slug) }}" class="text-decoration-none">
                                {{ $recentPost->title }}
                            </a>
                        </h6>
                        <small class="text-muted">{{ $recentPost->published_at->diffForHumans() }}</small>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection