@extends('layouts.blog')

@section('meta_title', 'Tag: ' . $tag->name)
@section('meta_description', 'Posts tagged with ' . $tag->name)

@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>
        <li class="breadcrumb-item active">Tag: {{ $tag->name }}</li>
    </ol>
</nav>

<div class="row">
    {{-- Main Content --}}
    <div class="col-lg-8">
        <div class="mb-4">
            <h1 class="h2"><i class="ti ti-tag me-2"></i>{{ $tag->name }}</h1>
            <p class="text-muted">{{ $posts->total() }} posts found</p>
        </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">
                            @if($post->category)
                                <a href="{{ $post->category->url }}" class="category-badge">{{ $post->category->name }}</a>
                            @endif
                            <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">Tidak ada post dengan tag 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 $pTag)
                    <a href="{{ $pTag->url }}" class="{{ $pTag->id == $tag->id ? 'bg-primary text-white' : '' }}">{{ $pTag->name }}</a>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection