@extends('layouts.app3')

@section('content')
<style>
    .blog-show-wrap { background-color: #f8f9fa; }
    .blog-show-wrap .blog-image { width: 100%; 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>
                <h1>{{ $blog->title }}</h1>
                @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