@extends('layouts.vertical', ['title' => 'View Blog Post'])

@section('content')

<!-- Start Content-->
<div class="container-fluid">

<div class="py-3 d-flex align-items-sm-center flex-sm-row flex-column">
    <div class="flex-grow-1">
        <h4 class="fs-18 fw-semibold m-0">View Blog Post</h4>
    </div>

    <div class="text-end">
        <ol class="breadcrumb m-0 py-0">
            <li class="breadcrumb-item"><a href="/dashboard/index">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('blog-posts.index') }}">Blog Posts</a></li>
            <li class="breadcrumb-item active">View</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="float-end">
                    <a href="{{ route('blog-posts.edit', $blogPost->id) }}" class="btn btn-success">Edit</a>
                    <a href="{{ route('blog-posts.index') }}" class="btn btn-light">Back to List</a>
                </div>
                <h5 class="card-title mb-0">{{ $blogPost->title }}</h5>
            </div>

            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>Slug:</strong> <code>{{ $blogPost->slug }}</code>
                    </div>
                    <div class="col-md-6">
                        <strong>Status:</strong>
                        @if($blogPost->is_active)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Inactive</span>
                        @endif
                        @if($blogPost->published_at)
                            <span class="badge bg-info">Published: {{ $blogPost->published_at->format('M d, Y') }}</span>
                        @endif
                    </div>
                </div>

                @if($blogPost->featured_image)
                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Featured Image:</strong>
                        <div class="mt-2">
                            <img src="{{ asset('storage/' . $blogPost->featured_image) }}" alt="Featured Image" class="img-fluid" style="max-height: 400px;">
                        </div>
                    </div>
                </div>
                @endif

                @if($blogPost->categories->count() > 0)
                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Categories:</strong>
                        @foreach($blogPost->categories as $category)
                            <span class="badge bg-info me-1">{{ $category->name }}</span>
                        @endforeach
                    </div>
                </div>
                @endif

                @if($blogPost->excerpt)
                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Excerpt:</strong>
                        <p class="text-muted">{{ $blogPost->excerpt }}</p>
                    </div>
                </div>
                @endif

                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Content:</strong>
                        <div class="mt-2 p-3 border rounded">
                            {!! $blogPost->content !!}
                        </div>
                    </div>
                </div>

                @if($blogPost->seo_title || $blogPost->seo_description || $blogPost->seo_keywords)
                <hr>
                <h5>SEO Information</h5>
                @if($blogPost->seo_title)
                <div class="row mb-2">
                    <div class="col-md-12">
                        <strong>SEO Title:</strong> {{ $blogPost->seo_title }}
                    </div>
                </div>
                @endif
                @if($blogPost->seo_description)
                <div class="row mb-2">
                    <div class="col-md-12">
                        <strong>SEO Description:</strong> {{ $blogPost->seo_description }}
                    </div>
                </div>
                @endif
                @if($blogPost->seo_keywords)
                <div class="row mb-2">
                    <div class="col-md-12">
                        <strong>SEO Keywords:</strong> {{ $blogPost->seo_keywords }}
                    </div>
                </div>
                @endif
                @endif

                <div class="row mt-4">
                    <div class="col-md-6">
                        <strong>Created:</strong> {{ $blogPost->created_at->format('M d, Y H:i') }}
                    </div>
                    <div class="col-md-6">
                        <strong>Last Updated:</strong> {{ $blogPost->updated_at->format('M d, Y H:i') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div> <!-- container-fluid -->

@endsection