@extends('layouts.app')

@section('title', 'Knowledge Hub & Blogs | AICDS')

@section('content')

<x-breadcrumb title="Knowledge Hub & Blogs" :breadcrumbs="['Knowledge Hub' => route('blogs.index')]" />

<div class="blog__section sp_top_100 sp_bottom_100">
    <div class="container">
        <div class="row">
            <!-- Main Content Grid -->
            <div class="col-xl-8 col-lg-8" data-aos="fade-up">
                <div class="row">
                    @forelse($posts as $post)
                        <div class="col-md-6 mb-4">
                            <x-blog-card :post="$post" />
                        </div>
                    @empty
                        <div class="col-12 text-center py-5">
                            <div class="p-5 bg-light rounded-4 border">
                                <i class="icofont-newspaper display-4 text-muted mb-3 d-block"></i>
                                <h4 class="fw-bold">No Blog Posts Found</h4>
                                <p class="text-muted">No published articles match your query.</p>
                            </div>
                        </div>
                    @endforelse
                </div>

                <div class="d-flex justify-content-center mt-4">
                    {{ $posts->links() }}
                </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">Search Knowledge Hub</h5>
                    <form action="{{ route('blogs.index') }}" method="GET">
                        <div class="input-group">
                            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search articles...">
                            <button class="default__button px-3 border-0" type="submit"><i class="icofont-search"></i></button>
                        </div>
                    </form>
                </div>

                <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="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($recentPosts->count() > 0)
                    <div class="p-4 bg-light rounded-4 border shadow-sm">
                        <h5 class="fw-bold mb-3">Recent Publications</h5>
                        @foreach($recentPosts as $rec)
                            <div class="d-flex align-items-center gap-3 mb-3 pb-2 border-bottom">
                                <img src="{{ asset($rec->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', $rec->slug) }}" class="text-dark text-decoration-none">
                                            {{ Str::limit($rec->title, 45) }}
                                        </a>
                                    </h6>
                                    <small class="text-muted">{{ $rec->published_at ? $rec->published_at->format('M d, Y') : '' }}</small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection