@extends('frontend.layouts.app')

@section('title', 'Kabar & Informasi — Musyawara')

@section('content')
<section class="section-padding relative overflow-hidden">
    <div class="container-main">
        {{-- Header --}}
        <div class="text-center mb-16 animate-fade-in-up">
            <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary mb-4">Promosi & Informasi</div>
            <h1 class="h2 mb-4">Berita & Informasi Terbaru</h1>
            <p class="text-graytext max-w-2xl mx-auto" style="font-size:17px; line-height:1.7;">Pembaruan, panduan, dan kabar terbaru seputar pemilihan digital dan transparansi organisasi dari Musyawara.</p>
        </div>

        {{-- Filter Indicators --}}
        @if(isset($categoryFilter) || isset($tagFilter) || $search)
        <div class="mb-8 flex flex-wrap items-center gap-3 animate-fade-in-up">
            <span class="text-sm text-graytext">Menampilkan hasil untuk:</span>
            @if(isset($categoryFilter))
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary">
                    Kategori: {{ $categoryFilter->name }}
                    <a href="{{ route('frontend.news.index') }}" class="hover:text-primary-hover"><iconify-icon icon="ph:x-bold" class="align-middle"></iconify-icon></a>
                </span>
            @endif
            @if(isset($tagFilter))
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-success/10 text-success">
                    Tag: {{ $tagFilter->name }}
                    <a href="{{ route('frontend.news.index') }}" class="hover:text-green-700"><iconify-icon icon="ph:x-bold" class="align-middle"></iconify-icon></a>
                </span>
            @endif
            @if($search)
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-warning/10 text-yellow-700">
                    Pencarian: "{{ $search }}"
                    <a href="{{ route('frontend.news.index') }}" class="hover:text-yellow-900"><iconify-icon icon="ph:x-bold" class="align-middle"></iconify-icon></a>
                </span>
            @endif
        </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {{-- Main Content: News Posts --}}
            <div class="lg:col-span-2">
                @if($newsPosts->isEmpty())
                    <div class="glass-card p-12 text-center animate-fade-in-up">
                        <div class="w-16 h-16 bg-black/[0.03] rounded-full flex items-center justify-center mx-auto mb-4">
                            <iconify-icon icon="ph:article-thin" width="32" class="text-graytext"></iconify-icon>
                        </div>
                        <h3 class="h4 mb-2 text-dark">Tidak Ditemukan Berita</h3>
                        <p class="text-graytext text-sm">Coba ubah kata kunci pencarian Anda atau periksa kategori lainnya.</p>
                        <a href="{{ route('frontend.news.index') }}" class="btn-primary mt-6 text-sm">Lihat Semua Berita</a>
                    </div>
                @else
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                        @foreach ($newsPosts as $i => $post)
                            <div class="glass-card overflow-hidden flex flex-col h-full animate-fade-in-up" style="animation-delay:{{ $i * 50 }}ms;">
                                <a href="{{ route('frontend.news.show', $post->slug) }}" class="block overflow-hidden relative" style="padding-top: 56.25%;">
                                    @if($post->featured_image)
                                        <img src="{{ Storage::url($post->featured_image) }}" alt="{{ $post->title }}" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105" style="position: absolute; width:100%; height:100%;">
                                    @else
                                        <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-success/10 flex items-center justify-center" style="position: absolute;">
                                            <iconify-icon icon="ph:image-thin" width="48" class="text-primary/30"></iconify-icon>
                                        </div>
                                    @endif
                                </a>
                                <div class="p-6 flex flex-col flex-grow">
                                    <div class="flex items-center gap-3 mb-3 text-xs">
                                        @if($post->category)
                                            <a href="{{ route('frontend.news.category', $post->category->slug) }}" class="font-semibold text-primary bg-primary/10 px-2.5 py-0.5 rounded-full hover:bg-primary/20 transition-colors">{{ $post->category->name }}</a>
                                        @endif
                                        <span class="text-graytext">{{ $post->published_at?->format('d M Y') }}</span>
                                    </div>
                                    <h3 class="font-heading font-bold text-lg text-dark mb-2 leading-snug line-clamp-2 hover:text-primary transition-colors">
                                        <a href="{{ route('frontend.news.show', $post->slug) }}">{{ $post->title }}</a>
                                    </h3>
                                    <p class="text-graytext text-sm mb-4 line-clamp-3 flex-grow">{{ $post->excerpt ?: Str::limit(strip_tags($post->body), 120) }}</p>
                                    <div class="pt-4 border-t border-black/[0.05] mt-auto">
                                        <a href="{{ route('frontend.news.show', $post->slug) }}" class="inline-flex items-center text-sm font-semibold text-primary hover:text-primary-hover">
                                            Baca Selengkapnya <iconify-icon icon="ph:caret-right-bold" class="ms-1" style="font-size: 11px;"></iconify-icon>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Pagination --}}
                    <div class="mt-8">
                        {{ $newsPosts->links() }}
                    </div>
                @endif
            </div>

            {{-- Sidebar Widgets --}}
            <div class="space-y-8">
                {{-- Search Widget --}}
                <div class="glass-card p-6 animate-fade-in-up" style="animation-delay: 150ms;">
                    <h4 class="h4 mb-4">Cari Artikel</h4>
                    <form action="{{ route('frontend.news.index') }}" method="GET" class="relative">
                        <input
                            type="text"
                            name="search"
                            value="{{ request('search') }}"
                            class="input-field pr-12"
                            placeholder="Kata kunci..."
                        >
                        <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-lg bg-primary/10 hover:bg-primary text-primary hover:text-white flex items-center justify-center transition-colors">
                            <iconify-icon icon="ph:magnifying-glass-bold" width="16"></iconify-icon>
                        </button>
                    </form>
                </div>

                {{-- Categories Widget --}}
                <div class="glass-card p-6 animate-fade-in-up" style="animation-delay: 200ms;">
                    <h4 class="h4 mb-4">Kategori</h4>
                    <ul class="space-y-3">
                        @foreach($categories as $category)
                            @if($category->news_count > 0)
                                <li class="flex items-center justify-between">
                                    <a href="{{ route('frontend.news.category', $category->slug) }}" class="text-sm font-medium hover:text-primary transition-colors">{{ $category->name }}</a>
                                    <span class="text-xs font-semibold text-graytext bg-black/[0.03] px-2 py-0.5 rounded-md">{{ $category->news_count }}</span>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>

                {{-- Popular Tags Widget --}}
                <div class="glass-card p-6 animate-fade-in-up" style="animation-delay: 250ms;">
                    <h4 class="h4 mb-4">Tag Populer</h4>
                    <div class="flex flex-wrap gap-2">
                        @foreach($tags as $tag)
                            <a href="{{ route('frontend.news.tag', $tag->slug) }}" class="text-xs font-medium text-graytext bg-black/[0.03] border border-black/5 hover:border-primary/30 hover:bg-primary/5 hover:text-primary px-3 py-1.5 rounded-lg transition-all">
                                #{{ $tag->name }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection