@extends('layouts.app')

@section('title', ($post->seo_title ?? $post->title) . ' | AICDS Knowledge Hub')
@section('meta_description', $post->seo_description ?? Str::limit(strip_tags($post->excerpt), 150))

@section('content')

<x-breadcrumb :title="$post->title" :breadcrumbs="['Knowledge Hub' => route('blogs.index'), $post->category->name => route('blogs.category', $post->category->slug), 'Article' => '#']" />

<div class="blog__details__area sp_top_100 sp_bottom_100">
    <div class="container">
        <div class="row">
            <!-- Article Body -->
            <div class="col-xl-8 col-lg-8" data-aos="fade-up">
                <div class="blog__details__img mb-4 rounded-4 overflow-hidden shadow">
                    <img loading="lazy" src="{{ asset($post->featured_image ?? 'img/blog/blog_1.png') }}" alt="{{ $post->title }}" class="w-100" style="max-height: 440px; object-fit: cover;">
                </div>

                <div class="d-flex align-items-center gap-3 mb-3 text-muted small">
                    <span class="badge bg-primary text-uppercase px-3 py-1">{{ $post->category->name }}</span>
                    <span><i class="icofont-calendar text-primary me-1"></i> {{ $post->published_at ? $post->published_at->format('F d, Y') : 'Draft' }}</span>
                    <span><i class="icofont-user text-primary me-1"></i> {{ $post->author->name ?? 'AICDS Editorial' }}</span>
                    <span><i class="icofont-eye text-primary me-1"></i> {{ $post->view_count }} Views</span>
                </div>

                <h1 class="fw-bold mb-4">{{ $post->title }}</h1>

                <div class="lead text-muted mb-4 pb-3 border-bottom fst-italic">
                    {{ $post->excerpt }}
                </div>

                <div class="blog__content__body lh-lg text-dark fs-6">
                    {!! $post->content !!}
                </div>

                <!-- Author Bio Box -->
                <div class="p-4 bg-light rounded-4 border mt-5 d-flex align-items-center gap-3">
                    <div class="rounded-circle bg-primary text-white p-3 fs-3 d-flex align-items-center justify-content-center" style="width: 65px; height: 65px;">
                        <i class="icofont-user-alt-5"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">{{ $post->author->name ?? 'AICDS Editorial Team' }}</h6>
                        <small class="text-muted">{{ $post->author->designation ?? 'AICDS Research & Knowledge Council' }}</small>
                        <p class="small text-muted mb-0 mt-1">Contributing insights on computational theory, scalable vector indexing, and ethical machine learning architectures.</p>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-xl-4 col-lg-4" data-aos="fade-up">
                <div class="p-4 bg-light rounded-4 border shadow-sm mb-4">
                    <h5 class="fw-bold mb-3">Categories</h5>
                    <ul class="list-unstyled mb-0">
                        @foreach($categories as $cat)
                            <li class="py-2 border-bottom d-flex justify-content-between align-items-center">
                                <a href="{{ route('blogs.category', $cat->slug) }}" class="{{ $cat->id === $post->blog_category_id ? 'fw-bold text-primary' : 'text-dark' }} text-decoration-none">
                                    {{ $cat->name }}
                                </a>
                                <span class="badge bg-primary-subtle text-primary">{{ $cat->posts_count }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>

                @if($relatedPosts->count() > 0)
                    <div class="p-4 bg-light rounded-4 border shadow-sm mb-4">
                        <h5 class="fw-bold mb-3">Related Articles</h5>
                        @foreach($relatedPosts as $rel)
                            <div class="d-flex align-items-center gap-3 mb-3 pb-2 border-bottom">
                                <img src="{{ asset($rel->featured_image ?? 'img/blog/blog_1.png') }}" alt="" class="rounded-3" style="width: 60px; height: 60px; object-fit: cover;">
                                <div>
                                    <h6 class="mb-1 small fw-bold">
                                        <a href="{{ route('blogs.show', $rel->slug) }}" class="text-dark text-decoration-none">
                                            {{ Str::limit($rel->title, 45) }}
                                        </a>
                                    </h6>
                                    <small class="text-muted">{{ $rel->published_at ? $rel->published_at->format('M d, Y') : '' }}</small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection