@extends('layouts.app')

@section('meta_title', $category->name . ' - ' . config('app.name'))
@section('meta_description', 'Artikel-artikel dalam kategori ' . $category->name)
@section('meta_keywords', $category->name . ', artikel, blog')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Breadcrumbs --}}
    <nav class="mb-8" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-4">
            <li>
                <a href="{{ route('blog.index') }}" class="text-gray-500 hover:text-gray-700">
                    Home
                </a>
            </li>
            <li class="flex items-center">
                <svg class="flex-shrink-0 h-5 w-5 text-gray-400 mx-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
                <span class="text-gray-900 font-medium">{{ $category->name }}</span>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {{-- Main Content --}}
        <div class="lg:col-span-3">
            {{-- Category Header --}}
            <div class="mb-8">
                <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ $category->name }}</h1>
                @if($category->description)
                    <p class="text-lg text-gray-600">{{ $category->description }}</p>
                @endif
                <p class="text-sm text-gray-500 mt-2">{{ $posts->total() }} artikel ditemukan</p>
            </div>

            {{-- Posts Grid --}}
            @if($posts->count() > 0)
                <div class="space-y-8">
                    @foreach($posts as $post)
                        <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                            <div class="md:flex">
                                @if($post->featured_image)
                                    <div class="md:w-1/3">
                                        <img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full h-48 md:h-full object-cover">
                                    </div>
                                @endif
                                <div class="p-6 {{ $post->featured_image ? 'md:w-2/3' : 'w-full' }}">
                                    <div class="flex items-center text-sm text-gray-500 mb-2">
                                        <time datetime="{{ $post->published_at->format('Y-m-d') }}">
                                            {{ $post->published_at->format('d M Y') }}
                                        </time>
                                        <span class="mx-2">•</span>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            {{ $post->category->name }}
                                        </span>
                                    </div>
                                    
                                    <h2 class="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 transition-colors duration-200">
                                        <a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a>
                                    </h2>
                                    
                                    <p class="text-gray-600 mb-4 line-clamp-3">{{ $post->excerpt }}</p>
                                    
                                    <div class="flex items-center justify-between">
                                        <a href="{{ route('blog.show', $post->slug) }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
                                            Baca Selengkapnya
                                            <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                            </svg>
                                        </a>
                                        
                                        @if($post->tags->count() > 0)
                                            <div class="flex flex-wrap gap-2">
                                                @foreach($post->tags->take(3) as $tag)
                                                    <a href="{{ route('blog.tag', $tag->slug) }}" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors duration-200">
                                                        {{ $tag->name }}
                                                    </a>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                {{-- Pagination --}}
                <div class="mt-12">
                    {{ $posts->links() }}
                </div>
            @else
                <div class="text-center py-12">
                    <div class="w-24 h-24 mx-auto mb-4 text-gray-400">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Belum Ada Artikel</h3>
                    <p class="text-gray-500">Belum ada artikel dalam kategori {{ $category->name }}.</p>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="lg:col-span-1">
            <div class="space-y-8">
                {{-- Recent Posts --}}
                @if($recentPosts->count() > 0)
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Artikel Terbaru</h3>
                        <div class="space-y-4">
                            @foreach($recentPosts as $recentPost)
                                <div class="flex space-x-3">
                                    @if($recentPost->featured_image)
                                        <div class="flex-shrink-0">
                                            <img src="{{ $recentPost->featured_image }}" alt="{{ $recentPost->title }}" class="w-16 h-16 rounded-lg object-cover">
                                        </div>
                                    @endif
                                    <div class="flex-1 min-w-0">
                                        <h4 class="text-sm font-medium text-gray-900 line-clamp-2 hover:text-blue-600 transition-colors duration-200">
                                            <a href="{{ route('blog.show', $recentPost->slug) }}">{{ $recentPost->title }}</a>
                                        </h4>
                                        <p class="text-xs text-gray-500 mt-1">{{ $recentPost->published_at->format('d M Y') }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Categories --}}
                @if($categories->count() > 0)
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Kategori</h3>
                        <div class="space-y-2">
                            @foreach($categories as $cat)
                                <a href="{{ route('blog.category', $cat->slug) }}" class="flex items-center justify-between text-gray-700 hover:text-blue-600 py-2 border-b border-gray-100 last:border-b-0 {{ $cat->id === $category->id ? 'text-blue-600 font-medium' : '' }}">
                                    <span>{{ $cat->name }}</span>
                                    <span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
                                        {{ $cat->posts_count }}
                                    </span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection