@extends('frontend.layouts.app')

@section('title', $news->title . ' — Musyawara')

@section('page-style')
<style>
    .news-body-content p {
        margin-bottom: 1rem;
    }
    .news-body-content p:has(> br:only-child) {
        margin-bottom: 0;
    }
</style>
@endsection

@section('content')
<section class="section-padding relative overflow-hidden">
    <div class="container-main">
        {{-- Back Button --}}
        <div class="mb-8 animate-fade-in-up">
            <a href="{{ route('frontend.news.index') }}" class="inline-flex items-center text-sm font-semibold text-primary hover:text-primary-hover">
                <iconify-icon icon="ph:arrow-left-bold" class="me-2"></iconify-icon> Kembali ke Semua Berita
            </a>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {{-- Article Content --}}
            <div class="lg:col-span-2">
                <article class="glass-card overflow-hidden p-6 md:p-10 animate-fade-in-up">
                    {{-- Category & Date --}}
                    <div class="flex flex-wrap items-center gap-3 mb-4 text-xs font-semibold">
                        @if($news->category)
                            <a href="{{ route('frontend.news.category', $news->category->slug) }}" class="text-primary bg-primary/10 px-3 py-1 rounded-full hover:bg-primary/20 transition-colors">
                                {{ $news->category->name }}
                            </a>
                        @endif
                        <span class="text-graytext">Diterbitkan: {{ $news->published_at?->format('d M Y') }}</span>
                    </div>

                    {{-- Title --}}
                    <h1 class="h3 mb-6" style="font-size: clamp(24px, 4vw, 36px); line-height: 1.25;">{{ $news->title }}</h1>

                    {{-- Author/Creator --}}
                    <div class="flex items-center gap-3 mb-8 pb-6 border-b border-black/[0.05]">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">
                            {{ strtoupper(substr($news->creator?->name ?? 'M', 0, 1)) }}
                        </div>
                        <div>
                            <div class="text-sm font-semibold text-dark">{{ $news->creator?->name ?? 'Admin Musyawara' }}</div>
                            <div class="text-xs text-graytext">Penulis</div>
                        </div>
                    </div>

                    {{-- Featured Image --}}
                    @if($news->featured_image)
                        <div class="mb-8 overflow-hidden rounded-xl border border-black/5">
                            <img src="{{ Storage::url($news->featured_image) }}" alt="{{ $news->title }}" class="w-full h-auto object-cover max-h-[400px]">
                        </div>
                    @endif

                    {{-- Excerpt --}}
                    @if($news->excerpt)
                        <p class="font-medium text-dark text-lg mb-8 leading-relaxed border-l-4 border-primary pl-4">
                            {{ $news->excerpt }}
                        </p>
                    @endif

                    {{-- Body --}}
                    <div class="news-body-content max-w-none text-dark text-[16px] leading-[1.8] [&>h1]:mb-4 [&>h1]:mt-6 [&>h1]:text-2xl [&>h1]:font-bold [&>h2]:mb-4 [&>h2]:mt-6 [&>h2]:text-xl [&>h2]:font-bold [&>h3]:mb-4 [&>h3]:mt-6 [&>h3]:text-lg [&>h3]:font-bold [&>ul]:mb-4 [&>ul]:list-disc [&>ul]:pl-5 [&>ol]:mb-4 [&>ol]:list-decimal [&>ol]:pl-5 [&>blockquote]:border-l-4 [&>blockquote]:border-primary [&>blockquote]:pl-4 [&>blockquote]:italic [&>blockquote]:my-4" style="font-family: 'Inter', sans-serif;">
                        {!! $news->body !!}
                    </div>

                    {{-- Tags --}}
                    @if($news->tags->isNotEmpty())
                        <div class="mt-12 pt-8 border-t border-black/[0.05]">
                            <h5 class="text-xs font-bold text-graytext uppercase tracking-wider mb-3">Tag Terkait</h5>
                            <div class="flex flex-wrap gap-2">
                                @foreach($news->tags as $tag)
                                    <a href="{{ route('frontend.news.tag', $tag->slug) }}" class="text-xs font-semibold text-graytext bg-black/[0.03] hover:bg-primary/5 hover:text-primary px-3 py-1.5 rounded-lg border border-black/5 hover:border-primary/20 transition-all">
                                        #{{ $tag->name }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </article>
            </div>

            {{-- Sidebar Widgets --}}
            <div class="space-y-8">
                {{-- Categories Widget --}}
                <div class="glass-card p-6 animate-fade-in-up" style="animation-delay: 150ms;">
                    <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: 200ms;">
                    <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