@extends('layouts.app')

@section('title', $blog->title . ' - Saba Remedies Blog')

@section('content')
<div class="bg-gradient-to-r from-emerald-800 to-teal-900 text-white py-10">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="flex text-xs text-emerald-200 mb-2" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 sm:space-x-2">
                <li><a href="{{ route('home') }}" class="hover:text-white">Home</a></li>
                <li><span class="text-emerald-400 mx-1">/</span></li>
                <li><a href="{{ route('pages.blog') }}" class="hover:text-white">Blog</a></li>
                <li><span class="text-emerald-400 mx-1">/</span></li>
                <li class="truncate max-w-xs text-white">{{ $blog->title }}</li>
            </ol>
        </nav>
        <h1 class="text-2xl sm:text-3xl font-extrabold">{{ $blog->title }}</h1>
        <div class="text-xs text-emerald-300 mt-2">Published on {{ date('d F, Y', strtotime($blog->created_date ?? now())) }}</div>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10">
        
        <!-- Blog Content Card -->
        <div class="bg-white rounded-3xl border border-slate-200 p-8 sm:p-12 shadow-sm space-y-6">
            @if($blog->image)
                <div class="rounded-2xl overflow-hidden max-h-96 w-full">
                    <img src="{{ blog_image_url($blog->image) }}" alt="{{ $blog->title }}" class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                </div>
            @endif

            <div class="text-slate-700 text-xs sm:text-sm leading-relaxed text-justify space-y-4">
                {!! nl2br(e($blog->description ?? $blog->data ?? '')) !!}
            </div>
        </div>

        <!-- Comments / Reviews Section -->
        <div class="bg-white rounded-3xl border border-slate-200 p-8 sm:p-10 shadow-sm space-y-6">
            <h3 class="font-extrabold text-slate-900 text-lg">Leave a Comment</h3>
            
            <form action="{{ route('pages.blog.comment', ['id' => $blog->id]) }}" method="POST" class="space-y-4 text-xs">
                @csrf
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block font-semibold text-slate-700 mb-1">Your Name *</label>
                        <input type="text" name="name" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    </div>
                    <div>
                        <label class="block font-semibold text-slate-700 mb-1">Your Email *</label>
                        <input type="email" name="email" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    </div>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Your Message / Comment *</label>
                    <textarea name="comment" rows="3" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500"></textarea>
                </div>

                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-6 rounded-xl text-xs transition-colors">
                    Post Comment
                </button>
            </form>

            @if($blog->comments && $blog->comments->count() > 0)
                <div class="border-t border-slate-100 pt-6 space-y-4">
                    <h4 class="font-bold text-slate-900 text-sm">Comments ({{ $blog->comments->count() }})</h4>
                    @foreach($blog->comments as $cmt)
                        <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 text-xs">
                            <div class="font-bold text-slate-800">{{ $cmt->name }}</div>
                            <p class="text-slate-600 mt-1">{{ $cmt->comment }}</p>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

    </div>
</section>
@endsection