@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">View Post - {{ $website->name }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="{{ route('posts.edit', [$website, $post]) }}" class="btn btn-sm btn-primary">
                <i class="bi bi-pencil me-1"></i>Edit Post
            </a>
        </div>
        <a href="{{ route('posts.index', $website) }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Posts
        </a>
    </div>
</div>

<div class="row">
    <!-- Main Content -->
    <div class="col-md-8">
        <!-- Featured Image -->
        @if($post->featured_image)
            <div class="card mb-3">
                <img src="{{ Storage::url($post->featured_image) }}" class="card-img-top" alt="{{ $post->title }}">
            </div>
        @endif

        <!-- Post Content -->
        <div class="card mb-3">
            <div class="card-header">
                <h2 class="mb-0">{{ $post->title }}</h2>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3 pb-3 border-bottom">
                    <div>
                        <small class="text-muted">
                            <i class="bi bi-person me-1"></i>By <strong>{{ $post->author->name }}</strong>
                        </small>
                        @if($post->published_at)
                            <small class="text-muted ms-3">
                                <i class="bi bi-calendar me-1"></i>{{ $post->published_at->format('F d, Y') }}
                            </small>
                        @endif
                        <small class="text-muted ms-3">
                            <i class="bi bi-eye me-1"></i>{{ $post->views_count }} views
                        </small>
                    </div>
                    <div>
                        @if($post->status === 'published')
                            <span class="badge bg-success">Published</span>
                        @elseif($post->status === 'scheduled')
                            <span class="badge bg-warning">Scheduled</span>
                        @else
                            <span class="badge bg-secondary">Draft</span>
                        @endif

                        @if($post->is_featured)
                            <span class="badge bg-warning text-dark">Featured</span>
                        @endif
                    </div>
                </div>

                <!-- Excerpt -->
                @if($post->excerpt)
                    <div class="alert alert-light border">
                        <h5>Excerpt</h5>
                        <p class="mb-0">{{ $post->excerpt }}</p>
                    </div>
                @endif

                <!-- Content -->
                <div class="post-content">
                    {!! $post->content !!}
                </div>

                <!-- Category and Tags -->
                <div class="mt-4 pt-4 border-top">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Category:</h6>
                            @if($post->category)
                                <span class="badge bg-info">
                                    <i class="bi bi-folder me-1"></i>{{ $post->category->name }}
                                </span>
                            @else
                                <span class="text-muted">Uncategorized</span>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <h6>Tags:</h6>
                            @if($post->tags->count() > 0)
                                @foreach($post->tags as $tag)
                                    <span class="badge bg-secondary me-1">
                                        <i class="bi bi-tag me-1"></i>{{ $tag->name }}
                                    </span>
                                @endforeach
                            @else
                                <span class="text-muted">No tags</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- SEO Information -->
        @if($post->meta_title || $post->meta_description)
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">SEO Information</h5>
                </div>
                <div class="card-body">
                    @if($post->meta_title)
                        <h6>Meta Title:</h6>
                        <p>{{ $post->meta_title }}</p>
                    @endif

                    @if($post->meta_description)
                        <h6>Meta Description:</h6>
                        <p>{{ $post->meta_description }}</p>
                    @endif
                </div>
            </div>
        @endif
    </div>

    <!-- Sidebar -->
    <div class="col-md-4">
        <!-- Post Info -->
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="mb-0">Post Information</h5>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    <strong>Status:</strong>
                    @if($post->status === 'published')
                        <span class="badge bg-success">Published</span>
                    @elseif($post->status === 'scheduled')
                        <span class="badge bg-warning">Scheduled</span>
                    @else
                        <span class="badge bg-secondary">Draft</span>
                    @endif
                </p>

                <p class="mb-2">
                    <strong>Slug:</strong>
                    <code>{{ $post->slug }}</code>
                </p>

                @if($post->published_at)
                    <p class="mb-2">
                        <strong>Published:</strong><br>
                        {{ $post->published_at->format('F d, Y') }}<br>
                        <small class="text-muted">{{ $post->published_at->format('H:i') }}</small>
                    </p>
                @endif

                <p class="mb-2">
                    <strong>Author:</strong><br>
                    {{ $post->author->name }}
                </p>

                <p class="mb-2">
                    <strong>Views:</strong>
                    <span class="badge bg-light text-dark">{{ $post->views_count }}</span>
                </p>

                <p class="mb-2">
                    <strong>Reading Time:</strong>
                    {{ $post->reading_time }} min read
                </p>

                <p class="mb-2">
                    <strong>Comments:</strong>
                    @if($post->allow_comments)
                        <span class="badge bg-success">Enabled</span>
                    @else
                        <span class="badge bg-secondary">Disabled</span>
                    @endif
                </p>

                <p class="mb-2">
                    <strong>Featured:</strong>
                    @if($post->is_featured)
                        <span class="badge bg-warning text-dark">Yes</span>
                    @else
                        <span class="badge bg-secondary">No</span>
                    @endif
                </p>

                <hr>

                <p class="mb-2">
                    <small class="text-muted">
                        <strong>Created:</strong><br>
                        {{ $post->created_at->format('M d, Y H:i') }}
                    </small>
                </p>

                <p class="mb-0">
                    <small class="text-muted">
                        <strong>Last Updated:</strong><br>
                        {{ $post->updated_at->format('M d, Y H:i') }}
                    </small>
                </p>
            </div>
        </div>

        <!-- Actions -->
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="mb-0">Actions</h5>
            </div>
            <div class="card-body">
                <a href="{{ route('posts.edit', [$website, $post]) }}" class="btn btn-primary w-100 mb-2">
                    <i class="bi bi-pencil me-1"></i>Edit Post
                </a>

                <form action="{{ route('posts.destroy', [$website, $post]) }}" method="POST"
                      onsubmit="return confirm('Are you sure you want to delete this post? This action cannot be undone.')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger w-100">
                        <i class="bi bi-trash me-1"></i>Delete Post
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .post-content {
        font-size: 1.1rem;
        line-height: 1.8;
    }

    .post-content img {
        max-width: 100%;
        height: auto;
        border-radius: 0.375rem;
        margin: 1rem 0;
    }

    .post-content h1, .post-content h2, .post-content h3,
    .post-content h4, .post-content h5, .post-content h6 {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }

    .post-content p {
        margin-bottom: 1rem;
    }

    .post-content ul, .post-content ol {
        margin-bottom: 1rem;
    }

    .post-content blockquote {
        border-left: 4px solid #0d6efd;
        padding-left: 1rem;
        margin: 1rem 0;
        color: #6c757d;
        font-style: italic;
    }
</style>
@endpush
@endsection