@extends('layouts.app')

@section('title', $category->name)
@section('meta_description', $category->description)

@section('content')
    <!-- Breadcrumb -->
    <nav class="flex mb-6 text-sm text-gray-400" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ url('/') }}" class="inline-flex items-center hover:text-white">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
                    Home
                </a>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400" 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"></path></svg>
                    <span class="ml-1 text-gray-100 md:ml-2 font-medium">{{ $category->name }}</span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left Column: News List -->
        <div class="lg:col-span-2">
            <h1 class="text-3xl font-bold text-white mb-6 border-l-4 border-blue-500 pl-4">{{ $category->name }} News</h1>
            
            @if($posts->count() > 0)
            <div class="space-y-6">
                @foreach($posts as $post)
                <a href="{{ url('/post/' . $post->slug) }}" class="flex flex-col sm:flex-row gap-4 bg-gray-800 p-4 rounded-lg shadow hover:bg-gray-750 transition group block">
                    <div class="w-full sm:w-48 h-32 flex-shrink-0 overflow-hidden rounded">
                        <img src="{{ $post->image ?? 'https://placehold.co/400x250/1f2937/60a5fa?text='.urlencode($post->title) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform">
                    </div>
                    <div class="flex-grow">
                        <div class="text-xs text-blue-400 mb-1">{{ $post->published_at->format('M d, Y') }}</div>
                        <h3 class="text-lg font-bold text-white mb-2 group-hover:text-blue-400 leading-tight">{{ $post->title }}</h3>
                        <p class="text-gray-400 text-sm line-clamp-2 mb-3">{{ $post->excerpt ?? Str::limit(strip_tags($post->content), 150) }}</p>
                        <div class="flex items-center gap-3 text-xs text-gray-500">
                            <span class="font-semibold text-gray-300">By Admin</span>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="mt-10 flex justify-center">
                {{ $posts->onEachSide(1)->links() }}
            </div>
            @else
            <div class="bg-gray-800 p-6 rounded-lg text-center text-gray-400">
                <p>No posts found in this category.</p>
            </div>
            @endif
        </div>

        <!-- Right Column: Sidebar -->
        <div class="lg:col-span-1 space-y-8">
            
            <!-- Search Widget -->
            <div class="bg-gray-800 p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-bold text-white mb-4">Search</h3>
                <form action="{{ route('search') }}" method="GET" class="relative">
                    <input type="text" name="q" placeholder="Search news..." class="w-full bg-gray-700 text-white border border-gray-600 rounded-lg py-2 px-4 focus:outline-none focus:border-blue-500">
                    <button type="submit" class="absolute right-2 top-2 text-gray-400 hover:text-white">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    </button>
                </form>
            </div>

            <!-- Categories Widget -->
            <div class="bg-gray-800 p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-bold text-white mb-4">Categories</h3>
                <ul class="space-y-2">
                    @foreach($categories as $cat)
                    <li>
                        <a href="{{ url('/category/' . $cat->slug) }}" class="text-gray-300 hover:text-blue-400 flex justify-between">
                            <span>{{ $cat->name }}</span> 
                            <!-- <span class="text-gray-600 text-xs bg-gray-900 px-2 py-0.5 rounded-full">0</span> -->
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>

            <!-- Popular Posts Widget -->
            <div class="bg-gray-800 p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-bold text-white mb-4">Popular</h3>
                <div class="space-y-4">
                    @foreach($popularPosts as $popularPost)
                    <a href="{{ url('/post/' . $popularPost->slug) }}" class="flex gap-3 group">
                        <div class="w-16 h-16 flex-shrink-0 overflow-hidden rounded bg-gray-700">
                            <img src="{{ $popularPost->image ?? 'https://placehold.co/100x100/1f2937/60a5fa?text=Pop' }}" alt="{{ $popularPost->title }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform">
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-white leading-snug group-hover:text-blue-400 line-clamp-2">{{ $popularPost->title }}</h4>
                            <span class="text-xs text-gray-500 mt-1 block">{{ $popularPost->published_at->format('M d, Y') }}</span>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>

        </div>

    </div>
@endsection