@extends('layouts.frontend')

@section('title', $post->meta_title ?? $post->title . ' - ' . \App\Models\Setting::get('site_name', config('app.name')))
@section('meta_description', $post->meta_description ?? Str::limit(strip_tags($post->content), 160))

@section('content')
<article class="container mx-auto px-4 py-8">
    <div class="max-w-3xl mx-auto">
        <!-- Header -->
        <header class="mb-8">
            @if($post->category)
            <a href="{{ route('blog.index', ['category' => $post->category->slug]) }}" class="text-sm font-medium text-emerald-600 hover:text-emerald-700 uppercase tracking-wide">{{ $post->category->name }}</a>
            @endif
            <h1 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mt-2 mb-4">{{ $post->title }}</h1>
            <div class="flex items-center text-slate-500 text-sm">
                @if($post->author)
                <span>By {{ $post->author->name }}</span>
                <span class="mx-2">•</span>
                @endif
                <span>{{ $post->published_at?->format('M d, Y') ?? $post->created_at->format('M d, Y') }}</span>
            </div>
        </header>

        <!-- Featured Image -->
        @if($post->image)
        <img src="{{ asset('storage/' . $post->image) }}" alt="{{ $post->title }}" class="w-full h-auto rounded-xl mb-8">
        @endif

        <!-- Content -->
        <div class="prose dark:prose-invert max-w-none mb-12">
            {!! $post->content !!}
        </div>

        <!-- Comments -->
        <section class="border-t border-slate-200 dark:border-slate-700 pt-8">
            <h2 class="text-xl font-semibold text-slate-900 dark:text-white mb-6">Comments ({{ $post->comments->count() }})</h2>

            @if($post->comments->count() > 0)
            <div class="space-y-6 mb-8">
                @foreach($post->comments as $comment)
                <div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-4">
                    <div class="flex items-center mb-2">
                        <div class="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/30 rounded-full flex items-center justify-center text-emerald-600 font-semibold">{{ strtoupper(substr($comment->name, 0, 1)) }}</div>
                        <div class="ml-3">
                            <p class="font-medium text-slate-900 dark:text-white">{{ $comment->name }}</p>
                            <p class="text-xs text-slate-500">{{ $comment->created_at->diffForHumans() }}</p>
                        </div>
                    </div>
                    <p class="text-slate-600 dark:text-slate-400">{{ $comment->comment }}</p>
                </div>
                @endforeach
            </div>
            @endif

            <!-- Comment Form -->
            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6">
                <h3 class="font-semibold text-slate-900 dark:text-white mb-4">Leave a Comment</h3>
                <form action="{{ route('blog.comment', $post->slug) }}" method="POST" class="space-y-4">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Name *</label>
                            <input type="text" name="name" value="{{ old('name', auth('customer')->user()?->name) }}" required class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Email *</label>
                            <input type="email" name="email" value="{{ old('email', auth('customer')->user()?->email) }}" required class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Comment *</label>
                        <textarea name="comment" rows="4" required class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700">{{ old('comment') }}</textarea>
                    </div>
                    <button type="submit" class="px-6 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700">Post Comment</button>
                </form>
            </div>
        </section>

        <!-- Related Posts -->
        @if($relatedPosts->count() > 0)
        <section class="mt-12">
            <h2 class="text-xl font-semibold text-slate-900 dark:text-white mb-6">Related Posts</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach($relatedPosts as $related)
                <a href="{{ route('blog.show', $related->slug) }}" class="group">
                    @if($related->image)
                    <img src="{{ asset('storage/' . $related->image) }}" alt="{{ $related->title }}" class="w-full h-40 object-cover rounded-lg mb-3 group-hover:scale-105 transition duration-300">
                    @endif
                    <h3 class="font-medium text-slate-900 dark:text-white group-hover:text-emerald-600 line-clamp-2">{{ $related->title }}</h3>
                </a>
                @endforeach
            </div>
        </section>
        @endif
    </div>
</article>
@endsection