{{-- resources/views/frontend/pages/home/blog_details.blade.php --}}
@extends('frontend.layouts.app')

@section('title', $blog->name . ' - ' . config('app.name'))

@section('meta_tags')
    <meta name="description" content="{{ Str::limit(strip_tags($blog->description), 160) }}">
    <meta name="keywords" content="{{ $blog->tags ?? $blog->category ?? '' }}">
    <meta property="og:title" content="{{ $blog->name }}">
    <meta property="og:description" content="{{ Str::limit(strip_tags($blog->description), 160) }}">
    <meta property="og:image" content="{{ asset($blog->image) }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta name="twitter:card" content="summary_large_image">
@endsection

@section('content')
    <!-- Modern Blog Header -->
    <div class="blog-header-modern position-relative mb-5"
        style="background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 100%), url('{{ asset('uploads/bg-image/blog-bg.jpg') }}') center/cover no-repeat fixed;">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <div class="breadcrumb-wrapper mb-3">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb justify-content-center bg-transparent">
                                <li class="breadcrumb-item"><a class="text-white-50" href="{{ url('/') }}">Home</a></li>
                                <li class="breadcrumb-item"><a class="text-white-50" href="#">Blog</a></li>
                                <li class="breadcrumb-item text-white active" aria-current="page">{{ Str::limit($blog->name, 50) }}</li>
                            </ol>
                        </nav>
                    </div>
                    <h1 class="display-4 text-white fw-bold mb-4 animate__animated animate__fadeInUp">{{ $blog->name }}</h1>
                    <div class="blog-meta-modern d-flex flex-wrap justify-content-center gap-4 text-white-50">
                        <span><i class="far fa-calendar-alt me-2 text-primary"></i>{{ $blog->created_at->format('F d, Y') }}</span>
                        <span><i class="far fa-user me-2 text-primary"></i>By <span class="text-white">{{ $blog->author ?? 'Admin' }}</span></span>
                        @if($blog->category)
                        <span><i class="far fa-folder me-2 text-primary"></i>{{ $blog->category }}</span>
                        @endif
                        <span><i class="far fa-clock me-2 text-primary"></i>{{ $blog->created_at->diffForHumans() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="container mb-5">
        <div class="row g-5">
            <!-- Main Content Column -->
            <div class="col-lg-8">
                <!-- Featured Image with Caption -->
                @if($blog->image)
                <div class="featured-image-wrapper mb-4">
                    <div class="position-relative overflow-hidden rounded-4 shadow-lg">
                        <img class="img-fluid w-100" src="{{ asset($blog->image) }}" 
                             alt="{{ $blog->name }}" 
                             style="max-height: 500px; object-fit: cover; width: 100%;">
                        @if($blog->image_caption)
                        <figcaption class="text-muted small text-center py-2 bg-light">{{ $blog->image_caption }}</figcaption>
                        @endif
                    </div>
                </div>
                @endif

                <!-- Blog Content Card -->
                <div class="blog-content-card bg-white rounded-4 shadow-sm p-4 p-lg-5">
                    <!-- Post Meta Details -->
                    <div class="post-meta-details mb-4 pb-3 border-bottom">
                        <div class="row g-3">
                            @if($blog->category)
                            <div class="col-md-4">
                                <div class="meta-item">
                                    <i class="fas fa-folder-open text-primary me-2"></i>
                                    <span class="text-muted">Category:</span>
                                    <span class="fw-semibold ms-1">{{ $blog->category }}</span>
                                </div>
                            </div>
                            @endif
                            @if($blog->reading_time)
                            <div class="col-md-4">
                                <div class="meta-item">
                                    <i class="fas fa-clock text-primary me-2"></i>
                                    <span class="text-muted">Reading Time:</span>
                                    <span class="fw-semibold ms-1">{{ $blog->reading_time }} min read</span>
                                </div>
                            </div>
                            @endif
                            <div class="col-md-4">
                                <div class="meta-item">
                                    <i class="fas fa-eye text-primary me-2"></i>
                                    <span class="text-muted">Views:</span>
                                    <span class="fw-semibold ms-1">{{ number_format($blog->views ?? 0) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Blog Content -->
                    <div class="blog-content prose prose-lg max-w-none">
                        {!! $blog->description !!}
                    </div>

                    <!-- Tags Section -->
                    @if($blog->tags)
                    <div class="tags-section mt-5 pt-3">
                        <div class="d-flex flex-wrap align-items-center gap-2">
                            <span class="fw-semibold me-2"><i class="fas fa-tags text-primary"></i> Tags:</span>
                            @foreach(explode(',', $blog->tags) as $tag)
                            <span class="tag-badge px-3 py-2 bg-light text-dark rounded-pill text-decoration-none small">
                                {{ trim($tag) }}
                            </span>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <!-- Share & Actions -->
                    <div class="share-actions mt-5 pt-3 border-top">
                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                            <div class="share-buttons">
                                <span class="fw-semibold me-3">Share this article:</span>
                                <div class="d-inline-flex gap-2">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" 
                                       target="_blank" 
                                       class="btn btn-sm btn-outline-primary rounded-circle social-share"
                                       data-bs-toggle="tooltip" title="Share on Facebook">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($blog->name) }}" 
                                       target="_blank" 
                                       class="btn btn-sm btn-outline-info rounded-circle social-share"
                                       data-bs-toggle="tooltip" title="Share on Twitter">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}" 
                                       target="_blank" 
                                       class="btn btn-sm btn-outline-primary rounded-circle social-share"
                                       data-bs-toggle="tooltip" title="Share on LinkedIn">
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>
                                    <a href="https://wa.me/?text={{ urlencode($blog->name . ' - ' . url()->current()) }}" 
                                       target="_blank" 
                                       class="btn btn-sm btn-outline-success rounded-circle social-share"
                                       data-bs-toggle="tooltip" title="Share on WhatsApp">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>
                                    <button onclick="copyToClipboard('{{ url()->current() }}')" 
                                            class="btn btn-sm btn-outline-secondary rounded-circle social-share"
                                            data-bs-toggle="tooltip" title="Copy Link">
                                        <i class="fas fa-link"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button onclick="window.print()" class="btn btn-sm btn-light rounded-pill">
                                    <i class="fas fa-print me-1"></i> Print
                                </button>
                                <button onclick="saveBookmark()" class="btn btn-sm btn-light rounded-pill">
                                    <i class="far fa-bookmark me-1"></i> Save
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Author Bio Section -->
                @if($blog->author_bio)
                <div class="author-bio-card bg-light rounded-4 p-4 mt-4">
                    <div class="d-flex gap-3">
                        @if($blog->users->image)
                        <img src="{{ asset($blog->users->image) }}" alt="{{ $blog->image }}" 
                             class="rounded-circle" width="80" height="80" style="object-fit: cover;">
                        @else
                        <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center text-white" 
                             style="width: 80px; height: 80px;">
                            <i class="fas fa-user fa-2x"></i>
                        </div>
                        @endif
                        <div>
                            <h5 class="mb-1">About {{ $blog->author ?? 'The Author' }}</h5>
                            <p class="text-muted small mb-2">{!! $blog->author_bio !!}</p>
                            <div class="author-social">
                                @if($blog->author_twitter)
                                <a href="{{ $blog->author_twitter }}" class="text-muted me-2"><i class="fab fa-twitter"></i></a>
                                @endif
                                @if($blog->author_linkedin)
                                <a href="{{ $blog->author_linkedin }}" class="text-muted me-2"><i class="fab fa-linkedin"></i></a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Post Navigation -->
                @php
                    $previousPost = App\Models\Yojana::where('status', 'active')
                        ->where('id', '<', $blog->id)
                        ->orderBy('id', 'desc')
                        ->first();
                    $nextPost = App\Models\Yojana::where('status', 'active')
                        ->where('id', '>', $blog->id)
                        ->orderBy('id', 'asc')
                        ->first();
                @endphp
                
                @if($previousPost || $nextPost)
                <nav class="post-navigation mt-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            @if($previousPost)
                            <a href="{{ url('blog/' . $previousPost->slug) }}" 
                               class="navigation-card d-block bg-white rounded-4 p-4 shadow-sm text-decoration-none hover-lift">
                                <span class="text-muted small text-uppercase"><i class="fas fa-arrow-left me-1"></i> Previous Post</span>
                                <h6 class="mb-0 mt-2 text-dark">{{ Str::limit($previousPost->name, 60) }}</h6>
                            </a>
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if($nextPost)
                            <a href="{{ url('blog/' . $nextPost->slug) }}" 
                               class="navigation-card d-block bg-white rounded-4 p-4 shadow-sm text-decoration-none hover-lift text-end">
                                <span class="text-muted small text-uppercase">Next Post <i class="fas fa-arrow-right ms-1"></i></span>
                                <h6 class="mb-0 mt-2 text-dark">{{ Str::limit($nextPost->name, 60) }}</h6>
                            </a>
                            @endif
                        </div>
                    </div>
                </nav>
                @endif

                <!-- Related Posts -->
                @if(isset($relatedPosts) && $relatedPosts->count() > 0)
                <section class="related-posts mt-5">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h3 class="mb-0 fw-bold">You Might Also Like</h3>
                            <p class="text-muted small mb-0">Related articles you may find interesting</p>
                        </div>
                    </div>
                    <div class="row g-4">
                        @foreach($relatedPosts as $related)
                        <div class="col-md-6">
                            <div class="related-card h-100 bg-white rounded-4 overflow-hidden shadow-sm hover-lift">
                                <div class="position-relative">
                                    <img src="{{ asset($related->image) }}" 
                                         class="img-fluid w-100" 
                                         alt="{{ $related->name }}"
                                         style="height: 200px; object-fit: cover;">
                                </div>
                                <div class="p-4">
                                    <h5 class="card-title mb-2">
                                        <a href="{{ url('blog/' . $related->slug) }}" class="text-dark text-decoration-none stretched-link">
                                            {{ Str::limit($related->name, 60) }}
                                        </a>
                                    </h5>
                                    <p class="text-muted small mb-3">
                                        <i class="far fa-calendar-alt me-1"></i> {{ $related->created_at->format('M d, Y') }}
                                    </p>
                                    <p class="card-text text-secondary small">{{ Str::limit(strip_tags($related->description), 100) }}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </section>
                @endif

                <!-- Comments Section - FIXED -->
                @if($blog->status !== 0)
                <section class="comments-section mt-5" id="comments">
                    <div class="bg-white rounded-4 shadow-sm p-4 p-lg-5">
                        <h3 class="mb-4 fw-bold">Comments ({{ $comments->total() ?? 0 }})</h3>
                        
                        <!-- Comments List - FIXED: Using $comments variable -->
                        <div class="comments-list mb-5">
                            @forelse($comments as $comment)
                            <div class="comment-item d-flex gap-3 mb-4 pb-3 border-bottom">
                                <img src="{{ $comment->users->image ?? asset('images/default-avatar.png') }}" 
                                     alt="{{ $comment->users->name ?? 'User' }}" 
                                     class="rounded-circle" width="50" height="50" style="object-fit: cover;">
                                <div class="comment-content flex-grow-1">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <div>
                                            <h6 class="mb-0 fw-semibold">{{ $comment->users->name ?? 'Anonymous' }}</h6>
                                            <small class="text-muted">{{ $comment->created_at->diffForHumans() }}</small>
                                        </div>
                                        @auth
                                            @if(Auth::user()->id == $comment->user_id || Auth::user()->user_type == 'admin')
                                            <form action="{{ route('review.destroy', $comment->id) }}" method="POST" onsubmit="return confirm('Delete this comment?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-link text-danger">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                            @endif
                                        @endauth
                                    </div>
                                    <p class="mb-2">{{ $comment->comment }}</p>
                                </div>
                            </div>
                            @empty
                            <div class="text-center py-4">
                                <i class="fas fa-comments fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No comments yet. Be the first to comment!</p>
                            </div>
                            @endforelse
                        </div>

                        <!-- Pagination for comments -->
                        @if(method_exists($comments, 'links') && $comments->hasPages())
                        <div class="d-flex justify-content-center mb-4">
                            {{ $comments->links() }}
                        </div>
                        @endif

                        <!-- Comment Form -->
                        <div class="comment-form">
                            <h4 class="mb-3">Leave a Comment</h4>
                            @guest
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                To post a comment, you need to <a href="{{ route('login') }}" class="alert-link">login first</a>
                            </div>
                            @else
                            <form action="{{ route('review.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="blog_id" value="{{ $blog->id }}">
                                <input type="hidden" name="ward_id" value="{{ $blog->ward_id ?? '' }}">
                                <div class="row g-3">
                                    <div class="col-12">
                                        <textarea class="form-control @error('comment') is-invalid @enderror" 
                                                  name="comment" rows="5" 
                                                  placeholder="Share your thoughts about this article..." 
                                                  required>{{ old('comment') }}</textarea>
                                        @error('comment')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary rounded-pill px-5 py-2">
                                            Post Comment <i class="fas fa-paper-plane ms-2"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                            @endguest
                        </div>
                    </div>
                </section>
                @endif
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <div class="sidebar-sticky">
                    <!-- Search Widget -->
                    <div class="sidebar-widget bg-white rounded-4 shadow-sm p-4 mb-4">
                        <h5 class="widget-title fw-bold mb-3"><i class="fas fa-search text-primary me-2"></i>Search</h5>
                        <form action="{{ url('/') }}" method="GET">
                            <div class="input-group">
                                <input type="text" class="form-control" name="query" placeholder="Search articles..." value="{{ request('query') }}">
                                <button class="btn btn-primary" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Categories Widget -->
                    @if(isset($categories) && $categories->count() > 0)
                    <div class="sidebar-widget bg-white rounded-4 shadow-sm p-4 mb-4">
                        <h5 class="widget-title fw-bold mb-3"><i class="fas fa-folder text-primary me-2"></i>Categories</h5>
                        <ul class="list-unstyled mb-0">
                            @foreach($categories as $category)
                            <li class="mb-2">
                                <a href="#" class="text-decoration-none d-flex justify-content-between">
                                    <span><i class="fas fa-angle-right me-2 text-primary"></i>{{ $category->name }}</span>
                                    <span class="badge bg-light text-dark rounded-pill">{{ $category->yojanas_count ?? 0 }}</span>
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    <!-- Recent Posts Widget -->
                    @if(isset($recentPosts) && $recentPosts->count() > 0)
                    <div class="sidebar-widget bg-white rounded-4 shadow-sm p-4 mb-4">
                        <h5 class="widget-title fw-bold mb-3"><i class="fas fa-clock text-primary me-2"></i>Recent Posts</h5>
                        @foreach($recentPosts as $recent)
                        <div class="d-flex gap-3 mb-3 pb-3 border-bottom">
                            @if($recent->image)
                            <img src="{{ asset($recent->image) }}" alt="{{ $recent->name }}" 
                                 class="rounded-3" width="70" height="70" style="object-fit: cover;">
                            @endif
                            <div>
                                <h6 class="mb-1">
                                    <a href="{{ url('blog/' . $recent->slug) }}" class="text-dark text-decoration-none">
                                        {{ Str::limit($recent->name, 40) }}
                                    </a>
                                </h6>
                                <small class="text-muted">{{ $recent->created_at->format('M d, Y') }}</small>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif

                    <!-- Popular Tags Widget -->
                    @if(isset($popularTags) && $popularTags->count() > 0)
                    <div class="sidebar-widget bg-white rounded-4 shadow-sm p-4">
                        <h5 class="widget-title fw-bold mb-3"><i class="fas fa-tags text-primary me-2"></i>Popular Tags</h5>
                        <div class="tag-cloud">
                            @foreach($popularTags as $tag)
                            <span class="tag-link d-inline-block bg-light rounded-pill px-3 py-1 me-2 mb-2 text-decoration-none small">
                                {{ $tag->name }}
                            </span>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .blog-header-modern {
        min-height: 400px;
        display: flex;
        align-items: center;
        background-attachment: fixed;
    }
    
    .blog-content-card {
        line-height: 1.8;
    }
    
    .blog-content {
        font-size: 1.05rem;
        color: #2c3e50;
    }
    
    .blog-content h1, .blog-content h2, .blog-content h3 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-weight: 700;
    }
    
    .blog-content p {
        margin-bottom: 1.5rem;
    }
    
    .blog-content img {
        border-radius: 0.5rem;
        margin: 1.5rem 0;
        max-width: 100%;
        height: auto;
    }
    
    .blog-content blockquote {
        border-left: 4px solid var(--bs-primary);
        padding-left: 1.5rem;
        margin: 1.5rem 0;
        font-style: italic;
        color: #6c757d;
    }
    
    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 2rem rgba(0,0,0,0.1) !important;
    }
    
    .social-share {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .social-share:hover {
        transform: translateY(-2px);
    }
    
    .tag-badge {
        transition: all 0.3s ease;
    }
    
    .tag-badge:hover {
        background-color: var(--bs-primary) !important;
        color: white !important;
        transform: translateY(-2px);
    }
    
    .sidebar-sticky {
        position: sticky;
        top: 100px;
    }
    
    .widget-title {
        position: relative;
        padding-bottom: 10px;
    }
    
    .widget-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background: var(--bs-primary);
        border-radius: 2px;
    }
    
    @media (max-width: 768px) {
        .blog-header-modern {
            min-height: 300px;
            background-attachment: scroll;
        }
        
        .blog-content-card {
            padding: 1.5rem !important;
        }
        
        .sidebar-sticky {
            position: static;
        }
    }
</style>
@endpush

@push('scripts')
<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert('Link copied to clipboard!');
    });
}

function saveBookmark() {
    localStorage.setItem('bookmark_{{ $blog->id }}', 'true');
    alert('Article saved to bookmarks!');
}

document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
@endpush