@extends('layouts.blog')

@section('meta_title', 'Blog')
@section('meta_description', 'Artikel terbaru, tutorial, dan berita terkini')

@section('content')
<div class="row">
    {{-- Main Content --}}
    <div class="col-lg-8">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3 mb-0">Latest Posts</h1>
        </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">Belum ada post yang dipublish.</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>

        {{-- Categories --}}
        <div class="sidebar-widget">
            <h4><i class="ti ti-folder me-2"></i>Categories</h4>
            <ul class="list-unstyled mb-0">
                @foreach($categories as $category)
                    <li class="d-flex justify-content-between py-2 border-bottom">
                        <a href="{{ $category->url }}" class="text-decoration-none">{{ $category->name }}</a>
                        <span class="badge bg-secondary">{{ $category->posts_count }}</span>
                    </li>
                @endforeach
            </ul>
        </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