@extends('layouts.blog')

@section('meta_title', $category->effective_meta_title)
@section('meta_description', $category->effective_meta_description)
@section('canonical_url', $category->url)

@section('content')
{{-- Breadcrumb --}}
<nav aria-label="breadcrumb" class="blog-breadcrumb">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
        <li class="breadcrumb-item"><a href="{{ route('blog.index') }}">Blog</a></li>
        @foreach($category->ancestors as $ancestor)
            <li class="breadcrumb-item"><a href="{{ $ancestor->url }}">{{ $ancestor->name }}</a></li>
        @endforeach
        <li class="breadcrumb-item active">{{ $category->name }}</li>
    </ol>
</nav>

<div class="row">
    {{-- Main Content --}}
    <div class="col-lg-8">
        <div class="mb-4">
            <h1 class="h2">{{ $category->name }}</h1>
            @if($category->description)
                <p class="lead text-muted">{{ $category->description }}</p>
            @endif
        </div>

        <div class="row">
            @forelse($posts as $post)
                <div class="col-md-6 mb-4">
                    <div class="post-card h-100">
                        @if($post->featured_image_url)
                            <img src="{{ $post->featured_image_url }}" alt="{{ $post->title }}" loading="lazy">
                        @else
                            <img src="https://via.placeholder.com/400x200?text=No+Image" alt="{{ $post->title }}">
                        @endif
                        <div class="card-body">
                            <h3><a href="{{ $post->url }}">{{ $post->title }}</a></h3>
                            <p class="text-muted mb-3">{{ $post->excerpt }}</p>
                            <div class="meta d-flex justify-content-between">
                                <span><i class="ti ti-calendar me-1"></i>{{ $post->published_at->format('d M Y') }}</span>
                                <span><i class="ti ti-eye me-1"></i>{{ number_format($post->views_count) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-info">Belum ada post di kategori ini.</div>
                </div>
            @endforelse
        </div>

        {{-- Pagination --}}
        <div class="d-flex justify-content-center mt-4">
            {{ $posts->links('vendor.pagination.blog') }}
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="col-lg-4">
        {{-- Popular Posts --}}
        <div class="sidebar-widget">
            <h4><i class="ti ti-flame me-2"></i>Popular Posts</h4>
            @foreach($popularPosts as $popular)
                <div class="popular-post">
                    @if($popular->featured_image_url)
                        <img src="{{ $popular->featured_image_url }}" alt="{{ $popular->title }}">
                    @else
                        <img src="https://via.placeholder.com/60x60?text=No" alt="{{ $popular->title }}">
                    @endif
                    <div>
                        <h5><a href="{{ $popular->url }}">{{ Str::limit($popular->title, 50) }}</a></h5>
                        <small class="text-muted">{{ number_format($popular->views_count) }} views</small>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Tags --}}
        <div class="sidebar-widget">
            <h4><i class="ti ti-tags me-2"></i>Popular Tags</h4>
            <div class="tag-cloud">
                @foreach($popularTags as $tag)
                    <a href="{{ $tag->url }}">{{ $tag->name }}</a>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection