@extends('layout')

@section('content')
    <article class="prose prose-indigo prose-lg mx-auto bg-white p-8 rounded-xl shadow-sm border border-gray-100">
        <div class="mb-8 border-b pb-8">
            <h1 class="text-4xl font-bold text-gray-900 mb-2">{{ $post->title }}</h1>
            <span class="text-gray-500 text-sm">
                 Опубликовано: {{ $post->published_at ? $post->published_at->format('d F Y') : 'Не опубликовано' }}
            </span>
        </div>

        <div class="text-gray-700 leading-relaxed mb-12">
            {!! nl2br(e($post->content)) !!}
        </div>

        <div class="border-t pt-10">
            <h3 class="text-2xl font-bold text-gray-900 mb-6">Комментарии ({{ $post->comments->where('is_approved', true)->count() }})</h3>

            <div class="mb-10 bg-gray-50 p-6 rounded-lg">
                <h4 class="text-lg font-medium mb-4">Оставить комментарий</h4>
                <form action="{{ route('comments.store', $post) }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label for="author_name" class="block text-sm font-medium text-gray-700">Ваше имя</label>
                        <input type="text" name="author_name" id="author_name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border">
                    </div>
                    <div class="mb-4">
                        <label for="body" class="block text-sm font-medium text-gray-700">Сообщение</label>
                        <textarea name="body" id="body" rows="3" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border"></textarea>
                    </div>
                    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium transition">
                        Отправить
                    </button>
                </form>
            </div>

            <div class="space-y-6">
                @foreach($post->comments as $comment)
                    @if($comment->is_approved)
                        <div class="flex space-x-4">
                            <div class="flex-shrink-0">
                                <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">
                                    {{ substr($comment->author_name, 0, 1) }}
                                </div>
                            </div>
                            <div>
                                <div class="text-sm font-bold text-gray-900">{{ $comment->author_name }}</div>
                                <div class="text-xs text-gray-500">{{ $comment->created_at->diffForHumans() }}</div>
                                <div class="mt-1 text-gray-700">
                                    {{ $comment->body }}
                                </div>
                            </div>
                        </div>
                    @else
                        @auth
                            <div class="flex space-x-4 opacity-50 border-l-2 border-yellow-400 pl-4">
                                <div>
                                    <div class="text-sm font-bold text-gray-900">{{ $comment->author_name }} (На модерации)</div>
                                    <div class="mt-1 text-gray-700">{{ $comment->body }}</div>
                                </div>
                            </div>
                        @endauth
                    @endif
                @endforeach
            </div>
        </div>
    </article>
@endsection