@extends('theme-default::layouts.base')
@section('title', ucfirst($contentType->name) . ' — ' . AleshaSetting::get('site_name'))

@section('content')

{{-- Archive Header --}}
<div class="bg-gradient-to-br from-gray-900 to-gray-800 text-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-20">
        <span class="tag bg-white/10 text-indigo-300 mb-4 inline-flex">Archive</span>
        <h1 class="text-4xl sm:text-5xl font-black mb-4">{{ $contentType->name }}</h1>
        <p class="text-gray-400 text-lg">{{ $posts->total() }} {{ Str::plural('article', $posts->total()) }}</p>
    </div>
</div>

<div class="max-w-6xl mx-auto px-4 sm:px-6 py-16">

    {{-- Category filter --}}
    @if(!empty($categories) && $categories->count())
    <div class="flex flex-wrap items-center gap-3 mb-12 pb-10 border-b border-gray-100">
        <a href="{{ request()->url() }}"
           class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors {{ !request('category') ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            All
        </a>
        @foreach($categories as $cat)
        <a href="{{ request()->url() }}?category={{ $cat->slug }}"
           class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors {{ request('category') === $cat->slug ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            {{ $cat->name }}
            <span class="ml-1 text-xs opacity-60">{{ $cat->posts_count }}</span>
        </a>
        @endforeach
    </div>
    @endif

    @if($posts->count())
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($posts as $post)
        <article class="card group flex flex-col">
            @if($post->getFirstMedia('featured'))
            <div class="overflow-hidden">
                <img src="{{ $post->getFirstMediaUrl('featured') }}" alt="{{ $post->title }}"
                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
            </div>
            @else
            <div class="h-1.5 bg-gradient-to-r from-indigo-500 to-violet-500"></div>
            @endif
            <div class="p-6 flex flex-col flex-1">
                <div class="flex flex-wrap items-center gap-2 mb-3">
                    @php $cat = $post->taxonomies->where('type', 'category')->first() @endphp
                    @if($cat)
                    <a href="/category/{{ $cat->slug }}" class="tag bg-indigo-50 text-indigo-600 hover:bg-indigo-100 transition-colors">{{ $cat->name }}</a>
                    @endif
                    <span class="text-xs text-gray-400">{{ $post->published_at?->format('M d, Y') }}</span>
                </div>
                <h2 class="font-bold text-gray-900 mb-2 leading-snug group-hover:text-indigo-600 transition-colors flex-1">
                    <a href="/{{ $post->content_type }}/{{ $post->slug }}">{{ $post->title }}</a>
                </h2>
                @if($post->excerpt)
                <p class="text-sm text-gray-500 line-clamp-2 leading-relaxed mb-4">{{ $post->excerpt }}</p>
                @endif
                <div class="flex items-center gap-2 pt-4 border-t border-gray-50 mt-auto">
                    <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700 font-semibold text-xs">
                        {{ substr($post->author->name ?? 'A', 0, 1) }}
                    </div>
                    <span class="text-xs text-gray-400">{{ $post->author->name ?? 'Admin' }}</span>
                </div>
            </div>
        </article>
        @endforeach
    </div>

    @if($posts->hasPages())
    <div class="mt-12 flex items-center justify-center gap-2">
        {{-- Prev --}}
        @if($posts->onFirstPage())
        <span class="px-4 py-2 text-sm text-gray-300 bg-gray-50 rounded-xl border border-gray-100 cursor-not-allowed">← Prev</span>
        @else
        <a href="{{ $posts->previousPageUrl() }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white rounded-xl border border-gray-200 hover:border-indigo-300 hover:text-indigo-600 transition-colors">← Prev</a>
        @endif

        {{-- Pages --}}
        @foreach($posts->getUrlRange(1, $posts->lastPage()) as $page => $url)
        @if($page == $posts->currentPage())
        <span class="px-4 py-2 text-sm font-semibold text-white bg-indigo-600 rounded-xl">{{ $page }}</span>
        @else
        <a href="{{ $url }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white rounded-xl border border-gray-200 hover:border-indigo-300 hover:text-indigo-600 transition-colors">{{ $page }}</a>
        @endif
        @endforeach

        {{-- Next --}}
        @if($posts->hasMorePages())
        <a href="{{ $posts->nextPageUrl() }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white rounded-xl border border-gray-200 hover:border-indigo-300 hover:text-indigo-600 transition-colors">Next →</a>
        @else
        <span class="px-4 py-2 text-sm text-gray-300 bg-gray-50 rounded-xl border border-gray-100 cursor-not-allowed">Next →</span>
        @endif
    </div>
    @endif

    @else
    <div class="text-center py-24">
        <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
        <h2 class="text-xl font-semibold text-gray-900 mb-2">No content yet</h2>
        <p class="text-gray-500">Check back soon.</p>
    </div>
    @endif
</div>

@endsection
