@extends('frontend.layouts.app')

@section('title', $blog->title . ' - I Am Happy Healthcare Platform')

@section('content')
    <section class="page-title" style="background-image:url({{ asset('img/PhotoRoom1.webp') }});">
        <div class="auto-container">
            <h1 class="text-dark">Blog Details</h1>
            <ul class="bread-crumb clearfix">
                <li><a href="{{ route('home') }}" class="text-dark">Home</a></li>
                <li><a href="{{ route('blogs') }}" class="text-dark">Blogs</a></li>
                <li class="text-dark">Detail</li>
            </ul>
        </div>
    </section>

    <section class="blog-details py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="blog-content shadow-sm p-4 rounded bg-white">
                        @if($blog->image)
                            <img src="{{ asset('uploads/blogs/' . $blog->image) }}" alt="{{ $blog->title }}" class="img-fluid rounded mb-4 w-100" style="max-height: 500px; object-fit: cover;">
                        @endif

                        <h2 class="fw-bold mb-3">{{ $blog->title }}</h2>
                        
                        <div class="meta mb-4 text-muted">
                            <span class="me-3"><i class="far fa-calendar-alt me-1"></i> {{ $blog->created_at->format('M d, Y') }}</span>
                            @if($blog->category)
                                <span><i class="far fa-folder me-1"></i> {{ $blog->category->name }}</span>
                            @endif
                        </div>

                        <div class="description text-secondary" style="line-height: 1.8; font-size: 1.1rem;">
                            {!! $blog->description !!}
                        </div>

                        <div class="mt-5 pt-4 border-top">
                            <a href="{{ route('blogs') }}" class="btn btn-outline-primary">
                                <i class="fas fa-arrow-left me-2"></i> Back to Blogs
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection