@extends('layouts.app3')


@section('content')
<style>
    .blog-show-wrap { background-color: #f8f9fa; }
    .blog-show-wrap .blog-image { width: 60%; max-height: 800px; object-fit: cover; border-radius: 8px; margin: 2rem 0; }
    .blog-show-wrap .blog-content { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 2rem 0; }
    .blog-show-wrap .breadcrumb-bar { background-color: #e9ecef; padding: 0.75rem 0; margin-bottom: 1rem; }
    .blog-show-wrap .breadcrumb-bar a { color: #007bff; text-decoration: none; }
    .blog-show-wrap .blog-tags { margin: 1rem 0; }
    .blog-show-wrap .tag { background-color: #f8f9fa; padding: 0.3rem 0.6rem; margin: 0.2rem; border-radius: 4px; font-size: 0.9rem; color: #495057; display: inline-block; }
    .badge-featured { background-color: #ffc107; color: #212529; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: bold; }
    .btn-back { background-color: #6c757d; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 4px; display: inline-block; }
    .btn-back:hover { background-color: #545b62; color: white; }
    .btn-view-all { background-color: #007bff; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 4px; display: inline-block; }
    .btn-view-all:hover { background-color: #0056b3; color: white; }
</style>

<div class="blog-show-wrap">
    <div class="container py-4">
        <div class="breadcrumb-bar">
            <a href="/">Home</a> / <a href="{{ route('blogs.index') }}">Blog</a> / <strong>{{ $blog->title }}</strong>
        </div>
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <h4>{{ $blog->title }}</h4>
                    @if($blog->is_featured)
                        <span class="badge-featured">Featured Post</span>
                    @endif
                </div>
                    <a href="{{ route('blogs.index') }}" class="btn-back">← Back to Blog</a>
            </div>
                @if($blog->image)
                    <img src="{{ asset('blogs/' . $blog->image) }}" alt="{{ $blog->title }}" class="blog-image">
                @endif
                @if($blog->tags)
                    <!--<div class="blog-tags">
                        <strong>Tags:</strong>
                            @foreach($blog->tags as $tag)
                        <span class="tag">#{{ $tag }}</span>
                            @endforeach
                    </div>-->
                @endif
                <div class="blog-content">
                    <div style="font-size: 1.1rem; color: #495057;">
                        {!! $blog->content !!}
                    </div>
                </div>
                    <div class="text-center my-4">
                        <a href="{{ route('blogs.index') }}" class="btn-view-all">← View All Posts</a>
                    </div>
    </div>
</div>
@endsection