@extends('layouts.app')

@section('content')
<!-- Blog Detail Hero -->
<header class="hero-section min-vh-75">
    <div class="bg-mesh">
        <div class="mesh-circle-1"></div>
        <div class="mesh-circle-2"></div>
    </div>
    <div class="container hero-content">
        <div class="mb-4" data-aos="fade-up">
            @if($post->category)
                <div class="mb-3">
                    <a href="{{ route('blog.category', $post->category->slug) }}" class="badge bg-primary rounded-pill px-3 py-2 text-decoration-none">
                        {{ $post->category->name }}
                    </a>
                </div>
            @endif
            <h1 class="display-3 fw-bold mb-4">{{ $post->title }}</h1>
            <div class="d-flex align-items-center justify-content-center gap-4 text-muted flex-wrap">
                <span class="d-flex align-items-center gap-2"><i class="far fa-calendar-alt text-primary"></i> {{ $post->published_at->format('F d, Y') }}</span>
                <span class="d-flex align-items-center gap-2"><i class="far fa-clock text-primary"></i> {{ $post->reading_time ?? '5' }} min read</span>
                <span class="d-flex align-items-center gap-2"><i class="far fa-eye text-primary"></i> {{ $post->views_count }} views</span>
            </div>
        </div>
    </div>
</header>

<section class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 mx-auto">
                <!-- Article Header Image -->
                @if($post->featured_image)
                    <div class="article-featured-image mb-5" data-aos="zoom-in">
                        <img src="{{ asset('storage/' . $post->featured_image) }}" class="img-fluid rounded-5 shadow-lg w-100" alt="{{ $post->title }}">
                    </div>
                @endif

                <div class="row g-5">
                    <!-- Article Content -->
                    <div class="col-lg-12">
                        <article class="blog-post-content" data-aos="fade-up">
                            <!-- Author Card -->
                            <div class="author-meta-box mb-5 p-4 rounded-4 d-flex align-items-center gap-3">
                                <div class="author-avatar">
                                    @if($post->author->avatar)
                                        <img src="{{ asset('storage/' . $post->author->avatar) }}" alt="{{ $post->author->name }}" class="rounded-circle object-fit-cover" style="width: 56px; height: 56px;">
                                    @else
                                        <div class="avatar-placeholder rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 56px; height: 56px;">
                                            <i class="fa-solid fa-user-tie mb-0"></i>
                                        </div>
                                    @endif
                                </div>
                                <div>
                                    <h6 class="text-white fw-bold mb-0">{{ $post->author->name }}</h6>
                                    <small class="text-muted">Tech Insights Specialist</small>
                                </div>
                                <div class="ms-auto d-none d-sm-block">
                                    <div class="share-buttons d-flex gap-2">
                                        @if(isset($post->author->social_links['twitter']) && $post->author->social_links['twitter'] !== '#')
                                            <a href="{{ $post->author->social_links['twitter'] }}" target="_blank" class="btn btn-outline-light btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; padding: 0;"><i class="fab fa-twitter"></i></a>
                                        @endif
                                        @if(isset($post->author->social_links['facebook']) && $post->author->social_links['facebook'] !== '#')
                                            <a href="{{ $post->author->social_links['facebook'] }}" target="_blank" class="btn btn-outline-light btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; padding: 0;"><i class="fab fa-facebook-f"></i></a>
                                        @endif
                                        @if(isset($post->author->social_links['linkedin']) && $post->author->social_links['linkedin'] !== '#')
                                            <a href="{{ $post->author->social_links['linkedin'] }}" target="_blank" class="btn btn-outline-light btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; padding: 0;"><i class="fab fa-linkedin-in"></i></a>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="post-text text-muted" style="font-size: 1.2rem; line-height: 1.8;">
                                {!! nl2br(e($post->content)) !!}
                            </div>
                        </article>

                        <!-- Comments Section -->
                        <div id="comments" class="mt-5 pt-5 border-top border-white border-opacity-10" data-aos="fade-up">
                            <h3 class="fw-bold text-white mb-5">Discussion ({{ $post->approvedComments->count() }})</h3>

                            @if(session('success'))
                                <div class="alert alert-success border-0 bg-success bg-opacity-10 text-success rounded-4 mb-4">
                                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                                </div>
                            @endif

                            <!-- Comment Form -->
                            <div class="modern-card p-4 p-md-5 mb-5">
                                <h5 class="fw-bold text-white mb-4">Leave a perspective</h5>
                                <form action="{{ route('blog.comment.store', $post->slug) }}" method="POST">
                                    @csrf
                                    <input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off">
                                    <div class="row g-4">
                                        <div class="col-md-6">
                                            <input type="text" name="name" class="form-control glass-input" required placeholder="Full Name">
                                        </div>
                                        <div class="col-md-6">
                                            <input type="email" name="email" class="form-control glass-input" required placeholder="Email Address">
                                        </div>
                                        <div class="col-12">
                                            <textarea name="comment" rows="5" class="form-control glass-input" required placeholder="Your thoughts..."></textarea>
                                        </div>
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-primary px-5">Post Comment</button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!-- Comments List -->
                            <div class="comments-list d-grid gap-4">
                                @foreach($post->approvedComments as $comment)
                                    <div class="comment-item p-4 rounded-4 bg-dark-accent border border-white border-opacity-5">
                                        <div class="d-flex justify-content-between mb-3">
                                            <h6 class="text-white fw-bold mb-0">{{ $comment->name }}</h6>
                                            <small class="text-muted">{{ $comment->created_at->diffForHumans() }}</small>
                                        </div>
                                        <p class="text-muted mb-0">{{ $comment->comment }}</p>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Related Posts Section -->
        @if($relatedPosts->count() > 0)
            <div class="mt-5 pt-5" data-aos="fade-up">
                <div class="d-flex justify-content-between align-items-end mb-4">
                    <h3 class="fw-bold text-white mb-0">Continue <span class="text-primary">Reading</span></h3>
                    <a href="{{ route('blog.index') }}" class="text-primary text-decoration-none small fw-bold">View All <i class="fas fa-arrow-right ms-1"></i></a>
                </div>
                <div class="row g-4">
                    @foreach($relatedPosts as $related)
                        <div class="col-md-4">
                            <article class="modern-blog-card">
                                @if($related->featured_image)
                                    <div class="card-image" style="height: 180px;">
                                        <img src="{{ asset('storage/' . $related->featured_image) }}" alt="{{ $related->title }}">
                                    </div>
                                @endif
                                <div class="card-body p-4">
                                    <h5 class="fw-bold mb-3">
                                        <a href="{{ route('blog.show', $related->slug) }}" class="text-white text-decoration-none hover-primary">
                                            {{ $related->title }}
                                        </a>
                                    </h5>
                                    <div class="d-flex justify-content-between align-items-center mt-auto">
                                        <small class="text-muted">{{ $related->published_at->format('M d, Y') }}</small>
                                        <a href="{{ route('blog.show', $related->slug) }}" class="text-primary text-decoration-none small"><i class="fas fa-plus"></i></a>
                                    </div>
                                </div>
                            </article>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</section>
@endsection