@extends('layouts.app')

@section('title', $blog->title . ' - Primary Learning Tutor')

@section('content')
<div class="container py-5">
    <div class="row">
        <div class="col-12 col-lg-8">
            <!-- Back Button -->
            <div class="mb-4">
                <a href="{{ route('blogs.index') }}" class="btn btn-outline-secondary">
                    ← Back to Blogs
                </a>
            </div>

            <!-- Blog Post -->
            <article class="card shadow-sm">
                @if($blog->featured_image)
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($blog->featured_image) }}" 
                         class="card-img-top" 
                         alt="{{ $blog->title }}"
                         style="max-height: 400px; object-fit: cover;">
                @endif
                
                <div class="card-body p-4">
                    <!-- Category and Tags -->
                    <div class="mb-3">
                        @if($blog->category)
                            <span class="badge bg-primary mb-2">{{ $blog->category }}</span>
                        @endif
                        @if($blog->tags && count($blog->tags) > 0)
                            @foreach($blog->tags as $tag)
                                <span class="badge bg-secondary mb-2">{{ $tag }}</span>
                            @endforeach
                        @endif
                    </div>

                    <!-- Title -->
                    <h1 class="display-5 fw-bold mb-3">{{ $blog->title }}</h1>

                    <!-- Meta Information -->
                    <div class="d-flex flex-wrap align-items-center gap-3 text-muted mb-4 pb-3 border-bottom">
                        <div>
                            @if($blog->author_name)
                                <strong>👤 {{ $blog->author_name }}</strong>
                            @elseif($blog->author)
                                <strong>👤 {{ $blog->author->name }}</strong>
                            @endif
                        </div>
                        @if($blog->published_at)
                            <div>📅 {{ $blog->published_at->format('F d, Y') }}</div>
                        @endif
                        <div>👁️ {{ $blog->view_count }} views</div>
                    </div>

                    <!-- Excerpt -->
                    @if($blog->excerpt)
                        <div class="lead text-muted mb-4">
                            {{ $blog->excerpt }}
                        </div>
                    @endif

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

            <!-- Share Section -->
            <div class="card mt-4 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Share this blog</h5>
                    <div class="d-flex gap-2">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->fullUrl()) }}" 
                           target="_blank" 
                           class="btn btn-outline-primary btn-sm">
                            📘 Facebook
                        </a>
                        <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->fullUrl()) }}&text={{ urlencode($blog->title) }}" 
                           target="_blank" 
                           class="btn btn-outline-info btn-sm">
                            🐦 Twitter
                        </a>
                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->fullUrl()) }}" 
                           target="_blank" 
                           class="btn btn-outline-primary btn-sm">
                            💼 LinkedIn
                        </a>
                        <button onclick="copyToClipboard('{{ request()->fullUrl() }}')" 
                                class="btn btn-outline-secondary btn-sm">
                            📋 Copy Link
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-12 col-lg-4 mt-4 mt-lg-0">
            <!-- Related Blogs -->
            @if($relatedBlogs->count() > 0)
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">📚 Related Blogs</h5>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($relatedBlogs as $relatedBlog)
                            <a href="{{ route('blogs.show', $relatedBlog->slug) }}" 
                               class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">{{ $relatedBlog->title }}</h6>
                                </div>
                                @if($relatedBlog->excerpt)
                                    <p class="mb-1 small text-muted">{{ Str::limit($relatedBlog->excerpt, 80) }}</p>
                                @endif
                                <small class="text-muted">
                                    {{ $relatedBlog->published_at ? $relatedBlog->published_at->format('M d, Y') : '' }}
                                </small>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Categories -->
            @if($categories->count() > 0)
                <div class="card shadow-sm">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">📂 Categories</h5>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($categories as $category)
                            <a href="{{ route('blogs.index', ['category' => $category]) }}" 
                               class="list-group-item list-group-item-action">
                                {{ $category }}
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

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

.blog-content p {
    margin-bottom: 1.5rem;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.blog-content table th,
.blog-content table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    text-align: left;
}

.blog-content table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.blog-content ul,
.blog-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.blog-content li {
    margin-bottom: 0.5rem;
}

.blog-content a {
    color: #0d6efd;
    text-decoration: none;
}

.blog-content a:hover {
    text-decoration: underline;
}

.blog-content blockquote {
    border-left: 4px solid #0d6efd;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6c757d;
}

.blog-content pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.blog-content code {
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9em;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.blog-content h1 { font-size: 2rem; }
.blog-content h2 { font-size: 1.75rem; }
.blog-content h3 { font-size: 1.5rem; }
.blog-content h4 { font-size: 1.25rem; }
.blog-content h5 { font-size: 1.1rem; }
.blog-content h6 { font-size: 1rem; }

@media (max-width: 768px) {
    .display-5 {
        font-size: 2rem;
    }
    
    .blog-content {
        font-size: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .list-group-item {
        padding: 0.75rem;
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .display-5 {
        font-size: 1.75rem;
    }
    
    .blog-content {
        font-size: 0.95rem;
    }
    
    .blog-content img {
        margin: 1rem 0;
    }
}
</style>
@endpush

@push('scripts')
<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert('Link copied to clipboard!');
    }, function(err) {
        console.error('Failed to copy: ', err);
        // Fallback for older browsers
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        alert('Link copied to clipboard!');
    });
}
</script>
@endpush