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

@section('content')
<div style="max-width:1280px; margin:0 auto; padding:40px 20px 48px;">
    <div style="display:grid; grid-template-columns:1fr 300px; gap:24px;" class="archive-grid">

        {{-- Main content --}}
        <div>
            {{-- Page header --}}
            <div style="margin-bottom:24px; padding-bottom:16px; border-bottom:3px solid var(--news-red);">
                <h1 class="news-headline" style="font-size:1.8rem; font-weight:900; color:#111; margin:0 0 4px;">
                    @if(!empty($search))
                        Hasil pencarian: "{{ $search }}"
                    @else
                        {{ ucfirst($contentType->name ?? $contentType->slug) }}
                    @endif
                </h1>
                <p style="font-size:13px; color:#9ca3af; margin:0;">
                    {{ $posts->total() }} artikel ditemukan
                </p>
            </div>

            {{-- Category filter --}}
            @if(isset($categories) && $categories->count())
            <div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;">
                <a href="{{ request()->url() }}"
                   style="padding:5px 14px; font-size:12px; font-weight:700; border-radius:20px; text-decoration:none; text-transform:uppercase; letter-spacing:0.05em; {{ !request('category') ? 'background:var(--news-red); color:#fff;' : 'background:#f3f4f6; color:#6b7280;' }}">
                    All
                </a>
                @foreach($categories as $cat)
                <a href="{{ request()->url() }}?category={{ $cat->slug }}"
                   style="padding:5px 14px; font-size:12px; font-weight:700; border-radius:20px; text-decoration:none; text-transform:uppercase; letter-spacing:0.05em; {{ request('category') === $cat->slug ? 'background:var(--news-red); color:#fff;' : 'background:#f3f4f6; color:#6b7280;' }}">
                    {{ $cat->name }}
                </a>
                @endforeach
            </div>
            @endif

            {{-- Posts list --}}
            @if($posts->count())
            <div style="display:flex; flex-direction:column; gap:16px;">
                @foreach($posts as $post)
                @php $cat = $post->taxonomies->where('type','category')->first() @endphp
                <article style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; display:flex; gap:0;" class="archive-article">
                    @if($post->getFirstMedia('featured'))
                    <div style="width:220px; flex-shrink:0; overflow:hidden;" class="archive-article-img">
                        <a href="/{{ $post->content_type }}/{{ $post->slug }}">
                            <img src="{{ $post->getFirstMediaUrl('featured') }}" alt="{{ $post->title }}"
                                 style="width:220px; height:150px; object-fit:cover; display:block; transition:transform 0.3s;"
                                 onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                        </a>
                    </div>
                    @else
                    <div style="width:6px; background:var(--news-red); flex-shrink:0;"></div>
                    @endif
                    <div style="padding:16px 20px; flex:1; display:flex; flex-direction:column; justify-content:space-between;">
                        <div>
                            @if($cat)
                            <a href="/category/{{ $cat->slug }}" class="category-badge" style="font-size:10px; margin-bottom:8px; display:inline-flex; text-decoration:none;">{{ $cat->name }}</a>
                            @endif
                            <a href="/{{ $post->content_type }}/{{ $post->slug }}" style="text-decoration:none;">
                                <h2 class="news-headline news-card-title" style="font-size:1.15rem; margin:6px 0 10px;">{{ $post->title }}</h2>
                            </a>
                            @if($post->excerpt)
                            <p style="font-size:13px; color:#6b7280; line-height:1.6; margin:0;">{{ Str::limit($post->excerpt, 140) }}</p>
                            @endif
                        </div>
                        <div class="article-meta" style="margin-top:12px; padding-top:10px; border-top:1px solid #f3f4f6; display:flex; align-items:center; gap:8px;">
                            <span style="font-weight:600;">{{ $post->author->name ?? 'Editor' }}</span>
                            <span>·</span>
                            <span>{{ $post->published_at?->format('d M Y') }}</span>
                            <span>·</span>
                            <span>{{ $post->published_at?->diffForHumans() }}</span>
                        </div>
                    </div>
                </article>
                @endforeach
            </div>

            {{-- Pagination --}}
            @if($posts->hasPages())
            <div style="margin-top:24px; display:flex; justify-content:center;">
                {{ $posts->links() }}
            </div>
            @endif

            @else
            <div style="text-align:center; padding:60px 0; color:#9ca3af;">
                <p style="font-size:16px; font-weight:600;">No articles found.</p>
            </div>
            @endif
        </div>

        {{-- Sidebar --}}
        @include('theme-News::partials.sidebar-widgets')
    </div>
</div>

<style>
@media (max-width: 768px) {
    .archive-grid { grid-template-columns: 1fr !important; }
    .archive-article { flex-direction: column !important; }
    .archive-article-img { width: 100% !important; }
    .archive-article-img img { width: 100% !important; height: 200px !important; }
}
</style>
@endsection
