@extends('layouts.app')

@section('title', $blogPost->title)

@section('content')
<div class="container-fluid px-4">
    {{-- Breadcrumb --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.blog-posts.index') }}">Blog Posts</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($blogPost->title, 40) }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 fw-700">{{ $blogPost->title }}</h1>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.blog-posts.edit', $blogPost) }}" class="btn btn-sm btn-primary">
                <i class="fas fa-edit me-1"></i> Edit
            </a>
            <button type="button" class="btn btn-sm btn-{{ $blogPost->created_at ? 'warning' : 'success' }}"
                    onclick="confirmTogglePublish()">
                <i class="fas fa-{{ $blogPost->created_at ? 'eye-slash' : 'eye' }} me-1"></i>
                {{ $blogPost->created_at ? 'Unpublish' : 'Publish' }}
            </button>
            <a href="{{ route('admin.blog-posts.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back
            </a>
        </div>
    </div>

    {{-- Post Status Banner --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-center">
                <div class="col-md-8">
                    <div class="d-flex flex-wrap gap-3 align-items-center">
                        <div>
                            <span class="text-muted small text-uppercase d-block">Status</span>
                            <span class="badge fs-6 px-3 py-2 {{ $blogPost->created_at ? 'bg-success' : 'bg-warning text-dark' }}">
                                <i class="fas fa-{{ $blogPost->created_at ? 'check-circle' : 'clock' }} me-1"></i>
                                {{ $blogPost->created_at ? 'Published' : 'Draft' }}
                            </span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Category</span>
                            <span class="badge bg-secondary">{{ $blogPost->category?->name ?? 'Uncategorized' }}</span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Author</span>
                            <span class="fw-600">{{ $blogPost->author?->username ?? 'Unknown' }}</span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Created</span>
                            <span>{{ $blogPost->created_at ? $blogPost->created_at->format('M d, Y') : 'Not published' }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-md-end">
                    <form action="{{ route('admin.blog-posts.duplicate', $blogPost) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-sm btn-info">
                            <i class="fas fa-copy me-1"></i> Duplicate
                        </button>
                    </form>
                    <form action="{{ route('admin.blog-posts.destroy', $blogPost) }}" method="POST" class="d-inline"
                          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-sm btn-danger">
                            <i class="fas fa-trash me-1"></i> Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Stats Row --}}
    <div class="row g-3 mb-4">
        @php
            $detailStats = [
                ['label' => 'Comments', 'value' => $stats['comments'] ?? 0, 'icon' => 'fa-comments', 'color' => 'primary'],
                ['label' => 'Approved', 'value' => $stats['approved_comments'] ?? 0, 'icon' => 'fa-check-circle', 'color' => 'success'],
                ['label' => 'Pending', 'value' => $stats['pending_comments'] ?? 0, 'icon' => 'fa-clock', 'color' => 'warning'],
                ['label' => 'Tags', 'value' => $stats['tags'] ?? 0, 'icon' => 'fa-tags', 'color' => 'info'],
                ['label' => 'Word Count', 'value' => number_format($stats['word_count'] ?? 0), 'icon' => 'fa-file-word', 'color' => 'secondary'],
                ['label' => 'Reading Time', 'value' => ($stats['reading_time'] ?? 0) . ' min', 'icon' => 'fa-book-reader', 'color' => 'danger'],
            ];
        @endphp

        @foreach($detailStats as $stat)
            <div class="col-xl-4 col-lg-6 col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-muted mb-1 small fw-600 text-uppercase">{{ $stat['label'] }}</p>
                                <h5 class="mb-0 fw-700">{{ $stat['value'] }}</h5>
                            </div>
                            <div class="rounded-3 p-2" style="background: rgba(var(--bs-{{ $stat['color'] }}-rgb),0.1);">
                                <i class="fas {{ $stat['icon'] }} text-{{ $stat['color'] }}"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Tabs --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <ul class="nav nav-tabs nav-tabs-custom mb-3" id="postTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab">
                        <i class="fas fa-file-alt me-1"></i> Content
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="comments-tab" data-bs-toggle="tab" data-bs-target="#comments" type="button" role="tab">
                        <i class="fas fa-comments me-1"></i> Comments
                        <span class="badge bg-secondary ms-1">{{ $recentComments->count() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="tags-tab" data-bs-toggle="tab" data-bs-target="#tags" type="button" role="tab">
                        <i class="fas fa-tags me-1"></i> Tags
                    </button>
                </li>
                @if($relatedPosts->count() > 0)
                    <li class="nav-item">
                        <button class="nav-link" id="related-tab" data-bs-toggle="tab" data-bs-target="#related" type="button" role="tab">
                            <i class="fas fa-link me-1"></i> Related
                        </button>
                    </li>
                @endif
            </ul>

            <div class="tab-content">
                {{-- Content Tab --}}
                <div class="tab-pane fade show active" id="content" role="tabpanel">
                    @include('admin.blog.posts.partials.tab-content', ['post' => $blogPost])
                </div>

                {{-- Comments Tab --}}
                <div class="tab-pane fade" id="comments" role="tabpanel">
                    @include('admin.blog.posts.partials.tab-comments', ['comments' => $recentComments])
                </div>

                {{-- Tags Tab --}}
                <div class="tab-pane fade" id="tags" role="tabpanel">
                    @include('admin.blog.posts.partials.tab-tags', ['post' => $blogPost])
                </div>

                {{-- Related Posts Tab --}}
                @if($relatedPosts->count() > 0)
                    <div class="tab-pane fade" id="related" role="tabpanel">
                        @include('admin.blog.posts.partials.tab-related', ['relatedPosts' => $relatedPosts])
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Toggle Publish Form --}}
<form id="togglePublishForm" method="POST" action="{{ route('admin.blog-posts.toggle-publish', $blogPost) }}" style="display:none;">
    @csrf
    @method('PATCH')
</form>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .nav-tabs-custom .nav-link {
        color: #6c757d;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    .nav-tabs-custom .nav-link:hover {
        color: #212529;
        background: #f8f9fa;
    }
    .nav-tabs-custom .nav-link.active {
        color: var(--bs-primary);
        background: transparent;
        border-bottom: 3px solid var(--bs-primary);
    }
    .nav-tabs-custom .nav-link i {
        font-size: 0.9rem;
    }
</style>
@endpush

@push('scripts')
<script>
function confirmTogglePublish() {
    var action = '{{ $blogPost->created_at ? "unpublish" : "publish" }}';
    if (!confirm('Are you sure you want to ' + action + ' this post?')) return;
    document.getElementById('togglePublishForm').submit();
}
</script>
@endpush